비 구조화 할당

배열과 객체를 우아하게 사용하는 방법 (구조분해할당)

1. 배열의 비 구조화 할당

// 배열의 값 변수에 할당
let arr = ["one", "two", "three"];

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

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

// 비 구조화 할당을 이용한 배열의 값 변수에 할당 (배열의 기본변수 비 구조화 할당)
let arr = ["one", "two", "three"];

let [one, two, three] = arr;

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

// 배열의 선언분리 비 구조화 할당
let [one, two, three] = ["one", "two", "three"];

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

// 배열 비 구조화 할당의 기본값 설정
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 temp = 0;

temp = a;
a = b;
b = temp;

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

// 비 구조화 할당을 이용한 스왑
let a = 10;
let b = 20;

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

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

2. 객체의 비 구조화 할당

// 객체의 값 변수에 할당
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); // one two three

// 비 구조화 할당을 이용한 객체의 값 변수에 할당
let object = { one: "one", two: "two", three: "three", name: "송진성" };

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

console.log(one, two, three, name); // one two three 송진성

// 변수명이 key 값으로 강제되는 것 극복하기
let object = { one: "one", two: "two", three: "three", name: "송진성" };

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

console.log(oneOne, two, three, myName); // one two three 송진성

// 객체 비 구조화 할당의 기본값 설정
let object = { one: "one", two: "two", three: "three", name: "송진성" };

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

console.log(oneOne, two, three, myName, abc); // one two three 송진성 four

참고강의 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8#

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 - 인프런