[JavaScript] 함수, 함수 호이스팅, 즉시실행함수 등

함수

• 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자이다.
  • 그런데 어떻게 함수를 몸체 바깥 스코프에서도 부를 수 있는 걸까?
  • 자바스크립트 엔진은 함수 몸체 바깥에서도 함수를 참조할 수 있도록, 생성한 함수의 이름과 동일한 이름의 식별자를 암묵적으로 생성한 다음 거기에 함수 객체를 할당해 넣는다.
  • 우리가 함수를 호출하는 과정은 함수 이름을 호출하는 것이 아닌 함수 객체를 가리키는 식별자를 호출하는 것이다.
• 이름이 있는 함수를 named function, 이름을 생략해 없는 함수를 anonymous function이라고 한다.
• 자바스크립트의 함수는 일급 객체이다. 일급 객체란 함수를 값처럼 자유롭게 사용할 수 있는 객체라는 뜻이다.

 

함수 정의 방식

1. 함수 선언문
   • function add(x,y) { return x + y; }
   • 이름을 생략할 수 없다.
   • 함수 선언문은 표현식이 아닌 문(식이 아닌 일종의 선언)이다. 그러므로 콘솔에서 실행시 완료값이 undefined로 출력된다.
   • 문이 아니므로 피연산자로 쓰일 수 없다. 피연산자로 사용하면 함수 표현식으로 해석된다.
2. 함수 표현식
   • var add = function (x, y) { return x + y; };
   • var add = function foo (x, y) { return x + y; };
   • 함수 리터럴로 생성한 함수 객체를 변수에 할당한 것.
   • foo를 호출하면 에러가 발생한다. add로 호출해야한다. (foo의 스코프가 foo 내부와 add까지이기때문)
   • 함수 호출은 표현식이다. (반환값과 표현식이 쓰이므로)
3. Function 생성자
   • var add = new Function('x', 'y', 'return x+y');
4. 화살표 함수(ES6)
   • var add = (x, y) => x + y;

함수를 선언한다는 말은 함수의 실체가 생길 때 사용하는 말이므로 함수는 정의한다고 표현한다.

 

 

 

함수 호이스팅

console.dir(add); // f add(x, y)
console.dir(sub); // undefined 
function add(x,y) { return x + y; }
var sub = function (x, y) { return x - y; };

• 함수는 런타임 이전에 자바스크립트 엔진에 의해 먼저 생성된다. 함수 객체가 먼저 생성되고, 함수 이름과 동일한 이름의 식별자가 암묵적으로 생성된다. 이후 생성된 함수 객체가 식별자에 할당된다.
• 그러므로 함수 선언문으로 정의한 함수는 함수 표현식으로 정의한 함수와 달리 함수 선언문 이전에 호출할 수 있다.
• 이렇게 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 것을 함수 호이스팅이라 한다.

함수 호이스팅과 변수 호이스팅 간에는 차이가 있다.
var 키워드로 선언된 변수는 선언문 이전에 참조할 경우 변수가 런타임 이전에 선언되어 있어서 undefined로 초기화되어있다. 변수는 선언과 할당 두 가지로 나뉘어 있어 런타임 중 할당문이 실행되는 시점에 할당이 이뤄지기 때문이다.
그러나 함수는 존재 자체가 선언문이기 때문에 이러한 영향을 받지 않는다.

• 따라서 함수 표현식으로 함수를 정의하면 변수 호이스팅이 발생한다. 함수 리터럴에 할당문이 실행되는 시점이 런타임 중이므로 undefined가 발생하기 때문이다.

 

매개변수

• 인수가 할당되지 않은 매개변수의 값은 undefined이다.
• 초과된 인수는 arguments 객체의 프로퍼티에 보관되게 된다.
• 자바스크립트는 동적 타입 언어이므로 매개변수의 타입을 사전에 지정할 수 없다.
• 자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않는다.
  • 올바른 인수가 전달되었는지 함수 내부에서 단축 평가 등을 이용해 검사해야 한다.
  • ES6에서 도입된 매개변수 기본값을 이용해 함수 내에서 수행하던 인수 체크 및 초기화를 간소화 할 수 있다.
  • function add(a) { a = a || 0; return a; }

 

즉시 실행 함수

• Immediately Invoked Function Expression
• 대부분 익명 함수를 사용한다.
• 정의와 동시에 즉시 호출되며 단 한번만 호출된다. 다시 호출할 수 없다.
• 즉시실행함수는 반드시 그룹 연산자 () 로 감싸야 한다.
  • 그 이유는 자바스크립트 엔진이 중괄호 뒤에 암묵적으로 세미콜론을 붙이기 때문이다.
  • function foo() {}(); 와 같이 마지막에 붙어있는 함수 호출 연산자를 그룹 연산자로 해석한다. function foo() {}; (); 그룹연산자가 비어있기 때문에 에러가 발생한다.
• 예시

(function () {
    var a = 3;
    var b = 5;
    return a * b;
}());

 

콜백 함수

• 함수의 매개변수를 통해 다른 함수에게 전달된 다음, 필요에 의해 호출되는 함수를 콜백함수라고 한다.
• 매개변수를 통해 함수의 외부에서 콜백함수를 전달받은 함수를 고차함수라고 한다.
• 고차함수는 콜백함수를 자신의 일부분으로 합성한다.