자바스크립트 Object 값 불러오기( .과 [] 차이)

Object 형에서 값을 불러오는 방법은 2가지가 있어요.

1. Object.속성명;

2. Object['lastame'];

아래 코드는 1번 방법과 2번 방법을 예시로 보여드려요.

const jonas = {
    firstName: 'Jonas',
    lastName: 'Schmedtmann',
    age: 2037 - 1991,
    job: 'teacher',
    friends: ['Michael', 'Peter', 'Steven']
};
 
console.log(jonas);
console.log(jonas.lastName); //1번 방법
console.log(jonas['lastName']); //2번 방법
 
const nameKey = 'Name';
console.log(jonas['first' + nameKey]);
console.log(jonas['last' + nameKey]);

 

그렇다면? 2번 방법은 위에 처럼 연산이 가능합니다.

1번 방법도 연산이 가능할까요?

const jonas = {
    firstName: 'Jonas',
    lastName: 'Schmedtmann',
    age: 2037 - 1991,
    job: 'teacher',
    friends: ['Michael', 'Peter', 'Steven']
};
 
console.log(jonas.'last' + nameKey);

정답은? No! 입니다.

 

왜일까요?

이 둘의 차이점은 member Access 와 Computed Member Access가 다른 차이점이다.

1번 방법은 member Access 임으로 뒤에 오는 값은 연산값이 아닌 Object의 속성이름이 와야되요.

2번 방법은 Computed Member Access임으로 괄호 안에 값과 식을 넣을 수 있어요.

 

더 자세한 방법은 아래 링크를 통해 확인 할 수 있어요.

https://lia.disi.unibo.it/materiale/JS/developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence.html

Operator precedence - JavaScript | MDN

검색방법 : 구글에서 mdn operator precedence 검색