[자바스크립트] 점 3개 ... : Rest파라미터, 스프레드 문법, 객체 스프레드 프로퍼티

Rest파라미터, 스프레드 문법는 점(dot) 세개를 연달아 사용하는 문법이다.

 

비슷하게 생겼지만, 이 둘은 완전히 다른 용도로 사용된다.

(참고로 스프레드 프로퍼티는 객체용 스프레드 문법이다)

 

 

1. Rest파라미터

=> 함수에 매개변수를 여러개 전달할 때 주로 사용!(매개변수 갯수를 모를 때)

 

- 사용 형식:  function( ...매개변수 ) { 코드 } 

- 작동 방식: 함수의 매개변수에 사용하며,  여러개의 인수를 전달 받아 배열로 변환한다.

- 예제 코드

function printItems(...items){ // item은 여러개의 인수를 받는다.
    console.log(items);
}

printItems('첫째', '둘째', '셋째');  // [ '첫째', '둘째', '셋째' ] 배열 출력

 

- 주의사항 #1: 다른 매개 변수와 함께 사용할 경우, Rest파라미터는 반드시 마지막에 사용해야 한다.

function printNums(first, second, ...nums){ // rest 파라미터는 마지막 매개변수로 사용.
    console.log(first, second, nums);
}

printNums(1, 2, 100, 200, 300) // 1 2 [ 100, 200, 300 ]

 

- 주의사항 #2: Rest파라미터는 하나만 사용 가능하다.(여러개 사용 불가)

function printNames(...first, ...second){ // 에러: Rest파라미터는 1개만 사용 가능!!!
    console.log(first, second);
};

printNames('a', 'b', 'c', 'd', 'e');
// SyntaxError: Rest parameter must be last formal parameter

 

 

2. 스프레드 문법

=> 1) 함수의 매개변수로 배열 전달! 2)배열의 '값'만 복사! 3)배열 여러 개를 병합할 때 주로 사용!

 

- 사용 형식:  ...이터러블 

   * Iterable이란? Array, String, Map, Set, HTMLCollection, NodeList 등 이터러블 형식에 맞는 순회 가능한 자료구조

- 작동 방식: 이터러블의 요소를 하나씩 뽑아서 목록으로 반환

- 사용 영역: 쉼표(,)로 구분되는 영역에서만 사용 가능

  1) 함수 호출시, 매개변수로 사용

  2) 배열 생성시, 배열의 요소로 사용

- 예제 코드: 코드를 보면 쉽게 이해할 수 있다.

// 1. 함수의 매개변수로 사용
console.log(...[10, 20, 30]); // console.log(10, 20, 30)으로 변환되어 실행됨



// 2-1. 배열의 요소로 사용(여러개 배열 붙이기)
const arr_concat = [...[10, 20, 30], ...[100, 200, 300]]; // [10, 20, 30, 100, 200, 300] 으로 변환됨



// 2-2. 배열의 값만 복사(주소 복사X)
const arr = [10, 20, 30];

const arr_copy = [...arr]; // 스프레드 문법으로 arr의 값만 복사(주소 복사X)

arr[0] = 100; // 원본의 요소 값 변경

console.log(arr); // [ 100, 20, 30 ]
console.log(arr_copy); // [ 10, 20, 30 ]

 

특히 2-2 처럼 사용하면,

배열을 복사할 때 참조 주소값이 아니라, 값만 복사하기 때문에! 별도의 배열로 복사해서 사용할 수 있다.

 

- 주의 사항: .스프레드 문법의 결과는 "값"이 아니라 "목록"이다. 따라서 변수에 할당이 불가하다.

// # 주의: 스프레드 문법은 '값'이 아니므로, 그 자체로 변수에 할당 불가
const val = ...[10, 20, 30]; // 에러발생: 변수 할당 불가!

 

 

3. 스프레드 프로퍼티

- 스프레드 문법은 객체(Object)에서도 사용이 가능 하다.

- 단, 최근에 추가된 문법이라 환경에 따라 작동하지 않을 수 있다.

const obj = {a: 1, b: 2};


// 1. 객체 복사
const obj_copy = {...obj};
console.log(obj_copy); // { a: 1, b: 2 }



// 2. 객체 합치기(병합)
const obj_merge = { x: 1, y: 2, ...obj};
console.log(obj_merge); // { x: 1, y: 2, a: 1, b: 2 }

---

Rest파라미터와 스프레드 문법을 이용하면,

효율적으로 코드를 작성할 수 있을 뿐만 아니라, 가독성도 좋아지는듯 해서 많이 사용하고 있다.

 

도움이 되시길...(스프레드 문법 아님 ㅋㅋ)