비구조화 할당

비구조화 할당

비구조화 할당은 ES6에서 추가된 문법이다.

배열이나 객체 속성을 해체하여 개별 변수에 값을 담을 수 있다.

비구조화 할당의 장점

• 배열, 객체 내 값을 추출하는 코드가 매우 간단해진다.
• 필요한 객체와 나머지 요소 분리가 매우 간단하다.
• 기본값 지정이 가능하다.

비구조화 할당 문법

비구조화 할당이라는 문법이 나오기 전에는 배열안에 있는 요소를 꺼내기 위해서는 직접 하나하나 꺼내서 값을 지정해줘야 했다.

let arr = [1,2,3];

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

console.log(one,two,three);

// result : 1 2 3

굉장히 번거로운 작업을 거쳐야 배열의 요소를 변수에 담을 수 있었다.

하지만 지금은 비구조화 할당 이라는 문법을 굉장히 자주 사용한다.

문법은 이렇다.

let arr = [1,2,3];

let [one,two,three] = arr;

console.log(one);

// result : 1

비구조화 할당은 단 한줄로 배열의 코드를 바로 변수에 담아줄 수 있다.

즉 왼쪽의 변수에 오른쪽 배열 값을 분해해서 할당 해준다.

비구조화 할당의 기준은 배열의 인덱스 이므로 순서대로 할당 된다.

비구조화 할당 구조 분해

나는 배열의 첫번째 인덱스의 요소만 따로 분리하고 나머지들을 다시 배열로 만들고 싶다.

비구조화 할당을 사용하면 아주 편하게 내가 원하는 결과를 가져올 수 있다.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let [one, ...etc] = arr;

console.log(one); // result : 1
console.log(etc); // result : [2,3,4,5,6,7,8,9]

위 처럼 나머지 변수를 사용해서 뒤에 남은 배열을 etc라는 새로운 배열에 담아준다.

기본값 지정

내가 지정한 변수보다 넣어줄 매칭 할 값이 없다면 undefined 를 출력한다.

undefined 는 내가 기분좋게 본적이 없는거같다.ㅎ

즉 자리는 잡아놨지만 값이 없다는 뜻이다.

이해하기 편하게 설명 하자면 집을 계약은 했지만 아직 누가 살고있지는 않다는 뜻이다.

let arr = [1, 2, 3];

let [one, two, three, four] = arr;

console.log(four);

 // result : undefined

나는 four 에는 4를 담아두고 싶다.

그럴때는 이렇게 사용하면 된다.

let arr = [1, 2, 3];

let [one, two, three, four = 4] = arr;

console.log(four); // result : 4

이렇게 기본값을 설정할 수 있다.

이해하기

import { motion } from 'framer-motion';

나의 오늘 뭐 봐? 라는 프로젝트에서 가져온 React 코드이다.

저 코드를 말 그대로 해석 해보자면

나는 framer-motion 에서 motion이라는 것을 꺼내오겠다. 라는 뜻이다.

참고자료

---

[Javascript] 자바스크립트 표현식 비구조화할당(Destructuring assignment) 이해하기