[Javascript] 구조 분해 할당

구조 분해 할당이란?

구조 분해 할당이란 객체나 배열의 타입을 변수로 분해해 주는 것으로, 함수에 매개변수로 객체를 전달할 때 객체 또는 배열에 저장된 데이터를 일부만 전달해야 할 때 유용하게 쓰일 수 있음.

 

또한 함수에 전달해야 하는 매개변수가 너무 많을때도 사용될 수 있음

 

배열의 분해

배열은 아래와 같이 분해할 수 있음

let my_arr = ['a','b','c','d'];

let [ a , b ] = my_arr;

console.log(`${a} , ${b}`);

배열의 0, 1번 인덱스의 데이터인 'a' 와 'b' 가 각각 변수 a, b에 할당된 것을 볼 수 있음

 

쉼표를 이용하여 인덱스를 건너 뛸 수 있음

let my_arr = ['a','b','c','d'];

let [ a , , b ] = my_arr; // 쉼표를 이용해 1번 인덱스를 건너뛰고 0, 2번의 데이터를 가져옴

console.log(`${a} , ${b}`);

쉼표를 사용하여 1번 인덱스의 값을 건너뛴 것을 볼 수 있음

 

나머지 모든 데이터를 가져오려면 변수앞에 ... 를 붙여서 배열로 받아올 수 있음

let my_arr = ['a','b','c','d'];

let [ a , b , ...c ] = my_arr; 

console.log(`${a} , ${b}`);
console.log(c);

a, b는 문자열 타입의 변수가 되었지만 c는 배열로 생성된 것을 볼 수 있음

 

문자열도 분해하여 변수에 저장할 수 있음

let alp = 'abc';

let [ a, b, c ] = alp

console.log(` a: ${a}, b: ${b}, c: ${c}`);

 

문자열 alp 가 분해되어 각각 a , b, c 변수에 할당 된 것을 볼 수 있음

 

 

기본값

할당할 변수보다 배열의 요소 개수가 적어도 오류가 발생하지 않고 undefined 가 할당됨.

let [ a, b ] = [];

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

 

 

변수에 값을 미리 할당해 놓을 수 있음

let [ firstName = "jisung" , lastName = "park" ] = []

console.log(lastName + firstName);

 

 

객체의 분해

객체는 아래와 같은 방법으로 분해할 수 있음

let person = {
	
    name:"hong gil dong",
    age:25,
    gender:"male"
}

let {name , age , gender} = person; //변수의 순서는 상관없음 각각의 프로퍼티 키와 맞는 변수의 값이 할당됨

console.log(`name: ${name}, age: ${age}, gender: ${gender}`);

 

 

객체도 배열처럼 원하는 프로퍼티만 가져오고 변수에 값을 할당할 수 있음

let person = {
	
    name:"hong gil dong",
    age:25,
    gender:"male"
}

let {name, address = "seoul"} = person;

console.log(`name: ${name} address: ${address}`);

 

 

배열처럼 할당하지 않은 프로퍼티들은 ... 를이용해 또다른 객체로 할당할 수 있음

let person = {
	
    name:"hong gil dong",
    age:25,
    gender:"male"
}

let {name, ...others} = person;

console.log(`name: ${name}`);

console.log(others)

 

others에는 age와 gender 가 담긴 객체가 생성된 것을 볼 수 있음

 

 

중첩 구조 분해

객체안에 객체와 배열이 값으로 존재하는 경우 받을 데이터를 아래와 같이 명확히 작성해야 함

let menu = {
	len:{
    	min:1,
        max:20
    },
    items:["burger","pasta","steak","beer"],
    isUse:true
}

let {
	
    len:{min,max},
    items:[it1,it2,it3,it4],
    isUse
} = menu

console.log(`${min} ${max}`)
console.log(`${it1} ${it2} ${it3} ${it4}`)
console.log(isUse)

 

여기서 주의할 점은 객체, 배열을 받을 시 객체, 배열이 생성되는 게 아닌 그 요소가 각각의 변수에 담기기 때문에 객체 len ,배열 items가 아니라 min, max ,it1 ~ it4 까지 각각의 변수로 생성됨

 

여러개의 함수 매개변수 전달 시 객체의 사용

여러개의 함수 매개변수를 전달할 때 일부 매개변수의 값을 주지 말아야할 때 아래와 같은 번거로움이 있음

//a, b, f 의 값만 주어야 할 때
function lotOfArgs(a, b, c, d, e, f){
	pass
}

// 값이 없어야 하는 매개변수에는 일일이  undefined 를 전달해야 함
lotOfArgs(1,2,undefined,undefined,undefined,3);

 

이때 객체를 사용하여 매개변수를 전달하면 자동으로 값을 할당하지 않을 수 있음

let my_obj = {
	
    a:1,
    b:2,
    f:3
}

function lotOfArgs({a, b, c, d, e, f}){ //매개변수를 {} 로 묶어줌
	console.log(`${a} , ${b} , ${c} , ${d} , ${e} , ${f} `)
}

lotOfArgs(my_obj);

 

원하는 매개변수의 값만 들어온 것을 확인

 

 

참조: https://ko.javascript.info/destructuring-assignment