함께 성장하는 프로독학러
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
};
위에서 본 것과 같이 속성명에 표현식을 사용하려면 대괄호("[ ]") 안에 표현식을 쓰면 됩니다.
표현식은 위에서와 같이 변수가 들어올 수도 있고, 함수가 들어올 수도 있습니다.
변수가 프로퍼티의 키로 들어오는 예제에 대해서 살펴봅시다.
1 2 3 4 5 6 7 8 9 10 | var name1 = "장동건"; var name2 = "원빈"; var num = 1; var obj = { [num+") "+name1]:"반장", [num+1+") "+name2]:"부반장" }; console.log(obj); // { 1) 장동건: "반장", 2) 원빈: "부반장" } | cs |
name1 에는 "장동건"을 할당하고, name2 에는 "원빈"을 할당했습니다.
num 에는 숫자 1을 할당했습니다.
그리고 obj 객체를 지정할 때, 프로퍼티의 키 값을 '번호) 학생이름' 으로 나타날 수 있게 표현식을 이용해 지정했습니다.
대괄호 안에 들어오는 표현식은 변수 뿐 아니라 함수도 들어올 수 있습니다.
아래의 예제는 프로퍼티 키 값으로 함수를 호출한 예제입니다.
1 2 3 4 5 6 7 8 9 10 11 | 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"} | cs |
위의 예제와 같이 프로퍼티 키 값으로 변수 뿐 아니라 함수도 호출 할 수 있습니다.
*두 번째 함수 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
*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)
'Programming > ES6' 카테고리의 다른 글
10. 비구조화 할당, destructuring assignment (0) | 2018.04.13 |
---|---|
9. 메서드를 선언할 때 function을 생략, method shorthand (0) | 2018.04.11 |
7. 문자열안에서 변수의 사용을 더 간단히, Template literals (0) | 2018.04.09 |
6. 객체를 좀 더 쉽게 병합하는, Object.assign 메서드 (0) | 2018.04.07 |
5. 매개변수의 기본값을 설정해준다, default parameter (0) | 2018.04.06 |