Javascript에서 세 개의 점(...) 또는 스프레드 연산자는 무엇입니까?

스프레드 연산자, 스프레드 구문 또는 3점(...)은 함수 호출과 배열/객체 모두에서 사용되는 Javascript의 구문 유형입니다. 다양한 용도로 사용할 수 있으므로 실제 Javascript 코드에서 스프레드 구문을 사용하는 방법을 살펴보겠습니다.

함수 호출에서

Javascript 함수 호출에서 3개의 점을 사용하여 배열을 함수의 인수 집합으로 변환할 수 있습니다. 예를 들어 보겠습니다. 아래에서 배열은 x , y , z 및 a 의 값으로 변환됩니다.

let numbers = [ 1, 2, 3, 4 ];

let myFunction = function(x, y, z, a) {
    return x + y + z + a;
}

// Returns 10
myFunction(...numbers);

이는 다른 값과 결합될 수 있으므로 이전과 동일한 기능을 사용하여 다음도 유효합니다.

let numbers = [ 1, 2 ];

// Returns 15 (i.e. 5 + 7 + 1 + 2)
myFunction(5, 7, ...numbers);

new 로 생성자를 호출할 때도 사용할 수 있습니다. 예를 들면 다음과 같습니다.

let numbers = [ 1999, 26, 3 ];

let thisDate = new Date(...number);

어레이 병합

스프레드 구문을 사용하는 또 다른 유용한 방법은 배열을 병합하는 것입니다. 예를 들어, 두 개의 확산 구문을 사용하여 두 개의 개별 배열을 새로운 배열로 병합할 수 있습니다.

let x = [ 1, 2, 3 ];
let y = [ 4, 5, 6 ];

// Returns [ 1, 2, 3, 4, 5, 6 ]
let newArray = [ ...x, ...y ];

이전과 마찬가지로 이것을 다른 값과 결합해도 여전히 동일한 결과를 얻을 수 있습니다.

let x = [ 1, 2 ];

// Returns [] 4, 5, 1, 2 ]
let newArray = [ 4, 5, ...x ];

개체 병합

마지막으로 스프레드 구문을 사용하여 개체를 병합할 수 있습니다. 아래 예에서는 키/값 쌍이 있는 두 개체를 하나의 개체로 병합합니다.

let obj1 = { name: "John" };
let obj2 = { age: 114 };

// Returns { name: "John", age: 114 }
let newObj = { ...obj1, ...obj2 };

두 개체를 병합하려고 하는데 중복 키가 있는 경우 아래와 같이 두 번째 개체가 우선 순위를 갖고 첫 번째 개체를 덮어씁니다.

let obj1 = { name: "John" };
let obj2 = { name: "Jake" };

// Returns { name: "Jake" }
let newObj = { ...obj1, ...obj2 };

이것이 바로 확산 구문이 작동하는 방식입니다. 배열을 사용하여 함수를 쉽게 실행할 수 있고 개체와 배열을 병합하는 데 적합합니다. 이 페이지 하단에서 더 많은 Javascript 자습서를 찾을 수 있습니다.