[JS] 자바스크립트의 함수 (Anonymous function, Arrow Function, IIFE, callback function)

https://github.com/voodootikigod/logo.js

 

함수는 프로그램 소스코드에서 일정한 동작을 하도록 만드는 코드를 의미한다.

즉, 우리가 어떤 동작을 컴퓨터에게 시키고 싶을 때 이를 함수로 만들어 명령을 내릴 수 있다.

 

일반적으로 함수를 선언하고 사용하는 방법은 다음과 같다.

 

function sum(a, b) {
  console.log(a + b);
}

sum(1, 2); // 3

 

function 키워드를 써준 후, 함수의 이름과 함수 안에서 사용할 변수들을 괄호 안에 써주면 함수를 만들 수 있다.

이게 일반적인 함수의 선언 방법이지만 자바스크립트에는 다른 형태의 함수들이 몇가지 더 있다.

 

 

---

 

1. 익명함수 (Anonymous Function)

익명함수, 무명함수 등의 이름으로 불리는 함수다. 이름에서 알 수 있듯, 따로 이름을 지정해주지 않고도 변수를 이용해 선언할 수 있다. 아래 코드를 보면 이해가 좀 더 쉬울 것이다.

 

let sum = function(a, b) {
  console.log(a + b);
};

sum(1, 2);

위 코드에서 sum은 변수일 뿐 함수가 아니다. 즉, a와 b를 더하는 명령을 수행하는 함수는 sum이라는 변수에 담겨 있을 뿐, 이름을 가지고 있지는 않다.

 

익명함수는 우리가 위에서 알아봤던 일반적인 함수의 선언과 차이점이 있다.

익명함수와 일반적인 방식의 함수를 선언하게 되면 익명함수가 아래로 밀려나게 되어 익명함수가 실행된다.

 

아래 코드를 확인해보자.

 

익명함수가 먼저 나오든 나중에 나오든 익명함수가 먼저 실행된다.

 

2. 화살표 함수 (Arrow Function)

화살표 함수는 화살표 모양의 형식을 이용한다. 일단 예제 코드부터 확인해보자.

 

let sum (a, b) => {
  console.log(a + b);
  return a + b;
};

let sum2 (a, b) => a + b;

 

화살표 함수를 사용하는 방법은 기존의 함수를 사용하는 방법보다 훨씬 간편하다. 괄호를 열고, 괄호 안에 파라미터를 넣은 후 => { ... } 만 입력하면 끝이다.

 

심지어, 화살표 함수는 익명함수이기 때문에 이름을 지어주지 않고 사용할 수 도 있다. 이 때문에 화살표 함수는 주로 콜백함수로서 자주 사용된다. 

 

또한 화살표 함수는 this의 바인딩 방식이 함수 밖의 값을 그대로 사용하도록 되어있다.

 

let a = 10;
let object = {
    a: 1;
    func: () => console.log(this.a);
};

 

위 코드를 실행시키면 콘솔에 출력되는 결과는 1이 아니라 10이 된다. 일반적인 함수 선언문으로 함수를 선언해 this를 사용했다면 결과 값은 let object 안의 데이터가 출력되었겠지만, 화살표 함수를 이용했기 때문에 this에 바인딩 되는 값은 함수 밖의 값이 된다.

 

 

3. 즉시실행함수 (IIFE : Immediately Invaked Function Expression)

즉시실행함수는 이름 그대로 선언과 동시에 즉시 실행되는 함수다.

 

(function sum(a, b) {
	console.log(a + b);
})();

 

함수 선언문에 ( ... )(); 을 붙여주면 그 함수는 선언과 동시에 즉시 실행된다.

 

 

4. 콜백함수 (callback function)

콜백함수란 다른 함수의 인자로서 쓰이는 함수라고 생각하면 된다.

 

function callback(fn) {
	console.log(fn);
    }

function fn(a, b) {
	console.log(a + b);
    }

 

이런 식으로 callback 이라는 함수의 인자로 fn 이라는 함수를 집어넣을 수 있는데, 이와 같은 형태의 함수를 콜백함수라고 한다. 따라서 위의 함수는 callback() 함수를 실행하던 도중 fn() 함수를 실행시켜 순차적으로 함수를 실행할 수 있게 되는 것이다.

 

콜백함수를 사용하는 가장 큰 이유 중에 하나는 동기/비동기 처리를 하기 위함이다.

특히 협업에서는 동기/비동기 처리가 중요하기 때문에, 콜백함수의 필요성이 더 크게 작용하게 된다.

 

동기/비동기에 대해서는 차후 포스팅에서 다루도록 하겠다.