[JAY⌨️JS] JS 신문법! (...) Rest Parameter, Spread Syntax, Destructuring Assignment를 한번에 알아보자!

 

 

 

 

 

 

자바스크립트는 ECMA Script6 (2015) 이후 여러 편리한 문법이 도입되었다. 

신문법 중 ... 을 활용한 문법을 몇 개 볼 수 있는데, 일반적으로 점점점(...)을 말줄임표로 사용하는 것처럼
'이것 등등', 혹은 '특정 기능이 생략되어있다' 라는 뜻을 가지는 직관적인 표현식이라고 할 수 있다.

대표적으로 이 점점점(...) 을 활용해서 편리하게 코딩할 수 있는 자바스크립트 문법 세 가지를 소개한다.

 

 

 

 1️⃣ Rest Parameter (나머지 매개변수)

• Rest Parameter 는 말 그대로 Rest(나머지)의 역할을 한다.
• 함수 작성 시 매개변수의 개수를 지정하지 않고 함수 사용 시 작성된 arguments 입력값을 모두 배열로 받아준다.
• 사용 방법은 함수 작성 시 parameter 앞 에 ... 을 붙여주는 것!
• Rest Parameter는 항상 가장 마지막에 위치 시켜야 한다.
• 해당 기능의 장점은 함수의 인수를 동적으로 처리 할 수 있다는 것!

 

function showFruits(...fruits) { // Rest Parameter
  console.log(fruits);
}

showFruits("🍎", "🍌", "🍇");  // ["🍎", "🍌", "🍇"]

 

 

 

 2️⃣ Spread Syntax (전개 구문)

• Spread Operator 라고도 하는 Spread Syntax는 말 그대로 '펼친다'. '늘어뜨린다' 라고 생각하면 된다.
• 배열이나 객체의 요소를 확장할 때 사용. 
• 대상은 열거가능한 형식(iterable)이어야 한다.
• Spread Syntax를 사용하면 원본의 값을 변형시키지 않고 자체 속성인 Property 값만 그대로 복사해 올 수 있다.
• 기존의 Object.assign() 메서드와 비슷한 역할이지만 사용은 훨씬 편리해진 Sugar Syntax!
  하지만 객체나 배열을 복사할 때 Prototype 까지 깊은 복사가 되지는 않으며 기능을 완전 대체하지는 못하므로
  얕은 복사를 할 때 사용하는 것이 좋다.
• 주로 객체의 값을 복사, 수정하거나, 병합하는 작업을 할 때 사용한다.

 

let fruits1 = ["🍎", "🍌"];
let fruits2 = ["🍇", "🍓"];

// fruits1 과 fruits2를 Spread Syntax로 병합
let allFruits = [...fruits1, ...fruits2]; 
console.log(allFruits);  // ["🍎", "🍌", "🍇", "🍓"]

 

 

 

 3️⃣ Destructuring Assignment (구조 분해 할당)

• Destructuring Assignment 는 말 그대로 기존 구조를 분해한다, 해체한다고 해석하면 된다.
• 구조분해 할당을 '파괴'로 해석할 수도 있는 데 사용해도 원본에는 영향 없으니 안심!
• 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 할당한다.
• JavaScript 에서도 React에서도 함수의 매개변수를 활용할 때 정말 많이 사용되는 자료 구조!
• 쉼표를 사용하면 필요하지 않은 배열 요소를 버릴 수 있다.

 

// 쉼표를 통해 배열 index 건너뛰고 할당
let [apple, ,banana] = ["🍎", "🥕",  "🍌"];
console.log(banana);  // 🍌


// Rest Parameter로 나머지 요소 가져오기 
let [name1, name2, ...rest] = ["JAY", "PAUL", "SOPHIE", "arial", "Amy"];


// 객체의 key값을 변수명으로 할당
let {name, age} = {name: "JAY", age: 11};
console.log(name);  // JAY

 

 

 

🙋🏻‍♀️ 요약

• ...(점점점) 을 활용한 가독성 좋은 문법!
• Rest Parameter(나머지 매개변수)는 함수의 매개변수로, 정해지지 않은 수의 인수들을 배열로 받아올 수 있게 한다.
• Spread Syntax(전개 구문)는 배열이나 객체의 요소를 확장할 때 사용한다.
  배열의 복사나 객체의 병합 등에서 유용!
• Destructuring Assignment(구조 분해 할당)는 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 할당하는 데 사용한다.