1. Destructuring, Spread, Rest

1. Destructuring(비구조화)

JS에서는 일반 자바와 다르게 많은 단축 구문이 존재한다. 예를 들어 배열 및 객체를 선언을 단축하는 단축구문 등이 그러하다.

• 배열 선언 const arr = [1,2,3]; // const arr = new Array(1,2,3);

• 객체 선언 const obj = {}; // const obj = new Object();

이는 개발자의 편의성과 가독성을 챙기기 위해서인데 Destructuring문법 또한 개발자의 편의성을 위해 추가된 문법으로 배열과 객체의 값을 더 간단하고 직관적으로 추출하기 위해 만들어진 단축구문이다.

1) Array Destructuring Assignment

• 배열 비구조화 문법

• 배열의 값을 인덱스 없이 순서에 맞추어 변수에 할당하는 문법

const arr = [1,2,3];

const [a,b,c] = arr;
// a= 1, b= 2, c = 3

2) Object Destructuring Assignment

• 객체 비구조화 문법

• 객체의 속성명을 기준으로 해당 값을 같은 이름의 변수에 할당하는 문법

const obj = {
    foo : 1,
    bao : 2
};
const {foo, bao} = obj;
// foo = 1, bao = 2

이 처럼 배열과 변수에 Destructuring 문법을 적용하면 코드의 길이가 줄어들고 가독성도 확보되면서 더욱 간결하게 작업을 할 수 있다.

2. Spread Operator , Rest Parameter

...연산자는 Spread Operator , Rest Parameter라고 부르는데 선언 위치에 따라 부르는 이름과 기능이 다르다.

1) Spread Operator(전개연산자)

배열이나 객체에 담겨있는 값을 꺼낸 후 "전개"해주는 역할을 하는 연산자이다.

• 배열 및 객체에 값을 대입할 때, 함수 호출 시 매개인자를 전달할 때 배열 및 객체에 저장된 값을 펼쳐 전개하는 문법

a. 배열 리터럴 전개

• 배열안에 저장된 데이터를 꺼내어 전개하는 문법

const arr = [1,2,3,4];
console.log(...arr); // 배열데이터를 꺼내어 4개의 매개인자를 전달.

// spread연산자를 활용한 깊은 복사.
const copy_arr = [...arr]; 
console.log(copy_arr); // [1,2,3,4]

b. 객체 리터럴 전개

• 객체내부에 저장된 속성명과 속성값을 꺼내어 전개하는 문법.

const person = {name : "mkm", job : 'teacher'}
const mkm = {...person , location:'seoul' }; 
console.log(mkm);// // {name : "mkm", job : 'teacher' , location:'seoul'}

2) Rest Parameter(잔여 파라미터)

• 비구조화문법(Destructuring) 및 함수 선언시 나머지 값들을 하나로 모을 때 사용하는 문법입니다.

a. 함수의 매개변수에서의 RestParameter

• 매개인자로 전달받은 값을 배열/객체로 모아준다.

function testRest(first, ...rest){
    console.log(first); // m
    console.log(rest); // ['k','m']
}
testRest('m','k','m');
const arr = ['m','k','m'];
testRest(...arr); //Spread Operator

function testRest2({name , ...rest}){ // Destructuring + Rest
     console.log(name); // mkm
     console.log(rest); // {age:30, hobby:['game','movie']}
}
const person = {name:'mkm', age:30, hobby:['game','movie']};
testRest2(person);
//testRest2(...person); // X 속성명과 속성값 구조의 객체데이터를 바로 펼칠 수 없음
testRest2({...person}); 

b. Destructuring문법에서의 RestParameter

const array = [1,2,3,4];
const [first, ...rest] = array;
console.log(first , rest); // 1 , [2,3,4];

const person = {name : "mkm", job : 'teacher', age : 30};
const {name , ...rest} = person; 
console.log(name, rest); // 'mkm', { job : 'teacher' , age : 30}