모던 자바스크립트 Deep Dive - 12장 함수

함수.

• 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것.
• 함수에는 함수 내부로 입력을 전달받는 변수인 매개변수, 입력 받는 값인 인수, 출력하는 값인 반환 값으로 구성되어 있다.
  
  

함수를 사용하는 이유.

• 함수는 필요할 때 여러번 호출할 수 있다. 즉, 재사용이 가능하다. 동일한 반복 작업을 싫어하는 개발자들에게 효율적으로 개발 할 수 있게 해준다.
• 코드의 가독성을 향상 시킨다.

함수를 정의하는 4가지 방법.

1. 함수 선언문

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

함수 선언문은 함수 이름을 생략할 수 없다. 함수 선언문은 표현식이 아닌 문이기 때문이다.

2. 함수 표현식

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

js의 함수는 객체 타입의 값이기 때문에 값처럼 변수에 할당 할 수도 있고 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수도 있다. 이러한 성질을 갖는 객체를 일급 객체라고 한다.

함수 선언문 vs 함수 표현식

• 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출 할 수 있다. 그러나 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다. 함수 선언문으로 정의한 함수와 함수표현식으로 정의한 함수의 생성 시점이 다르기 때문이다.
  함수 선언문으로 함수를 정의하면 런타임 이전에 함수 객체가 먼저 생성된다. 그러면 런타임 이전에 이미 함수 객체가 생성되어 있으니 함수 선언문 이전에 함수를 참조할 수도 있고 호출할 수도 있는 것이다. 이것을 호이스팅이라고 한다.

3. Function 생성자 함수

자바스크립트가 기본 제공하는 빌트인 함수인 Function 생성자 함수에 매개변수 목록과 함께 몸체를 문자열로 전달하면서 new 연산자와 함께 호출하면 함수 객체를 생성해서 반환한다.

var add = new Function('x', 'y', return x+y);
console.log(add(2, 5)): // 7

4. 화살표 함수

ES6에서 도입된 함수. function 키워드 대신 화살표를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다.

const add = (x, y) => x + y;
console.log(add(2, 5)); // 7