자바스크립트 함수, 함수 호이스팅

함수 정의

3가지 방법

• 함수 선언문
• 함수 표현식
• Function() 생성자 함수

 

1. 함수 리터럴(함수 선언문)

function add(x, y) {
	return x + y;
}
console.log(add(3,4));	// 7

 

2. 함수 표현식

함수 리터럴로 함수를 만들고, 변수에 할당하여 생성하는 방식.

var add = function (x, y) {
	return x + y;
}
var plus = add;
console.log(add(3,4));	// 7
console.log(plus(3,4));	// 7

여기서는 function 키워드 뒤에 함수명 없어도 된다.

add는 함수 이름이 아니라 함수를 참조하는 변수다.

plus도 add가 참조하는 값을 그대로 받을 수 있다.

var add = function sum(x, y) {
	return x + y;
}
console.log(add(3,4));	// 7
console.log(sum(3,4));	// 에러 !!

위처럼 이름을 주었을 때 (기명함수) 에러가 난다. 

함수를 변수에 할당했을 때는 함수명이 아니라 변수명으로 접근해야한다.

함수 내부에서 sum 으로 접근은 가능하다.(재귀함수)

 

var add = function add(x, y) {
	return x + y;
}
console.log(add(3,4));	// 7

내부적으로 위처럼 변수명이 함수명으로 변경된다고 한다.

 

3. Function()

자바스크립트의 함수도 Function() 이라는 기본 내장 생성자 함수로부터 생성된 객체이다.

1.2 방법도 내부적으로 Function() 으로 생성된다.

var add = new Function('x', 'y', 'return x + y');
console.log(add(3,4));	// 7

하지만 잘 쓰이지 않는다.

 

---

함수 호이스팅

add(3,4);	// 7

function add(x, y) {
	return x + y;
}

add(3,4);	// 7

함수 선언문 형태로 정의한 함수는 코드 맨 처음부터 유효범위 시작 !

= 함수 호이스팅

 

add(3,4);	// 에러 !

var add = function (x, y) {
	return x + y;
}

add(3,4);	// 7

하지만 함수 표현식 형태로 함수를 정의하면 함수 호이스팅이 일어나지 않아 함수 정의 전 실행하면 에러가 난다.