본문 바로가기
Front-End/Javascript

[Javascript DeepDive] 함수_1

by Cafe Mocha 2022. 5. 10.

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;
};