[ONEBITE-REACT] JS 심화 - 구조 분해 할당(Destructing Assignment)

의미

구조 분해 할당(Destructing Assignment)이란 배열이나 객체의 값을 해체하여 그 값을 개별 변수에 할당하는 것을 말한다.
이를 통해 배열이나 객체에서 원하는 값만을 추출할 수 있다.
예를 들어 arr라는 배열에 "초콜릿", "떡볶이", "삼겹살"이 있다면 이것을 변수1에 "초콜릿", 변수2에 "떡볶이", 변수3에 "삼겹살"을 담아 각각 다른 변수 3개를 만들어서 각각의 값을 분해해서 담는 것도 가능하다.

배열의 구조 분해 할당

배열을 나누려면 일반적으로는 아래와 하나씩 변수로 나눠주는 형태로 번거롭게 작업 해야 한다.

let arr = [1, 2, 3]

let one = arr[0];
let two = arr[1];
let three = arr[2];

기본형

let 원래변수명 = [변수값]
// 위와 같은 변수가 선언되어 있을 때

let [분할할변수명1, 분할변수명2, 분할변수명3] = 원래변수명;

let arr = [1, 2, 3];

let [one, two, three] = arr;

객체의 구조 분해 할당

객체를 나누려면 일반적으로는 아래와 하나씩 변수로 나눠주는 형태로 번거롭게 작업 해야 한다.

let wonYoung = {
    name: "장원영",
    age: 21,
    group: "Ive",
}

let name = wonYoung.name;
let age = wonYoung.age;
let group = wonYoung.group;

기본형

let {분해할변수명1, 분해할변수명2, 분해할변수명3} = 원래객체명;

위 객체의 경우 이렇게 써볼 수 있다.

let {name, age, group} = wonYoung;
console.log(name, age, group); // 장원영 21 Ive

객체의 구조 분해 할당도 배열의 구조 분해 할당과 동일하게 없는 원소를 분해할 때는 값이 초기화되지 않아 undefined 상태가 되며, 기본값을 할당해줄 수도 있다.

let {
  name = "지수",
  age = "30",
  group = "blackpink",
  town = "군포",
} = wonYoung;
console.log(name, age, group, town); // 장원영 21 Ive 군포

프로퍼티명 변경하기

객체의 구조를 분해 할당할 때 변수명: 바꿀변수명으로 변수명을 바꿀 수 있다.

let {
  name = "지수",
  age: myAge = "30",
  group = "blackpink",
  town = "군포",
} = wonYoung;
console.log(name, myAge, group, town);
// age: myAge로 바꾸어서 wonYoung이라는 객체의 age라는 프로퍼티는 myAge프로퍼티가 되었다.

객체 구조 분해 할당을 이용하여 함수의 매개변수를 받는 방법

wonYoung이라는 객체를 선언하고 나서 이를 함수의 매개변수로 받을 때는 원래대로라면 아래와 같이 작성을 하게 될 것이다. (함수 표현식으로)

let wonYoung = {
  name: "장원영",
  age: 21,
  group: "Ive",
};

const jang = function jang(wonYoung) {
  console.log(wonYoung.name, wonYoung.age, wonYoung.group);
};

jang(wonYoung); // 장원영 21 Ive

wonYoung.프로퍼티를 계속 입력해야 하다보니 번거로움이 있다.
따라서 이런 경우 객체 구조 분해 할당을 통해 아래와 같이 간결히 표현할 수 있다. (함수 표현식, 익명 함수 복습)

// 1. 함수표현식 => 화살표 함수로 바꾸기

// 1단계 : function을 없애고 소괄호와 중괄호 사이에 화살표 넣기
const jang = (wonYoung) => {
  console.log(wonYoung.name, wonYoung.age, wonYoung.group);
};

// 2단계 : return만 하는 함수라면 중괄호와 return 키워드 삭제 가능. 이 경우엔 함수의 내용이 콘솔 출력이므로 2단계는 생략.

// 2. 객체 구조 분해 할당 (파라미터에 프로퍼티 담기)
const jang = ({ name, age: myAge, group, town = "군포" }) => {
  console.log(name, myAge, group, town);
};

jang(wonYoung); // 장원영 21 Ive 군포

위처럼 함수 표현식에서 객체 구조 분해 할당을 할 때도 원프로퍼티명:바꿀프로퍼티명과 같이 프로퍼티를 수정할 수도 있고, town="군포"와 같이 프로퍼티의 기본 값을 수정할 수도 있다.