spread/rest 문법

spread 문법

• 배열이나 객체를 확장하여 그 내용을 다른 배열이나 객체에 삽입할 때 사용된다.

배열 spread

배열의 모든 요소를 복사하여 다른 배열에 삽입하는 경우

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // [1, 2, 3]

배열을 합치는 경우

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

배열의 일부분만 다른 배열에 복사하는 경우

const arr1 = [1, 2, 3];
const arr2 = [4, 5, ...arr1]; // [4, 5, 1, 2, 3]

객체 spread

객체의 속성들을 다른 객체에 복사하는 경우

const obj1 = { k1: 's1', x: 1 };
const obj2 = { ...obj1 }; // { k1: 's1', x: 1 };

객체를 합치는 경우

const obj1 = { k1: 's1', x: 1 };
const obj2 = { k1: 's2', y: 2 };
const obj3 = { ...obj1, ...obj2 }; // { k1: 's2', x: 1, y: 2 }

객체에 새로운 속성을 추가하는 경우

const obj1 = { k1: 's1', x: 1 };
const obj2 = { ...obj1, y: 2 }; // { k1: 's1', x: 1, y: 2 }

객체에서 속성을 제거하는 경우

const { x, ...obj } = { x: 1, y: 2, z: 3 }; // {y: 2, z: 3}

rest 문법

• 매개변수를 배열의 형태로 받아서 사용할 수 있다.
• 매개변수의 개수가 가변적일때 사용하면 좋다.

const arr = [1, 2, 3, 4, 5, 6];
function restArr(n1, n2, ...rest) {
  console.log(n1);
  console.log(n2);
  console.log(rest);
}
restArr(...arr);

결과

1
2
[3, 4, 5, 6]

---

구조 분해(destructing)

• 배열이나 객체에서 데이터를 추출하여 변수에 할당하는 방법

배열에서의 구조분해

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
// first = 1
// second = 2
// rest = [3, 4, 5]

객체에서의 구조분해

const person = { name: 'Kim', age: 20, birth: '04/14' };
const { name, age } = person;
// name = 'Kim'
// age = 20

---

화살표 함수(arrow function)

• 함수표현식을 정의할 때 function대신 화살표(=>)를 사용하여 함수를 표현할 수 있다.

기존 함수 표현식

const fuc = function(n1){
	return n1;
}

화살표 함수

const fuc = (n1) => { return x; }
// 매개변수가 한 개일 경우 소괄호 생략 가능
const fuc = n1 => { return x; }
// 함수 내의 코드가 하나일 경우 중괄호, return 생략 가능
const fuc = n1 => x