TIL 17 | JavaScript Spread operator(전개 연산자)

Spread operator

• ES6에 추가되었으며 배열, 문자, 객체 등 반복 가능한 객체를 개별 요소로 분리하는 기능을 가진 문법이다. (반복 가능한 객체는 찾아봐도 잘 이해가 ..., 예제를 통해 이해하는게 더 빠른거 같다 ..)

• 참고: [ES6] Spread Operator (스프레드 연산자), 전개 구문 MDN

How to use it?

const num1 = [1, 2, 3];
console.log(...num1) // 1 2 3
const num2 = [4, 5, 6];
console.log(...num2) // 4 5 6
const num3 = [...num1, ...num2];
console.log(num3) // [1, 2, 3, 4, 5, 6]

• 사용법은 원하는 값 앞에 ... 를 붙여 사용하며 위 예제처럼 단순히 요소를 변환하여 출력하거나 연결, 병합, 복사 등 다방면으로 응용할 수 있다.

배열에서의 Spread operator

1. 배열 병합

const num1 = [1, 2, 3];
const num2 = [4, 5, 6];

const num3 = num1.concat(num2)
console.log(num3) // 

	⬇

const num3 = [...num1, ...num2];
console.log(num3) // [1, 2, 3, 4, 5, 6]

• 기존에 배열을 병합하기 위해서는 concat() 메소드를 사용하였지만, 전개 연산자를 사용했을 경우 위처럼 깔끔(?)하게 작성이 가능해진다.

const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = ['사과', ...num1, ...num2, '바나나', '딸기'];
console.log(num3) // ["사과", 1, 2, 3, 4, 5, 6, "바나나", "딸기"]

• 또한 배열 중간에 요소를 삽입할 수 있는 splice() 메소드 대신 적용하여 간결하게 코드를 작성할 수 있다.

2. 배열 복사

const num1 = [1, 2, 3];
const num2 = [...num1];
//
console.log(num2); // [1, 2, 3]
//
num2[0] = 10;
//
console.log(num1); [1, 2, 3] //num2의 값을 바꿔도 데이터 변동X (복제 ok)
console.log(num2); [10, 2, 3]

• 전개 연산자를 통해서 concat(), slice() 메소드처럼 참조 복사가 아닌, 데이터의 복제를 할 수 있다.

객체에서의 Spread operator

1. 객체 복사

const person1 = { name: '철수', age: 10 };
const person2 = {...person1}
//
console.log(person2) // {name: "철수", age: 10}
//
person2.age = 20
//
console.log(person1) // {name: "철수", age: 10} (person2의 데이터를 변경해도 변동 X)
console.log(person2) // {name: "철수", age: 20}

• 전개 연산자를 통해서 객체의 assign() 메소드처럼 참조 복사가 아닌, 데이터의 복제를 할 수 있다. 다만 다음과 같은 점을 주의해야 한다.

const person1 = { name: '철수', age: 10, hobby: { sports: `soccer` } };
const person2 = { ...person1 };
//
console.log(person1);// { name: '철수', age: 10, hobby: { sports: `soccer` } };
console.log(person2);// { name: '철수', age: 10, hobby: { sports: `soccer` } };
//
person2.hobby.sports = 'basketball';
//
console.log(person1);//{ name: '철수', age: 10, hobby: { sports: `basketball` } };
console.log(person2);//{ name: '철수', age: 10, hobby: { sports: `basketball` } };

• 위 예제를 기준으로 person2 내부 또다른 객체인 hobby의 sports property를 수정하였더니 person1의 데이터 까지 변경되었다.

• 결론적으로 객체 내부 또다른 객체의 프로퍼티값까지는 완벽하게 복제되지 않는 것이다. 이렇게 데이터가 복제되는 것을 얕은 복사라고 한다. 배열 또한 마찬가지로 적용된다. (object.assign()도 깊은 복사인줄 알았더니, 얕은 복사라고 한다 ...)

✔얕은 복사와 깊은 복사에 대해서는 공부를 좀 더 한 후 정리해봐야겠다.

함수에서의 Spread operator

1. Rest parameter

function num(...nums) {
  console.log(nums);
}
num(1,2,3,4,5) //  [1, 2, 3, 4, 5]  (배열 형태로 값이 전달됨을 알 수 있다.) 

function print(...nums) {
  for (const element of nums) {
    console.log(element);
  }
}
print(1, 2, 3, 4, 5); // 1, 2, 3, 4, 5 (for..of문 적용)

function multiple2(...nums) {
  for (let i = 0; i < nums.length; i++) {
    const result = i * 2;
    console.log(result);
  }
}
multiple2(1, 2, 3, 4, 5); // 0, 2, 4, 6, 8 (for loop 적용)

• 함수를 선언할 때, 매개변수를 연산자 형태로 작성한 것을 Rest parameter이라고 한다.

• 위 예제들을 통해 매개 변수들이 연산자 형태로 전달할 경우, 배열 형태로 값이 전달됨을 알 수 있다.

function person(name, ...money) {
  console.log(name, money);
}
person('yongmin', '가', '나', '다'); // yongmin ["가", "나", "다"]

• 위처럼 또다른 인자와 같이 사용할 수 있다.

• 단!!! 주의점으로, Rest parameter는 항상 제일 마지막에 위치해야 한다.
  ex) function(para, ...arg){} -> OK, function(...arg, para) -> X