⭐ 개요

Spread Syntax(...)와 Destructuring assignment는 쉽게 말하면 결합과 분해이다.
Spread Syntax(...)는 객체 혹은 배열들을 펼칠 수 있게 해 주는 JavaScript 표현식이다.
Destructuring assignment는 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

⭐ Spread Syntax

Spread Syntax는 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있다.

Spread Syntax는 ...을 사용하여 객체 혹은 배열을 풀어줄 수 있다.

✔ 함수 호출에서의 Spread Syntax

const nums = [1, 100, 10, 105, 95, 102, 110, 140]
Math.max(nums) //NaN 
Math.max(...nums) //140

✔ 행렬 리터럴에서의 Spread Syntax

const firstNums = ["first","second","third"]
const secondNums = ["fourth","fifth","sixth"]
const allNums = [...firstNums, ...secondNums] 
//["first","second","third","fourth","fifth","sixth"] 

✔ 객체에서의 Spread Syntax

var obj1 = { foo: "bar", x: 42 };
var obj2 = { foo: "baz", y: 13 };
const objMerge = {...obj1, ...obj2} // 객체 리터럴에서는 순서가 중요하다 foo가 중복되는 특성이기 때문에 뒤에 오는 "baz"가 foo에 입력된다.
const objMerge2 = {...obj2, ...obj1} // foo:"bar" y: 13 x: 42

⭐ Destructuring assignment(구조 분해 할당)

Destructuring assignment는 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2

x의 첫 번째 변수를 y에 담고, 두 번째 변수를 z에 담는 예제이다.

✔ 배열에서의 Destructuring assignment

const score = [131, 134, 150, 172, 162, 155];
score.sort(function (a, b) {
    if (a > b) return -1;
    else if (b > a) return 1;
    else return 0;
  });
score = [gold, silver, bronze, ...else]
//(변수) gold: 172, silver: 162, bronze: 155 else: 150, 134, 131  

✔ 객체에서의 Destructuring assignment

const translations={
      locale: "de",
      localization_tags: [],
      last_edit: "2014-04-14T08:43:37",
      url: "/de/docs/Tools/Scratchpad",
      title: "JavaScript-Umgebung",
}


const {locale, last_edit, url, title} = translations //locale = "de", last_edit = "2014-04-14T08:43:37", url = "/de/docs/Tools/Scratchpad"...
const { url:site } = translations // site = "/de/docs/Tools/Scratchpad"

✔ 매개 변수에서의 Destructuring assignment

🔎 Destructuring assignment(구조 분해 할당) 적용 전

var user = {
  id: 42,
  displayName: "jdoe",
  firstName: "John",
  lastName: "Doe",
}
  
  function fullName(user) {
    return `${user.firstName} ${user.lastName}`
  }

🔎 Destructuring assignment(구조 분해 할당) 적용 후

var user = {
  id: 42,
  displayName: "jdoe",
  firstName: "John",
  lastName: "Doe",
}
  function fullName(user) {
    const {firstName, lastName} = user // Destructuring assignment(구조 분해 할당)
    return `${firstName} ${lastName}` // user.XXXX가 아닌 변수 형태의 firstName
  }

입력: fullName(user)
출력: 'John Doe'

🔎 적용 후 코드 변형

var user = {
  id: 42,
  displayName: "jdoe",
  firstName: "John",
  lastName: "Doe",
}

  function fullName({firstName, lastName}) {
   		return `${firstName} ${lastName}` // user.XXXX가 아닌 변수 형태의 firstName
 }

입력: fullName(user)
출력: 'John Doe'

🔎 함수 매개변수로 전달된 객체에서 Destructuring assignment(구조 분해 할당) 적용

function userId({ id }) {
  return id;
}

function whois({ displayName: displayName, fullName: { firstName: name } }) {
  console.log(displayName + " is " + name);
}

var user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
    firstName: "John",
    lastName: "Doe",
  },
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

이 예제는 user 객체로부터 id, displayName 및 firstName 을 해체해 출력한다.