[JS] javascript의 구조 분해 할당 (destructuring assignment) 구문

오늘은 javascript의 구조 분해 할당 구문에 대해 정리해두고자 한다.

 

구조 분해 할당 (destructuring assignment) 구문

 

구조 분해 할당 구문은 배열이나 객체의 속성을 분해하여 그 값을 변수에 담을 수 있게 하는 표현식이다.

javascript에서 이를 이용하여 다양한 표현을 할수 있다.

 

배열에서의 구조 분해 할당 구문 활용

 

let users = ['kang', 'kim', 'park'];
let [user0, user1, user2] = users;
//let user0 = users[0];
//let user1 = users[1];
//let user2 = users[2];

console.log(user0);
console.log(user1);
console.log(user2);

위의 예시를 보면 구조 분해 할당 구문을 이용해 간편하게 배열에서 값을 꺼내어 변수에 값을 할당하는 것을 볼 수 있다.

만약에 구조 분해 할당 구문을 이용하지 않으면 주석에서 한 것 처럼 할당을 해줘야할 것이다.

 

let str = 'kang|kim|park';
let [user0, user1, user2] = str.split('|');

console.log(user0);
console.log(user1);
console.log(user2);

split를 이용하여 구분자로 끊어 변수에 각각 값을 할당해 줄수도 있다.

 

let [n1, n2, n3] = [1,2];

console.log(n1);
console.log(n2);
console.log(n3);

만약에 입력 될 값보다 변수가 더 많으면.. 입력되지 않은 변수는 undefined가 들어가게 될 것이다.

이를 방지하기 위해서 디폴트 값을 할당할 수 있다.

let [n1=0, n2=0, n3=0] = [1,2];

console.log(n1);
console.log(n2);
console.log(n3);

 

제외하고 싶은 값은 건너 뛸 수도 있다.

let [n1, , n2] = [3,6,9];

console.log(n1);
console.log(n2);

 

그리고 구조 분해 할당 구문을 이용해서 의미없는 변수를 만들지 않고 Swap할 수 있는 기능을 만들 수도 있다.

 

보통의 프로그래밍 언어에서는 아래와 같이 swap 기능을 구현할 것이다.

let a = 5;
let b = 10;

let temp = a;
a = b;
b = temp;

console.log(a);
console.log(b);

위처럼 만들어버리면 temp 라는 딱 한번 쓰고 말 변수를 써줘야한다. 이런게 모이다 보면 매우 질 나쁜 프로그램이 만들어지는 것이다.

구조 분해 할당 구문을 활용하면 이런 걱정을 덜 수 있다.

let a = 5;
let b = 10;

[a, b] = [b, a];

console.log(a);
console.log(b);

 

객체에서의 구조 분해 할당 구문 활용

객체에서도 구조 분해할당 구문을 활용할 수 있다.

let user = {name : 'kang', age: 33, gender: 'M'};

let {name, age, gender} = user;

console.log(name);
console.log(age);
console.log(gender);

이렇게 객체의 각 프로퍼티 값이 각각의 변수에 할당되는 것을 볼 수 있다.

 

변수의 위치가 바껴도 프로퍼티의 이름만 맞으면 알아서 할당해준다.

let user = {name : 'kang', age: 33, gender: 'M'};

let {age, gender, name} = user;

console.log(name);
console.log(age);
console.log(gender);

 

그리고 변수의 이름을 지정해 줄 수도 있다.

let user = {name : 'kang', age: 33, gender: 'M'};

let {name : userName, age : userAge, gender : userGender } = user;

console.log(userName);
console.log(userAge);
console.log(userGender);

 

마지막으로 없는 속성값에 대해 배열에서 했던 것과 마찬가지로 디폴트 값을 줘서 입력할 수 도 있다.

let user = {name : 'kang', age: 33};

let {name, age, gender = 'M'} = user;

console.log(name);
console.log(age);
console.log(gender);

 

끝.