Destructuring

우리말로 번역하자면 구조 분해 할당이다.

사실, 한글이 더 이해가지 않는다.
영어 단어를 그대로 이해하자면,

structure(구조)를 => De(해체, 없애다)

기존의 구조를 낱낱이 해체하여 간단히 한다 정도로 이해할 수 있을 것 같다.

Destructuring을 왜하는걸까?

크게 두 가지 이유가 있다.

• Array나 Object의 값들에 쉽게 접근하기 위해서이다.
• 그리고 그 값들을 변수에 쉽게 할당하기 위해서이다.

텍스트로는 잘 이해가 되지 않는다.🥲

//Array
const array = [1,2,3]
const [a, b] = array
console.log(a) // 1
console.log(b) // 2

array의 값들은 1,2,3이다.
그 중 1,2,3에 접근하기 위해서는 array[0 or 1 or 2] 이렇게 접근해야 한다.

하지만 위의 예시는 간단해서 그렇지 코드의 규모가 커지면 이러한 접근은 비효율적이다.

위의 예시를 다시 보자.

변수 a,b를 array index 순서대로 할당해주는 효과를 가져다 주었다.
(여기서 array의 3은 변수 할당을 해주지 않았다.)

//Object
const myObj = {
  name: 'SpiderMan',
  age : 18
}

const {name} = myObj;
console.log(name) // SpiderMan
console.log(age)// Error
console.log(myObj.age) //28

myObj라는 객체의 형태를 잘 살펴보자.
myObj의 name값에 접근하기 위해서는 일반적으론 myObj.name이라고 작성해야 한다.

하지만 const {name} = myObj라고 함으로써 앞으로 사용할 name은 myObj의 key값에 해당한다고 미리 정할 수 있다.

따라서, name만으로도 SpiderMan을 추출할 수 있게 된 것이다.

age도 비구조 할당을 하게 된다면

const {name, age} = myObj라고 해주면 된다.

한줄을 추가 해주면서(비구조 할당) 코드의 반복을 줄이고 좀 더 깔끔한 코드를 구성할 수 있게 되었다.

함수에서의 Destructuring

비구조 할당은 함수에서 더욱 빛을 발한다.

const printName = (personObj) => {
  console.log(personObj.name);
}

printName({name: 'SpiderMan', age: 18})

-------------------------------------------------------

//비구조 할당 적용
const newPrintName = ({name}) => {
  console.log(name)
}

newPrintName({name: 'SpiderMan', age: 18})

위의 예시에서 비구조 할당 이전의 함수 선언 방식에는 아무런 문제가 없다.
하지만 personObj의 name에 접근하기 위해 반복되는 코드가 발생한다.

{name}은 객체의 key값이라고 할당을 하면 반복은 줄어든다.