JavaScript 관련 글입니다.

• JS Event Loop, 자바스크립트 동작 원리
• 호이스팅이란 , var, let, const 차이
• Three.js에 대해
• script, script async, script defer의 차이
• AJAX가 무엇일까?
• 함수선언식과 함수표현식
• null과 undefined의 차이 간단정리
• setTimeout과 setInterval 요약
• this의 여러가지 의미
• Spread Operator(...)?
• JS class Constructor
• ES6 Destructuring Syntax
• default 파라미터 알아보기
• import / export 를 사용한 모듈식 개발방법
• Optional Chaining (?.)
• 프로미스(Promise)에 대해서
• ES8 - async / await
• Symbol 자료형?
• forEach, for in, for of 알아보기
• JSON형식 변환 방법 - JSON.parse(), JSON.stringify()
• 자바스크립트 가비지 컬렉션
• 화살표 함수와 일반함수의 차이
• JavaScript Array.reduce() 간단히 알아보기

이번 글에서는 Spread Operator(스프레드 연산자)에 대해서 정리해보도록 하겠습니다.

… 의 활용

…은 상황에 따라 2가지로 활용될 수 있습니다.

1. Rest parameter
2. Spread Operator

첫번째로 Rest 파라미터로 사용되는 경우입니다. 이 경우는 함수 파라미터에 ‘…‘이 붙는 경우에 사용됩니다. 그 나머지 경우는 Spread Operator로 사용됩니다. 이번 글에서는 Spread Operator만 다뤄볼 것입니다.

Spread Operator

const arr = [1,2,3];

console.log(...arr);

위처럼 ‘…‘을 붙여서 사용하면 Array안의 요소가 모두 출력됩니다. 괄호가 제거된다고 생각해도 무방할 것 같습니다.

const word = 'apple';

console.log(...word) ;

문자에서도 …을 앞에 붙여줄 수 있는데, 이렇게 되면 한글자씩 해체가 됩니다. (a p p l e)

활용

보통 Spread Operator는 Array나 Object를 합치거나 그대로 복사하고 싶을 때 사용합니다.

const a = [1,2];
const b = [3,4,5];
const sum = [...a, ...b];

console.log(sum);

Array a와 Array b가 있을 때, sum이라는 새로운 Array를 위처럼 만들 수 있습니다. 출력해보면 Array sum은 ‘[1,2,3,4,5]’ 가 출력이 됩니다. 이렇게 두 개를 합치는 경우에 사용할 수 있고…

const arr1 = ['a','b','c'];

const arr2 = [...arr1];

이렇게 그대로 복사하는 경우에도 사용할 수 있습니다. 그냥 arr2 = arr1하면 되는 거 아닌가? 할 수 있지만, Array나 Object는 reference data type이기 때문에 arr1이 변경되었을 때 arr2도 같이 변경되기 때문에 직접적으로 복사하면 영향을 받습니다.

마지막으로 함수 파라미터를 넣을 때 사용하기도 합니다.

function sum(a,b,c,d) {
    console.log(a + b + c + d);
}

const arr = [1,2,3,4];
sum(arr[0],arr[1],arr[2],arr[3]);

sum 함수에는 각 Array의 값들이 들어가고 있습니다. 그런데 만약 Array의 값들이 엄청 많다면 일일히 인자로 넣는 것는 힘들고 귀찮습니다. 그래서 다음과 같이 간단하게 사용할 수 있습니다.

sum(...arr);

이렇게 Spread Operator를 사용하면 간편해집니다.

End.