함수

함수란?

함수는 자바스크립트에서 가장 중요한 핵심 개념이다. 또 다른 자바스크립트의 핵심 개념인 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있다.

따라서 함수는 자바스크립트를 정확히 이해하고 사용하기 위해 피해갈 수 없는 핵심 중의 핵심이라고 할 수 있다.

수학의 함수

수학의 함수는 입력을 받아 출력을 내보내는 일련의 과정을 정의한 것이다.

자바스크립트의 함수

프로그래밍 언어의 함수도 수학의 함수와 같은 개념이다. 함수 f(x,y) = x + y를 자바스크립트의 함수로 표현해 보자

함수는 함수 정의를 통해 생성한고, 호출을 통해 실행한다

function add(x, y) {
  return x + y;
}

함수 정의만으로 함수가 실행되는 것은 아니다. 수학의 함수처럼 미리 정의된 일련의 과정을 실행하기 위해 필요한 입력, 즉 인수(argument)를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시해야 한다.

이를 함수 호출(function invoke/call) 이라 한다. 함수를 호출하면 코드 블록에 담긴 문들이 일괄적으로 실행되고, 실행 결과, 즉 반환값을 반환(return)한다.

함수 리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(=notation) 을 말한다.

자바스크립트의 함수는 객체 타입의 값이다. 따라서 함수도 함수 리터럴로 생성할 수 있다. 함수 리터럴은 ① function 키워드, ② 함수 이름, ③ 매개변수 목록, ④ 함수 몸체로 구성된다.

var foo = function add(x, y) {
  return x + y;
};

함수 리터럴의 구성 요소는 다음과 같다

함수 정의

자바스크립트에서 함수를 정의하는 방법에는 4가지가 있다

case 1 :함수 선언문

function add(x,y){
  return x+y;
}

case 2: 함수 표현식
var add = function(x,y){
  return x + y;
}

case 3: Function 생성자 함수
var add = new Function('x','y', 'return x+y');

case 4: 화살표 함수(ES6)
var add = (x,y) => x+y;

① 함수 선언문

① 함수 선언문은 함수 리터럴과 형태가 동일하다. 단, 함수 리터럴은 함수 이름을 생략할 수 있으나 함수 선언문은 함수 이름을 생략할 수 없다.

// 함수 선언문은 함수 이름을 생략할 수 없다.
function (x, y) {
  return x + y;
}
// SyntaxError: Function statements require a function name

문법 오류: Function 문은 함수 이름이 필요합니다

또한 함수 선언문은 표현식이 아닌 문(statement)이다. 함수 선언문이 만약 표현식인 문이라면 값이 평가돼야 한다.

case 1: 표현식인 문 > 값으로 평가될 수 있는 문 (할당문)
var x = 1;

case 2: 표현식이 아닌 문 > 값으로 평가될 수 없는 문 (변수 선언문)
var x;

② 함수 표현식

자바스크립트의 함수는 객체 타입의 값이다. 자바스크립트의 함수는

① 값처럼 변수에 할당할 수도 있고
② 프로퍼티 값이 될 수도 있으며 배열의 요소가 될 수도 있다.

이처럼 값의 성질을 갖는 객체를 일급 객체라 한다.

자바스크립트의 함수는 일급 객체다. 함수가 일급 객체라는 것은 함수를 값처럼 자유롭게 사용할 수 있다는 의미이다.

함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 이러한 함수 정의 방식을 함수 표현식이라 한다.

앞서 함수 선언문으로 정의한 add 함수를 함수 표현식으로 바꿔서 정의하면 다음과 같다.

// 함수 표현식
var add = function (x, y) {
  return x + y;
};

console.log(add(2, 5)); // 7

함수 표현식에서 함수 리터럴의 함수 이름은 생략할 수 있다. 이러한 함수를 익명 함수라 한다. 함수 표현식의 함수 리터럴은 함수 이름을 생략하는 것이 일반적이다.

// *기명 함수 표현식
var add = function foo(x, y) {
  return x + y;
};

// 함수 객체를 가리키는 식별자(add)로 호출
console.log(add(2, 5)); // 7

// 함수 이름으로 호출하면 ReferenceError가 발생한다.
// 함수 이름(foo)은 함수 몸체 내부에서만 유효한 식별자다.
console.log(foo(2, 5)); // ReferenceError: foo is not defined

함수 이름은 함수 몸체 내부에서만 유효한 식별자다.

따라서 함수 표현식을 통해 함수를 호출할 때는 함수 이름이 아닌 함수 객체를 가리키는 식별자(여기서는 add)를 통해 호출해야 한다.

기명

함수 호이스팅

앞서 다룬 ① 함수 선언문과 ② 함수 표현식은 큰 차이가 있다. ① 함수 선언문은 표현식이 아닌 문이고, ② 함수 표현식은 표현식인 문이다.

코드가 한 줄씩 순차적으로 실행되기 시작하는 런타임에는 이미 함수 객체가 생성되어 있고 함수 이름과 동일한 식별자에 할당까지 완료된 상태이다. 따라서 함수 선언문 이전에 함수를 참조할 수 있으며 호출할 수도 있다. 이처럼 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라 한다.

함수 호이스팅과 변수 호이스팅에는 차이가 있다. 변수 호이스팅에 의해 var 키워드로 선언된 변수는 undefined로 초기화되고, 함수 선언문을 통해 암묵적으로 생성된 식별자는 함수 객체로 초기화된다. 따라서 var 키워드를 사용한 변수 선언문은 이전에 변수를 참조하면 변수 호이스팅에 의해 undefined로 평가되지만, 함수 선언문으로 정의한 함수를 함수 선언문 이전에 호출하면 함수 호이스팅에 의해 호출이 가능하다.

② 함수 표현식은 변수에 할당되는 값이 함수 리터럴인 문이다. 변수 선언은 런타임 이전에 실행되어 undefined로 초기화되지만 변수 할당문의 값은 할당(assignment)문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다. 따라서 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.

표현식

표현식은 값으로 평가될 수있는 문(statements) 이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.

자바스크립트 엔진에 의해 값은 평가 단계가 아닌 실행 단계에 할당되므로 함수 선언문은 평가 이전에 호이스팅 되어 호출할 수 있지만, 표현식은 평가 이후에 호출할 수 있다.

변수 호이스팅이 발생하는 함수 표현식은 평가 이전에 호출될 경우 일반적인 변수와 마찬가지로 undefined를 반환한다

// 함수 참조
console.dir(add); // ƒ add(x, y)
console.dir(sub); // undefined

// 함수 호출
console.log(add(2, 5));
// 7 why? 함수 선언문은 표현식이 아닌 문으로, 런타임 이전에 js 엔진에 의해 실행된다.

console.log(sub(2, 5));
// TypeError: sub is not a function, 
// why? 함수 표현식(표현식인 문)은 런타임에 값을 할당하기 때문에 sub는 현재 undefined로만 초기화된 상태이다.

// 함수 선언문
function add(x, y) {
  return x + y;
}

// 함수 표현식
var sub = function (x, y) {
  return x - y;
};

// 표현식이 평가된 이후에는 함수를 호출해도 문제가 없다!

③ Function 생성자 함수

Function 생성자 함수로 함수를 생성하는 방식은 일반적이지 않으며 바람직하지도 않다. Function 생성자로 생성한 함수는 클로저를 생성하지 않는 등, 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작한다.

var add1 = (function () {
  var a = 10;
  return function (x, y) {
    return x + y + a;
  };
})();

console.log(add1(1, 2)); // 13

var add2 = (function () {
  var a = 10;
  return new Function("x", "y", "return x + y + a;");
})();

console.log(add2(1, 2)); 
// ReferenceError: a is not defined

④ 화살표 함수

ES6에서 도입된 화살표 함수는 function 키워드 대신 화살표 => 를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다. 화살표 함수는 항상 익명 함수로 정의한다.

// 화살표 함수
const add = (x, y) => x + y;

console.log(add(2, 5)); // 7

함수 호출

함수는 함수를 가리키는 ① 식별자와 한 쌍의 소괄호인 ② ()를 함수 호출 연산자로 호출한다.

함수를 호출하면 현재의 실행 흐름을 중단하고 호출된 함수로 실행 흐름을 옮긴다. 이때 매개변수(parameter) 에 인수(argument) 가 순서대로 할당되고 함수 몸체의 문들이 실행되기 시작한다.

// 함수 선언문
function add(x, y) {
  // 소괄호 (x, y)에 들어있는 x, y는 파라미터이다. 
  // 후에 함수 몸채에서 사용되는데, 변수와 같은 형태로 사용된다
  return x + y;
}

// 함수 호출
// 인수(argument) 1과 2는 매개변수 x와 y에 순서대로 할당되고 함수 몸체의 문들이 실행된다.
var result = add(1, 2);

매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸체 외부에서는 참조할 수 없다. 즉, 매개변수의 스코프(scope)는 함수 내부이다.

function add(x, y) {
  console.log(x, y); // 2 5
  return x + y;
}

add(2, 5);

//	add 함수의 매개변수 x, y는 함수 몸체 내부에서만 참조할 수 있다.
console.log(x, y); 
/* 
	ReferenceError: x is not defined, 식별자를 참조할 수 없음
	why? 파라미터인 x,y는 스코프가 함수 몸체 내부 { } 이다.
	따라서 add 함수의 스코프 외부인 전역 스코프에서는 이를 참조할 수 없다.
*/

함수는 매개변수의 개수와 인수(argument)의 개수가 일치하는지 체크하지 않는다.
즉, 함수를 호출할 때 매개변수의 개수만큼 인수를 전달하는 것이 일반적이지만 그렇지 않은 경우에도 에러가 발생하지 않는다.
인수가 부족해서 인수가 할당되지 않은 매개변수의 값은 undefined이다.

function add(x, y) {
  return x + y;
}

console.log(add(2));
// NaN, why? 매개변수 y에 해당되는 인수(argument)가 없기 때문에 값은 undefined가 된다
// 2 + undefined >> Not a Number(숫자가 아님)으로 출력된다.

매개변수보다 인수가 더 많은 경우 초과된 인수는 무시된다
하지만 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관된다

case 1: 인수가 더 많은 경우

function add(x, y) {
  return x + y;
}

console.log(add(2, 5, 10)); // 7

case 2: arugments 객체로 인수 찾기

function add(x, y) {
  console.log(arguments);
  // Arguments(3) [2, 5, 10, callee: ƒ, Symbol(Symbol.iterator): ƒ]

  return x + y;
}

add(2, 5, 10);

단축 평가를 사용하여 매개변수에 기본값을 할당하는 방법도 있다

function add(a, b, c) {
  a = a || 0;
  b = b || 0;
  c = c || 0;
  return a + b + c;
}

console.log(add(1, 2, 3)); // 6
console.log(add(1, 2)); // 3
console.log(add(1)); // 1
console.log(add()); // 0

ES6에서 도입된 매개 변수 기본값을 사용하여 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다

function add(a = 0, b = 0, c = 0) {
  return a + b + c;
}

console.log(add(1, 2, 3)); // 6
console.log(add(1, 2)); // 3
console.log(add(1)); // 1
console.log(add()); // 0

다양한 함수의 형태

⑴ 즉시 실행 함수

• 함수 정의와 동시에 즉시 호출되는 함수를 즉시 실행 함수 (IIFE, Immediately Invoked Function Expression)라고 한다. 즉시 실행 함수는 단 한 번만 호출되며 다시 호출할 수 없다.

//익명 즉시 실행함수
(function () {
  var a = 3;
  var b = 5;
  return a * b;
}());


>>> 15

• 즉시 실행 함수는 함수 이름이 없는 익명 함수를 사용하는 것이 일반적이다.
• 함수 이름이 있는 기명 즉시 실행 함수도 사용할 수 있지만 즉시 실행 함수를 다시 호출할 수는 없다
• 즉시 실행 함수는 반드시 그룹 연산자 (...)로 감싸야 한다
• 함수 정의가 함수 선언문의 형식에 맞지 않기 때문이다

⑵ 재귀 함수

함수가 자기 자신을 호출하는 것을 재귀호출(recursive call)이라 한다. 재귀 함수는 자기 자신을 호출하는 행위, 즉 재귀 호출을 수행하는 함수를 말한다.

function countdown(n) {
  if (n < 0) return;
  console.log(n);
  countdown(n - 1); //재귀 호출
}

countdown(10);

⑶ 중첩 함수

함수 내부에 정의된 함수를 중첩 함수(nested function) 또는 내부 함수(inner function) 라 한다. 그리고 중첩 함수를 포함하는 함수는 외부 함수(outer function) 라 부른다.

중첩 함수는 외부 함수 내부에서만 호출할 수 있다. 일반적으로 중첩 함수는 자신을 포함하는 외부 함수를 돕는 헬퍼 함수(helper function)의 역할을 한다.

// 외부 함수(outer function)
function outer() {
  var x = 1;

  // 중첩 함수(nested function), 내부 함수(inner function)
  function inner() {
    var y = 2;
    // 외부 함수의 변수를 참조할 수 있다.
    console.log(x + y); // 3
  }

  inner();
}

outer();

⑷ 콜백 함수와 고차 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수(callback function)라고 하며, 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수(Higher-Order Function, HOF)라고 한다.

콜백 함수와 고차함수는 후에 더 자세히 다룹니다!