[JS] 함수의 종류

자바스크립트에서 함수는 여러 가지 형태를 가집니다. 각각의 함수 형태마다 동작 방식이나 그에 따른 쓰임이 다릅니다. 이번 포스팅에서는 자바스크립트에서 사용되는 함수의 종류에 대해서 알아보고 각각의 함수가 어떻게 사용되는지 소개해보도록 하겠습니다.

 

익명함수

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

익명함수는 말 그대로 이름이 없는 함수입니다. 익명 함수는 아래와 같은 특징을 가집니다.

 

• 주로 변수에 할당(함수표현식)되거나 함수의 인자값(parameter) 또는 반환값으로 사용됩니다.
• 콜백함수의 생성에 사용됩니다.

 

콜백함수

위의 익명함수의 대표적인 용도 중 하나가 콜백함수의 생성입니다. 콜백함수는 비동기 통신에서 많이 사용됩니다. 그 예를 코드로 한 번 살펴보겠습니다.

function getData(callbackFunc) {
  $.get('/getData', function (response) {
    callbackFunc(response); // 서버에서 받은 데이터를 callbackFunc()에 넘긴다.
  });
}

getData(
  function (value) {
    console.log(value); // $.get()의 response 값이 value 전달
  }
);

1. getData라는 함수를 호출합니다.
2. getData함수 내부에서 비동기 통신을 수행하고 response값을 서버로부터 받습니다.
3. response 값을 callback함수의 인자값으로 넘깁니다.
4. console.log(value)가 실행됩니다.

간단히 설명하면, 비동기 통신이 일어난 이후 특정 동작이 일어나고 싶게 하고 싶을 때, 주로 콜백함수를 사용합니다. 참고로 getData의 인자로 함수를 넘기는 것은 이전 포스팅에서 소개했었던 "자바스크립트는 일급 객체의 특성으로서 인자로 함수를 넘길 수 있는 특징을 갖고 있다"는 것을 보여주는 예도 될 수 있습니다.

 

내장함수(Inner Function)

내장함수를 사용하면 전역 스코프의 있는 함수의 범위를 줄일 수 있고, 내장함수를 통해 객체지향의 캡슐화, 정보은닉의 개념을 구현할 수 있습니다.

 

function outerFunc() {
    var returnValue = 10;

    function innerFunc() {
      return returnValue + 1;
    }

    return innerFunc();
}

console.log(outerFunc()); //11
console.log(innerFunc()); //innerFunc is not defined

내장 함수의 특징은 아래와 같습니다.

• 특정 함수에서만 사용할 기능이라면 전역 스코프에 함수를 구현하지 않고, 특정 함수 내부에 구현할 수 있습니다.
• 함수 스코프로 변수의 스코프가 이루어지므로, 내부 함수에서는 외부 함수에 정의된 변수에 접근할 수 있습니다.
• 일반적으로 특정 함수의 외부에서는 그 안에 구현된 내장 함수에 접근할 수 없습니다.

 

클로저(Closure)

function outerFunc() {
    var returnValue = 10;

    function innerFunc() {
      return returnValue + 1;
    }

    return innerFunc;
}

var inner = outerFunc();
inner(); //11

이와 같이, 실행이 끝난 outerFunc()와 같은 부모 함수의 스코프 내에 있는 변수를 참조하는 inner()와 같은 함수를 클로저라고 합니다. 클로저는 자바스크립트에서 중요한 개념이므로 이에 대해서는 추후 포스팅에서 좀 더 자세히 다루도록 하겠습니다.

 

즉시실행함수(Immediate Function)

함수를 정의함과 동시에 실행하는 함수를 즉시실행함수라고 합니다.

 

(function (returnValue) {
  console.log(returnValue);
})('Hello World');

즉시실행함수의 경우 함수를 정의하자마 실행되기 때문에, 같은 함수를 다시 호출할 수 없습니다. 이러한 특성을 이용해 최초에 한 번만 실행되는 초기화 코드에서 사용할 수 있습니다.

 

즉시실행함수의 경우, 변수를 전역으로 선언하는 것을 피할 수 있기 때문에, 모듈이나 라이브러리를 만들 때 많이 사용합니다.

 

var moduleFunction = (function () {
  var a = 3;

  function helloWorld(){
    console.log('Hello');
  }

  return {
    a : a,
    sayHello: helloWorld
  }
})();

function doSomething(x) {
  console.log("moduleFunction - a :" , x);
}

moduleFunction.sayHello(); //Hello
doSomething(moduleFunction.a); //moduleFunction - a : 3

 

Reference

인사이드 자바스크립트 (송형주, 고형준)