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

안녕하세요! REST 매개변수 및 SPREAD 구문을 배우거나 수정하려는 경우 이 블로그가 적합합니다. 간단하고 이해하기 쉬운 방식으로 JavaScript 개념을 모두 펼칠 것입니다.

REST 매개변수부터 시작하겠습니다.

JavaScript에서 두 개의 숫자를 더하는 함수를 작성한다고 상상해 보십시오. 다음과 같이 보일 것입니다.

  function addTheNumbers (numberOne, numberTwo)  {
    return numberOne + numberTwo;
  }
  // PRINTING THE VALUES

  console.log(addTheNumbers(2,3)); // expected output : 5

잘 작동합니다. 예! 이제 누군가 5개의 숫자를 더하는 함수를 만들라고 하면 어떻게 할까요? numberFive까지 숫자 매개변수를 수동으로 추가하는 것은 편리하지 않습니다.

이것은 REST 매개변수가 유용한 곳입니다....

사용 방법에 대해 빠르게 살펴보겠습니다. REST 매개변수는 3개의 점... 뒤에 이를 포함할 어레이의 이름을 사용하여 함수 정의에 포함될 수 있습니다.

  function addTheNumbers (...args)  {
    let sum = 0;
    for (let arg of args){
        sum = sum + arg
    }
    return sum
  }

  // PRINTING THE VALUES

  console.log(addTheNumbers(1,2,3,4,1)); //expected output : 11

점은 문자 그대로 "나머지 매개변수를 배열로 모으기"를 의미합니다.

중요 참고 사항 - REST 매개변수는 끝에 있어야 합니다.

다음은 REST 매개변수를 사용하는 잘못된 방법입니다.

function f(arg1, ...rest, arg2) { // arg2 after ...rest is incorrect
}

한 가지 예를 더 살펴보겠습니다.

const funcNames = (name, surname, ...args) => {
    console.log(name, surname, args);
}

funcNames("Raj", "Bhinde", "Dhaval","Bhinde")

출력 - Raj Bhinde [ 'Dhaval', 'Bhinde' ] 
여기에서 이름, 성 및 다른 모든 매개변수를 하나의 배열로 압축한 것을 보았습니다. args[0]를 사용하여 이러한 배열의 인덱스에 액세스할 수도 있습니다.

이제 Spread 구문으로 이동하기 전에 위의 예를 고려하여 REST 구문은 여러 요소를 수집하고 위에서 본 것처럼 단일 요소로 "압축"한다는 점을 염두에 두어야 합니다.

SPREAD는 나머지 구문의 반대입니다. 구문이 동일하게 보이지만 의미 체계가 약간 다릅니다.

Spread가 무엇을 하는지 설명하기 전에 SPREAD가 무엇을 하는지 예제를 통해 살펴보겠습니다.

인수에 전달된 숫자를 곱하는 함수가 있다고 가정해 보겠습니다.

const muliplyTheNumbers = (x,y,z) => {
    return x*y*z
}

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

이것은 완벽하게 잘 작동하지만 이제 곱하고 싶은 숫자 배열이 있다고 가정해 보겠습니다.
const arrayOfNumbers = [2,3,5,2,2];
이제 함수 호출에서 배열을 전달하면 NaN이 표시됩니다. 함수가 단일 배열이 아닌 숫자 인수 목록을 기대하기 때문입니다.

스프레드 구문이 구출되는 경우입니다!
console.log(muliplyTheNumbers(...arrayOfNumbers));
...arrayOfNumbers가 함수 호출에 사용되면 반복 가능한 객체 arrayOfNumbers를 인수 목록으로 "확장"합니다.

Spread 구문을 사용하여 여러 배열을 전달할 수도 있습니다.
const arrayOfNumbersTwo = [10,2];는 muliplyTheNumbers(...arrayOfNumbers,...arrayOfNumbersTwo);로 전달될 수 있으며 &는 절대적으로 유효합니다. 함수 호출의 시작/중간/끝에 일반 값을 추가할 수도 있습니다.

확산 구문을 사용하여 두 배열을 병합할 수도 있습니다.

const arr1 = ["1","2","3"];
const arr2 = ["4","5"]

console.log([...arr1,...arr2]); output: ['1', '2', '3', '4', '5']
console.log(...arr1,...arr2); output : 1 2 3 4 5

위의 예에서는 배열을 사용했지만 스프레드는 모든 이터러블에서 작동합니다.

let stringValue = "TheBoys";
console.log([...stringValue]); output : ['T', 'h', 'e', 'B', 'o', 'y', 's']

다음과 같이 개체를 복제하는 데 사용할 수도 있습니다.

const obj1 = {
    firstName : "Raj"
}

const obj2 = {
    ...obj1,
    surname : "Bhinde"
}

console.log(obj2);// expected output : { firstName: 'Raj', surname: 'Bhinde' }

마찬가지로 두 개체도 병합할 수 있습니다.

그래서 그게 전부였습니다! 지금까지 읽어주셔서 감사합니다. 잘 읽으셨기를 바랍니다.

다음은 REST와 SPREAD의 차이점을 잊지 않기 위한 간단한 요약입니다.

휴식 연산자 -

REST 연산자는 요소의 구조를 해체하는 것으로 알려진 다음 남은 요소를 수집하여 배열로 만듭니다.

REST 연산자는 인수의 끝에 있어야 합니다. 그렇지 않으면 작동하지 않습니다.

스프레드 연산자 -

SPREAD 연산자는 수집된 요소를 단일 요소로 추출합니다

.

SPREAD는 위치에 관계없이 어디서나 사용할 수 있습니다.