초보 개발자의 성장 일기

비 구조화 할당 본문

Development/JavaScript

비 구조화 할당

YUNA 2023. 11. 21. 16:14

비 구조화 할당

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

 

배열의 비 구조화 할당

const fruitList = ['apple', 'banana', 'orange'];

배열이 있을때 이 배열을 각각 호출하려고 한다. 

 

const apple = fruitList[0];
const banana = fruitList[1];
const orange = fruitList[2];

먼저 각각의 변수에 배열의 인덱스를 넣어서 호출했다. 하지만 이 방법은 같은 배열을 불필요하게 반복하게 된다.

 

let [apple, banana, orange] = fruitList;

배열안에 변수를 선언하고 배열을 할당하게 되면 각각 인덱스에 맞게 데이터가 할당이 된다.

 

let [apple, banana, orange] = ['apple', 'banana', 'orange'];

더 간단하게도 가능하다. 배열의 선언 분리 비 구조화 할당이라고 한다.

만약, 여기서 배열에 없는 melon을 할당하려고 하면 melon은 undefinded가 출력된다. 이럴 때 기본값 설정이 가능하다.

 

let [apple, banana, orange, melon='melon'] = ['apple', 'banana', 'orange'];

선언을 해주면 배열이 없을 때 기본값이 출력된다.

 

swap

let num1 = 10;
let num2 = 50;

두 코드의 값을 서로 교환하고 싶을 때는 새 변수를 만들어 다시 값을 넣어주면 된다.

 

let temp = 0;

temp = num1;
num1 = num2;
num2 = temp;

서로 값이 교환된다.

 

[num1, num2] = [num2, num1];

간단하게 위와같이 작성하면 교환이 가능하다.

 

객체의 비 구조화 할당

let numbers = { num1: 'num1', num2: 'num2', num3: 'num3' };

let num1 = numbers.num1; // = numbers['num1']
let num2 = numbers.num2;
let num3 = numbers.num3;

객체에도 불필요한 반복이 생긴다. 

 

let { num1, num2, num3 } = numbers;

위와 같이 작성하면 빠르게 할당이 가능하고 키 값으로 할당이 된다.