Javascript & spread 연산자

Javascript & The spread operator

출처 : codeburst.io, Brandon Morelli

해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다.

이게 무엇처럼 보이나? 점 세개 : . . .

이것은 무엇일까? spread 연산자는 여러개의 elements / variables / arguments가 예상되는 곳에서 표현식을 확장시켜준다.

몇가지 예시를 통해 spread 연산자가 정확히 무엇인지 알아보자.

 

1. middle 이라는 배열을 만든다.
2. middle 배열을 포함하는 두번째 배열을 만든다. 
3. 결과값을 기록한다.

var middle = [3, 4];
var arr = [1, 2, middle, 5, 6];

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

위 예시에서 우리는 spread 연산자를 사용하지 않았다. 이렇게 함으로써 arr 배열이 만들어질 때 middle 배열은 배열의 내부 배열로 arr 배열에 삽입되었다. 

 

그러나 만약 우리가 하나의 배열만을 만들고자 한다면 어떨까?

 

이때, spread 연산자를 사용할 수 있다. spread 연산자는 배열의 elements들이 확장될 수 있도록 한다. 아래 코드를 보자. spread 연산자를 사용했다는 것을 제외하면 위 예제코드와 동일한 코드이다.

var middle = [3, 4];
var arr = [1, 2, ...middle, 5, 6];

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

여기서 우리는 arr 배열을 만들고 여기에 그냥 middle 배열을 넣지않고 spread 연산자를 사용하여 middle 배열을 expands 했다. middle 배열의 각 요소들은 arr 배열에 들어가게 되었다. 이것은 배열을 중첩시키는 대신 1부터 6까지의 숫자를 단순히 배열의 요소로 만들었음을 의미한다. 

 

 

Slice

자바스크립트에서 slice()는 배열들을 복사할 수 있도록 한다. spread 연산자를 사용하여 배열을 복사하는 것과 비슷한 효과가 있다. 

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

console.log(arr2);
// ['a', 'b', 'c']

우리는 배열을 복사했다. arr 배열의 value들은 개별 문자들로 expanded 된 다음 arr2에 할당 되었다. 우리는 이제 arr 배열에 영향을 주지 않고 arr2 배열을 변경할 수 있다 .

 

이것이 가능한 이유는 arr의 value가 arr2 배열을 정의하는 괄호를 채우도록 expand 되었기 때문이다. 그러므로 우리는 arr2를 arr 배열 그 자체가 아닌 arr의 value들과 같게 만들었다. 

 

spread 연산자를 사용하지 않으면 어떻게 동작하는지 확인하면 이것을 이해하는데 도움이 될 것이다. 

 

아래 코드는 만약 우리가 단순히 배열을 만들고 다들 배열을 새로 만든 배열과 같게 만들었을 때이다. 

var arr = ['a', 'b', 'c'];
var arr2 = arr;

console.log(arr2);
// ['a', 'b', 'c']

이 예제를 보면 아마 이전에 위에서 봤던 예제코드와 동일하다고 말할 수 있을 것이다. 

위 예제들은 똑같아 보이지만 그 내부를 살펴보면 아주 다르다는 것을 알 수 있다. 

arr2.push('d');

console.log(arr2);
// ['a', 'b', 'c', 'd']

console.log(arr);
// ['a', 'b', 'c', 'd']

여기서는 우리가 arr2에 어떤 작업을 실행하면 arr 배열에도 동일하게 적용되는 것을 알 수 있다. 

즉, arr2 배열이 본래의 arr 배열에도 영향을 미친다는 것을 의미한다. 

우리는 본래의 arr 배열에 어떤 값도 추가하지 않았지만 새로운 value d가 arr 배열의 끝에 추가되었음을 알 수 있다. 

 

 

 

Concat

배열들을 결합시키기 위해 concat()을 사용하는 대신 우리는 spread 연산자를 사용할 수 있다. 우선 concat()을 사용하면 어떤 일이 일어나는지 확인해보자.

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];

arr1 = arr.concat(arr2);
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

이제 spread 연산자를 사용해보자.

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];

arr = [...arr, ...arr2];
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

완전히 똑같은 결과값이 나오게 된다. 각 배열은 새로운 arr 배열에 배열 값들을 주기 위해 expand 되었다. 

 

Mitch Faatz 는 이것이 가장 좋은 예시는 아니라고 지적했다. 그는 test를 통해 spread 연산자를 사용하면 concat을 사용할 때보다 작업속도가 3배만큼 느려지는 것을 확인했다. 큰 규모의 data set에서는 spread 연산자를 사용하는 것이 좋지 않다. 

 

 

 

Math

우리는 math 함수 또한 spread 연산자와 함께 사용할 수 있다. 예시에서 우리는 Math.max()를 사용할 것이다. 

Math.max()는 0과 다른 숫자들 가운데 가장 큰 값을 출력해준다.

Math.max();
// -Infinity

Math.max(1, 2, 3);
// 3

Math.max(100, 3, 4);
// 100

spread 연산자 없이 math.max()를 사용하는 가장 쉬운 방법은 배열에서 .apply()를 사용하는 것이다.

var arr = [2, 4, 8, 6, 0];

function max(arr) {
  return Math.max.apply(null, arr);
}

console.log(max(arr));
// 8

 

그럼 이제 spread 연산자를 함께 사용하여 동일한 기능을 하는 코드를 작성해보자. Math.max()의 값을 출력하기 위해 함수를 만들고 apply method를 활용하는 대신 우리는 우직 두 줄의 코드를 사용할 것이다.

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);

console.log(max);
// 8

 

 

 

String to Array

보너스 예제 : spread 연산자를 사용하여 string을 배열의 character로 손쉽게 변환하기

var str = "hello";
var chars = [...str];

console.log(chars); 
// ['h', 'e',' l',' l', 'o']

Spread 연산자는 str string의 각 character들을 새로운 chars 배열에 할당한다.