자바스크립트 함수

함수 

- 자바스크립트에서 함수는 참 많이 사용하는데, 그 종류에 대해서 한번 다시 알아봐보자

 

함수 표현식

- 보통 우리는 함수를 함수 표현식으로 많이 사용한다. 

function sayHi() {

alert( "Hello" );

}

 

- 함수를 변수에 복사가 가능하다. 

function sayHi() {

// (1) 함수 생성

alert('Hello');

}

let func = sayHi; // (2) 함수 복사

func(); // Hello // (3) 복사한 함수를 실행(정상적으로 실행됩니다)!

sayHi(); // Hello // 본래 함수도 정상적으로 실행됩니다.

- function 키워드로 만든 함수 표현식을 func라는 변수에 함수를 복사했다. 변수에 함수를 복사할 때는 주의사항이 있다.

 

⚠️ 주의사항

- 만약 함수를 변수에 담을 때 함수에() 괄호를 붙이면 함수의 결과값이 저장이 된다는 점이다. -> 그래서 함수 자체를 변수에 담을 때는 함수 이름을 담자!

 

콜백함수

- 콜백함수는 함수를 함수 인수로 전달하는 것이다. 그리고 함수가 필요한 타이밍에 호출해서 사용하는 것이 콜백함수다.

function ask(question, yes, no) {

if (confirm(question)) yes();

else no();

}

function showOk() {

alert('동의하셨습니다.');

}

function showCancel() {

alert('취소 버튼을 누르셨습니다.');

}

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨

ask('동의하십니까?', showOk, showCancel);

function ask(question, yes, no) {

if (confirm(question)) yes();

else no();

}

ask(

'동의하십니까?',

function () {

alert('동의하셨습니다.');

},

function () {

alert('취소 버튼을 누르셨습니다.');

}

);

- 위 예시 코드를 보면 ask 함수 안에 function 키워드만 있고 이름이 없는데 이를 익명함수라고 한다. 익명함수는 변수에 할당이 되어있지 않아, ask 바깥에서는 접근이 불가하다는 특징이 있다. 

 

함수 표현식 vs 함수 선언문

- 함수 선언문과 함수 표현식의 차이는, 문법적인 특징도 있지만, 자바스크립트 엔진이 함수를 생성하는지에 달려있다. 

- 함수 표현식은 실행 흐름이 함수에 도달 했을 때 함수를 실행한다는 특징이 있다. 즉 실행 흐름이 되어야 해당 함수를 사용이 가능하다는 의미이다. 

- 하지만 함수 선언문의 경우는 선언문이 정의 되기도 전에 호출이 가능하다. 

🤔 간단한 이유는 자바스크립트 엔진이 실행을 하기전 전역에 선언된 함수 선언문을 찾고, 해당 함수를 찾기 때문이다. 스크립트는 모든 함수 선언문이 처리된 후 실행이 된다. 

 

- 또 한 스코프에 영향이 있는데,  함수 선언문은 스코프가 함수가 선언된 코드 블록 안에서만 유효하다. 하지만 함수 표현식은 코드 블록 밖에서도 유효한 것을 볼 수 있다.