8. 객체의 property key 값을 표현식을 이용해 지정, computed property name

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 ES6의 computed property name에 대해서 알아보겠습니다.

computed property name 는 객체의 key값을 표현식(변수, 함수 등을 이용)을 통해 지정하는 것입니다.

사용법은 아래와 같습니다.

var i = 0;
var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};

위에서 본 것과 같이 속성명에 표현식을 사용하려면 대괄호("[ ]") 안에 표현식을 쓰면 됩니다.

표현식은 위에서와 같이 변수가 들어올 수도 있고, 함수가 들어올 수도 있습니다.

변수가 프로퍼티의 키로 들어오는 예제에 대해서 살펴봅시다.

var name1 = "장동건";
var name2 = "원빈";
var num = 1;
 
var obj = {
    [num+") "+name1]:"반장",
    [num+1+") "+name2]:"부반장"
};
 
console.log(obj); // { 1) 장동건: "반장", 2) 원빈: "부반장" }

name1 에는 "장동건"을 할당하고, name2 에는 "원빈"을 할당했습니다.

num 에는 숫자 1을 할당했습니다.

그리고 obj 객체를 지정할 때, 프로퍼티의 키 값을 '번호) 학생이름' 으로 나타날 수 있게 표현식을 이용해 지정했습니다.

대괄호 안에 들어오는 표현식은 변수 뿐 아니라 함수도 들어올 수 있습니다. 

아래의 예제는 프로퍼티 키 값으로 함수를 호출한 예제입니다.

function add(a, b){
    return a+b;
}
function conf(a, b){
    return `${a} + ${b}`;
}
var obj = {
    ["addNumber "+conf(5, 10)]:add(5, 10),
    [add(10, 20)+" is Result by"]:"10+20"
}
console.log(dbj); // {addNumber 5, 10: 15, 30 is Result by: "10+20"}

위의 예제와 같이 프로퍼티 키 값으로 변수 뿐 아니라 함수도 호출 할 수 있습니다.

*두 번째 함수 conf 를 정의 할 때 리턴 값으로 Template literals를 사용했습니다. Template literals에 익숙치 않으신 분은 아래의 링크를 참고해주세요.

<문자열과 표현식의 사용을 더 간단히 도와주는 Template literals>

지금까지 computed property name에 대해서 알아보았습니다.

computed property name를 이용하면 객체의 프로퍼티 키를 지정할 때도 프로그래밍적으로 지정할 수 있어 좀 더 나은 코드를 작성할 수 있습니다.

다음 포스팅에서는 ES6의 method shorthand 에 대해서 알아보도록 하겠습니다.

**참고 자료 (항상 감사드립니다)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)