[JavaScript] Destructuring assignment

Destructuring assignment

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

배열 구조 분해

기본적인 사용 방식은 다음과 같다.

let [x,y] = [1,2];
console.log(x); // 1
console.log(y); // 2
let users = ['Mike', 'Tom', 'Jane'];
let [user1, user2, user3] = users;
// 위 구문은 다음 구문과 같다. 
// let user1 = users[0]; 
// let user2 = users[1];
// let user3 = users[2];

응용 예제1 : split

split을 사용한 배열 구조 분해

let str = "Mike-Tom-Jane";
let [user1, user2, user3] =str.split('-');
console.log(user1); // 'Mike'
console.log(user2); // 'Tom'
console.log(user3); // 'Jane'

응용 예제2 : 자리바꾸기

구조분해를 이용해서 임시 변수를 만들지 않고 자리바꾸는 방법

let a=1;
let b=2;
[a,b] = [b,a]; // a=2, b=1

기본값 부여

할당받는 변수의 수가 배열의 수보다 많은 경우
할당받지 못하는 변수의 값은 undefined가 된다.
이를 방지하기 위해서 미리 기본값을 부여할 수 있다.

let [a=3,b=4,c=5] = [1,2]; // a=1, b=2, c=5

일부 반환값 무시

공백과 쉽표를 이용해서 필요하지 않은 요소를 무시할 수 있다.

let [user1, ,user2] = ['Mike', 'Tom', 'Jane', 'Tony'];
console.log(user1); // 'Mike'
console.log(user2); // 'Jane'                     

객체 구조 분해

기본적인 방법은 배열 구조 분해와 다르지 않다.
반드시 키 이름이 같아야한다.
이러한 특성으로 순서는 의미없다.

let user = {name: "Mike", age: 30};
let {name, age} = user;
//위 코드는 다음과 같다.
// let name = user.name; 
// let age = user.age;

기본값 부여

배열 구조 분해와 똑같이 기본값을 부여할 수 있다.

let user = {name: "Mike", age: 30, gender: 'female'};
let {name, age, gender='male'} = user; 
// gender 값이 undefined일 경우 'male'
console.log(gender); // female

새로운 변수 이름으로 할당

다음과 같이 사용하면 다른 변수 이름으로 사용할 수 있다.

let user = {name: "Mike", age: 30};
let {name: userName, age: userAge} = user;
console.log(userName); // 'Mike'
console.log(userAge); // 30

할당을 받지 못한다면

할당을 받지 못한다면 그 변수의 값은 undefined 가 된다.

let one, two, three, four;
[one, two, three, four] = [1,2,3];
console.log(three); // 3
console.log(four); // undefined

배열 차원에 맞춘 분해 할당

let one, two ,three, four;
[one, two, [three, four]] = [1,2,[3,4]];
console.log([one,two, three, four]); // [1, 2, 3, 4]

함수 파라미터 분해

파라미터 값 할당

function add({one, two}){
 console.log(one + two);
};

add({one: 10, two: 20});

🔴 Object 구조에 맞추어 할당

• plus는 해당 객체 구조를 설명하는 역할을 하며 실제로 plus라는 변수를 생성하거나 바인딩하지 않는다!!!
• {one, plus:{two}} 구분에서 plus:{two} 의 의미
  • two 라는 식별자에 plus.two 값을 할당하겠다.
• {one, plus:{two,three}} 일 경우
  • two 라는 식별자에 plus.two, three라는 식별자에 plus.three 값을 할당하겠다.

    function add({one, plus:{two}}){
    	console.log(one + two); // 30
    	console.log(plus); // Uncaught ReferenceError: plus is not defined
    };
    add({one: 10, plus: {two:20}});

함수 내부에서 plus 식별자도 사용하고 싶다면 다음과 같이 사용

function add({one, plus, plus:{two}}){
	console.log(one + two); // 30
	console.log(plus); // {two: 20}
};
add({one: 10, plus: {two:20}});