[JavaScript] Spread, Rest, Rest Parameter, Destructuring Assignment

Spread

Spread 는 배열이나 문자열을 풀어서 전달할 수 있는 문법이다. ... 를 사용한다.

// 배열을 spread 하여 배열의 요소를 다른 배열로 복사하기
let a = [1, 2, 3];
let b = [...a]; // [1, 2, 3]

let c = [4, 5, 6];
let d = [...a, ...c]; // [1, 2, 3, 4, 5, 6]

// 문자열 복사
let str = "apple"
let arr = [...str]; // ["a", "p", "p", "l", "e"]

// 함수에 배열이나 문자열을 풀어서 전달하기
const nums = [1, 2, 3];
function sum(a, b, c) { return a + b + c; }
sum(...nums); // 1 + 2 + 3

// ECMAScript 2018 에 추가된 spread 문법으로, 객체의 key-value pair 를 복사할 수 있다.
let obj1 = { a: 1 };
let obj2 = { ...obj1 }; // { a: 1 }

let obj1 = {a: 1, b: 2};
let obj2 = {b: 20, c: 30};
obj1 = {...obj2}; // {a: 1, b: 20, c: 30} key 겹치면 덮어씌워진다.

Rest parameter (vs arguments 객체)

함수의 parameter 를 정의할 때 spread 를 사용하여 정의한 parameter 를 rest parameter 라고 한다.
인자로 들어오는 요소들을 배열로 만들어서 함수 내부로 전달한다.
함수의 parameter 의 갯수를 확정할 수 없을 때 유용하다.

function func1(...arr) { return arr; }
func1(1, 2, 3); // [1, 2, 3]

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

Rest parameter 가 나오기 전에는 arguments 객체를 사용했다. Rest parameter 는 정해지지 않는 함수 인자에 접근하기 위해 더 편한 방식을 만든 것이다.
Arguments 객체는 함수가 호출되면 자동으로 생성되는 자바스크립트 객체이다.
이 객체는 iterable 한 객체이다. 따라서 반복문으로 arguments[i] 의 형식으로 접근할 수 있다.

function func1(a, b, c) { return arguments; }
func1(1, 2, 3) // [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

function func2() { return arguments; }
func2("a", "b", "c"); //["a", "b", "c", callee: ƒ, Symbol(Symbol.iterator): ƒ]

Destructuring assignment

Destructuring assignment(구조 분해 할당) 문법은 배열에서 값을 꺼내거나 객체에서 key의 value를 꺼내 변수에 담는 것이 가능하다.
변수가 선언이 될 때 미리 [], {}로 감싸진다.

const [a, b, ...rest] = [10, 20, 30, 40, 50];
// a = 10, b = 20, rest = [30, 40, 50]
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10, b = 20, rest = {c:30, d: 40}

// 함수의 인자로 전달된 객체의 값을 꺼내기
const user = {
  id: 42,
  displayName: 'jdoe',
  fullName: {
    firstName: 'John',
    lastName: 'Doe'
  }
};

// parameter 를 객체 안에 있는 key 중 하나로 설정하고 {} 로 감싼다.
function userId({id}) { return id; } 
// user 란 객체를 넣으면 id 라는 key 를 찾아 그 value 를 return 한다.
userId(user); // 42 

function whois({displayName, fullName: {firstName: name}}) {
  return `${displayName} is ${name}`;
}
whois(user);  // "jdoe is John"