[JavaScript] ES6 기능 - 단축 속성명, 속성 계산명, 비구조화 할당

[해당 포스트는 개인적으로 공부를 하고 차후에 참고용으로 하고자 작성한 것입니다.
따라서 잘못된 부분이나 부족한 부분이 있을 수 있기에 참고하시기 바랍니다.]

ES6부터 추가된 기능으로 여러 가지 있겠지만, 이번엔 객체 문법의 기능인 '단축 속성명', '속성 계산명', '비구조화 할당' 에 대해서 정리하고자 한다.

 

단축 속성명

만약 회원 정보를 추가하는 객체 programmer객체가 있다고 가정하자.

여기엔 프로그래머 정보를 관리하는 member 객체, 새로운 Programmer를 추가하는 함수가 존재한다.

 

const programmer = {
    member : {},
    addProgrammer : function (age, name, role) {
        this.member[role] = {
            age : age,
            name : name
        };
    },
};

 

다음의 3명의 프로그래머를 추가해보도록 하자.

 

programmer.addProgrammer(27, 'DHL', 'programmer1');
programmer.addProgrammer(27, 'GHS', 'programmer2');
programmer.addProgrammer(27, 'MHL', 'programmer3');

 

결과는 다음과 같이 나올 것이다.

 

role : programmer1, name : DHL, age : 27
role : programmer2, name : GHS, age : 27
role : programmer3, name : MHL, age : 27
role : programmer4, name : HGK, age : 27

 

전형적으로 객체를 추가할 때 Key : Value 구조를 맞춰서 삽입하였다.

ES6에서 추가된 단축 속성명은 객체에 새로운 정보를 추가할 때 속성명으로 속성의 Key와 Value를 정의할 수 있다.

 

const programmer = {
    member : {},
    addProgrammer : function (age, name, role) {
        this.member[role] = {age, name};
    },
};

단, 단축 속성명은 변수가 미리 준비되어 있는 경우에 활용 가능하니 참고하자.

속성 계산명

속성 계산명은 속성 이름을 정의하는 다른 방법 중 하나로, 대괄호 안에 식을 넣거나 변수를 대입하여 동적으로 객체 속성들을 생성할 수 있다. 여기서도 JavaScript의 특징이 두드러지는 동적 할당 방식이 나온다.

 

다음의 예시는 객체의 Index를 지정하는 [] 안에 변수를 넣어 같이 지정하는 코드이다.

 

let obj = {};

for (let i = 0; i < 5; i++){
    obj['Key' + i] = i;
}
console.log(obj);

 

obj['key' + i]와 같이 변수를 같이 String과 변수를 같이 활용하여 Key를 생성한 것을 볼 수 있다.

 

비구조화 할당

비구조화 할당은 배열이나 객체의 값을 새로운 변수에 쉽게 할당할 수 있는 것을 말한다. ES6 이전에는 변수 하나에 값 하나를 일일이 할당해야 했다고 한다. 이런 불편한 점을 ES6에서 보완한 것이 비구조화 할당이다.

 

객체 비구조화 할당

말 그대로 객체를 대상으로 한 비구조화 할당을 한 것이다.

 

let obj = {a : 1, b : 2, c : 3, d : 4, e : 5};

let {a, b} = obj;

console.log(`a = ${a}`); // 1
console.log(`b = ${b}`); // 2

let {a : defaultA = 30, f : defaultF = 40} = obj;

console.log(`a = ${defaultA}`); // 1
console.log(`f = ${defaultF}`); //40

 

3번째 줄을 보자. 중괄호 형태로 변수를 생성하고 우측에는 삽입하고자 하는 객체를 선언한다. 그럼 좌측에 선언했던 변수랑 매칭 되는 객체의 값을 가져온다. 결과는 a = 1과 b = 2가 출력된다.

 

다음 줄에 있는 코드를 보자. 이번엔 특이하게 객체 형태로 Key : Value 형태로 변수를 선언했다. 이 뜻은 해당 Key에 속하는 값이 없을 때 defaultA나 defaultB는 30과 40을 기본으로 가지게 된다. 하지만 a는 obj에 Key가 존재하므로 1이 출력되겠지만 f는 obj의 Key가 존재하지 않기 때문에 값은 40이 저장된다. 결과는 a = 1과 f = 40이 출력된다.

 

배열 비구조화 할당

배열 비구조화 할당은 객체 비구조화 방식에서 대괄호로 바꾼 형태이다.

 

let arr = [1, 2, 3, 4, 5];

let [b, c, ...etc] = arr;

console.log(`b = ${b}`); // 1
console.log(`c = ${c}`); // 2
console.log(`etc = ${etc}`); // 3, 4, 5

let [a = 30, f = 40] = [1];
console.log(`a = ${a}`); // 1
console.log(`f = ${f}`); // 40

 

3번째 줄을 확인하면 비구조화 방식으로 b, c, etc 배열이 존재한다. arr의 값을 가져와 삽입하는데, b는 1을 c는 2를 그 외 나머지인 3, 4, 5는 변수 지시자인 '...'를 통해 모두 etc에 삽입된다.

10번째 줄을 확인하면 비구조화 방식으로 a = 30, f = 40을 받고 우측엔 '1'이 저장된 배열을 사용하였다. 우측의 첫 번째 값인 '1'은 a에 삽입되기에 초기값 30이 적용되지 않지만, f는 별도로 받는 값이 없기 때문에 초기값인 40이 저장되어 a = 1과 f = 40이 출력된다.