- 자바스크립트는 함수를 특별한 종류의 값으로 취급합니다.
- 다른 언어에서처럼 "특별한 동작을 하는 구조"로 취급되지 않습니다.
let sayHi = function() {
alert( "Hello" );
};
- 함수를 생성하고 변수에 값을 할당하는 것처럼 함수가 변수에 할당되었습니다. 함수가 어떤 방식으로 만들어졌는지에 관계없이 함수는 값이고, 따라서 변수에 할당할 수 있습니다.
- 위 예시에선 함수가 변수 sayHi에 저장된 값이 되었습니다.
- 위 예시를 간단한 말로 풀면 다음과 같습니다: “함수를 만들고 그 함수를 변수 sayHi에 할당하기”
- 함수는 값이기 때문에 alert를 이용하여 함수 코드를 출력할 수도 있습니다.
function sayHi() {
alert( "Hello" );
}
*alert( sayHi ); // 함수 코드가 보임*
- 마지막 줄에서 sayHi옆에 괄호가 없기 때문에 함수는 실행되지 않습니다. 어떤 언어에선 괄호 없이 함수 이름만 언급해도 함수가 실행됩니다.
- 하지만 자바스크립트는 괄호가 있어야만 함수가 호출됩니다.
- 자바스크립트에서 함수는 값입니다. 따라서 함수를 값처럼 취급할 수 있습니다. 위 코드에선 함수 소스 코드가 문자형으로 바뀌어 출력되었습니다.
- 함수는 sayHi()처럼 호출할 수 있다는 점 때문에 일반적인 값과는 조금 다릅니다. 특별한 종류의 값이죠.
- 하지만 그 본질은 값이기 때문에 값에 할 수 있는 일을 함수에도 할 수 있습니다.
- 변수를 복사해 다른 변수에 할당하는 것처럼 함수를 복사해 다른 변수에 할당할 수도 있습니다.
콜백 함수
- 매개변수가 3개 있는 함수, ask(question, yes, no)를 작성해보겠습니다. 각 매개변수에 대한 설명은 아래와 같습니다.
- question질문yes"Yes"라고 답한 경우 실행되는 함수**no**"No"라고 답한 경우 실행되는 함수
- 함수는 반드시 question(질문)을 해야 하고, 사용자의 답변따라 yes() 나 no()를 호출합니다.
function ask(question, yes, no) {
if (confirm(question)) yes()
else no();
}
function showOk() {
alert( "동의하셨습니다." );
}
function showCancel() {
alert( "취소 버튼을 누르셨습니다." );
}
// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);
- 함수 ask의 인수, showOk와 showCancel은 콜백 함수 또는 콜백이라고 불립니다.
함수 표현식 vs 함수 선언문
- 함수 선언문: 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재합니다.
- // 함수 선언문 function sum(a, b) { return a + b; }
- 함수 표현식: 함수는 표현식이나 구문 구성(syntax construct) 내부에 생성됩니다. 아래 예시에선 함수가 할당 연산자 =를 이용해 만든 “할당 표현식” 우측에 생성되었습니다.
- // 함수 표현식 let sum = function(a, b) { return a + b; };
- 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성합니다. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있습니다.
- 함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있습니다.
- 엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있습니다. 하지만 블록 밖에서는 함수에 접근하지 못합니다.