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