함수는 일련의 작업을 수행하는 데 사용되는 재사용 가능한 모듈식 문 블록입니다. 관련 작업(예: 인수를 기반으로 값 계산 및 반환) 함수에 제공됩니다. 모든 비 원시값과 마찬가지로 함수는 객체입니다. API는 객체를 호출할 수 있다는 점에서 인수 형식으로 데이터가 전달되어야 하며, 값을 반환합니다.
함수는 '일급'으로 간주됩니다. 다시 말해, 객체의 고유한 동작에도 불구하고 모든 객체를 생성할 수 있습니다. 예를 들어 함수는 변수에 할당되고 다른 함수에 인수로 전달되며 다른 함수와 일치해야 합니다.
function myFunction() {
console.log( "This is my function." );
};
객체의 속성으로 정의된 함수는 다음과 같습니다.
보통 '메서드'라고 합니다 var
를 사용하여 선언된 변수와 마찬가지로
인클로징 함수 외부에서 생성된 함수 선언은
전역 객체를 메서드로 사용하세요.
함수 선언
함수 선언('함수 문' 또는 '함수 정의'라고도 함)
포함된 범위의 다른 곳에서 호출할 수 있는 이름이 지정된 함수를 만듭니다.
함수 선언은 function
키워드와 그 뒤에 오는
식별자, 괄호로 묶인 쉼표로 구분된 매개변수 목록 및
block 문이
"함수 본문입니다." 함수 선언이
세미콜론으로 끝나야 합니다. 왜냐하면 함수 선언은 문이기 때문입니다.
세미콜론은 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
결합과 달리 REST 매개변수 문법은 화살표 함수 매개변수와 함께 예상대로 작동합니다.
function myOuterFunction() {
let myInnerArrowFunction = ( ...myParams ) => {
console.log( myParams[ 0 ] );
}
myInnerArrowFunction( true );
};
myOuterFunction( false );
> true
let myArrowFunction = ( ...myParams ) => {
console.log( myParams[ 0 ] );
};
myArrowFunction( true );
> true`
``