인사이드 자바스크립트 #06 (함수정의)

자바스크립트에서의 함수를 생성하는 방법은 3가지가 있다

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

---

함수 리터럴

자바스크립트에서는 함수도 일반 객체처럼 값으로 취급된다. 때문에 객체 리터럴 방식으로 일반 객체를 생성할 수 있는 것처럼 자바스크립트에서는 함수 리터럴을 이용해 함수를 생성할 수 있다. 

 

함수 리터럴은 크게 네 부분으로 구성된다.

 function add (x, y) {

  return x + y;

}

① function 키워드 : 자바스크립트 함수 리터럴은 function 키워드로 시작한다.

② 함수명 : 함수명은 함수 몸체 내부코드에서 자신을 재귀적으로 호출하거나 자바스크립트 디버거가 해당함수를 구분하는 식별자로 사용된다. 여기서 주목할 점은 함수명은 선택사항이라는 것이다. 함수명이 없는 함수를 익명 함수라 한다. 

③ 매개변수 리스트 : 매개변수는 C 언어와 기존 언어의 함수 매개변수 형태와 거의 비슷하지만 매개변수 타입을 기술하지 않는다는 차이가 있다.

④ 함수 몸체 : 실제 함수가 호출됐을 때 실행되는 코드 부분이다.

---

함수 선언문 방식으로 함수 생성하기

함수 선언문 방식은 함수 리터럴 형태와 같다. 다만 주의할 점은 함수 선언문 방식으로 정의된 함수의 경우는 반드시 함수명이 정의되어 있어야 한다는 것이다. 

// add() 함수 선언문
function add (x,y) {
	return x + y;
}

console.log(add(3,4)); // (출력값) 7

---

함수 표현식 방식으로 함수 생성하기

자바스크립트에서는 함수도 하나의 값처럼 취급된다. 따라서 함수도 숫자나 문자열처럼 변수에 할당하는 것이 가능하다. 이런 식으로 함수 리터럴로 하나의 함수를 만들고, 여기서 생성된 함수를 변수에 할당하여 함수를 생성하는 것을 함수 표현식이라고 한다. 

// add () 함수 표현식
var add = function (x,y) {
	return x + y;
}

var plus = add;

console.log(add(3,4)); // (출력값) 7
console.log(plus(5,6)); // (출력값) 11

 

익명 함수의 호출은 함수 변수에 함수 호출 연산자인 () 를 붙여서 기술하는 것으로 가능하다. 

함수 이름이 포함된 함수 표현식을 기명 함수 표현식 이라 한다.

---

Function() 생성자 함수를 통한 함수 생성하기(자주 사용되지 않음)

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

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

---

함수 호이스팅

함수가 자신이 위치한 코드에 상관없이 함수 선언문 형태로 정의한 함수의 유효 범위는 코드의 맨 처음부터 시작하는 것이다.

└ 무슨 소리지...?

함수 호이스팅이 발생하는 원인은 자바스크립트의 변수 생성Instantiation 과 초기화Initialization 의 작업이 분리돼서 진행되기 때문이다.