JavaScript 나머지 매개변수 및 스프레드 구문

이 기사에서는 나머지 매개변수와 확산 구문이 무엇인지 살펴보겠습니다.

아래 예시는 이 글을 요약한 것입니다.

const peopleGrades = (index, ...numbers) => {  /* ...rest */
  const array = [ ...numbers ]; // ...spread
  return array[index]; // 8 => [ 4, 5, 2, 8, 2 ][3]
};

peopleGrades(3, 4, 5, 2, 8, 2); // 8

나머지 매개변수

함수는 함수 본문의 매개 변수와 변수에 대해서만 작업을 수행합니다.

아래 예를 참조하십시오.

const sum = (a, b) => {
  return a + b; // 2 + 3
}

console.log( sum(2, 3, 1, 10, 4) ); // 5

함수 본문의 작업은 호출 함수의 인수 수가 아니라 매개 변수 수를 기반으로 합니다.
1 , 10 , 4 를 포함한 모든 인수를 함수 본문에서 반환된 계산을 위한 매개 변수로 전달하는 것을 재고할 수 있습니다.

아래 예를 참조하십시오.

const sum = (a, b, c, d, e) => {
  return a + b + c + d + e; // 2 + 3 + 1 + 10 + 4
};

console.log( sum(2, 3, 1, 10, 4) ); // 20

위에 표시된 매개변수에 인수를 전달하는 것은 바람직하지 않습니다. JavaScript에서는 Rest 매개변수를 사용하여 세 개 이상의 매개변수를 나타내는 것이 좋습니다.

나머지 매개변수는 ...args 와 같습니다. 세 개의 점...은 더 많은 매개변수를 나타냅니다.

아래 구문을 참조하십시오.

func = (...args) => {
  ...
};

func(args);

여기서 args = 매개변수 이름의 배열입니다.

아래 예는 args가 인수 목록임을 증명합니다.

const sumFunc = (...args) => {
  return args; 
};

// let's gather all arguments into the array 
console.log( sumFunc(2, 3, 1, 10, 4) ); // [ 2, 3, 1, 10, 4 ]

args는 인수의 배열이므로 배열의 각 인수를 합산할 수 있습니다.

아래 예를 참조하십시오.

const sumFunc = (...args) => {
  const sum = args[0] + args[1] + args[2] + args[3] + args[4];
  return sum; // 2 + 3 + 1 + 10 + 4
};

// let's sum all arguments in the array 
console.log( sumFunc(2, 3, 1, 10, 4) ); // 20

아래의 다른 예를 참조하십시오.

const sumFunc = (sum = 0, ...args) => {

  for (let arg of args) {
    sum = sum + arg ;
  }

  return sum;
};

console.log( sumFunc(2, 3, 1, 10, 4) ); // 20

아래에서 또 다른 예를 살펴보겠습니다.

const employee = (name, ...titles) => {
  const personTitles = `${name} is a ${titles[0]}, 
  ${titles[1]}, ${titles[2]}, and ${titles[3]}`;
  return personTitles;
};

// let's gather all arguments into array 
console.log(
  employee('John', 'web developer', 'doctor',
    'consultant', 'professor')
);

The ...args must always be the last parameter.

아래 예는 유효하지 않습니다.

const employee= (...titles, name) => {
  const personTitles = `${name} is a ${titles[0]}, 
  ${titles[1]}, ${titles[2]}, and ${titles[3]}`;
  return personTitles;
};

console.log( 
  employee('web developer', 'doctor', 
  'consultant', 'professor', 'John')
  ); // SyntaxError: Rest parameter must be last formal parameter

스프레드 구문

스프레드는 문자열, 배열, 객체 등과 같은 반복 가능 항목에서 작동합니다.

스프레드 구문은 나머지 구문과 상당히 다릅니다.

아래 예를 참조하십시오.

const staff = (str) => {
  const employee = [ ...str ];
  return employee;
};

console.log( staff('Bello') ); // [ 'B', 'e', 'l', 'l', 'o' ]

아래의 다른 예를 참조하십시오.

const staff = (recruiter) => {
  const batch1Recruits = [ 'John', 'Sarah', 'Angelina', 'Tom' ];
  const batch2Recruits = [ 'Bob', 'Jack', 'Lucky', 'Ali' ];
  const newEmployees = [ recruiter, ...batch1Recruits, ...batch2Recruits ];
  return newEmployees;
};

console.log( staff('Patricia') );
/*
[
  'Patricia', 'John',
  'Sarah',    'Angelina',
  'Tom',      'Bob',
  'Jack',     'Lucky',
  'Ali'
]
*/

The spread syntax works for iterable - string, arrays, objects, maps, sets, etc

마지막 예제를 살펴보겠습니다. 객체에 대해:

const myDetails = { age: 27, isDoctor: false };

const dataBase = { name: 'Bello', ...myDetails };

console.log(dataBase);
// { name: 'Bello', age: 27, isDoctor: false }

행복한 코딩!!!