JavaScript 줄임표 JavaScript의 점 세 개(...)

Hey! I'm Sagar. I love to write tutorials and articles to help developers better understand the magic of JavaScript. If you have any questions about the article, leave a comment and I'll get back to you, or find me on twitter .

이 기사에서는 ES6에 도입된 스프레드 연산자와 나머지 연산자에 대해 논의할 것입니다. 🔥 🔥 🔥

나는 JavaScript 내에서 문제를 해결하는 스타일을 바꿀 수 있는 세 가지 점의 열렬한 팬이 되었습니다. 세 개의 점을 ... 스프레드 연산자와 나머지 연산자로 두 가지 다른 방식으로 사용할 수 있습니다.

휴식 매개변수 😴

나머지 매개변수를 사용하면 임의의 수의 인수를 배열로 수집하고 원하는 대로 수행할 수 있습니다. 인수에 의해 유도된 상용구 코드를 줄이기 위해 Rest 매개변수가 도입되었습니다. 🙌

function myFunc(a, b, ...args) {
 console.log(a); // 22
 console.log(b); // 98
 console.log(args); // [43, 3, 26]
};
myFunc(22, 98, 43, 3, 26);

myFunc의 마지막 매개변수에 ... 접두사가 붙으면 나머지 모든 인수가 자바스크립트 배열 내에 배치됩니다.

나머지 매개변수는 나머지 모든 인수를 수집하므로 마지막 매개변수 앞에 나머지 매개변수를 추가하는 것은 의미가 없습니다 😕. 나머지 매개변수는 마지막 형식 매개변수여야 합니다.

function myFunc(arg1, ...rest, arg2) {
  // arg2 ?
}

나머지 매개변수는 구조화될 수 있습니다(배열만 해당). 즉, 해당 데이터를 고유한 변수로 압축 해제할 수 있습니다.

function myFunc(...[x, y, z]) {
  return x * y* z;
}

myFunc(1)          // NaN
myFunc(1, 2, 3)    // 6
myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured)

확산 연산자 ✨

확산 연산자는 반복 가능한 요소(예: 배열)를 여러 요소가 들어갈 수 있는 위치로 확장하는 데 사용됩니다.

function myFunc(x, y, ...params) { // used rest operator here
  console.log(x);
  console.log(y);
  console.log(params);
}

var inputs = ["a", "b", "c", "d", "e", "f"];
myFunc(...inputs); // used spread operator here
// "a"
// "b"
// ["c", "d", "e", "f"]

배열을 결합하는 방법은 항상 다양했지만 스프레드 연산자는 배열을 결합하는 새로운 방법을 제공합니다.

const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian'];
const specialty = ['Meatzza', 'Spicy Mama', 'Margherita'];

const pizzas = [...featured, 'veg pizza', ...specialty];

console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita'

스프레드 연산자를 사용하면 이제 Object.assign()보다 짧은 구문을 사용하여 얕은 복제(프로토타입 제외) 또는 개체 병합이 가능합니다.

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

👉 결론

코드에서 세 개의 점(…)이 표시되면 나머지 매개변수 또는 스프레드 연산자입니다.

그것들을 구별하는 쉬운 방법이 있습니다:

세 개의 점(…)이 함수 매개변수의 끝에 있으면 "나머지 매개변수"이고 나머지 인수 목록을 배열로 수집합니다.

함수 호출에서 세 개의 점(...)이 발생하거나 이와 유사한 경우 "확산 연산자"라고 하며 배열을 목록으로 확장합니다.

읽어 주셔서 감사합니다. 이 기사가 마음에 들기를 바랍니다.

😄 해피코딩…