Object (1) - 접근, 할당

자바스크립트의 Object(객체)는 { }(object literal, 객체 리터럴)를 이용하여 다른 데이터 타입처럼 변수에 저장할 수 있다. 

 

객체는 아래와 같이 키(key)와 값(value)으로 이루어져 있다. 

객체의 키에는 스페이스, 한글, 특수문자 등 모두 들어갈 수 있다. (단 not이라는 의미를 가진 느낌표(!)는 쓸 수 없다)

var obj2 = {
    'my name': 'kmj',
    age: 20,
    height$: '비밀'
};

 

프로퍼티 접근

아래와 같이 객체(obj2)가 있다고 가정해 보자.

var obj2 = {
    'my name': 'kmj',
    age: 20,
    height$: '비밀',
    325: '오늘 날짜'
};

보편적으로 객체 프로퍼티에 접근하는 방법은 두가지가 있다. 

// 1. 점(.) 
console.log(obj2.age); // output: 20

// 2. 대괄호([])
console.log(obj2['age']); // output: 20

 

첫 번째 방식은 우리가 매일 쓰는 console.log의 형태와 비슷하게 object.프로퍼티 키 이름을 써서 불러올 수 있다. 

두 번째 방식은 배열(array)에서 많이 쓰는 대괄호를 써서 불러오는 것이다. 주의사항은 키 이름은 문자열이기 때문에 따음표로 감싸서 작성해야 한다. 

 

만약 키 이름에 띄어쓰기 혹은 숫자로만 되어 있다면, 대괄호로 묶어서 접근해야 한다. 

console.log(obj2['my name']); // output: kmj

console.log(obj2['325']); // output: 오늘 날짜

 

변수로 프로퍼티 접근

obj2처럼 키 이름에 띄어쓰기가 있다면 매번 대괄호로 불러오기가 귀찮을 것이다. 따라서 따로 변수명을 정하여 해당 변수명으로 불러올 수도 있다. 

하지만 변수로 접근할 경우 첫 번째(.) 방식이 아닌 반드시 대괄호로 묶어야 undefined 오류가 나지 않는다. 

var name = 'my name';
console.log(obj2.name); // output: undefined
console.log(obj2[name]); // output: kmj

 

프로퍼티 할당

이미 객체에 키가 존재한 상태에서 재할당할 경우 값이 수정된다. 

obj2['my name'] = 'howdy';
console.log(obj2['my name']); // output: howdy

만약 기존에 없던 키로 접근한다면 새로 추가 된다. 

obj2.favfood = '햄버거';
console.log(obj2.favfood); // output: 햄버거

만약 기존에 없던 키로 접근하지만, 값을 넣지 않는다면 undefined로 뜬다. 

obj2.idk;
console.log(obj2.idk); // output: undefined