자바스크립트 비구조화 할당

배열의 비구조화 할당

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

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

console.log(one, two, three);

변수 세 개의 각각 값을 할당하려 하니까 arr 이라는 변수를 계속 사용해야하는 반복코드가 존재한다.

이 코드를 더 줄여주는 비 구조화 할당이란 것을 사용해 한 줄로 줄여보자.

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

let [one, two, three] = arr;

대괄호를 이용하여 배열의 값을 순서대로 할당받아 사용할 수 있는 방법을 배열의 비 구조화 할당이라고 표현한다.

더 디테일하게는 배열의 기본변수 비 구조화 할당이라고도 한다.

let [one, two, three] = ["one", "two", "three"];

console.log(one, two, three);

 또 다르게는 오른쪽에 있는 배열에서 인덱스를 꺼내어 쓸 수도 있다.

이것을 배열의 선언분리 비 구조화 할당이라고 부른다.

( 이름을 외우기 보다는 배열의 비 구조화 할당의 여러가지 방법이 있음을 인지 )

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

console.log(one, two, three, four);

// one two three undefined

요소가 없는 네번째 변수까지 할당받고 싶어한다면 ? 마지막 four는 할당받지 못해 undefined 를 가지게 된다.

하지만 변수에 undefined 라는 값이 할당되면 안돼는 상황이 발생할 수 있다. 이럴 때는 기본값을 설정할 수 있다.

기본값을 설정하면 할당받지 못하는 상황에 변수의 기본값을 지정해줄 수 있다.

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

console.log(one, two, three, four);

// one two three four 로 나오게 된다.

이 배열의 비 구조화 할당을 이용하면 두 개 변수의 값을 서로 바꾸는 스왑 이라는 것에도 활용이 가능하다.

스왑이란 ?

let a = 10;

let b = 20;

let tmp = 0;

tmp = a;
a = b;
b = tmp;
console.log(a, b);

값을 스왑하는데 세줄이나 필요하고 임시변수까지 선언해야한다.

이것을 비 구조화 할당을 이용해 해결해보자.

let a = 10;
let b = 20;

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

오른쪽에 배열을 하나를 만들어 b와 a를 가지게한다. 이 배열을 비 구조화 할당으로

a와 b에 0번 인덱스, 1번 인덱스에 할당한 것이다.

이런식으로 배열의 비 구조화 할당은 여러가지 테크닉적으로 이용가능하다.

객체의 비구조화 할당

let object = { one: "one", two: "two", three: "three" };

let one = object.one;
let two = object.two;
let three = object.three;

console.log(one, two, three);

배열과 같이 변수를 계속 작성하게 된다.

let object = { one: "one", two: "two", three: "three" };

let { one, two, three } = object;

console.log(one, two, three);

오브젝트에 key 값을 기준으로 one이란 key를 값는 값을 one의 변수에 저장하는 방식으로 쉽게 할당할 수 있다.

객체의 비 구조화 할당은 배열과 다르게 인덱스(순서)가 아니라 key값을 기준으로 할당한다.

let object = { one: "one", two: "two", three: "three", name: "이수광" };

let { name, one, two, three } = object;

console.log(one, two, three, name);

이 객체의 프로퍼티의 키값을 통해서 접근해야 해서 변수명이 키값으로 강제되는 부분이 있지만 극복할 수 있는 방법이 있다.

name 이라는 프로퍼티의 value를 key값으로 접근해서 비 구조화 할당을 하지만 다른 변수의 이름을 사용하게 할 수 있다.

let object = { one: "one", two: "two", three: "three", name: "이수광" };

let { name: myName, one, two, three } = object;

console.log(one, two, three, myName);

변수의 이름을 바꿔서 할당 받을 수도 있다.

name 이란 키값을 기준으로 value를 myName 이란 변수에 해당하겠다. 라고 표현한 것으로 이해하자.

또 한 마찬가지로 배열처럼 기본값을 설정할 수 있다. abc 라는 존재하지 않는 프로퍼티의 값을 할당받고자 하면 undefined 가 뜬다.

이때도 = 연산자를 이용해 기본값을 할당 받도록 만들 수 있다.

let object = { one: "one", two: "two", three: "three", name: "이수광" };

let { name: myName, one, two, three, abc = "four" } = object;

console.log(one, two, three, myName, abc);