[포스코 X 코딩온] 프로퍼티, 점.점.점

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

• 마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법.
• 대괄호 프로퍼티 접근 연산자['']를 사용하는 대괄호 표기법.

 

프로퍼티 접근 .마침표와 [''] 대괄호 표기법.

var person = {
	name: 'Lee'
};

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

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

 

 

객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.

var person = {
	name: 'Lee'
};

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

객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.

앞으로 undefined 문구를 보면, 객체에 프로퍼티가 없는지 확인해보자.

ReferenceError(참조 오류) 가 발생하지 않는지 주의하자.

 

프로퍼티 값 갱신

var person = {
	name: 'Lee'
};

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

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

 

프로퍼티 동적 생성

동적 생성이란? 

동적으로 생성한다는 의미는 프로그램이 시작할 때 객체를 미리 생성해두는 것이 아니라 그 객체를 필요로 하는 순간에 바로 생성한다는 뜻 이다.

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

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

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

프로퍼티가 존재하지 않으면, 새로 생성하고 프로퍼티 값을 추가한다.

 

메서드 축약표현

ES5에서 메서드를 정의하려면 프로퍼티 값으로 함수를 할당했다.

var obj = {
	name: 'Lee',
    sayHi: function() {
    	console.log('HI!', + this.name);
    }
};

obj.sayHi(); //Hi! Lee

 

ES6에서는 메서드를 정의할 때  function 키워드를 생략한 축약 표현을 사용할 수 있다.

var obj = {
	name: 'Lee',
    sayHi() {
    	console.log('HI!', + this.name);
    }
};

obj.sayHi(); //Hi! Lee