JavaScript_Basic 지식에서 Rest 매개변수 및 매개변수 기본값에 대한 심층 연구

이 기사에서는 JavaScript 함수의 표현력을 더욱 향상시키는 두 가지 기능, 즉 나머지 매개변수와 매개변수 기본값에 대해 설명합니다.
나머지 매개변수

일반적으로 변수 매개변수를 사용하여 함수를 만들어야 합니다. 변수 매개변수는 함수가 임의 개수의 매개변수를 받아들일 수 있다는 의미입니다. 예를 들어, String.prototype.concat은 임의 개수의 문자열을 인수로 받아들일 수 있습니다. Rest 매개변수를 사용하여 ES6은 가변 함수를 생성하는 새로운 방법을 제공합니다.

문자열에 특정 하위 문자열이 포함되어 있는지 확인하는 샘플 함수 containAll을 구현해 보겠습니다. 예를 들어, containAll("banana", "b", "nan")은 true를 반환하고 containAll("banana", "c", "nan")은 false를 반환합니다.

다음은 전통적인 구현입니다.

function containsAll(haystack) {
 for (var i = 1; i < arguments.length; i++) {
  var needle = arguments[i];
  if (haystack.indexOf(needle) === -1) {
   return false;
  }
 }
 return true;
}
 
function containsAll(haystack) {
 for (var i = 1; i < arguments.length; i++) {
  var needle = arguments[i];
  if (haystack.indexOf(needle) === -1) {
   return false;
  }
 }
 return true;
}

이 구현에서는 함수가 호출될 때 실제 매개변수 목록을 포함하는 배열과 유사한 객체인 인수 객체를 사용합니다. 이 코드는 정확히 우리가 원하는 코드이지만 가독성이 좋지 않습니다. 함수에는 형식 매개변수 건초 더미가 하나만 있으므로 함수에 여러 매개변수가 필요한 것을 한눈에 알 수 없습니다. 인수를 순회할 때 순회 시작 인덱스가 공통 0이 아닌 1이라는 점에 특히 주의해야 합니다. 인수[0]은 정의된 형식 매개변수 건초 더미 함수이기 때문입니다. haystack 매개변수 앞이나 뒤에 일부 매개변수를 추가하려면 내부 루프를 업데이트해야 합니다. Rest 매개변수는 이러한 문제를 해결합니다. Rest 매개변수를 사용하는 방법은 다음과 같습니다.

function containsAll(haystack, ...needles) {
 for (var needle of needles) {
  if (haystack.indexOf(needle) === -1) {
   return false;
  }
 }
 return true;
}
 
function containsAll(haystack, ...needles) {
 for (var needle of needles) {
  if (haystack.indexOf(needle) === -1) {
   return false;
  }
 }
 return true;
}

위의 구현은 모두 우리의 요구 사항을 충족하지만 후자에는 특별한 ...needle 구문이 포함되어 있습니다. ContainsAll("banana", "b", "nan")을 호출할 때 세부 사항을 살펴보겠습니다. 매개변수 haystack은 평소와 같이 함수의 첫 번째 인수로 채워지며 값은 "banana"이고 줄임표는 다음과 같습니다. 바늘 앞 부분은 나머지 매개변수임을 나타내며 나머지 실제 매개변수는 모두 배열에 배치되고 해당 배열은 필요한 반복에 할당됩니다. 이 호출에서 need의 값은 ["b", "nan"]입니다. 그러면 정상적인 기능이 실행됩니다.

Rest 매개변수로는 함수의 마지막 함수만 사용할 수 있습니다. 함수 호출 시 Rest 매개변수 앞의 매개변수는 정상적으로 채워지고 나머지 매개변수는 배열로 들어가게 됩니다. Rest로 사용됩니다. 매개변수의 값이 더 이상 없으면 Rest 매개변수의 값은 빈 배열([])이 됩니다.
매개변수 기본값

일반적으로 함수를 호출할 때 호출자는 가능한 모든 매개변수를 전달할 필요가 없으며 전달되지 않은 매개변수에는 합리적인 기본값이 필요합니다. JavaScript에는 전달되지 않은 매개변수에 대해 정의되지 않은 고정 기본값이 있습니다. ES6에서는 임의의 매개변수에 대한 기본값을 지정하는 새로운 방법이 도입되었습니다.

아래 예를 살펴보세요.

function animalSentence(animals2="tigers", animals3="bears") {
  return `Lions and ${animals2} and ${animals3}! Oh my!`;
}
 
function animalSentence(animals2="tigers", animals3="bears") {
  return `Lions and ${animals2} and ${animals3}! Oh my!`;
}

After = 각 매개변수에는 매개변수가 전달되지 않을 때 기본값을 지정하는 표현식이 있습니다. 따라서 AnimalSentence()는 "사자와 호랑이와 곰! 이런!"을 반환하고, AnimalSentence("elephants")는 "사자와 코끼리와 곰! 이런!"을 반환하고, AnimalSentence("elephants", "whales")는 "사자와 코끼리"를 반환합니다. 그리고 코끼리와 고래!"

매개변수 기본값에 대한 몇 가지 참고 사항:

Python과 달리 매개변수 기본값에 대한 표현식은 함수 호출 시 왼쪽에서 오른쪽으로 평가됩니다. 즉, 이전에 입력된 매개변수를 표현식에서 사용할 수 있다는 의미입니다. 예를 들어 위의 함수를 좀 더 흥미롭게 만들 수 있습니다.

function animalSentenceFancy(animals2="tigers",
  animals3=(animals2 == "bears") ? "sealions" : "bears")
{
 return `Lions and ${animals2} and ${animals3}! Oh my!`;
}

 
function animalSentenceFancy(animals2="tigers",
  animals3=(animals2 == "bears") ? "sealions" : "bears")
{
 return `Lions and ${animals2} and ${animals3}! Oh my!`;
}

그러면 AnimalSentenceFancy("bears")는 "사자, 곰, 바다사자. 이런!"을 반환합니다.

정의되지 않음을 전달하는 것은 매개변수를 전달하지 않는 것과 같습니다. 따라서 AnimalSentence(undefine, "unicorns")는 "사자와 호랑이와 유니콘! 오 마이!"를 반환합니다.
매개변수에 기본값이 지정되지 않으면 매개변수의 기본값이 정의되지 않으므로

function myFunc(a=42, b) {...}
 
function myFunc(a=42, b) {...}

은

과 동일합니다.

function myFunc(a=42, b=undefined) {...}
 
function myFunc(a=42, b=undefined) {...}

인수 삭제

Rest 매개변수와 매개변수의 기본값을 사용하면 인수 객체를 완전히 제거하여 코드를 더 읽기 쉽게 만들 수 있습니다. 또한 인수 개체는 JavaScript 최적화를 어렵게 만듭니다.

위의 두 가지 새로운 기능이 인수를 완전히 대체할 수 있기를 바랍니다. 첫 번째 단계로 Rest 매개변수 또는 매개변수 기본값을 사용할 때 인수 개체를 사용하지 마십시오. 인수 개체가 즉시 제거되지 않거나 전혀 제거되지 않는 경우에는 Rest 매개변수 또는 매개변수를 사용하지 않는 것이 가장 좋습니다. 인수 객체.
호환성

Firefox 15 이상에서는 이미 이 두 가지 새로운 기능을 지원합니다. 그러나 그 외에는 다른 브라우저 지원이 없습니다. 최근 V8의 실험 환경에는 Rest 매개변수에 대한 지원이 추가되었으며, JSC에서도 Rest 매개변수 및 매개변수 기본값에 대한 문제가 제기되었습니다.

Babel과 Traceur 두 컴파일러 모두 이미 매개변수 기본값을 지원하므로 과감하게 사용할 수 있습니다.
결론

기술적으로 이 두 가지 새로운 기능은 함수에 새로운 동작을 도입하지 않지만 일부 함수 선언을 더 표현력 있고 읽기 쉽게 만들 수 있습니다.