12장 함수
- 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.
- 함수는 코드의 재사용 측면에서 매우 유용하다.
- 자바스크립트에서 함수는 객체이다.
- 변수 선언과 함수 정의
- 변수는 선언(declaration)한다고 했지만 함수는 정의(definition)한다고 표현했다.
- 함수 선언문이 평가되면 식별자가 암묵적으로 생성되고 함수 객체가 할당된다.
- 일급 객체 : 자바스크립트의 함수는 값처럼 변수에 할당할 수도 있고 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수도 있다. 이러한 값의 성질을 갖는 객체를 일급 객체라 한다.
- 함수 생성 시점과 함수 호이스팅
- 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있다.
- 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다.
- 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문이다.
- 함수 호이스팅 : 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징
- 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 생성되는 시점에 평가되어 함수 객체가 된다.
- 함수 표현식으로 함수를 정의하면 함수 호이스팅이 아닌, 변수 호이스팅이 발생.
- function 생성자 함수
- function 생성자 함수로 함수를 생성하는 방식은 일반적이지 않으며 바람직하지 않다.
- function 생성자 함수로 생성한 함수는 클로저를 생성하지 않는 등, 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작한다.
- 화살표 함수
- ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표 ⇒ 를 사용해 함수를 생성
- 화살표 함수는 기존 함수와 this 바인딩 방식이 다르고, prototype 프로퍼티가 없으며 arguments 객체를 생성하지 않는다.
//함수 참조
console.dir(add); // f add(x,y)
console.dir(sub); // undefined
//함수 호출
console.log(add(2,5)); // 7
console.log(sub(2,5)); // TypeError
//함수 선언문
function add(x, y) {
return x+y;
}
//함수 표현식
var sub = function (x, y) {
return x - y;
};
'Front-End > Javascript' 카테고리의 다른 글
[자바스크립트 DeepDive] let,const 키워드와 블록 레벨 스코프 (0) | 2022.05.17 |
---|---|
[자바스크립트 DeepDive] 타입 변환과 단축 평가 (0) | 2022.05.03 |
[자바스크립트 Deep Dive] 표현식과 문 (0) | 2022.04.27 |