[포스코x코딩온] 웹개발자 입문 과정 8주차 | 구조 분해 할당

1.구조 분해 할당이란? 

 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법이다.

 풀어 설명하면, 구문은 배열이나 객체의 속성을 해체하여 그 값을

 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

 왜 필요한가? 개발을 하다보면 배열이나 객체의 전체가 아닌,

 일부만 필요한 경우가 있다. 이럴 때 구조 분해 할당이 유용하게 사용된다고 한다.

 또한 함수에서 매개변수가 너무 많거나 매개변수의 기본 값이 필요할 경우에도 유용하게 사용된다고 한다.

 

 가.[배열]의 구조 분해 할당

   1)배열 분해 할당

    기존 배열 요소 확인 방법

const lists = ["apple", "grape"];
console.log(lists[0]); //기존 배열 요소 확인 방법

    1. 배열 구조 분해 할당 - 요소마다 새로운 변수 할당(순서대로 대응됨)

const lists = ["apple", "grape"];
[item1, item2, item3] = lists;
console.log(item1); // apple
console.log(item2); // grape
console.log(item3); // undefined

    2. 기존 배열에서 변수이름="값"으로 새로 추가 가능하다.

[item1, item2, item3 = "peach"] = lists;

    3. 기본 값이 설정 가능하다. - undefined일 때 기본 값으로 출력됨

var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

 

    4.일부 반환값 무시하기가 가능하다.
     두 번째 요소는 필요하지 않을 때
     할당할 변수가 없기 때문에 네 번째 요소 역시 생략됨

let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

     반환 값을 모두 무시할 수도 있음

function f() {
  return [1, 2];
}
let [,,] = f();

 

    5.할당 연산자 우측엔 모든 이터러블이 올 수 있다.
     Set 객체가 우측에 올 때

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

     함수 return값이 우측에 올 때 

function f() {
  return [1, 2];
}
var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2

    6.할당 연산자 좌측에도 뭐든 올 수 있다.

let user = {};
[user.name, user.surname] = "Bora Lee".split(' ');
alert(user.name); // Bora

 

   2)swap

    기존의 복잡하게 값을 서로 전환하는 것도 구조 분해 없이도 간편하게 서로 값을 교체 가능하다.

let newA = 10,
  newB = 20;
console.log(newA, newB);  //10 20
[newA, newB] = [newB, newA];
console.log(newA, newB); //20 10

 

   3)spread 연산자

    함수 호출에 점(...)을 사용하는 경우 spread연산자이며,

    spread 연산자를 사용할 경우 배열을 쉽게 가져올 수 있다.

const a1 = [1, 2, 3, 4, 5];
console.log(...a1);

    즉, spread 연산자는 객체의 값을 펼치는 연산자로, 

    두 개의 배열을 간단하게 합칠 수도 있다.

const t1 = [1, 2, 3];
const t2 = [5, 6];
const t3 = [...t1, ...t2]; //두개의 배열을 간단하게 합칠 수 있다.
console.log(t3); //1, 2, 3, 5, 6

    또 다른 예는 다음과 같다.

const noTopingCookies = ["촉촉한쿠키", " 안촉촉한 쿠키"];
const topingCookies = ["바나나쿠키", "블루베리쿠키", "딸기쿠키"];
const allCookies = [...noTopingCookies, ...topingCookies, "초코칩쿠키"]; //새로운 값 추가 가능
console.log(allCookies);

 

 

 나.[객체]의 구조 분해 할당

  구조 분해 할당으로 객체도 분해할 수 있다.

  할당 연산자 우측엔 분해하고자 하는 객체를, 좌측엔 상응하는 객체 프로퍼티의 '패턴’을 넣는다.

   1)객체 분해 할당

    기존 배열 요소 확인 방법

const obj = {
  key1: "one",
  key2: "two",
};

console.log(obj.key1); //one

 

    1. 객체 구조 분해 할당 - 변수로 객체 분해 할당

const { key1, key2 } = obj;
console.log("key1: ", key1); //one
console.log("key2: ", key2); //two

 

    2. 만약 key가 중복되서 못쓴다면  (:)를 통해 새키로 할당 가능하다.

const { key1: newKey, key2 } = obj;
console.log("newKey: ", newKey); //one
console.log("key2: ", key2); //two

 

    3. 순서가 아닌 상응하는 키값으로 분해된다. (<-> 배열은 순서로 대응됨)

let {height, width, title} = { title: "Menu", height: 200, width: 100 }

     그러므로 좌우측에 해당하는 키값이 동일해야한다.

// const {a,c} = {a:10, b:10}  c 없어서 undefined출력됨
const { a, b } = { a: 10, b: 10 };
console.log("a", a); //10
console.log("b", b); //10

   

    4. 기존 객체에서 키="값"으로 새로 추가 가능하다.

const { key1: newKey, key2, key3 = "three" } = obj;
console.log("newKey: ", newKey); //one
console.log("key2: ", key2); //two
console.log("key3: ", key3); //three

 

   2)rest 파라미터

    spread 연산자와 유사하지만 spread연산자는 [연산자]이고,

    rest 파라미터는 [파라미터]라는 근본적인 차이가 있다.

    함수 대개변수에 점(...)을 사용하는 경우 rest 매개변수이다.

    대개 값을 묶어서 사용할 때 사용된다. (객체, 배열, 함수 파라미터에서 사용된다.) 

 

    1. 객체에서의 rest

const data = { c: 30, d: 40, e: 50, f: 60 };
const { c, d, ...rest } = data;
// const { c, d, ...abc } = data; //다른 이름도 가능하지만 rest로 약속
console.log("c: ", c); //30
console.log("d: ", d); //40
console.log("rest: ", rest); //나머지 object 가져옴 //rest: {e: 50, f: 60}

     또 다른 예시

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

const chocoshipCookie = {
  ...cookie,
  toping: "chocochip",
};

console.log("chocoshipCookie: ", chocoshipCookie); 
//chocoshipCookie:  { base: 'cookie', madeIn: 'korea', toping: 'chocochip' }

 

    2. 배열에서의 rest

const numbers = [0, 1, 2, 3, 4, 5, 6];
const [one, ...rest] = numbers;