[JS] array에서 요소를 꺼내고, 각각에 이름을 부여하는 멋진 방법(Destructuring)

 

🎁 Array 요소에 이름 Awesome하게 부여하기

const food = ["tomato", "potato"]

 

위의 어레이를 아래와 같이 각각의 요소에 이름을 부여해줄 수 있다.

이름하야 Destructuring.

const [myFavFood, mySecondFavFood] = food;

이렇게 하는 것은 아래처럼 어레이 순서에 따라 이름을 부여해주는 것과 같다.

const myFavFood = food[0];
const mySecondFavFood = food[1];

 

 

 

🤔 이게 왜 Awesome 해요?

JS 입문자인 나에게는 바로 윗 코드와 같이 각각의 이름을 선언하여 부여해주는 것이 더 눈에 익고 쉬워보였다.

하지만 극강의 효율을 추구하고, 메모리를 줄여야하는 개발씬에서는 낭비일 뿐이다.

 

자 다른 예시를 들어보자.

const x = [1, 2, 3, 4, 5, 6];

이런 상황에서 각각의 요소에 이름을 붙여주고 싶다고 하자.

const a = x[0];
const b = x[1];
const c = x[2];
const d = x[3];
const e = x[4];
const f = x[5];

코드를 다섯 줄 낭비한 셈.

이런 경우 처음과 같이 Destructuring 해준다면?

const [a, b, c, d, e, f] = x;

이렇게 한 줄의 코드로 내가 원하는 결과를 이끌어낼 수 있다.