분할 대입을 장악하다

기본적

그룹의 분할 대입

[변수에 사용되는 배열의 요소 수] 및 [정의된 변수의 수]에서 나머지 배열의 요소는 무시됩니다.

const [name1, name2] = ["hoge", "fuga", "piyo"];
console.log(name1); // hoge
console.log(name2); // fuga

객체 분할

객체 속성 이름으로 값을 참조하므로 배열과 달리 변수 정의 순서는 관계없습니다.

const {　name2, name1 } = { name1: "hoge", name2: "fuga" };
console.log(name1); // hoge
console.log(name2); // fuga

스프레드시트와 병합

더 이상 배열(객체)의 요소를 얻으려면 스프레드시트를 사용하여 정렬(객체)을 얻을 수 있습니다.여분의 배열(대상)의 요소수가 몇 개 증가해도 문제없다.

배열의 경우

const [name, ...rest] = ["hoge", "fuga", "piyo", "foo"];
console.log(name); // hoge
console.log(rest); // ["fuga", "piyo", "foo"]

대상의 상황

const {　name1, ...rest } = { name1: "hoge", name2: "fuga", name3: "piyo" };
console.log(name1); // hoge
console.log(rest); // { name2: "fuga", name3: "piyo" }

변수 기본값

"변수의 배열을 대체하는 요소 수<정의된 변수의 수>에서도 오류가 발생하지 않으며, 부족한 값은 undefined입니다."

const [name] = [];
console.log(name); // undefined

그러나 일반적으로 이렇게 사용하지 않고 값이 없는 상황에서 기본값을 사용합니다.

const [name1 = "hoge", name2 = "fuga"] = ["piyo"];
console.log(name1); // piyo
console.log(name2); // fuga

변수 이름 바꾸기

변수 이름은 置換前: 置換後 형식으로 바꿀 수 있습니다.

const {　name1: n1, name2 } = { name1: "hoge", name2: "fuga" };
console.log(n1); // hoge
console.log(name2); // fuga

함수 매개 변수

분할 대입도 함수의 매개 변수로 사용할 수 있다.

const f = ({ name1, name2 }) => {
  console.log(name1, name2);
};
f({ name1: "hoge", name2: "fuga" }); // hoge fuga

변수의 기본값과 변수를 이렇게 조합합니다.

const f = ({ name1 = "hoge", name2 = "fuga" } = {}) => {
  console.log(name1, name2);
};
f(); // hoge fuga
f({ name1: "piyo" }); // piyo fuga
f({ name1: "piyo", name2: "foo" }); // piyo foo

여기까지 읽으면 분할 대입을 파악할 수 있을 거예요!