수학에서 함수란, 어떤 입력값(정의역의 어떤 값)에 어떤 출력값(치역의 어떤값)을 대응시키는 것을 말한다. 그런데, 프로그래밍 언어에서는 어떤 입력값(없을 수도 있음)을 넣으면 어떤 작업이 실행되고, 어떤 출력값(안나올 수도 있음)이 나오는 코드 덩어리를 말한다.
이번 글에서는 JS에서 사용되는 함수에 대해 간단히 써보려고 한다.
함수의 구조
JS에서 함수는 “function”이라는 키워드로 정의한다. 기본적으로 함수는 아래의 구조를 가진다.
function 함수이름(매개변수1, 매개변수2, ...) {
// 함수 본문
return 반환값 // 반환값 없어도 됨.
}
그런데, JS에서 함수를 정의하는 방식은 1가지만 있는 게 아니라 2가지가 있다.
함수 정의 2가지 방법
함수 선언식 Function Declaration
function 함수이름 (매개변수1, 매개변수2, ...) {
// 함수 본문
return 반환값
}
위 코드에서와 같이 함수를 정의하는 것을 선언식이라고 한다. 그냥 함수 정의하는 거다.
함수 표현식 Function Expression
const 함수이름 = function (매개변수1, 매개변수2, ...) {
// 함수 본문
return 반환값
}
한편 위와 같이 변수를 선언해서 익명의 함수를 할당하는 방식을 함수 표현식이라 한다.
둘 중 뭘 써야 할까? 우리는 함수 표현식을 쓰는 게 권장된다.
왜냐하면 함수 표현식은 ‘호이스팅’되지 않기 때문이다. 호이스팅이란, 자바스크립트 인터프리터가 코드를 실행하기 전에 함수나 변수의 선언을 해당 스코프의 맨 위로 끌어 올린 것처럼 처리하는 현상을 말한다.
결국 호이스팅은 코드를 작성하면서 의도하지 않은 결과를 낳을 수 있기 때문에 우리는 함수 표현식을 쓰는 게 좋다.
No Responses