[JavaScript][es6] Rest Parameter, Spread Operator, ... (rest 파라미터, spread 연산자, ...연산자)

...

JavaScript에서 점 세개 ...라는 재밌는 문법이 존재한다.

일상 생활에서 "..."는 축약 또는 함축의 의미로 쓰인다.
예를들면 음... , etc... 등등....🤔

재미있는 사실은, 이 ...의 의미가 JavaScript라는 언어에서도 거의 비슷하게 쓰인다는 것이다.
정말 간단한 문법이지만, 생각보다 쓰임이 많아 포스팅해두려 한다.
.
.
.

---

📝1. Spread Operator (Spread 연산자)

*Spread : 확산, 퍼짐, 전개

Spread 연산자로써 ...를 사용하면 연산 대상의 Array, String, Map, Set, DOM 등 이터러블을 개별 요소로 분리(전개)한다.
즉, [대괄호]든 '따옴표'든... 뭐든간에 이터러블 객체라면, 개별 요소를 둘러싸고 있는 껍질을 벗겨버린다는 소리이다.

Spread Operator 사용방법

/* Array */
...[a,b,c]  // a, b, c
...[1,2,3]  // 1, 2, 3

/* String */
...'keynene'  //k e y n e n e

/* Map */
...new Map([['a', 'b'], ['1', '2']])  // ['a', 'b'] ['1', '2']

/* Set */
...new Set([1,2,3,4,5])  // 1 2 3 4 5

/* 이런 연산도 가능함 */
let arr = [1,2,3]
let arr2 = [...arr, 4,5] //[1,2,3,4,5]

📌 Spread Operator는 Array 자료의 원본데이터를 유지하면서 새로 가공할 때 주로 사용된다.

일반적으로 프로젝트에서 데이터 통신 시 원본 데이터를 주고 받는데, 이를 변수에 저장한 후 저장한 데이터를 수정해버리면 예상치 못한 에러를 겪을 수도 있다.

이러한 상황을 얕은 복사로 인한 오류라고 한다.

❌ 얕은 복사로 인한 데이터 오류

let data = { num : 1 };  //원본데이터

let data2 = data;  //원본데이터를 얕은 복사한 data2
data2.num = 2;  //data2의 num값만 2로 변경

console.log(data.num); // 2
console.log(data2.num); // 2

우리는 data2의 num값만 2가 되길 기대했지만,
원본데이터인 data의 num값도 2가 되어버린 것을 확인할 수 있다.

바로 data2 = data 이 과정에서 num : 1이라는 값이 아닌, data의 주소가 복사되어서
data2.num과 data.num은 결과적으로 같은 주소를 가리키고 있기 때문에
data2.num을 변경하면 data.num이라는 원본 값도 함께 바뀌어버리는 것이다.

이런 상황을 방지하기 위해 데이터를 새로운 변수에 깊은 복사(Deep Copy)를 해서 가공하는 방법이 가장 선호되는데, 깊은 복사를 비교적 손쉽게 하는 방법이 바로 Spread Operator이다.

⭕ Spread Operator를 사용한 깊은 복사

let data = { num : 1 };  //원본데이터

let data3 = { ...data };  //원본데이터를 깊은 복사한 data3
data3.num = 3  //data3의 num값만 3으로 변경

console.log(data.num); // 1
console.log(data3.num); // 3

이제 우리가 기대한대로 data3.num값만 변경된 것을 확인할 수 있다.

정확히는 let data3 = { ...data }이 과정에서 ...data는 num : 1이라는 개별 요소만 남기 때문에
이 값을 다시 중괄호안에 {num : 1} 넣어서 저장해주면서 원본데이터의 주소가 아닌 값이 저장되는 원리이다.

---

📝2. Rest Parameter (Rest 파라미터)

Rest Parameter는 위에서 소개한 Spread Operator를 함수의 파라미터안에 넣은 형태를 말한다.
함수의 파라미터 개수를 책정할 수 없는 경우 사용하고, 함수의 파라미터로 오는 값들을 Array로 전달 받는다.

function 예를들어(...파라미터여러갠데) 이 함수를 사용할 때,
예를들어(1,2,3,4,5), 예를들어(6,7) 이렇게 파라미터 개수를 마음대로 전달할 수 있다는 소리다.

이렇듯 Spread Operator보다 더 일상 생활에서의 ...같이 사용한 문법이 바로 Rest Parameter라고 생각된다.

Rest Parameter 사용방법

function restParameter(...x){
  console.log(Array.isArray(x));  //true
  console.log(x);  // 파라미터에 따라 다름
}

restParameter(1,2,3);  // [1,2,3]
restParameter(4,5);  // [4,5]
restParameter(6,7,8,9,10);  // [6,7,8,9,10]

📌 하지만 Rest Parameter는 함수의 파라미터가 많은 경우 가장 마지막에 입력해야한다.

예를들어 function rest(...x, param1, param2) 이렇게는 사용이 불가능하다.

function manyParameter(num, ...x){  //가장 마지막 파라미터로 받아야 함
  console.log(num);  // 1
  console.log(x);  // [2,3,4,5] 
}

manyParameter(1,2,3,4,5);

---

📚 ...

JavaScript에서의 ...는 일상 생활에서의 "..."과 많이 쓰임이 비슷하지만,

1. Spread Operator → 전개의 의미, 개별요소를 분리해줌 (괄호를 벗겨줌)
2. Rest Parameter → 취합의 의미, 몇 개인지 모를 파라미터를 하나의 Array로 묶어줌 (대괄호로 묶어줌)

이렇게 전혀 다르게 사용할 수 있다는 것도 신기하고 재미있었다.

하지만

1. 코드의 가독성을 높이고
2. 원본데이터를 안전하게 보관하고 사본데이터를 관리할 수 있다는 점과(Spread)
3. 애매한 환경에서 데이터를 하나로 관리할 수 있다는 점(Rest)에서

유연한 JavaScript의 단점이 간단한 키워드인 ...사용만으로 엄격하게 데이터를 관리하게 됨으로써 조금이나마 해소된다는 공통점도 있었다.
코딩은 뭐든간에 유연한 것보다 엄격한 편이 오류를 줄여주니까... (ex. 타입스크립트)

그런 의미에서 Spread Operator와 Rest Parameter를 타입스크립트에서 타입지정하는 방법도 추후에 포스팅 해보려 한다.

.
.
.