모던 JS (11)

12장 함수 154 ~ 167 page

함수란?

• 자바스크립트의 핵심 개념인 스코프, 실행 컨테스트, 클로저, 생성자 함수에 의한 객채 생성, 매서드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있다.
• 프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.
• 프로그래밍 언어의 함수도 입력을 받아서 출력을 내보낸다.
• 이때 함수 내부로 입력을 전달받은 변수를 '매개변수', 입력을 '인수', 출력을 '반환값'이라 한다.

function add(x, y) {
	return x + y;
}
add(2, 5); // 7

---

함수를 사용하는 이유

• 동일한 작업을 반복적으로 수행해야 한다면 같은 코드를 중복해서 여러 번 작성하는 것이 아니라 미리 정의된 함수를 재사용하는 것이 효율적이다.
• 함수는 몇 번이든 호출할 수 있으므로 코드의 재사용이라는 측면에서 매우 유용하다.
• 코드의 중복을 억제하고 재사용성을 높이는 함수는 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높이는 효과가 있다.
• 적절한 함수 이름은 함수의 내부 코드를 이해하지 않고도 함수의 역할을 파악할 수 있게 돕는다. 이는 코드의 가독성을 향상시킨다.

함수 리터럴

• 자바스크립의 함수는 객체타입의 값이다.
• 함수 리터럴은 function 키워드, 함수 이름, 매개변수 목록, 함수 몸체로 구성된다.
• 함수 리터럴도 평가되어 값을 생성하며, 이 값은 객체다. 즉, 함수는 객체다.
• 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다.

함수 정의

• 함수 정의란 함수를 호출하기 이전에 인수를 전달받은 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것을 말한다.
• 함수 선언문, 함수 표현식, function 생성자 함수, 화살표 함수 4가지가있다.
• 변수는 선언한다고 했지만 함수는 정의한다고 표현한다.

함수 선언문

function add(x, y) {
	return x + y;
}
console.dir(add); // 함수 객채의 프로퍼티까지 출력한다.
console.log(add); // 7

• 함수 선언문은 함수 리터럴과 형태가 동일하다. 단, 함수 리터럴은 함수 이름을 생략할 수 있으나 함수 선언문은 함수 이름을 생략할 수 없다.
• 함수 선언문은 표현식이 아닌 문이다.
• 자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.

함수 표현식

• 자바스크립트의 함수는 값처럼 변수에 할당할 수도 있고, 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수도 있다. 이처럼값의 성질을 갖는 객체를 '일급객체'라 한다. 자바스크립트의 함수는 일급 객체다. 함수가 일급 객체라는 것은 함수를 값처럼 자유롭게 사용할 수 있다는 의미다.
• 함수 선언문은 '표현식이 아닌 문'이고 함수 표현식은 '표현식인 문'이다.

함수 생성 시점과 함수 호이스팅

• 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있다.
• 함수 표현식으로 정의한 함수는 표현식 이전에 호출할 수 없다.
• 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성시점이 다르기 때문이다.
• 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 '함수 호이스팅'이라 한다.
• 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.
• 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.

Function 생성자 함수

• 생성자 함수는 객체를 생성하는 함수를 말한다. 객체를 생성하는 방식은 객체 리터럴 이외에 다양한 방법이 있다.
• Function 생성자 함수로 함수를 생성하는 방식은 일반적이지 않으며 바람직하지도 않다.
• Function 생성자 함수로 생성한 함수는 '클로저'를 생성하지 않는 등, 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작한다.

화살표 함수

• ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표 => 를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다. 화살표 함수는 항상 익명 함수로 정의한다.
• 화살표 함수는 생성자 함수로 사용할 수 없으며, 기존 함수와 this 바인딩 방식이 다르고, prototype 프로 퍼티가 없으며 arguments 객체를 생성하지 않는다.

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