구조분해 어디에 쓰이나요?

강의를 듣다가 구조분해라는 단어가 나왔다. 순간 구조분해?? 그게 뭐였지? 라는 생각이 들었다. 오늘은 애매하게 알고 있는 구조분해를 공부하고 기록한다.

구조분해 넌 누구니?

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

구조분해 어디에 쓰이나요?

구조 분해 할당이 필요한 이유는 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생긴다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부가 필요한 경우도 생긴다.

이럴 때 객체나 배열을 변수로 '분해'할 수 있게 해주는 구조 분해 할당을 사용할 수 있다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(destructuring)는 그 진가를 발휘한다.

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

객체 구조분해하기

obj1 이름을 가진 객체가 있다.
나는 obj1에 name, age, habit만 변수에 담고싶다.

const obj1 = {
  id: 1,
  name: "라이언",
  age: 3,
  habit: "coding",
  likeColor: black,
};

구조분해를 사용하지 않은 코드

const name = obj1.name;
const age = obj1.age;
const habit = obj1.habit;

각 데이터를 이렇게 담을 수 있다. 더 간략하게 코드를 작성하고 싶다면 구조분해를 사용하자.

구조분해를 사용한 코드

const { name, age, habit } = obj1;

한줄의 코드로 더 깔끔하게 작성할 수 있다.

내가 담고 싶은 데이터 프로퍼티를 { }안에 담아주면 된다!

분해하려는 객체의 프로퍼티 개수가 할당하려는 변수의 개수보다 많다면 어떨까?

나머지 패턴 ‘…’을 사용하면 된다

let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title = 이름이 title인 프로퍼티
// rest = 나머지 프로퍼티들
let {title, ...rest} = options;

// title엔 "Menu", rest엔 {height: 200, width: 100}이 할당됩니다.
alert(rest.height);  // 200
alert(rest.width);   // 100

배열 구조분해하기

arr1에는 []안에 데이터가 담겨있다. 각 데이터를 변수에 담아보자.

const arr1 = [1, "lion", 3];

구조분해를 사용하지 않은 코드

const lionId = arr1[0];
const lionName = arr1[1];
const lionAge = arr1[2];

구조분해를 사용한 코드

const [lionId, lionName, lionAge] = arr1;

더 깔끔하게 작성할 수 있다. 여기서 lionId, lionAge 데이터만 담고 싶다면 어떻게 해야할까? 위에 객체구조분해처럼 필요한것만 [ ] 주며 될까? 그러면 안된다!!! 배열은 인덱스의 특성이 있어서 안된다!

그럼 어떻게 코드를 작성 해야 할까?

const [lionId, _, lionAge] = arr1;

언더바를 넣어주면 된다.
_ 의 의미는 쓰지마세요. 라는 의미를 담고 있다.