[JavaScript] 비구조화 할당 그리고 SWAP

배열의 비구조화 할당

배열에서 비구조화 할당을 사용한다면, 배열 안에 있는 값을 추출해서 변수 / 상수로 바로 선언이 가능하다.

배열 안에 있는 원소를 새로 선언해주고 싶을 때 굉장히 유용한 문법이다. 

 

# Case 1: 기존 할당 방법

let colors = ["red", "green", "blue"];

let color0 = colors[0];
let color1 = colors[1];
let color2 = colors[2];

console.log(color0, color1, color2); // red green blue

# Case 2: 비구조화 할당

let [color1, color2, color3] = ["red", "green", "blue"];

console.log(color0, color1, color2); // red green blue

Case 1과 2 모두 같은 결과를 나타내지만 두 번째 코드가 훨씬 간단한 것을 확인할 수 있다.

이렇게 대괄호를 이용해서 배열의 값을 순서대로 할당받아 사용할 수 있게 하는 것을 배열의 비구조화 할당이라고 한다.

 

만약 할당할 변수의 개수가 값보다 적다면 할당되지 못한 변수에는 당연하게도 undefined가 할당된다.

let [color0, color2, color3, color4] = ["red", "green","blue"];

console.log(color0, color2, color3, color4); // red green blue undefined

이를 막기 위해 기본값을 설정할 수 있다.

let [color0, color2, color3, color4 = "yellow"] = ["red", "green","blue"];

console.log(color0, color2, color3, color4); // red green blue yellow

 

객체의 비구조화 할당

객체에서 비구조화 할당을 사용한다면, 객체 안에 있는 값을 추출해서 변수 / 상수로 바로 선언이 가능하다.

 

# Case 1: 기존 할당 방법

let person = {
	name: "Jedi",
    age: 20,
    phonenumber: 01012345678,
};

let name = person.name;
let age = person.age;
let phonenumber: person.phonenumber;

 

# Case 2: 비구조화 할당

let person = {
	name: "Jedi",
    age: 20,
    phonenumber: 01012345678,
};

let { name, age, phonenumber } = person;

이렇게 객체에서는 Key값과 변수명만 일치시키면 비구조화 할당을 사용할 수 있다.

만약 다른 변수 명을 사용하고 싶다면 ':'를 이용하면 된다.

let person = {
	name: "Jedi",
    age: 20,
    phonenumber: 01012345678,
};

let { name, age, phonenumber: number } = person;

console.log(number); // 01012345678

윗 예시처럼 phonenumber 대신 number 라는 변수 명을 사용할 수 있다.

 

 

SWAP

보통 각 변수의 값을 서로 바꾸기 위해서 값을 담아 교환해줄 변수(temp)가 필요하다.

let a = 10;
let b = 20;

let temp = a;

a = b;
b = temp;

console.log(a, b); // 20 10

 

하지만, 비구조화할당을 활용하면 temp 없이도 쉽게 값을 swap 할 수 있다.

let a = 10;
let b = 20;

[a, b] = [b, a];
console.log(a, b); // 20 10