[JavaScript] Object['key']와 Object.key의 차이

오늘 공부했던 내용이 자고 일어나면 까먹을 것 같아서 블로그에라도 남겨둔다.

---

 

Javascript에서 객체의 속성에 접근하는 방법으로 '[ ]'와 '.', 총 두 가지가 존재한다.

let a = {
    age : 20,
    name : "홍길동"
};

console.log(`a['age'] : ${a['age']}`);
console.log(`a.age : ${a.age}`);

그 중 '[ ]'를 사용하는 방법은 while, for문과 같은 반복문에서 주로 활용된다.

아래의 예제를 통해 반복문에서 '.', '[ ]'를 활용해 객체에 접근했을 때의 차이점을 확인해보자.

---

//예제

let Person = {
    age : 20,
    name : "홍길동",
    isMarried : false
};

console.log("Person.i로 작성한 경우");
for(let i in Person){
//for in 반복문은 객체를 순환하는 반복문이다.
    console.log(`${i} : ${Person.i}`); //'key : undefined'의 형태로 출력된다.
}

console.log("Person[i]로 작성한 경우");
for(let i in Person){
    console.log(`${i} : ${Person[i]}`);
}

'Person.i'으로 작성했는데 왜 'undefined'라는 결과가 나왔을까?

일반적으로 'Object.key'의 형태로 작성하면 객체의 속성으로 바로 접근하게 된다.

예를 들어 'console.log(Person.age);'로 작성했을 때 출력 값은 숫자 20이 나오게 된다.

즉, 객체의 속성 값을 바로 출력하는 코드이다.

 

이를 통해서 'Person.i'를 처리한 값이 undefined가 나온 이유를 알 수 있다.

해당 코드를 해석해보자면 Person 객체의 'i'라는 key 값을 가진 속성으로 접근하라는 의미이다.

하지만 Person 객체에서 해당 조건에 맞는 속성은 존재하지 않기 때문에

해당 코드를 처리한 결과 값으로 'undefined (정의되지 않음)'을 가지게된다.

 

그렇다면 'Person[i]'로 작성한 코드는 왜 객체의 속성 값으로 나오게 됐을까?

이는 i가 반복문이 실행되는 동안 객체 속성의 실제 key 값으로 변경되기 때문이다.

즉, 반복문이 실행되는 동안 'Person[i]'는 객체의 실제 key 값을 통해 객체의 속성으로 접근할 수 있게 되는 것이다.