[자바스크립트] JS다운 코드 스타일 #2. Spread 연산자

<목차>

1. 템플릿 리터럴(Template Literal)
2020/10/07 - [개발/자바스크립트] - [자바스크립트] JS다운 코드 스타일 #1. 템플릿 리터럴

2. spread 연산자

3. 배열, 함수형 프로그래밍
2020/10/15 - [개발/자바스크립트] - [자바스크립트]JS다운 코드 스타일 #3. 배열, 함수형 프로그래밍

4. 비구조화 할당
2020/11/20 - [개발/자바스크립트] - [자바스크립트]JS다운 코드 스타일 #4. 비구조화 할당

---

2. spread 연산자

spread 는 ES6에 추가된 연산자입니다. 펼침연산자라고 한다.

배열, 문자열 등의 이터러블을 분해하여 개별요소로 만드는 기능을 제공합니다.

---

Syntax (사용법)

const arr = ['a', 'b', 'c']
console.log(arr) // ['a', 'b', 'c']
console.log(...arr) // 'a' 'b' 'c'

//배열 병합
const arr2 = [1, 2, 3]
console.log([...arr, ...arr2]) // ['a', 'b', 'c', 1, 2, 3]

// 배열 복사
const clonedArr = [...arr]
console.log(clonedArr) // ['a', 'b', 'c']

---

배열 병합 및 추가

const arr = ['a', 'b', 'c']
const arr2 = [1, 2, 3]

arr.push('d');
arr.push('e');
▼
arr2 = [...arr2,'4','5'];
arr2 = ['4',...arr2,'5'];
arr2 = ['4','5',...arr2];

코드처럼 push를 써서 하나씩 밀어넣지 않고 배열의 구조를 가져와 추가하는 느낌으로 가능하다.

또한 3개의 예시처럼 어느 위치로도 배열 값을 추가할 수 있다.

const arr = ['a', 'b', 'c']
const arr2 = [1, 2, 3]

const beforeArr = arr.concat(arr2); // ['a','b','c',1,2,3]
▼
const AfterArr = [...arr, ...arr2]; // ['a','b','c',1,2,3]

spread 연산자를 쓰면 concat연산자를 대체가능하다. concat를 쓰면 한 배열에 다른 배열을 추가하는 느낌이라면 spread를 쓰면 동등한 두 배열을 합치는 느낌을 줘서 더 직관적이다.

---

 배열, 객체 복사

// 객체의 값을 복사하는 경우
let obj = {
  a: 10,
  b: 20
};
let newObj = {
  a: obj.a,
  b: obj.b
};
console.log(newObj); // {a: 10, b: 20}

// 배열의 값을 복사하는 경우
let arr = [1,2,3];
let newArr = [arr[0], arr[1], arr[2]]; // [1, 2, 3]
▼

let afterObj = {...obj};
let afterArr = [...arr];

기존의 객체,배열을 복사하는 방법이었다. arr[0]등의 요소에 직접 달라붙어서 하나씩 해야하는 귀찮음이 있었는데 spread 연산자를 쓰게 되면 아주 간단히 깊은 복사가 가능하다.

let arr = [1,2,3];
let afterArr = [...arr];
console.log(arr===afterArr) // false

하지만 코드로 보듯이 둘은 같지 않습니다.(같은 참조가 아님). 

---

 값 넘기기

function sum(a,b,c) {
	return a+b+c;
}

let arr = [100,200,300];
sum(arr[0],arr[1],arr[2]); // 600
sum.apply(null, arr); // 600
sum(...arr); // 600

파라미터를 받아서 합계를 주는 sum 함수가 있다.

처음에는 배열의 인덱스로 각각 접근해서 값을 넘겨주는 방식었고,

그다음에는 apply를 이용한 방법, 

마지막으로는 spread 를 이용한 방법입니다. 딱 봐도 간단하다.