[Javascript] spread 문법

📚 오늘은 코딩테스트 연습문제 풀다가 spread 문법을 활용하면 더 좋은 코드를 작성할 수 있다는것을 알고 스프레드 문법에 대해 조금 더 자세히 공부하고자 velog에 작성해본다.

스프레드 문법??
ES6에서 도입된 스프레드 문법(전개문법) ...은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서
개별적인 값들의 목록으로 만든다.

1. Spread Operator(스프레드 연산자, 펼침 연산자)라고 한다.
2. 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 Iterable Object를
   개별 요소로 분리할 수있다.
3. 스프레드 문법을 사용할 수 있는 대상은 for of 문으로 순회 가능한 이터러블에 한정된다.

---

console.log(...[1,2,3]) // 1 2 3
/* ...[1,2,3]은 [1,2,3]을 개별 요소로 분리한다. -> 1, 2, 3 */


const string = "JAVASCRIPT";
console.log(...string); // J A V A S C R I P T
/* 문자열은 이터러블이다. */

const object = {a:1, b:2, c:3}
console.log(...object);
/* TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function
이렇게 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다. */

/* 이와 같이 ...[1, 2, 3]은 이터러블인 배열을 합쳐서 요소들을 개별적인 값들의 목록 1 2 3으로 만든다. 
1 2 3은 값이 아니라 값들의 목록이다.스프레드는 값을 생성하는 연산자와 착각하면 안된다.
즉, 스프레드 문법의 결과는 값이 아니므로 변수에 할당이 불가하다. */

const list = ...[1,2,3]; 
// Uncaught SyntaxError: Unexpected token '...'

/* 이처럼 스프레드 문법의 결과물은 값으로 사용할 수 없고, 다음과 같이 쉼표로 구분한
값의 목록을 사용하는 문맥에서만 사용할 수 있다. */

---

✍ concat을 대체하여 스프레드 문법으로

const arr = [1, 2, 3]; 

console.log(arr.concat([4, 5, 6]));
// ES5에서는 concat을 이용하여 [4,5,6]을 arr뒤에 요소로 추가


const arr1 = [1, 2, 3]; 

console.log([...arr1, 4, 5, 6]); // [ 1, 2, 3, 4, 5, 6 ]
// ES6에서는 스프레드 문법을 통해 concat을 대체하여 arr1에 [4,5,6] 의 요소를 추가해주었다.

✍ splice를 대체하여 스프레드 문법으로

var arr1 = [1, 4];
var arr2 = [2, 3];

arr1.splice(1, 0, arr2);
console.log(arr2); // [1,[2,3],4]
/* 위의 코드로 [1, 2, 3, 4]를 만들고 싶었지만 [1,[2,3],4] 이렇게 나오게된다.
이때 스프레드 연산자를 통해 아래처럼 작성해주면 된다. */


var arr1 = [1, 4];
var arr2 = [2, 3];

arr1.splice(1, 0, ...arr2);
console.log(arr1); // [1, 2, 3, 4]

✍ slice를 대체하여 스프레드 문법으로

var array = [1, 2];
var copy = array.slice();

console.log(copy); // [1, 2]
console.log(array === copy); // false
/* 위의 코드와 아래 코드는 각 요소를 얕은 복사하여 새로운 복사본을 생성한다. */

var array = [1, 2];
var copy = [...array];

console.log(copy); // [1, 2]
console.log(array === copy); // false
/* 스프레드 문법을 사용하면 더욱 간결하고 가독성 좋게 표현할 수 있다. */