Spread 연산자:JavaScript의 Spread 작동 방법

확장 연산자(...는 하나의 문법으로iterables를 하나의 요소로 확장하는 데 도움이 된다.
spread 문법은 그룹 텍스트, 함수 호출, 초기화 속성 대상에서 사용되며, iterable objects 의 값을 단독 항목으로 분산시킵니다.

Note

A spread syntax is effective only when used within array literals, function calls, or initialized properties objects.

그렇다면 이것은 도대체 무엇을 의미하는 것입니까?예를 좀 봅시다.

배열 예시 1: 배열이 수조에서 어떻게 작동하는지

const myName = ["Sofela", "is", "my"];
const aboutMe = ["Oluwatobi", ...myName, "name."];

console.log(aboutMe);

// The invocation above will return:
[ "Oluwatobi", "Sofela", "is", "my", "name." ]

Try it on StackBlitz
위의 코드 세션은spread(...를 사용하여 myName 그룹을 aboutMe에 복사합니다.

Note

• Alterations to myName will not reflect in aboutMe because all the values inside myName are primitives. Therefore, the spread operator simply copied and pasted myName’s content into aboutMe without creating any reference back to the original array.

• As mentioned by in the comment section, the spread operator only does shallow copy. So, keep in mind that supposing myName contained any non-primitive value, the computer would have created a reference between myName and aboutMe. See info 3 for more on how the spread operator works with primitive and non-primitive values.

• Suppose we did not use the spread syntax to duplicate myName’s content. For instance, if we had written const aboutMe = ["Oluwatobi", myName, "name."]. In such a case, the computer would have assigned a reference back to myName. As such, any change made in the original array would reflect in the duplicated one.

정렬 예 2: 문자열을 하나의 배열로 변환하는 방법

const myName = "Oluwatobi Sofela";

console.log([...myName]);

// The invocation above will return:
[ "O", "l", "u", "w", "a", "t", "o", "b", "i", " ", "S", "o", "f", "e", "l", "a" ]

Try it on StackBlitz
위의 코드 세션에서, 우리는 수조 문자 대상 ((... 의 확장 문법 ([...] 을 사용하여 myName 의 문자열 값을 하나의 항목으로 확장합니다.
따라서 "Oluwatobi Sofela"는 [ "O", "l", "u", "w", "a", "t", "o", "b", "i", " ", "S", "o", "f", "e", "l", "a" ]로 확장되었습니다.

확장 예 3: 함수 호출에서 확장 연산자의 작업 방식

const numbers = [1, 3, 5, 7];

function addNumbers(a, b, c, d) {
  return a + b + c + d;
}

console.log(addNumbers(...numbers));

// The invocation above will return:
16

Try it on StackBlitz
위의 코드 세션에서, 우리는 확장 문법을 사용하여 numbers 수조의 내용을 addNumbers() 인자로 확장합니다.
가설numbers수조에 네 개 이상의 항목이 있다.이 경우 컴퓨터는 앞의 네 항목만 addNumbers() 매개 변수로 사용하고 나머지 항목은 무시합니다.
다음 예는 다음과 같습니다.

const numbers = [1, 3, 5, 7, 10, 200, 90, 59];

function addNumbers(a, b, c, d) {
  return a + b + c + d;
}

console.log(addNumbers(...numbers));

// The invocation above will return:
16

Try it on StackBlitz
다음은 또 다른 예입니다.

const myName = "Oluwatobi Sofela";

function spellName(a, b, c) {
  return a + b + c;
}

console.log(spellName(...myName));      // returns: "Olu"
console.log(spellName(...myName[3]));   // returns: "wundefinedundefined"
console.log(spellName([...myName]));    // returns: "O,l,u,w,a,t,o,b,i, ,S,o,f,e,l,aundefinedundefined"
console.log(spellName({...myName}));    // returns: "[object Object]undefinedundefined"

Try it on StackBlitz

정렬 예 4: 객체 문자에 정렬된 작업 방법

const myNames = ["Oluwatobi", "Sofela"];
const bio = { ...myNames, runs: "codesweetly.com" };

console.log(bio);

// The invocation above will return:
{ 0: "Oluwatobi", 1: "Sofela", runs: "codesweetly.com" }

Try it on StackBlitz
위의 코드 세션에서, 우리는 bio 대상 내부의spread를 사용하여 myNames 값을 단일 속성으로 확장합니다.

spread operator에 대해 알아야 할 중요한 정보
언제든지 spread 조작부호를 사용하려면 이 두 기본 정보를 기억하십시오.

정보 1: 확장 연산자는 객체 문자의 값을 확장할 수 없습니다.
속성 대상이 iterable object이 아니기 때문에 확장 문법으로 그 값을 확장할 수 없습니다.
그러나 확장 작업자를 사용하여 한 객체에서 다른 객체로 속성을 복제할 수 있습니다.
다음 예는 다음과 같습니다.

const myName = { firstName: "Oluwatobi", lastName: "Sofela" };
const bio = { ...myName, website: "codesweetly.com" };

console.log(bio);

// The invocation above will return:
{ firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" };

Try it on StackBlitz
위의 코드 세그먼트는spread 조작부호를 사용하여 myName의 내용을 bio 대상에 복제합니다.

Note

• The spread operator can expand iterable objects’ values only.

• An object is iterable only if it (or any object in its prototype chain) has a property with a @@iterator key.

• Array, TypedArray, String, Map, and Set are all built-in iterable types because they have the @@iterator property by default.

• A properties object is not an iterable data type because it does not have the @@iterator property by default.

• You can make a properties object iterable by adding @@iterator onto it.

정보2:spread 연산자는 같은 속성을 복제하지 않습니다
spread 조작부호를 사용하여 속성을 대상 A에서 대상 B로 복제합니다. 대상 B가 대상 A와 같은 속성을 포함한다고 가정합니다. 이 경우 B의 버전은 대상 A의 속성을 덮어씁니다.
다음 예는 다음과 같습니다.

const myName = { firstName: "Tobi", lastName: "Sofela" };
const bio = { ...myName, firstName: "Oluwatobi", website: "codesweetly.com" };

console.log(bio);

// The invocation above will return:
{ firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" };

Try it on StackBlitz
spread 조작부호는 myName의 firstName 속성을 bio 대상에 복사하지 않았습니다. bio 속성이 포함되어 있기 때문입니다.

정보3: 비원어를 포함하는 대상에서spread를 사용할 때 어떻게 작동하는지 조심하세요!
primitive values만 포함된 대상(또는 수조)에 spread 연산자를 사용했다고 가정합니다.컴퓨터는 원본 대상과 복사 대상 사이에 인용을 만들지 않습니다.
예를 들어, 다음 코드를 고려합니다.

const myName = ["Sofela", "is", "my"];
const aboutMe = ["Oluwatobi", ...myName, "name."];

console.log(aboutMe);

// The invocation above will return:
["Oluwatobi", "Sofela", "is", "my", "name."]

Try it on StackBlitz firstName의 각 항목은 원래 값입니다.따라서, 우리가spread 조작부호를 사용하여 myName 복제할 때, 컴퓨터는 두 그룹 사이에 인용을 만들지 않았다.
따라서 myName에 대한 변경 사항은 aboutMe에 반영되지 않으며 그 반대로도 마찬가지입니다.
예를 들어 myName에 더 많은 내용을 추가하겠습니다.

myName.push("real");

이제 aboutMe 및 myName 의 현재 상태를 살펴보겠습니다.

console.log(myName); // ["Sofela", "is", "my", "real"]
console.log(aboutMe); // ["Oluwatobi", "Sofela", "is", "my", "name."]

Try it on StackBlitz myName의 업데이트 내용이 aboutMe에 반영되지 않았습니다.spread는 원시 그룹과 복제 그룹 사이에 인용이 생성되지 않았기 때문입니다.

만약 myName에 비원시 항목이 포함된다면 어떻게 합니까?
가설aboutMe포함non-primitives.이 경우,spread는 원시 비원어와 복제 원어 사이에 인용을 만들 것입니다.
다음 예는 다음과 같습니다.

const myName = [["Sofela", "is", "my"]];
const aboutMe = ["Oluwatobi", ...myName, "name."];

console.log(aboutMe);

// The invocation above will return:
[ "Oluwatobi", ["Sofela", "is", "my"], "name." ]

Try it on StackBlitz myName에는 원본이 아닌 값이 포함되어 있습니다.
따라서spread 조작부호를 사용하여 myName의 내용을 myName로 복제하면 컴퓨터가 두 그룹 사이에 인용을 만들 수 있다.
따라서 myName 사본에 대한 변경 사항은 aboutMe의 버전에 반영되고 그 반대로도 마찬가지입니다.
예를 들어 myName에 더 많은 내용을 추가하겠습니다.

myName[0].push("real");

이제 aboutMe 및 myName 의 현재 상태를 살펴보겠습니다.

console.log(myName); // [["Sofela", "is", "my", "real"]]
console.log(aboutMe); // ["Oluwatobi", ["Sofela", "is", "my", "real"], "name."]

Try it on StackBlitz myName 의 업데이트 내용은 aboutMe 에 반영됩니다.spread가 원시 그룹과 복제 그룹 사이에 인용을 만들었기 때문입니다.
다음은 또 다른 예입니다.

const myName = { firstName: "Oluwatobi", lastName: "Sofela" };
const bio = { ...myName };

myName.firstName = "Tobi";

console.log(myName); // { firstName: "Tobi", lastName: "Sofela" }
console.log(bio); // { firstName: "Oluwatobi", lastName: "Sofela" }

Try it on StackBlitz
위의 코드 세션에서 myName의 업데이트는 aboutMe에 반영되지 않았습니다. 왜냐하면 우리는 기원 값만 포함하는 대상에 확장 연산자를 사용했기 때문입니다.

Note

A developer would call myName a shallow object because it contains only primitive items.

여기에 또 하나의 예가 있다.

const myName = { 
  fullName: { firstName: "Oluwatobi", lastName: "Sofela" }
};

const bio = { ...myName };

myName.fullName.firstName = "Tobi";

console.log(myName); // { fullName: { firstName: "Tobi", lastName: "Sofela" } }
console.log(bio); // { fullName: { firstName: "Tobi", lastName: "Sofela" } }

Try it on StackBlitz
위의 코드 세션에서 myName의 업데이트는 bio에 반영됩니다. 왜냐하면 우리는 비원어 값을 포함하는 대상에 확장 연산자를 사용했기 때문입니다.

Note

• A developer would call myName a deep object because it contains a non-primitive item.

• You do shallow copy when you create references while cloning one object into another. For instance, ...myName produces a shallow copy of the myName object because whatever alteration you make in one will reflect in the other.

• You do deep copy when you clone objects without creating references. For instance, I could deep copy myName into bio by doing const bio = JSON.parse(JSON.stringify(myName)). By so doing, the computer will clone myName into bio without creating any reference.

• You can break off the reference between the two objects by replacing the fullName object inside myName or bio with a new object. For instance, doing myName.fullName = { firstName: "Tobi", lastName: "Sofela" } would disconnect the pointer between myName and bio.

그것을 싸라
본고는 확장 연산자가 무엇인지 토론하였다.우리는spread가 수조 텍스트, 함수 호출, 대상 텍스트에서의 작업 방식도 연구했다.
spread가 어떻게 작동하는지 알았으니 this article의rest 조작부호에 대해 토론해 봅시다. 그러면 차이점을 볼 수 있습니다.
읽어주셔서 감사합니다!