JavaScript] 자바스크립트 뿌시기 (함수 생성)

🎉 함수 정의

---

1. 함수 선언문
2. 함수 표현식
3. Function() 생성자 함수

함수 선언문

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

console.log(add(1,2)); // print >> 3

• function 키워드로 시작한다.
• 함수명은 필수 사항이다.
• 리턴 값과 매개 변수로 넘기는 값의 변수 타입을 기재하지 않는다.

함수 표현식

생성된 함수를 변수에 할당하여 함수를 생성하는 것을 함수 표현식이라고 한다.

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

var plus = add;

console.log(add(1,2)); // print >> 3
console.log(plus(1,2)); // print >> 3

• add는 함수 이름이 아니다 ❗ 함수 리터럴로 생성한 함수를 참조하는 변수이다.
• add는 함수의 참조값을 가지고 있어, 다른 변수에도 그대로 할당할 수 있다.

이렇게 이름이 없는 함수는 익명 함수라고 하고, 익명 함수 표현식이라고 한다.

아래 코드 처럼 이름이 있는 함수는 기명 함수 표현식이라고 한다.

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

console.log(add(1,2)); // print >> 3
console.log(sum(1,2)); // print >> Uncaught ReferenceError : sum is not defined 에러 발생

• sum(1,2)가 에러나는 이유는, 함수 표현식에서 사용된 함수 이름은 외부 코드에서 접근이 불가하기 때문이다.

🤷‍♀️ 왜냐하면

자바 스크립트 엔진은 함수 선언문으로 정의된 함수를 다음과 같이 변경하기 때문이다.

function multi(x, y){
 return x * y;
};

// 아래와 같이 함수 표현식의 형태로 변경된다.

var multi = function multi(x, y){
 return x * y;
};

결국, 함수 이름으로 함수가 호출 되는 것처럼 보이지만, 실제로는 var multi의 변수로 함수 외부에서 호출되는 것이었다.

❓ 그럼 함수 이름은 언제 쓰이나
함수 내부에서 재귀적으로 자기 자신을 재귀적으로 호출하고 싶을 경우 사용한다.

Function() 생성자 함수

자바스크립트의 함수는 사실상 내부적으로 Function()이라는 생성자 함수로부터 생성된 객체다.
Function() 생성자 함수로 함수 생성하는 문법

new Function(arg1, arg2, arg3, ... , argN, functionBody)

var multi = new Function('x', 'y', 'return x * y');
console.log(multi(3,2)); // print >> 6

함수 호이스팅

각 함수 생성 방식은 동작 방식에 약간의 차이가 있다.

1. 함수 선언문

• 함수의 유효 범위가 코드 맨 처음부터다.

2. 함수 표현식

• 함수 유효 범위가 함수 생성된 라인 이후이다.

1번의 경우를 함수 호이스팅이라고 하는데, To be continue..... :)

📖 출처

---

송형주, 고현준 지음, 『인사이드 자바스크립트』, 한빛미디어(2014)