[JS ES6]-[10] Spread Operator(전개 연산자) 핵심만 이해하기

안녕하세요

이번 글에서는 자바스크립트에서의  Spread Operator(전개 연산자) 핵심만 알려드리겠습니다.

 

썸네일

1. 사용이유와 사용방법

1.1 사용이유

spread 뜻은 펼친다는 뜻을 가지고 있습니다.

spread operator은 그냥 데이터를 펼치는 연산자 라고 생각하면 되는데요

배열, 객체, 문자열에서 데이터를 펼쳐줍니다.

1.2 사용방법

사용방법은 마침표 3개 연달면 됩니다. “…”

 

2. 사용 예시 (배열, 문자열)

2.1 배열

var ages = [10, 11];
console.log(ages);  //[10, 11]
console.log(...ages)  //10, 11

배열 안에 요소들을 …을 이용해서 찍으면

괄호 안에 있는 데이터가 펼쳐 저서 나오는 걸 볼 수 있습니다.

 

2.2 문자열

var name= 'kim';
console.log(name)  //kim
console.log(...name)  //k i m

문자열 각각의 값이 펼쳐져서 나옵니다.

자바스크립트에서 문자열은 문자들의 집합인데, … 을 사용하여,

문자열을 배열로 변환 후 배열의 각 요소를 개별적으로 출력하게 됩니다.

console.log(’k’, ‘i’, ‘m’) 이랑 같다고 보면 되죠.

 

3. 응용하기

3.1 배열 합치기/ 복사하기

3.1.1 배열 합치기

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged_arr = [...arr1, ...arr2];  

console.log(merged_arr)  //[1, 2, 3, 4, 5, 6]

arr1의 데이터와 arr2의 데이터를 펼쳐서 한 배열에 넣어서 합쳤습니다.

 

3.1.2 배열 복사하기

…연산자를 이용하지 않더라도 배열을 복사할 순 있습니다.

const original_arr = [1, 2, 3];
const copied_arr = original_arr;

console.log(original_arr);  //[1, 2, 3]
console.log(copied_arr); // [1, 2, 3]

근데 이렇게 등호로 복사를 하면,

각각 값을 가지지 않고 값을 공유하게 됩니다.. (배열은 refrence type이어서 그렇습니다.)

그래서 copied_arr를 수정하면, original_arr도 바뀌게 됩니다.

 

값을 공유하지 않고 각 변수가 독립적인 값을 가지게 하고 싶다면 Spread Operator를 사용하면 되죠.

const original_arr = [1, 2, 3];
const copied_arr = [...original_arr];

console.log(original_arr);  //[1, 2, 3]
console.log(copied_arr); // [1, 2, 3]

original_arr의 값을 펼쳐서 copied_arr에 집어넣습니다.

이러면 안의 요소들을 펼쳐 새 배열을 만든 거 기에, 값 공유가 일어나지 않습니다.

 

3.2 객체 병합하기

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged_obj= { ...obj1, ...obj2 };

console.log(merged_obj); // { a: 1, b: 2, c: 3, d: 4 }

배열 병합과 비슷하게, 객체 안의 요소들을 풀어 한 객체 안에 담았습니다.

 

3.2.1  a, b, c 값만 필요하다면?

전개연산자를 응용해서 병합하면 됩니다.

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, ...obj1 };

console.log(obj2); // { a: 1, b: 2, c: 3}

 

3.2.2  같은 key값이 있다면?

중복이 생기면 뒤에 오는 값으로 덮어씌워집니다.

const obj1 = { a: 1, c: 2 };
const obj2 = { c: 3, ...obj1 };

console.log(obj2); // { a: 1, c: 3}

 

3.3 함수 인자 전달

내가 배열 안에 있는 요소를 함수에 파라미터 값으로 전부 넣고 싶으면,

하나하나 요소를 넣어줬어야 했습니다.

function sum(a, b) {
  return a + b;
}

const numbers = [1, 2];
const result = sum(numbers[0], numbers[1]);

console.log(result); // 6

 

위에 방법이 귀찮으면 spread 연산자를 사용하면 됩니다.

function sum(a, b) {
  return a + b;
}

const numbers = [1, 2];
const result = sum(...numbers);

console.log(result); // 6

배열 안의 요소들을 잘 풀어서, 인자값으로 넣어줍니다.