우리말로 번역하자면 구조 분해 할당
이다.
사실, 한글이 더 이해가지 않는다.
영어 단어를 그대로 이해하자면,
structure(구조)를 => De(해체, 없애다)
기존의 구조를 낱낱이 해체하여 간단히 한다 정도로 이해할 수 있을 것 같다.
크게 두 가지 이유가 있다.
텍스트로는 잘 이해가 되지 않는다.🥲
//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
라고 해주면 된다.
한줄을 추가 해주면서(비구조 할당) 코드의 반복을 줄이고 좀 더 깔끔한 코드를 구성할 수 있게 되었다.
비구조 할당은 함수에서 더욱 빛을 발한다.
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값이라고 할당을 하면 반복은 줄어든다.