함수

함수는 함수에 제공된 인수를 기반으로 값을 계산하고 반환하는 등 일련의 관련 작업을 수행하는 데 사용되는 재사용 가능한 모듈식 문 블록입니다. 원시값이 아닌 모든 값과 마찬가지로 함수는 객체입니다. 이러한 객체는 코드를 실행하기 위해 호출하고 인수 형태로 데이터를 전달하며 값을 return할 수 있다는 점에서 고유한 객체입니다.

함수는 '일급' 객체로 간주되며, 함수의 고유한 동작에도 불구하고 다른 자바스크립트 객체와 동일한 컨텍스트에서 사용할 수 있습니다. 예를 들어 함수를 변수에 할당하거나, 다른 함수에 인수로 전달하거나, 다른 함수에서 반환할 수 있습니다.

function myFunction() {
   console.log( "This is my function." );
};

객체의 속성으로 정의된 함수를 일반적으로 '메서드'라고 합니다. var를 사용하여 선언된 변수와 마찬가지로 인클로징 함수 외부에서 이루어진 함수 선언은 전역 객체에 메서드로 추가됩니다.

함수 선언

함수 선언('함수 문' 또는 '함수 정의'라고도 함)은 포함 범위의 다른 곳에서 호출할 수 있는 이름이 지정된 함수를 만듭니다. 함수 선언은 function 키워드 뒤에 식별자, 쉼표로 구분된 매개변수 목록(괄호로 묶여 있음), '함수 본문'이라는 블록 문으로 구성됩니다. 세미콜론으로 끝나지 않는 함수 선언을 흔히 접할 수 있습니다. 함수 선언은 문이므로 ASI에서 후행 세미콜론을 추론할 수 있습니다.

function myFunction() {
   console.log( "This is my function." );
};

myFunction();
> "This is my function."

JavaScript의 초기 디자인 결정에서 벗어나 함수 선언에는 var로 선언된 변수와 동일한 기존 호이스팅 동작이 적용됩니다. 즉, 함수 선언이 범위 상단으로 호이스팅되고 결과적으로 범위가 엄격 모드의 적용 여부와 관계없이 선언 전에 호출할 수 있습니다.

"use strict";
{
    myFunction();
    function myFunction() {
        console.log( "This is my function." );
    };
}
> "This is my function."

엄격 모드 외부에서 함수 선언은 JavaScript의 레거시 범위 지정 동작을 사용합니다. 즉, 함수 선언의 범위가 가장 가까운 인클로징 함수로 지정됩니다.

function myFunction() {
    function myNestedFunction() {
        console.log( "This is my nested function." );
    }
    myNestedFunction();
};

myFunction();
> "This is my nested function."

myNestedFunction();
>Uncaught ReferenceError: myNestedFunction is not defined

엄격 모드에서 함수 선언은 let 또는 const를 사용하여 선언된 변수와 마찬가지로 가장 가까운 인클로징 블록으로 범위가 지정됩니다.

"use strict";
{
    function myFunction() {
        console.log( "This is my function." );
    };
}

myFunction();
> Uncaught ReferenceError: myFunction is not defined

함수 호출

변수와 마찬가지로 함수를 선언할 때 사용되는 식별자는 값의 기호 이름 역할을 합니다. 식별자만 사용하여 함수를 참조하면 함수 객체만 반환되며 포함된 함수는 실행되지 않습니다.

function myFunction() {
   console.log( "This is my function." );
};

myFunction;
> myFunction() {
   console.log( "This is my function." );
}

함수 본문 내에서 코드를 실행하려면 일치하는 괄호 쌍과 함께 함수 이름 뒤에 함수를 호출 (또는 호출)합니다.

function myFunction() {
    console.log( "My function has been executed." );
}

myFunction();
> "My function has been executed."

함수 정의의 매개변수는 함수 호출 시 함수 본문으로 전달할 수 있는 값의 자리표시자 변수 역할을 합니다. 함수가 호출될 때 괄호 안의 값은 '인수'입니다. 하지만 일부 문서에서는 인수와 매개변수를 모두 설명하는 데 '인수'를 사용할 수도 있습니다.

function myFunction( myParameter ) {
   console.log( `The value is: ${ myParameter }.` );
};

myFunction( "this string" );
> "The value is: this string."

필요한 인수가 생략되면 결과 매개변수에 undefined 값이 포함됩니다. 매개변수가 함수 본문에 선언되었지만 값으로 초기화되지 않았기 때문입니다.

function myFunction( myParameter ) {
   console.log( `The value is: ${ myParameter }.` );
};

myFunction();
> "The value is: undefined."

변수를 초기화하는 것과 같은 방식으로 기본 매개변수 값을 설정할 수 있습니다. 즉, 할당 연산자 (=) 뒤에 값을 지정하여 초기화하면 됩니다. 나중에 해당 함수에 인수를 지정하면 새 값이 기본값을 재정의합니다.

function myFunction( myParameter = "omitted" ) {
   console.log( `The value is: ${ myParameter }.` );
};

myFunction( "this string" );
> "The value is: this string."

myFunction();
> "The value is: omitted."

화살표가 아닌 함수의 본문은 함수 정의가 매개변수를 지정하는지와 관계없이 인수로 전달된 모든 값이 포함된 0 색인 배열과 같은 arguments 객체에도 액세스할 수 있습니다.

function myFunction() {
   console.log( arguments );
};

myFunction( 3, true, "My string" );
> Arguments { 0: 3, 1: true, 2: "My string", … }

가변 함수

arguments 객체를 사용하면 다양한 인수를 허용할 수 있는 기본 가변 함수를 만들 수 있습니다.

function myFunction() {
    let result = "";
    for (let i = 0; i < arguments.length; i++) {
        result += arguments[i] + " - ";
    }
    console.log( result );
};

myFunction( "My first string", "My second string", "my third string" );\
> "My first string - My second string - my third string - "

그러나 이 가변 함수에 대한 이 접근 방식은 최신 JavaScript 개발에서는 거의 사용되지 않습니다. 더 일반적이고 읽기 쉬운 rest 매개변수 구문을 사용하는 것이 더 일반적입니다. 이 구문은 명시적으로 지정된 것 이외의 모든 인수를 포함하는 배열로 초기화된 명명된 매개변수를 만듭니다.

function myFunction( mySeparator, ...myStrings ) {
  console.log( myStrings.join( mySeparator ) );
};

myFunction( " - ", "My first string", "My second string", "my third string" );
> "My first string - My second string - my third string"

parameter 결합과 달리 나머지 매개변수 구문은 화살표 함수 매개변수와 함께 예상대로 작동합니다.

function myOuterFunction() {
    let myInnerArrowFunction = ( ...myParams ) => {
        console.log( myParams[ 0 ] );
    }
    myInnerArrowFunction( true );
};

myOuterFunction( false );
> true

let myArrowFunction = ( ...myParams ) => {
    console.log( myParams[ 0 ] );
};

myArrowFunction( true );
> true`
``