[Javascript] 스프레드 연산자(spread operator), 레스트 매개변수(rest parameter)

스프레드 연산자(spread operator)

• 0개 이상의 인수 (함수 호출용) 또는 원소(배열 리터럴용)가 예상되는 위치에서 배열 표현식이나 문자열과 같은 이터러블 항목을 확장하거나 0개 이상의 키/값 쌍(객체 리터럴용)이 예상되는 위치에서 객체 표현식을 확장 가능
• ES6이상 사용 가능

/* [구문] */
[...배열 또는 문자열]

// 반환
object

---

스프레드 연산자 활용

1. 배열의 결합

• 스프레드 문법을 활용하여 배열 결합 가능

const list1 = ['a', 'b', 'c'];
const list2 = ['e', 'f', 'g'];
const total = [...list1, ...list2];
console.log(total); // ⇒  [ 'a', 'b', 'c', 'e', 'f', 'g' ]

const str = 'string';
const newStr = [...str];
console.log(newStr); // ⇒[ 's', 't', 'r', 'i', 'n', 'g' ]

2. 배열의 복사

• 스프레드 문법을 활용한 배열의 복사본 생성하여 별도로 관리할 수 있음
• 복사된 배열과 기존 배열의 데이터는 별도 관리 됨
• 스프레드 문법의 경우 얕은 복사에 해당하지만 얕은 복사의 경우 새로운 배열을 생성하면 값이 변경되더라도 원본 데이터가 변경되지 않음 (얕은 복사 참고)

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

// 단순히 변수 이름으로 새로운 배열을 생성할 경우 참조에 의한 복사를 수행하여 배열의 데이터가 같이 관리됨
const refCopy = list;
list.pop('c');
console.log(list); // ⇒ [ 'a', 'b' ]
console.log(refCopy); // ⇒ [ 'a', 'b' ]

/* 스프레드 문법 활용 */
const list2 = [...list];
list.push('c');
console.log(list); // ⇒ [ 'a', 'b', 'c' ]
console.log(list2); // ⇒  [ 'a', 'b']

2024.01.31 - [JS/Javascript] - [Javascript] 배열과 객체 복사

[Javascript] 배열과 객체 복사 (얕은 복사, 깊은 복사)

 

3. 함수 호출

• 인수들을 원소로 가지는 배열에 스프레드 연산자를 사용하여 함수를 쉽게 호출 가능

// 이전 방식
function anyfunc(a, b, c) {
  console.log(a + b + c);
}
var args = [1, 2, 3];
anyfunc.apply(null, args); // 주어진 this값과 배열이나 유사배열객체에서 제공되는 arguments로 함수 호출
anyfunc(...args); // ⇒ 6
console.log(args); // ⇒ [ 1, 2, 3 ]

//스프레드 문법을 활용한 함수 호출
const list = ['a', 'b'];
function listFunc(first, last) {
  console.log(`${first},${last}`);
}

listFunc(...list); // ⇒ a, b

 

 

4. 객체 리터럴과 스프레드(ES2018)

let person = {
	name: 'john',
	age: 20
}

let person2 = {...person}
console.log(person2); // ⇒ { name: 'john', age: 20 }

---

레스트 매개변수 (rest parameter)

• 여러 개의 원소를 하나의 원소로 압축
• ...로 표현

const  list = ['a','b','c','d','e']
const [one, two, ...three] = list
console.log(...three); // ⇒ c d e