객체 리터럴04 - 프로퍼티 접근, 값 갱신, 동적 생성, 삭제

"객체 리터럴"

 

5. 프로퍼티 접근

프로퍼티 값에 접근하려면 마침표(.)를 사용하는 마침표 표기법(Dot notation)또는 대괄호([...])를 사용하는 대괄호 표기법(Braket notation)을 사용한다. 프로퍼티 키가 식별자 네이밍 규칙을 따르는 이름, 즉 자바스크립트에서 사용 가능한 유효한 이름이면 마침표 표기법과 대괄호 표기법을 모두 사용할 수 있다. 마침표 또는 대고라호의 좌측에는 객체로 평가할 수 있는 표현식을 기술한다. 마침표의 우측 또는 대괄호의 좌측에는 객체로 평가할 수 있는 표현식을 기술한다. 마침표의 우측 대괄호의 내부에는 프로퍼티 키를 지정한다.

var person = {
	name: 'Lee'
};

// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name);	// Lee

// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']);	// Lee

대괄호 표기법을 사용하는 경우, 대괄호 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다. 대괄호 내의 따옴표로 감싸지 않은 이름을 프로퍼티 키로 사용하면 자바스크립트 엔진은 식별자로 해석한다.

var person = {
	name: 'Lee;
};

console.log(person[name]);	// ReferenceError: name is not defined

위 예제에서 ReferenceError가 발생한 이유는 대괄호 내의 따옴표로 감싸지 않은 이름, 즉 식별자 name을 평가하기 위해 선언된 name을 찾았지만 찾지 못했기 때문이다.

 

객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다. 이때 ReferenceError가 발생하지 않는 것에 주의하자.

var person = {
	name: 'Lee';
};

console.log(person.age);	// undefined

프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름, 즉 자바스크립트에서 사용 가능한 유효한 이름이 아니면 반드시 대괄호 표기법을 사용해야 한다. 단, 프로퍼티 키가 숫자로 이루어진 문자열인 경우, 따옴표를 생략 가능하다. 그 외의 경우, 대괄호 내에 들어가는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 함을 잊지 않도록 하자.

var person = {
	'last-name': 'Lee',
	1: 10
}

console.log(person.'last-name');	// SyntaxError: Unexpected string
console.log(person.last-name);		// ReferenceError: name is not defined
console.log(person[last-name]);		// ReferenceRrror: last is not defined
console.log(person['last-name']);	// Lee

// 프로퍼티 키가 숫자로 이루어진 문자열인 경우, 따옴표를 생략 가능하다.
console.log(person.1);			// SyntaxError: missing ) after argument list
console.log(person.'1');		// SyntaxErrorL Unexpected string
console.log(person[1]);			// 10 : person[1] -> person['1']
console.log(person['1']);		// 10

 

6. 프로퍼티 값 갱신

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

var person = {
	name: 'Lee'
};

// person 객체에 name 프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신된다.
person.name = 'Kim';

console.log(person);	// {name: "Kim"}

 

7. 프로퍼티 동적 생성

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

var person = {
	name: 'Lee'
};

// person 객체에는 address 프로퍼티가 존재하지 않는다.
// 따라서 person 객체에 address 프로퍼티가 동적으로 생성되고 값이 할당된다.
person.address = 'Seoul';

console.log(person);	// {name: "Lee", address: "Seoul"}

 

8. 프로퍼티 삭제

delete 연산자는 객체의 프로퍼티를 삭제한다. 이때 delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 한다. 만약 존재하지 않는 프로퍼티를 삭제하면 아무런 에러없이 무시된다.

var person = {
	name: 'Lee'
};

// 프로퍼티 동적 추가
perosn.address = 'Seoul';

// person 객체에 address 프로퍼티가 존재한다.
// 따라서 delete 연산자로 address 프로퍼티를 삭제할 수 있다.
delete person.address;

// person 객체에 age 프로퍼틸가 존재하지 않는다.
// 따라서 delete 연산자로 age 프로퍼티를 삭제할 수 없다. 이때 에러가 발생하지 않는다.
delete person.age;

console.log(person);	// {name: "Lee"}