객체에 동적으로 key 전달하기

객체는 key와 value로 이루어져 있다.

우리는 기본적으로 객체의 프로퍼티에 접근할 때 .을 사용해 접근한다.

이를테면 jaewoo.age와 같이 나이라는 프로퍼티를 얻듯이 말이다.

그러나 객체의 프로퍼티에 접근하는 방법이 하나 더 있다.

그것은 바로 Computed properties

Computed properties 방식은 jaewoo['age']와 같이 작성해주면 된다.

jaewoo['age']와 jaewoo.age는 거의 같다.

다른점은 동적으로 값을 가져오는지의 여부이다.

다음 예시를 보자.

const jaewoo = {name : "jaewoo", age : "21", fav : "chicken"};

function show(obj, key) {
    console.log(obj.key);
}

show(jaewoo, ???); // I don't know!
show(jaewoo, age); // undefind

show 함수에서 key를 인자로 넘겨줄 때 어떤 key가 할당될지 모른다.

이때 show 함수에서 console.log(obj.key)와 같이 .방식으로 접근하면 콘솔은 undefind를 리턴한다.

반면 Computed properties 즉, ['key']와 같이 key를 넘겨주면 객체에서 동적으로 값을 가져올 수 있다.

const jaewoo = {name : "jaewoo", age : "21", fav : "chicken"};

function show(obj, key) {
    console.log(obj[key]);
}

show(jaewoo, "age"); // 21

그래서

객체의 프로퍼티에 접근할 때 동적으로 key 값을 넘겨주고 싶으면 Computed properties를 기억하자!