[JS] 구조분해할당

구조분해할당이란?

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

원래 변수 한개에 여러가지의 데이터를 선언할 때 배열 또는 객체를 사용했다. 하지만 각 배열 또는 객체에 전체값이 아니라 특정값만 필요한 경우 어떻게 해야할까 보통은 변수를 선언한 후 배열이나 객체에서 추출한 특정값을 선언해준다. 이를 좀 더 편하게 활용할 수 있는 방법이 구조분해할당이다.

---

배열의 구조분해할당

배열의 경우 인덱스의 위치에 맞게 분해되어 할당된다.

변수 선언 후 구조분해할당

let lee,kim,park; 

const abc = ["이","김","박"];

[lee,kim,park] = abc; // 구조분해할당

// 인덱스 위치에 맞게 각 변수에 할당되었다.
console.log(lee); // "이"
console.log(kim); // "김"
console.log(park);// "박"

변수 선언과 동시에 구조분해할당

let lee,kim,park;

const abc = ["이","김","박"];

let [lee,kim,park] = abc;

console.log(lee);
console.log(kim);
console.log(park);

변수 또는 값이 많거나 적을 경우

// * 값이 변수보다 더 많은경우 */
const abc = ["이","김","박","진"];
// "진"은 할당되지 않는다

let [lee,kim,park] = abc;

console.log(lee);//"이" 
console.log(kim);//"김"
console.log(park);//"박"


/* 변수가 값보다 많은경우 */
const abc = ["이","김","박"];

let [lee,kim,park,jin] = abc;

console.log(lee);//"이"
console.log(kim);// "김"
console.log(park);// "박"
console.log(jin) // undefind


/* 중간에 값 빼기 */
let [lee, ,park] = abc; // lee,park 만 할당

console.log(lee); // "이"
console.log(park);// "박"

할당하려는 변수보다 값이 더 많을 경우에는 인덱스에 맞게 순차적으로 할당되고 그 뒤는 할당되지 않는다.

또한 값보다 할당하려는 변수가 더 많을 경우에는 마지막 항목에 undefinedr 값을 가지게 된다.

만약 중간에 위치한 값이 필요 없을 경우에는 변수를 적지 않고 콤마(,)를 적어 건너뛸 수 있다.

spread

spread 연산자는 할당하지 않은 배열의 나머지 값들을 다른 변수에 선언해 값을 담을 수 있다.

const abc = ["이","김","박"];

let [lee, ...rest] = ["이","김","박"];

console.log(lee); // "이"
console.log(rest); // ["김,"박"]

변수 lee 에는 값 "이"가 담기고 ... 를 사용해서 0번째 인덱스 이후 나머지 "김","박" 은 변수 res에 담기게 된다.

---

객체의 구조분해할당

객체는 변수의 이름과 객체의 key의 이름이 같을 때 구조분해할당 되어 사용할 수 있다.

const profile = {
  name: "이백수",
  age : 29,
  job: "백수왕",  
}

let {job} = profile
let {name:name2} = profile  // 변수이름을 key와 다르게 하고싶을 때
console.log(job) // "백수왕"
console.log(name2) // "이백수"
console.log(name) // 값이 나오지 않음

profile 객체의 key job과 변수 job의 이름이 같기 때문에 구조분해할당되어 job의 value가 출력되었다.

만약 key와 변수 이름을 다르게 하고싶으면 위와 같이 기존 변수이름: 새로운 변수이름 으로 사용할 수 도있다.

주의할점은 이 때 기존변수 이름을 출력하면 값이 나오지 않는다.

spread

배열과 마찬가지로 객체에서도 spread 연산자를 사용할 수 있다.

const profile = {
  name: "이백수",
  age : 29,
  job: "백수왕",  
}

let {job,... rest} = profile
console.log(job) // "백수왕"
console.log(rest) // { name: '이백수', age: 29 }

변수 job에는 객체 profile에 job이 할당되었고 그 외 나머지는 rest라는 변수에 할당 되었다.