ES2015 / ES6의 스프레드 구문 vs 나머지 매개 변수

ES2015 / ES6의 스프레드 구문 vs 나머지 매개 변수

---

ES2015의 스프레드 구문과 나머지 매개 변수에 대해 혼란 스럽습니다. 누구든지 적절한 예를 통해 차이점을 설명 할 수 있습니까?

---

스프레드를 사용할 때 단일 변수를 더 많이 확장합니다.

var abc = ['a', 'b', 'c'];
var def = ['d', 'e', 'f'];
var alpha = [ ...abc, ...def ];
console.log(alpha)// alpha == ['a', 'b', 'c', 'd', 'e', 'f'];

나머지 인수를 사용할 때 함수의 나머지 모든 인수를 하나의 배열로 축소합니다.

function sum( first, ...others ) {
    for ( var i = 0; i < others.length; i++ )
        first += others[i];
    return first;
}
console.log(sum(1,2,3,4))// sum(1, 2, 3, 4) == 10;

---

ES6에는 새로운 기능 세 개의 점이 있습니다. ...

이러한 점을 사용하는 방법은 다음과 같습니다.

휴식 / 수집가 / 수집으로

var [c, ...m] = [1,2,3,4,5]; // m -> [2,3,4,5]

다음 ...m은 수집기이며 나머지 매개 변수를 수집합니다. 내부적으로 우리가 쓸 때 :

var [c, ...m] = [1,2,3,4,5]; JavaScript는 다음을 수행합니다.

var c = 1,
    m = [2, 3, 4, 5];

확산으로

var params = [ "hello", true, 7 ];
var other = [ 1, 2, ...params ]; // other => [1,2,"hello", true, 7]

여기에서 ...params모든 요소를other

내부적으로 javaScript는 다음을 수행합니다.

var other = [1, 2].concat(params);

도움이 되었기를 바랍니다.

---

요약:

자바 스크립트에서는 ...오버로드됩니다. 연산자가 사용되는 위치에 따라 다른 작업을 수행합니다.

1. 함수 선언 / 표현식 의 함수 인수에 사용되는 경우 나머지 인수를 배열로 변환합니다. 이 변형을 Rest 매개 변수 구문 이라고 합니다.
2. 다른 경우에는 0 개 이상의 인수 (함수 호출) 또는 요소 (배열 리터럴)가 예상되는 곳에서 iterable 값을 분산시킵니다. 이 변형을 Spread 구문 이라고 합니다.

예:

나머지 매개 변수 구문 :

function rest(first, second, ...remainder) {
  console.log(remainder);
}

// 3, 4 ,5 are the remaining parameters and will be 
// merged together in to an array called remainder 
rest(1, 2, 3, 4, 5);

스프레드 구문 :

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

// the numbers array will be spread over the 
// x y z parameters in the sum function
console.log(sum(...numbers));


// the numbers array is spread out in the array literal
// before the elements 4 and 5 are added
const newNumbers = [...numbers, 4, 5];

console.log(newNumbers);

---

코드에서 "..."를 보면 나머지 매개 변수 또는 스프레드 연산자입니다.

쉽게 구별 할 수있는 방법이 있습니다.

...가 함수 매개 변수의 끝에 있으면 "나머지 매개 변수"이고 나머지 목록을 배열로 수집합니다. ...이 함수 호출 등에서 발생하면 "확산 연산자"라고하며 배열을 목록으로 확장합니다. 사용 패턴 :

나머지 매개 변수는 여러 인수를 허용하는 함수를 만드는 데 사용됩니다. 확산 연산자는 일반적으로 많은 인수 목록이 필요한 함수에 배열을 전달하는 데 사용됩니다. 함께 목록과 매개 변수 배열 사이를 쉽게 이동할 수 있습니다. 이에 대한 자세한 내용은 여기를 클릭하십시오.

---

기본적으로 Python과 같습니다.

>>> def func(first, *others):
...    return [first, *others]
>>> func('a', 'b', 'c')
['a', 'b', 'c']

---

ES6에 추가 된이 세 점 ...은 Spread 연산자와 Rest 매개 변수의 두 가지 의미를 갖습니다.

Spread operator: You use the three dots to expand iterables, by iterables I mean arrays, string, etc. As arguments. For example Math.max() function expect an indeterminate number of arguments so you can use Spread operator to expand elements as arguments on Math.max() function. Here an example from mdn

console.log(Math.max(1, 3, 2));
// expected output: 3

console.log(Math.max(-1, -3, -2));
// expected output: -1

var array1 = [1, 3, 2];

console.log(Math.max(...array1));
// expected output: 3

Another use case is to add, for example having this array

const videoGames = ['mario galaxy', 'zelda wind waker', 'ico'];

You can add it to another array

const favoritesVideoGames = ['Shadow of the colosus', ...videoGames];

Then favoritesVideoGames value is

[ 'Shadow of the colosus', 'mario galaxy', 'zelda wind waker', 'ico' ]

About Rest parameter, here the MDN definition

The rest parameter syntax allows us to represent an indefinite number of arguments as an array.

This means you can pack many elements into a single element

Here an example from MDN

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

I usually get confused with these three points, this illustration by @stephaniecodes helps me to remember its logic. I mention that I took inspiration from this illustration to answer this question.

I hope it is useful.

---

Javascript's three dots ( ... ) operator can be used in two different ways:

1. Rest parameter: collects all remaining elements into an array.

var days = ["Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri"];
const [sat, sun, ...weekdays] = days;
console.log(sat); // "Sat"
console.log(sun); // "Sun"
console.log(weekdays); // ["Mon", "Tue", "Wed", "Thu", "Fri"]

2. Spread operator: allows iterables( arrays / objects / strings ) to be expanded into single arguments/elements.

var weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri"];
var days = [...weekdays, "Sat", "Sun"]; 
console.log(days) // ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

Note that the spread operator can be the first element, but the rest parameter needs to be the last to collect the rest elements .

---

In reference to this i cant understand how we are passing a function and returning arguments in javascript

Function is a set of instructions that takes some input and processes them and returns result.

here we have an array [1, 2, 3, 4, 5, 6], and filter function iterates over each element and passes each element to positive functions which returns the number if it is even, else skips it.

trace:

1 => Filter(1) => positive(1) => skips 1,
2 => Filter(2) => positive(2) => returns 2,
3 => Filter(3) => positive(3) => skips 3,
...
6 => Filter(6) => positive(6) => returns 6

hence the result [2, 4, 6]

ReferenceURL : https://stackoverflow.com/questions/33898512/spread-syntax-vs-rest-parameter-in-es2015-es6