NBC - JS 2주차 강의 정리 : 구조분해할당, 전개 구문(Spread Operator)

 

 

구조분해할당

destructuing
de : not / structure : 구조

배열이나, 객체의 속성을 분해해서 변수에 넣는 방법

 

 

1. 배열의 경우 (순서가 중요)

let [value1, value2] = [1, "one"];
console.log(value1); // 1
console.log(value2); // "one"

let arr = ["value1", "value2", "value3"];
let [a, b, c, d] = arr;
console.log(a); // value1
console.log(b); // value2
console.log(c); // value3
console.log(d); // undefined (초기값이 설정되어있다면 4가 출력됨) ex) let [a, b, c, d=4] = arr;

 

 

2. 객체의 경우 (key가 중요)

let { name, age } = {
  name: "jang",
  age: 31,
};

console.log(name, age); // "jang", 31 출력

 

 

3. 새로운 이름으로 할당

let user = {
  name: "jang",
  age: 31,
};

let { name: newName, age: newAge } = user;
console.log(newName, newAge); // "jang", 31 출력

 

 

 

---

 

 

단축 속성명 : property shorthand

key와 value가 같으면 생략이 가능

const name = "jang";
const age = 30;

const user = { 
  name, // name의 경우 key와 value가 같으니 생략 가능
  newAge: age
};

// console.log(user.name, user.age); // jang 30 출력


// key와 value의 이름이 값은 경우
const name = "jang";
const age = 30;

const user = { name, age };  // 배열같아 보이지만 객체
const user = { name: name, age: age };  // 위와 같음

 

 

 

전개 구문 : spred operator

반복 가능한 객체에 적용할 수 있는 문법.

배열이나 문자열 등을 요소 하나 하나로 전개 시킬 수 있음

const arr = [1, 2, 3, 4, 5];
const str = "string";

console.log(...arr); // 1 2 3 4 5
console.log(...str); // "s" "t" "r" "i" "n" "g"

 

 

배열

let arr = [1, 2, 3];
let newArr = [...arr];
console.log(...arr); // 1 2 3 출력
console.log(newArr); // [1,2,3] 출력

 

 

배열 병합

기존 concat 메서드를 이용했던 결합, ES6에서는 spread 연산자를 통해 더 깔끔하게 병합이 가능해졌다.

// 기존 방식
let arr1 = [1,2,3]; 
let arr2 = [4,5,6]; 

let arr = arr1.concat(arr2); 
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ] 

// ES6 spread operator
let arr1 = [1,2,3]; 
let arr2 = [4,5,6]; 

let arr = [...arr1, ...arr2]; 
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]

 

 

추가로 보자면 이런 다양한 형태의 배열 병합을 수행 할 수 있다.

let arr1 = [1,2,3]; 
let arr2 = [4,5,6]; 
arr1.push(...arr2) 

console.log(arr1); // [1,2,3,4,5,6]


let arr1 = [1,2];
let arr2 = [0, ...arr1, 3, 4];

console.log(arr2); // [0, 1, 2, 3, 4]

 

 

 

배열 복사

새로운 배열에 push를 해서 참조를 했다던지, map 함수로 배열을 복사했다면 ES6에서는 Spread 연산자를 활용해 편하게 가능해졌다.

// ES6 spread operator
let arr1 = ['철수','영희']; 
let arr2 = [...arr1]; 

arr2.push('바둑이'); 

console.log(arr2); // [ "철수", "영희", "바둑이" ]
// 원본 배열은 변경되지 않습니다.
console.log(arr1); // [ "철수", "영희" ]

 

 

객체

객체 복사 또는 업데이트 가능

let user = {
  name: "jang",
  age: 30,
};

let user2 = { ...user };
console.log(user2); // { name: 'jang', age: 30 } 출력

 

 

객체의 복사 또는 프로퍼티를 업데이트 할 수 있다.

let currentState = { name: '철수', species: 'human'};
currentState = { ...currentState, age: 10}; 

console.log(currentState)// {name: "철수", species: "human", age: 10}

// 객체의 프로퍼티를 오버라이드 함으로써 객체가 업데이트
currentState = { ...currentState, name: '영희', age: 11}; 
console.log(currentState); // {name: "영희", species: "human", age: 11}

 

 

 

나머지 매개변수 : rest parameter

인자의 개수와 상관없이 모든 인자를 더하는 함수를 구현하기 쉬움

function exampleFunc(a, b, c, ...args) {
  console.log(a, b, c); // 1 2 3 출력
  console.log(...args); // 4 5 6 출력
  console.log(args); // [4, 5, 6] 출력
}
exampleFunc(1, 2, 3, 4, 5, 6);