[Javascript] 구조 분해 할당

배열이나 객체에 저장된 여러 값들을 분해하여 각각 다른 변수에 할당하는 방법

 

 

배열 구조 분해 할당

 

let music = ["Lemon", "Bang!", "snowman"];

 

구조 분해 할당을 안 할 때는

 

let Kenshi = music[0];
let AJR = music[1];

let Sia = music[2];

 

처럼 하나하나 변수에 할당해줘야 함

 

 

배열 구조 분해 할당 할 때는

let [변수1, 변수2, 변수3] = 배열이름;

 

위의 배열을 배열 구조 분할 할당 한다면

let [ Kenshi, AJR , Sia ] =  music ;

 

로  배열을 간단하게 각각 변수에 할당 가능

 

이때 배열의 값 개수보다 더 많이 변수를 증가시키면

let [ Kenshi, AJR , Sia, Charlie ] =  music ;

console.log( Kenshi, AJR , Sia, Charlie );

 

결괏값:  Lemon  Bang! snowman undefined

 

뒤늦게 값을 주고자 하면

 

let [변수1, 변수2, 변수3, 변수4 = "값"] = 배열이름;

 

직접 변수 옆에 =로 주면 된다

 

let [ Kenshi, AJR , Sia, Charlie = "Dangerously" ] =  music ;

console.log( Kenshi, AJR , Sia, Charlie );

 

 

객체 구조 분해 할당

 

 

let me = {
  name: "mm_스터디",
  age: 27,
  country: "대한민국",

  "tistory record": true,
};

 

구조분해 할당 쓰기 전에는

let name = me.name;
let age = me.age;
let country = me.country;
 console.log(name, age, country);

처럼 하나하나 할당해야 했음

 

 

객체 구조분해 할당은

 

let { 변수1. 변수2, 변수3} = 객체이름;

 

이때 중괄호 잊지 말기

변수 추가하고 값 할당하는 건 배열처럼 {} 안에서 하면 됨

 

객체 구조분해할당에서 특별하게 쓸 수 있는 것은 변수의 이름을 변경할 수 있다

 

let { 변수1. 변수2 : 바꿀 변수 이름, 변수3} = 객체이름;

 

let { name, age: myAge, country } = me;
console.log(name, myAge, country );

 

 

객체 구조 분해 할당을 이용해서 함수의 매개변수도 받을 수 있음

const func = ({ name, myAge, country }) => {
  console.log(name, myAge, country );
};
func(person);