ES6 분석: 스프레드 연산자

지난 주에 let 및 const 에 대해 작성하여 ES6에 도입된 새로운 도구를 분석하기 위해 이 블로그 시리즈를 시작했습니다. 이번 주에는 세 개의 연속 점으로 표현되는 스프레드 연산자에 대해 알아보겠습니다. … .

이 도구는 다양한 용도로 사용되며 중요한 몇 가지만 다루겠습니다. 그러나 이 게시물의 목적을 위해 객체에 대한 스프레드 연산자의 사용에 대해서는 논의하지 않을 것입니다. ES9까지는 도입되지 않았기 때문입니다.

자, 일단 들어가 보겠습니다.

배열 연결

JavaScript에서는 concat() 메서드를 사용하여 두 개 이상의 배열을 결합합니다. 이 방법을 사용하면 기존 배열이 변경되지 않고 새 배열이 반환됩니다.

let languages = ["JavaScript", "Ruby", "SQL"]
let frameworks = ["React", "Rails"]
let myStack = languages.concat(frameworks)

console.log(myStack) // ["JavaScript", "Ruby", "SQL", "React", "Rails"] 

이 방법을 미러링하고 concat() 대신 스프레드 연산자를 사용하여 동일한 결과를 얻을 수 있습니다.

let languages = ["JavaScript", "Ruby", "SQL"]
let frameworks = ["React", "Rails"]
let myStack = [...languages, ...frameworks]

console.log(myStack) // ["JavaScript", "Ruby", "SQL", "React", “Rails"]

참고: 이 경우 스프레드 연산자를 사용하는 것은 권장하지 않습니다. concat()를 사용하는 것이 비교적 빠르기 때문입니다.

배열 복사

한 배열을 다른 배열로 복사할 때, 즉 새 배열의 값을 기존 배열에 할당하는 경우 스프레드 연산자는 사용하기에 좋은 도구입니다. ES6과 스프레드 연산자가 도입되기 전에는 이 작업을 수행할 수 있었지만 작은 걸림돌이 하나 있었습니다. 새 어레이를 변경하려고 시도하면 원래 어레이에도 영향을 미칩니다.

let myStack = ["JavaScript", "Ruby"]
let myStack2 = myStack

console.log(myStack2) // ["JavaScript", "Ruby"]
myStack2.push("SQL")
console.log(myStack) // ["JavaScript", "Ruby", "SQL"]

스프레드 연산자를 사용하면 이 문제가 제거됩니다. 원래 어레이를 변경하지 않고 새 어레이를 안전하게 변경할 수 있습니다.

let myStack = ["JavaScript", "Ruby"]
let myStack2 = [...myStack]

console.log(myStack2) // ["JavaScript", "Ruby"]
myStack2.push("SQL")
console.log(myStack) // ["JavaScript", "Ruby"]

배열 확장

하나의 배열을 주어진 위치의 다른 배열에 삽입하는 것과 같이 배열을 확장하고 결과 배열을 평평하게 유지하기 위해 스프레드 연산자를 사용하려고 합니다. ES6 이전에는 배열을 확장하면 중첩 배열로 끝납니다.

let myStack = ["JavaScript", "Ruby"]
let techLanguages = ["Python", myStack, "Java"]

console.log(techLanguages) // ["Python", ["JavaScript", "Ruby"], “Java"]

다행히도 스프레드 연산자를 사용하면 중첩 배열을 만들지 않고도 배열을 쉽게 확장할 수 있습니다.

let myStack = ["JavaScript", "Ruby"]
let techLanguages = ["Python", ...myStack, "Java"]

console.log(techLanguages) // ["Python", "JavaScript", "Ruby", “Java"]

문자열을 배열로

Spread 연산자에 대한 한 가지 깔끔한 점은 문자열을 배열로 바꿀 수 있다는 것입니다. 머리로는 도저히 사용할 수 있는 좋은 사례가 생각나지 않지만 재미를 위해 이 작은 정보를 포함할 생각입니다.

let ruby = "Ruby"
let char = [...ruby]

console.log(char) // ["R", "u", "b", “y"]

수학

확산 연산자를 사용하면 Math 개체 메서드에 배열을 배치할 수 있습니다. 스프레드 연산자를 사용하지 않으면 출력은 NaN 가 됩니다.

let nums = [1, 2, 5, 9]

Math.max(nums) // NaN

스프레드 연산자를 사용할 때 배열의 내용을 배열 대신 숫자 목록으로 읽을 수 있습니다.

let nums = [1, 3, 5, 7, 9, 11, 13]

Math.max(…nums) // 13

마지막 생각들

스프레드 연산자의 모든 측면을 다루지는 않았지만 가장 널리 사용되는 몇 가지 사용 사례를 다루었습니다. 이 글을 읽는 분들을 위해 자유롭게 토론을 확장하고 스프레드 연산자의 다른 목적에 대해 언급하십시오.

출처

JavaScript | Spread Operator
6 Great Uses of the Spread Operator
A Simple Guide to Restructuring and ES6 Spread Operator
JavaScript ES6 - The Spread Syntax (…)
Spread Syntax
[ ECMAScript - Object Rest/Spread Properties in ES2018 (ES9)