나머지 매개변수 구문 이해

Rest 매개변수 구문에 오신 것을 환영합니다. 스프레드 연산자와 같습니다!

스프레드 연산자의 5가지 용도

로리 ・ 2019년 7월 10일 ・ 3분 읽기

#javascript #webdev #productivity #learning

...제외.

JavaScript 언어에서 ... 기호를 반복적으로 사용하는 것을 정당화하는 것이 아님을 미리 말씀드리고 싶습니다. 하지만 이 게시물이 퍼짐과 휴식이 어떻게 다르지만 비슷한지 이해하는 데 도움이 되기를 바랍니다.

나머지 사용 사례

알 수 없는 수의 인수를 함수에 전달하려고 한다고 가정해 보겠습니다. 그때 나머지 매개변수를 사용하고 싶을 때입니다!

function testRest(arg1, arg2, ...otherArgs) {
   console.log(arg1) // 1
   console.log(arg2) // 2
   console.log(otherArgs) // [3, 4, 5]

}

testRest(1, 2, 3, 4, 5)

이 예에서는 arg1 및 arg2가 예상대로 전달된 다음 모든 추가 인수가 otherArgs 배열에 추가됩니다.

이점 중 하나는 otherArgs가 진정한 배열이라는 점입니다. 즉, 모든 배열 기능을 사용할 수 있습니다.

내부의 인수 수를 볼 수 있습니다.

function testRest(arg1, arg2, ...otherArgs) {
   const numOfArgs = otherArgs.length() // 3

}

testRest(1, 2, 3, 4, 5)

배열 프로토타입 함수를 사용하여 조작할 수도 있습니다. map , filter , reduce , flat 등

단일 추가 인수

명심해야 할 한 가지는 otherArgs가 항상 배열을 생성한다는 것입니다. 즉, 단일 인수가 배열로 래핑됩니다.

function testRest(arg1, arg2, ...otherArgs) {
   console.log(arg1) // 1
   console.log(arg2) // 2
   console.log(otherArgs) // [3]

}

testRest(1, 2, 3)

또한 추가 인수를 포함하지 않으면 빈 배열이 생성됩니다.

function testRest(arg1, arg2, ...otherArgs) {
   console.log(arg1) // 1
   console.log(arg2) // 2
   console.log(otherArgs) // []

}

testRest(1, 2)

디스트럭처링을 기억하시나요?

Destructuring 할당에 대한 빠른 새로 고침이 필요한 경우 이 게시물을 확인하십시오.

Destructuring 할당의 3가지 강력한 예

로리 ・ 2019년 6월 11일 ・ 2분 읽기

#javascript #webdev #productivity #beginners

결과적으로 구조 분해와 나머지 매개변수를 함께 사용할 수 있습니다.

function testRest(...[first, second, third]) {
   console.log(first) // 1
   console.log(second) // 2
   console.log(third) // 3

}

testRest(1, 2, 3)

구조 분해는 인수가 있을 것으로 예상한다는 점을 명심하십시오. 그 계약을 파기하면 무엇을 기대해야 하는지 알아야 합니다.

구조화되지 않은 예상 인수를 포함하지 않으면 정의되지 않은 참조가 생성됩니다.

function testRest(...[first, second, third]) {
   console.log(first) // 1
   console.log(second) // 2
   console.log(third) // undefined

}

testRest(1, 2)

해체한 것 이상의 인수를 포함하면 해당 인수가 삭제됩니다.

function testRest(...[first, second, third]) {
   console.log(first) // 1
   console.log(second) // 2
   console.log(third) // 3
   // 4 is not destructured

}

testRest(1, 2, 3, 4)

결론

그리고 당신은 그것을 가지고 있습니다! 위의 예에서 볼 수 있듯이 휴식과 스프레드의 주요 차이점은 위치입니다.

스프레드 구문은 함수 내부 또는 함수를 호출할 때 나타날 수 있습니다. 나머지 매개변수 구문은 함수 서명 자체로 제한됩니다. 어떤 것이 사용되고 있는지 확인하려는 경우 이를 염두에 두십시오.

이것이 개념을 더 잘 이해하는 데 도움이 되었기를 바랍니다.

항상 그렇듯이 이와 같은 개념에 관심이 있다면 다음 게시물 중 일부를 확인하십시오.

접착! 일부분! 쏴라, 나는 Shift를 의미했다!

로리 ・ 2019년 7월 30일 ・ 4분 읽기

#webdev #javascript #learning #productivity

반복하자 - for...in vs for...of

로리 ・ 2019년 7월 16일 ・ 4분 읽기

#javascript #webdev #productivity #learning

깊은 복사와 얕은 복사 - 예제 포함

로리 ・ 2019년 7월 24일 ・ 4분 읽기

#javascript #webdev #learning #beginners