Skip to main content

디스트럭쳐링(Destructuring)

Destructuring​

  • destructuring이란 구조를 분해하다라는 의미
  • 배열이나 객체와 같은 데이터 구조를 분해하여 변수에 할당하는 표현식
  • 변수에 속성이나 요소를 간편하게 할당
  • 구조 분해 할당이라고 표현

Destructuring의 구조​

객체의 Destructuring​

// 기본적으로 객체의 value를 변수에 할당하는 방식
let obj = { name: "JJamVa", age: 27 };
let myName = obj.name;
console.log(myName); //"JJamVa"

let obj = { one: 1, two: 2 };
let { one: myNum } = obj;
console.log(myNum); //1
note
let {one:myNum}

이 부분이 Destructuring이다.
let {one:myNum} = obj는 let {one:myNum} = {one:1, two:2}와 같다.
여기서 공통 key값인 one이 있으며, obj안에 있는 one의 value값을 myNum에 할당한다.

객체 Destructuring과 Rest Property
let { one } = { one: 1 };
console.log(one); //1
note

let {one}도 Destructuring이다.
one이라는 변수에 { one : 1 }의 value값을 담을 수 있다.
즉, {key의 이름} = {key의 이름: value} 작성해도 값을 받아올 수 있다.

let { ten } = { one: 1 };
console.log(ten); //undefined
caution

위와 같은 결과는 undefined가 나왔다.
{ten}과 {one:1}의 key값이 다르기 때문에 값을 받아오지 못했다.

let { one, two, three, four } = { one: 1 };
console.log(one); //1
console.log(two); //undefined
console.log(three); //undefined
console.log(four); //undefined

위에 설명에 대한 상세 코드이다.
one을 제외한 나머지 변수는 undefined이다.

const computer = {
  laptop: "Razen",
  monitor: "LG",
  power: "700W",
  color: "white",
};

const { laptop, monitor, ...things } = computer;

console.log(laptop); // 'Razen'
console.log(monitor); // 'LG'
console.log(things); // {power: '700W', color: 'white'}
note

...은 spread 혹은 전개구문이라 부르며, 남은 값은 ...변수명으로 남은 값을 할당받는다.

배열의 Destructuring​

  • 대괄호[ ]를 사용하여 할당할 변수 이름을 나열하는 방식
let num = [10, 20, 30];
const [a, b, c] = num;

console.log(a, b, c); // 10 20 30
note

[a, b, c]부분이 배열의 Destructuring이다. 각 배열의 위치(index)에 맞게 변수를 선언해서 값을 저장한다.

배열 Destructuring와 배열 Rest요소
let num = [10, 20, 30, 40];

const [a, ...b] = num;

console.log(a); // 10
console.log(b); // [20, 30, 40]
note

[a , ...b]에서 a는 num의 0번째 값인 10을 가져왔지만
b에는 값이 20뿐만이 아닌 나머지 값들이 배열 형태로 값을 가지고 있다.

let num = [10, 20, 30, 40, 50];

const [, , , ...a] = num;

console.log(a); // [40, 50]
tip

만약 a라는 값을 40부터 끝까지 값을 가지고 싶다면
,을 이용하여 필요없는 값의 영역을 넘기고 ...(spread)를 이용하여 Rest요소를 배열로 할당받는다.

danger
let num = [10, 20, 30, 40, 50];

const [...a,] = num;
console.log(a); //SyntaxError

const [,...a,] = num;
console.log(a); //SyntaxError

Rest요소는 항상 배열의 남은 값들을 가져올 때 사용

함수의 Destructuring​

  • 함수의 매개변수를 분해하여 변수에 할당하는 방법
// 매개변수가 배열일 경우
function myFunc([a = 5, b = 1]) {
  console.log(a);
  console.log(b);
}

const arr = [1, 2];
myFunc(arr); // 1 2
myFunc([]); // 5 1
myFunc(); // Type Error
// 매개변수가 객체일 경우
function person({ name = "none", age = "none", favoriteColor = "skyblue" }) {
  console.log(
    `이름 : ${name}, 나이 : ${age}, 좋아하는 색상 : ${favoriteColor}`
  );
}

person({ name: "JJamVa" }); // 이름 : "JJamVa", 나이 : "none", 좋아하는 색상 : "skyblue"
person({ name: "Hello", favorite: "soccer" }); // 이름 : "JJamVa", 나이 : "none", 좋아하는 색상 : "skyblue"
person({}); //이름 : "none", 나이 : "none", 좋아하는 색상 : "skyblue"
person(); //Type Error
함수 Destructuring Argument값 없이 함수 호출
danger

배열, 객체 함수에서 공통점으로 Argument값 없이 함수를 호출하였을 때, Type Error가 발생했다.

// 배열
myFunc([1, 2]);
let [a = 5, b = 1] = [1, 2];

// 객체
person({ name: "JJamVa" });
let {
  name = "none",
  age = "none",
  favoriteColor = "skyblue",
} = { name: "JJamVa" };

함수 매개 변수(Parameter)에 각각 삽입하고 식을 표현하자면 위와 같다.
그럼 Destructuring 변수 선언과 비슷한 형태인 것을 확인할 수 있다.

//배열
myFunc()
let [a = 5, b = 1]//SyntaxError

//객체
person()
let { name = "none", age = "none", favoriteColor = "skyblue" }//SyntaxError

위와 같은 경우 변수 선언조차 오류가 뜬다.
그럼 어떻게 하면 오류를 지울 수 있을까?

function myFunc([a = 5, b = 1] = []) {
  console.log(a);
  console.log(b);
}
myFunc(); //5 1

function person({
  name = "none",
  age = "none",
  favoriteColor = "skyblue",
} = {}) {
  console.log(
    `이름 : ${name}, 나이 : ${age}, 좋아하는 색상 : ${favoriteColor}`
  );
}
person(); // 이름 : none, 나이 : none, 좋아하는 색상 : skyblue

함수 Parameter와 똑같은 타입의 빈 초기화 값을 설정 하면 Argument없이 함수만 호출해도 정상적으로 동작하는 것을 확인할 수 있다.