JavaScript 함수 기본 인수

소개

JavaScript 개발자는 ES6가 도입되기 전에 함수에 대해 생각할 수 있는 모든 가능한 인수를 입력해야 했습니다. JS 함수 인수에 대한 이전의 접근 방식은 함수의 유연성과 유용성을 감소시켰습니다. 그러나 2015년 ECMAScript에 의해 JavaScript가 업데이트되었을 때 업데이트로 인해 함수 개체를 포함하여 JavaScript 데이터 유형의 유연성이 향상된 많은 변경 사항이 발생했습니다.

이 기사에서는 ES6 JavaScript 함수 기본 인수의 개념을 소개합니다.

익명 또는 명명된 JavaScript 함수는 인수를 가질지 여부를 결정할 수 있습니다. 기능의 기능에 따라 다릅니다. 이런! 조금 모호하게 들렸습니다. 즉, 함수의 작업에 따라 다릅니다. 함수 인수는 함수가 작동할 값에 대한 자리 표시자입니다. 함수는 정의 단계에 있기 때문에 어떤 값이 전달될지는 모르지만 값에 대한 아이디어는 있습니다. 값이 추가되기를 기다리는 대신 함수는 인수를 사용하고 작업한 다음 나중에 호출될 때 매개변수라고 하는 실제 값을 받습니다.

함수가 호출될 때 매개변수가 함수 인수의 위치를 ​​차지할 것으로 예상되고 매개변수가 전달되지 않은 경우 JavaScript는 누락된 매개변수에 대해 undefined를 반환합니다.

function greetUser(username) {
    return `Hello, ${username}`
}

//calling the function

greetUser(); //Hello, undefined

함수가 호출될 때 함수가 매개변수 대신 반환되는 것을 방지하기 위해undefined JavaScript는 ES6에서 함수 기본 인수 기능을 도입했습니다. 함수 기본 인수는 함수 매개변수의 기본값을 보유하며 함수가 매개변수 없이 호출되는 경우에 사용됩니다.

function greetUser(username="John") {
    return `Hello, ${username}`
}

/* If the greetUser function's username argument is replaced with a parameter when called, JavaScript uses the parameter */

greetUser(Naruto); //Hello, Naruto

/* Else, it uses the default argument, 'John' as the username if the function does not get a parameter, instead of 'undefined' */

greetUser(); //Hello, John

JavaScript ES6 함수는 기본 인수가 함수의 작업과 일치하는 한 문자열, 배열, 객체, 숫자, 부울 등 모든 데이터 유형을 기본 인수로 사용할 수 있습니다.

//Object default argument sample

function greetUser(user={firstName: 'John', lastName: 'Doe'}) {
    const fullName = `${user.firstName} ${user.lastName}`;
    return `Hello, ${fullName}`
}

//with parameter
const user1 = {firstName: 'Samuel', lastName: 'Jack'}
greetUser(user1); //Hello, Samuel Jack

//without parameter
greetUser(); //Hello, John Doe

//Array default argument sample
function greetUsers(users=['Dan', 'Joseph', 'Natasha', 'Kelly']) {
    for(let user = 0; user < users.length; user++) {
       return `Hello, ${user}`
    }
}

//with parameter
const listOfUsers = ['Solomon', 'Grundy', 'Mike', 'Anthony']
greetUsers(listOfUsers); 
/*
Hello, Solomon
Hello, Grundy
Hello, Mike
Hello, Anthony
*/

//without parameter
greetUsers();
/*
Hello, Dan
Hello, Joseph
Hello, Natasha
Hello, Kelly
*/

//Number default argument sample
function square(x=2) {
    if (x = 0) {
      return 0;
   }
    return x * x;
}

//with parameter
square(5) //25

//without parameter
square() //4

//Boolean default argument sample
function youEatDinnerBy6(answer=false) {
    if (answer) {
      return "That's healthy!";
    }
    else {
      return "You need to eat dinner early!"
    }
}

//with parameter 
youEatDinnerBy6(true) //That's healthy!

//without parameter
youEatDinnerBy6() //You need to eat dinner early!

JavaScript 함수 기본 인수는 이전에 비해 개발자의 삶을 더 쉽게 만들었습니다. 기본 인수를 사용하면 JavaScript에서 누락된 모든 매개변수에 undefined를 던지는 것과는 달리 함수의 결과를 제어할 수 있습니다.

결론

이 기사에서는 기본 인수가 무엇인지, 프로그램에서 기본 인수를 사용하는 방법 및 이를 사용할 때의 이점에 대해 배웠습니다.

이 기사를 좋아하고 댓글을 달고 친구 및 가족과 공유하십시오. Twitter에서 저와 연결하여 저를 수정하고, 더 가르치고, 저에게서 배우거나 기술 기사를 작성할 수 있습니다.

저는 프리랜서, 시간제 또는 정규직 기술 문서 작성 역할을 할 수 있습니다.

Gracias, y Adios, 👋.