함수

함수란 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록입니다.

// 함수의 정의(함수 선언문)
function Hello(number) {
  return number * number;
}

함수는 호출에 의해 실행되며, 한번만 가능한것이 아니라 여러번 호출이 가능합니다.

// 함수의 정의(함수 선언문)
function Hello(number) {
  return number * number;
}

// 함수의 호출
Hello(2); // 4

어떠한 동일한 작업을 반복적으로 수행해야 한다면 미리 정의된 함수를 재사용하는 것이 가장 효율적입니다. 이러한 특성은 코드의 재사용이라는 측면에서 매우 유용합니다.

 

함수의 일반적인 기능은 어떤 작업을 수행하는 문들의 집합을 정의하여 코드의 재사용에 목적이 있습니다.

 

자바스크립트의 함수는 객체(일급 객체, First-class object)입니다.

다른 객체와 구분될 수 있는 특징은 호출할 수 있다는 것입니다. 함수도 객체이므로 다른 값 들처럼 사용할수 있습니다.

즉 변수나, 객체, 배열등에 저장할수 있으며, 다른 함수에 전달되는 인수로서 활용될수 있으며, 함수의 반환값이 될수도 있습니다.

 

함수 정의

함수를 정의하는 방식은 3가지가 있습니다.

 

 1. 함수 선언문

 2. 함수 표현식

 3. Function 생성자 함수

 

함수 선언문

함수 선언문 방식으로 정의한 함수는 function 키워드와 같이 다음의 내용으로 구성됩니다.

// 함수 선언문
function square(number) {
  return number * number;
}

 

함수 표현식

자바스크립트의 함수는 일급 객체이므로 위에서 언급했던것과 같이 다음과 같은 특징을 가지고 있습니다.

1. 리터럴로 표현이 가능하다.
2. 변수나 자료 구조(객체, 배열)에 저장할 수 있다.
3. 함수의 파라미터로 전달할 수 있다.
4. 반환값으로 사용할 수 있다.

함수의 일급객체 특성을 이용하여 함수 리터럴 방식으로 함수를 정의하고 변수에 할당할 수 있는데 이러한 방식을 함수 표현식 이라고 합니다. 위에서 함수 선언문으로 정의한 방식을 함수 표현식으로 정의하면 다음과 같습니다.

// 함수 표현식
var square = function(number) {
  return number * number;
};

함수 표현식 방식으로 정의한 함수는 함수명을 생략할 수 있습니다. 이러한 함수를 익명 함수라고 합니다. 함수 표현식에서는 함수명을 생략하는 것이 일반적입니다.

// 기명 함수 표현식(named function expression)
var foo = function multiply(a, b) {
  return a * b;
};

// 익명 함수 표현식(anonymous function expression)
var bar = function(a, b) {
  return a * b;
};

console.log(foo(10, 5)); // 50
console.log(multiply(10, 5)); // Uncaught ReferenceError: multiply is not defined

 

Function 생성자 함수

함수 표현식으로 함수를 정의할 때 함수 리터럴 방식을 사용합니다. 함수 선언문도 내부적으로 자바스크립트 엔진이 함수 표현식으로 반환하므로 결국 함수 리터럴 방식을 사용합니다.

 

 함수 선언문과 함수 표현식은 모두 함수 리터럴 방식으로 함수를 정의하는데 이것은 결국 내장 함수 Function 생성자 함수로 함수를 생성하는 것을 단순화시킨 축약법 입니다.

new Function(arg1, arg2, ... argN, functionBody)

var square = new Function('number', 'return number * number');
console.log(square(10)); // 100

Function 생성자 함수로 함수를 생성하는 방식은 일반적으로 사용하지 않습니다.

 

함수 호이스팅

var res = square(5);

function square(number) {
  return number * number;
}

위 코드를 보면 함수 선언문으로 함수가 정의되기 이전에 함수 호출이 가능합니다.

함수 선언문의 경우, 함수 선언의 위치와는 상관없이 코드 내 어느 곳에서든지 호출이 가능한데 이것을 함수 호이스팅이라고 합니다.

 

자바스크립트는 ES6의 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅 합니다.

 

호이스팅이란 var 선언문이나 function 선언문 등 모든 선언문이 해당 스코프의 선두로 옮겨진 것처럼 동작하는 특성을 말합니다.

즉 자바스크립트는 모든 선언문(var, let, const, function, function*, class)이 선언되기 이전에 참조 가능합니다.

 

함수 선언문으로 정의된 함수는 함수 선언, 초기화, 할당이 한번에 이루어집니다. 그렇기 때문에 함수 선언의 위치와는 상관없이 어느 곳에서든지 호출이 가능합니다.

 

다음은 함수 표현식으로 함수를 정의한 경우입니다.

var res = square(5); // TypeError: square is not a function

var square = function(number) {
  return number * number;
}

함수 선언문의 경우와는 달리 TypeError가 발생하였습니다. 함수 선언문과 달리 함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생합니다.

변수 호이스팅은 변수 생성 및 초기화와 할당이 분리되어 진행됩니다. 호이스팅된 변수는 undefined로 초기화 되고 실제값의 할당은 할당문에서 이루어집니다.

즉 함수 표현식은 함수선언문과는 달리 스크립트 로딩 시점에서 객체에 함수를 할당하지 않고, 런타임에 의해 해석되고 실행되므로 함수선언문과는 차이가 있습니다. 그리고 이와같은 문제 때문에 함수선언문 대신에 함수 표현식을 사용하는것을 권고하고 있습니다.