프로퍼티

 

프로퍼티 규칙

프로퍼티를 나열할 때는 쉼표(,)로 구분한다.
프로퍼티의 키는 문자열이므로 반드시 (""), ('') 따옴표로 묶어야한다.
하지만 식별자 네이밍 규칙을 준수하는 이름은 생략할 수 있다.
식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표로 묶어야한다.

	let person = {
    	firstName = "Yongjun",
        last-name = "Lee",  // SyntaxError: unexpected token
    }

 

프로퍼티 중복 선언

이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. (에러가 나지않음)

	let foo = {
    	name: 'Lee',
        name: 'Kim'  
    }
    console.log(foo)   // {name:'Kim'}

 

프로퍼티 접근

프로퍼티에 접근하는 방법은 두가지이다.

• 마침표 표기법
• 대괄호 표기법
• 대괄호 표기법에는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다. (숫자로 이루어진 프로퍼티키는 따옴표 생략이 가능하다)

	let person ={
    	name:"Lee"
    }
    console.log(person.name) // Lee
    console.log(person['name'] // Lee
    console.log(person[name]) // ReferenceError: name is not defined

 

 

프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

	let person = {
    	name: 'Lee'
    }
    person.name = 'Kim';
    console.log(person)  // {name:'Kim'}

 

프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.

	let person={
    	name: 'Lee'
    }
    person.age = 20;
    console.log(person); // {name:'Lee', age:20}

 

프로퍼티 삭제

delete 연산자는 객체의 프로퍼티를 삭제한다.

	let person={
    	name: 'Lee'
        age : 20;
    }
   
   delete person.age;		//age 프로퍼티 삭제
   delete person.address;   //address 프로퍼티가 없어서 삭제되지 않지만 오류는 발생하지않는다.
   console.log(person);     // {name:'Lee'}

 

객체리터럴의 확장기능(ES6)

프로퍼티의 축약표현

프로퍼티 값을 변수로 사용하는 경우 프로퍼티의 키가 변수의 이름과 동일한 이름일때 프로퍼티 키를 생략할 수 있다.

	let x = 1; y = 2;
    const obj = {x, y};
    console.log(obj); // {x:1, y:2}

계산된 프로퍼티 이름

계산된 프로퍼티 이름으로 프로퍼티 키를 동적생산하려면 대괄호 표기법을 사용해야한다.

	let prefix = 'prop';
    let i = 0;
    let obj = {
    [`${prefix}-${++i}`]:i,
    [`${prefix}-${++i}`]:i,
    [`${prefix}-${++i}`]:i
    };
    console.log(obj) // {prop-1:1, prop-2:2, prop-3:3}

 

출처

모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리