> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 함수의 기본 매개변수 이해

JavaScript 함수의 기본 매개변수 이해

Linda Hamilton
풀어 주다: 2024-12-23 10:44:29
원래의
163명이 탐색했습니다.

Understanding Default Parameters in JavaScript Functions

JavaScript 함수의 기본 매개변수

JavaScript의

기본 매개변수를 사용하면 함수 매개변수의 기본값을 지정할 수 있습니다. 특정 매개변수에 대한 값 없이 함수가 호출되면 기본값이 대신 사용됩니다.

이 기능은 ES6(ECMAScript 2015)에 도입되었으며 매개변수가 제공되지 않는 경우를 처리하여 정의되지 않은 동작을 방지하고 코드를 더욱 강력하게 만드는 데 도움이 됩니다.

1. 기본 매개변수의 기본 구문

다음 예에서 b에 인수가 전달되지 않으면 기본값은 10입니다.

function sum(a, b = 10) {
  return a + b;
}

console.log(sum(5, 3));  // Output: 8
console.log(sum(5));     // Output: 15 (b defaults to 10)
로그인 후 복사
로그인 후 복사

이 경우:

  • sum(5, 3)이 호출되면 b가 명시적으로 3으로 전달되므로 결과는 8입니다.
  • sum(5)을 호출하면 b가 통과되지 않아 결과가 15가 되므로 기본값인 10을 사용합니다.

2. 표현식에 기본 매개변수 사용

함수 호출이나 계산 수행 등 표현식의 결과인 기본값을 설정할 수도 있습니다.

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

greet();          // Output: Hello, Guest!
greet("John");    // Output: Hello, John!
로그인 후 복사

여기서 함수에 값이 전달되지 않으면 "Guest"가 name의 기본값입니다.

3. 구조 분해를 사용한 기본 매개변수

기본 매개변수도 구조 분해와 함께 작동합니다. 함수 매개변수에서 객체 또는 배열 구조 분해를 사용하는 경우 특정 속성이나 항목에 대한 기본값을 설정할 수 있습니다.

객체 구조 분해의 기본값

function printInfo({ name = "Anonymous", age = 18 } = {}) {
  console.log(`Name: ${name}, Age: ${age}`);
}

printInfo({ name: "Alice", age: 25 });  // Output: Name: Alice, Age: 25
printInfo({});                          // Output: Name: Anonymous, Age: 18
printInfo();                            // Output: Name: Anonymous, Age: 18
로그인 후 복사

이 경우:

  • 객체가 전달되면 함수는 해당 객체의 속성을 사용합니다.
  • 객체가 전달되지 않거나 객체에 속성이 누락된 경우 기본값이 사용됩니다.

배열 구조 분해의 기본값

function printNumbers([a = 1, b = 2] = []) {
  console.log(`a: ${a}, b: ${b}`);
}

printNumbers([5, 10]);  // Output: a: 5, b: 10
printNumbers([7]);      // Output: a: 7, b: 2
printNumbers();         // Output: a: 1, b: 2
로그인 후 복사

이 경우:

  • 이 함수는 배열과 함께 작동하며 값이 전달되지 않으면 a와 b에 기본값을 제공합니다.

4. 기본 매개변수 및 함수 인수

인수 개수가 동적인 경우를 처리하기 위해 인수와 함께 기본 매개변수를 사용할 수도 있습니다.

function multiply(a, b = 2) {
  console.log(a * b);
}

multiply(3, 4);  // Output: 12
multiply(3);     // Output: 6 (b defaults to 2)
로그인 후 복사

이 예에서는:

  • a에 b를 곱하는 함수로, b가 제공되지 않으면 기본값은 2입니다.

5. 기본값을 반환하는 함수가 포함된 기본 매개변수

함수를 기본값으로 사용할 수 있으며 이는 동적이거나 복잡한 기본값이 필요한 시나리오에서 유용할 수 있습니다.

function getUser(id, name = getDefaultName()) {
  console.log(`User ID: ${id}, Name: ${name}`);
}

function getDefaultName() {
  return "John Doe";
}

getUser(1);          // Output: User ID: 1, Name: John Doe
getUser(2, "Alice"); // Output: User ID: 2, Name: Alice
로그인 후 복사

이 예에서는:

  • 이름이 제공되지 않으면 getDefaultName() 함수가 호출되고 그 결과가 기본값으로 사용됩니다.

6. 나머지 매개변수가 포함된 기본 매개변수

기본 매개변수를 나머지 매개변수(...args)와 결합하여 함수가 수신할 인수 수를 알 수 없는 시나리오를 처리할 수 있습니다.

function sum(a, b = 10) {
  return a + b;
}

console.log(sum(5, 3));  // Output: 8
console.log(sum(5));     // Output: 15 (b defaults to 10)
로그인 후 복사
로그인 후 복사

이 경우:

  • 제공되지 않은 경우 구분 기호 매개변수의 기본값은 이며, 문자열은 함수에 전달된 모든 추가 인수를 수집합니다.

결론

JavaScript의 기본 매개변수는 누락되었거나 정의되지 않은 매개변수에 대한 기본값을 정의할 수 있도록 하여 기능을 더욱 유연하게 만듭니다. 이 기능은 코드 가독성을 높이고 인수 누락으로 인한 오류를 방지하는 데 도움이 됩니다.

구조 분해, 나머지 매개변수, 심지어 함수 호출과 같은 다른 기능과 결합하여 동적이고 간결하며 유지 관리 가능한 함수를 만들 수 있습니다.


안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.

위 내용은 JavaScript 함수의 기본 매개변수 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿