[JavaScript] 계산된 속성명 또는 계산된 프로퍼티 이름(Computed property names)

계산된 프로퍼티 이름은 객체의 key값을 동적으로 생성할때 사용된다.

객체 리터럴의 프로퍼티 자리의 key 값에 대괄호 [ ] 를 사용한다. 

대괄호 [ ] 에 들어올 수 있는 값은 무조건 문자열이여야 한다.

let prop = 'blogger';

let obj = {

[prop]: 123

};

console.log(obj); // { blogger: 123 }

위 예시에서는 변수 prop의 값이 obj 객체의 키값으로 할당되었다.

아래와 같이 사용자에게 동적으로 key값을 받아와 프로퍼티의 key값으로 사용할 수 있다.

let fruit = prompt("어떤 과일을 선택했습니까?");

let list = {

[fruit]: 5

};

console.log( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.

아래와같이 여러방법으로 사용된다.

let i = 0;

let obj = {

['사람' + ++i]: i + '번',

['사람' + ++i]: i + '번',

['사람' + ++i]: i + '번',

}

console.log(obj); // { '사람1': '1번', '사람2': '2번', '사람3': '3번' }

const items = ["A", "B", "C"];

const obj = {

[items]: "Hello"

}

console.log(obj); // A,B,C: "Hello"

console.log(obj["A,B,C"]) // "Hello"

let param = 'size'

let config = {

[param]: 12,

['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4

}

console.log(config) // {size: 12, mobileSize: 4}

여기서 가질 수 있는 의문점이 있다.

대괄호 [] 가 아닌 . 점을 사용하여 객체의 프로퍼티 key값을 할당하지는 못할까?라는 의문점이 생겼다.

찾아보니 아래의 코드와 같이 동작하게되어 불가능하다는것을 알게되었다.

객체의 프로퍼티를 추가적으로 선언할 때만 점을 사용하고, key값을 동적으로 할당할때는 계산된 속성명 즉 대괄호를 사용해야했다.

const person = {

name: "lee",

age: 68,

city: "seoul",

};

let printValue1 = (obj, key) => {

console.log(obj.key);

};

printValue1(person, "age"); // undefined

let printValue2 = (obj, key) => {

console.log(obj[key]);

};

printValue2(person, "age"); // 68

함수를 선언해서 매개변수의 인자로 값을 받아와서 객체의 프로퍼티값을 반환하고싶었는데

. 점을 사용할 경우 두번째로 전달된 매개변수가 제대로 전달되지않고 person.key 로 객체에 프로퍼티를 찾기때문에 undefined를 반환한다.

반면에 계산된 속성명 즉, 대괄호를 사용하면 매개변수의 인자로 전달된 값이 정확히 프로퍼티 키값으로 전달되어 68이라는 값을 반환하게 된다.

그러므로 .점의 경우 값을 선언할때 사용하고 값을 동적으로 받아와서 호출할때는 대괄호를 사용하자.