이전 편
JavaScript Core 객체편
지난 객체 편에 이어 이번편은 JavaScript 함수에 대해 알아보자
함수는 JavaScript에서 기본적인 구성
블록중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 합니다.
MDN 함수 정의
위 설명이 처음 접하는 초심자 입장에서는 와닿지 않을 수도 있다. 해당 설명은 프로토타입과 호이스팅 등 js의 핵심 개념을 이해하고 다시 돌아와서 보면 이해가 된다. 핵심 개념 이전에 간단히 함수에 대해 알아보고 호이스팅에 대해 알아보자
함수 생성 3가지 방법
- 함수 선언문(function statement)
- 함수 표현식(function expression)
- Function() 생성자 함수(자주 사용하지 않으므로 있다는 정도만 알아두자)
함수 선언문(function statement)
function name(x){
return x;
}
console.log(name('함수선언문')); // return 값 함수선언문 - 함수 선언문 방식은 함수 리터럴 형태와 같다.
- 반드시 함수명이 정의되어 있어야한다. 함수명으로 호출할 수 있다.
함수 표현식(function expression)
var name = function(x) {
return x;
}
console.log(name('함수표현식')) // return 값 함수표현식- 자바스크립트에서 함수도 변수에 할당할 수 있다.
- 변수에 할당하여 생성하는 방식으 함수 표현식이다.
- 변수 명으로 함수를 호출할 수 있다.
함수 호이스팅과 함수 표현식 권장 이유
자바스크립트 핵심 가이드의 저자 더글라스 크락포드는 함수 표현식만을 사용할 것을 권하했다. 이는 함수의 호이스팅 때문인데 선언문과 표현식의 차이점을 살펴보자
함수 선언문은 함수가 정의되기도 전에 호출하는게 가능하네?
name('함수선언문'); //리턴 값 함수선언문
function name(x){
return x;
}
name('함수선언문2') //리턴 값 함수 선언문2함수 표현식은 그렇게 하면 오류 발생
name('함수표현식'); // Uncaught TypeError
var name = function(x){
return x;
}
name('함수표현식2'); //리턴 값 함수표현식2 호이스팅
- 호이스팅이란 '끌어올리다' 의 뜻을 가지고 있다. 함수 선언 전에 호출이 가능한 걸 두고 호이스팅이 일어났다고 표현한다.
- 함수 선언문은 호이스팅이 일어난다.
- 함수 표현식은 호이스팅이 일어나지 않는다.
호이스팅이 발생하면 비즈니스 로직에서 문제가 발생할 가능성이 높기 때문에 함수 표현식을 권장한다.
호이스팅이 발생하는 원인은 실행컨텍스트에 대한 개념 포스팅에서 다룰 예정입니다.
기록