비 구조화 할당과 Spread(...) 연산자

DOYOUNG·2023년 7월 5일

javascript

목록 보기

14/17

1. 배열의 비 구조화 할당

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

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

위와 같이 변수에 배열의 값을 할당하고 싶을 때, 비 구조화 할당을 사용하여 더 빠르고 간단하게 쓸 수 있다.

비 구조화 할당 (= 배열의 기본변수 비 구조화 할당)

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

let [one, two, three] = arr;

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

배열 안에 여러개의 변수를 선언하고 오른쪽에 배열을 할당해주면
첫번째 변수부터 arr 배열의 값이 index 순서대로 할당된다.
대괄호를 이용해서 변수에 배열의 값을 순서대로 할당받아서 사용할 수 있는 방법을 배열의 비구조화 할당이라고 한다.

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

위와 같이 변수 배열에 배열 자체를 할당하는 것을 배열의 선언 자체에서 분리, 즉 배열의 선언분리, 비구조화할당이라고 한다.
변수의 갯수가 더 많아서 할당되지 못하는 변수는 undefined가 할당되는데 그것을 방지하기 위하여 기본값을 지정해줄 수 있음.(ex. four)

변수 스왑(swap)

let a = 10;
let b = 20;

[a, b] = [b, a];

console.log(a, b);

두 개의 변수에 할당된 값을 서로 바꾸고 싶을 때, 배열과 배열의 비 구조화 할당을 사용할 수 있다.

2. 객체의 비 구조화 할당

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

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

배열과 마찬가지로 위와 같이 변수에 객체의 프로퍼티를 할당해주고 싶을 때, 비 구조화 할당을 사용할 수 있다.

비 구조화 할당

let object = { one: "one", two: "two", three: "three", name:"홍길동"};

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

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

순서가 아닌 키 값 기준으로 비구조화할당이 이루어지기 때문에 변수의 순서는 상관이 없다.
단, 변수명은 객체의 키 값과 동일해야 하는데 이런 한계를 해결하기 위해 내가 원하는 변수명으로 바꿔서 할당해줄 수 있다. (ex. name: myName)
배열과 마찬가지로 존재하지 않는 프로퍼티의 값을 할당받고자 하면 기본값을 설정해 줄 수 있다. (ex. abc="four")

이 부분은 리액트에서 아주 중요하게 사용된다.

3. Spread(...) 연산자

객체에서 사용되는 spread 연산자

const cookie = {
	base: "cookie",
    madeIn: "korea"
};

const chocoCookie = {
	base: "cookie",
    madeIn: "korea",
    toping: "chocochip"
};

const blueberryCookie = {
	base: "cookie",
    madeIn: "korea",
    toping: "blueberry"
};

위와 같이 여러개의 객체에서 같은 프로퍼티가 중복될 때 spread 연산자를 사용할 수 있다.

const cookie = {
	base: "cookie",
    madeIn: "korea"
};

const chocoCookie = {
	...cookie, // spread 연산자
    toping: "chocochip"
};

const blueberryCookie = {
	...cookie, // spread 연산자
    toping: "blueberry"
};

객체 cookie가 가지고 있는 프로퍼티가 계속 중복되기 때문에
다른 객체들에 중복되는 프로퍼티 대신 그 값을 가진 cookie 객체를 spread 연산자를 사용하여 넣어주면
그 값이 동일하게 객체에 적용된다. spread 연산자는 ...을 객체명 앞에 붙여주면 된다.

배열에서 사용되는 spread 연산자

const noTopingCookies = ["촉촉한쿠키", "부드러운쿠키"];
const topingCookies = ["바나나쿠키", "블루베리쿠키", "딸기쿠키", "초코칩쿠키"];

const allCookies = [...noTopingCookies, "함정쿠키", ...topingCookies];

console.log(allCookies);