JavaScript 에센셜 | 위니북스

함수의 종류

1. 함수 선언에 따른 종류

1.1 함수 선언식

함수 선언식(Function Declaration)은 가장 일반적인 함수 선언 방법입니다. function 키워드로 시작하고, 함수 이름과 매개변수를 정의한 후, 중괄호 안에 실행할 코드를 작성합니다.

function sayHello(name) { console.log(`안녕하세요, ${name}님!`); } sayHello("라이캣");

위의 예시에서 sayHello 함수는 name이라는 매개변수를 받아서 인사 메시지를 출력합니다. 함수를 호출할 때는 함수 이름과 괄호를 사용하여 호출합니다.

1.2 함수 표현식

함수 표현식(Function Expression)은 함수를 변수에 할당하는 방식입니다. 함수 표현식은 이름이 생략된 익명 함수로 작성할 수 있습니다. 주로 변수에 할당하거나 다른 함수의 인자로 전달할 때 사용됩니다.

const sayGoodbye = function(name) { console.log(`안녕히 가세요, ${name}님!`); }; sayGoodbye("빙키");

함수 표현식의 기명 함수
함수 표현식에서도 이름을 붙일 수 있습니다. 이름이 있는 함수를 기명 함수라고 합니다. 하지만 함수의 이름은 선언된 함수 내부에서만 사용되며, 외부에서는 사용할 수 없습니다.

const sayGoodbye = function greeting(name) { console.log(`안녕히 가세요, ${name}님!`); console.log(greeting); }; sayGoodbye('빙키'); console.log(greeting);

위의 예시에서 sayGoodbye 변수에 익명 함수를 할당하고, 이를 호출하여 인사 메시지를 출력합니다. 함수 표현식은 함수 선언식과 달리 호이스팅이 발생하지 않기 때문에, 함수 표현식이 선언되기 전에 호출하면 오류가 발생합니다.

console.log(sayGoodbye("빙키")); // ReferenceError: Cannot access 'sayGoodbye' before initialization const sayGoodbye = function(name) { console.log(`안녕히 가세요, ${name}님!`); };

함수의 호이스팅
함수 선언식은 호이스팅이 발생하여 함수가 선언되기 전에 호출할 수 있습니다.

console.log(더하기(10, 20)); // 30
function 더하기(x, y) {
  return x + y;
}

console.log(더하기(10, 20)); // 30
function 더하기(x, y) {
  return x + y;
}

위의 예시에서 더하기 함수는 선언되기 전에 호출되었지만, 오류 없이 정상적으로 실행됩니다. 이는 함수 선언식이 호이스팅되어 함수가 메모리에 미리 올라가기 때문입니다.

하지만 함수 표현식은 호이스팅이 발생하지 않기 때문에, 함수가 선언되기 전에 호출하면 오류가 발생합니다. 따라서 함수 표현식은 반드시 선언된 후에 호출해야 합니다.

1.3 화살표 함수

화살표 함수(Arrow Function)는 ES6에서 도입된 새로운 함수 표현식입니다. 화살표 함수는 간결한 문법을 제공하며, 화살표 함수는 주로 콜백 함수나 간단한 함수를 작성할 때 사용됩니다.

화살표 함수는 function 키워드 대신 =>를 사용하여 함수를 정의합니다. 항상 익명 함수로 작성되며, 함수 표현식으로 사용되거나 다른 함수의 인자로 전달됩니다.

const 더하기 = (x, y) => {
  console.log(`x: ${x}, y: ${y}`);
  return x + y;
};
console.log(더하기(10, 20));

const 더하기 = (x, y) => {
  console.log(`x: ${x}, y: ${y}`);
  return x + y;
};
console.log(더하기(10, 20));

함수 선언문으로 작성한 함수를 화살표 함수로 변경하면 다음과 같습니다.

// 함수 선언식
function 더하기(x, y) {
  return x + y;
}

// 함수 선언식
function 더하기(x, y) {
  return x + y;
}

const 더하기 = (x, y) => { return x + y; } console.log(더하기(10, 20));

화살표 함수에서 반환문만 있는 경우 중괄호와 return 키워드를 생략할 수 있습니다. 이 경우, 화살표 함수는 단일 표현식으로 작성됩니다.

const 더하기 = (x, y) => x + y; console.log(더하기(10, 20));

파라미터가 한 개인 경우에는 소괄호를 생략할 수 있습니다. 하지만 파라미터가 없거나 두 개 이상의 파라미터가 있는 경우에는 소괄호를 반드시 사용해야 합니다.

const 제곱 = x => x * x; console.log(제곱(10));

익명 함수
익명 함수는 이름이 없는 함수를 의미합니다. 화살표 함수는 항상 익명 함수로 작성되며, 변수에 할당하거나 다른 함수의 인자로 전달할 때 사용됩니다. 예를 들어, 아래와 같이 화살표 함수를 변수에 할당하면 익명 함수가 됩니다.

const 더하기 = (x, y) => x + y;

const 더하기 = (x, y) => x + y;

const 더하기 = function(x, y) { return x + y; }

2. 함수의 활용

2.1 콜백 함수

콜백 함수는 다른 함수의 인자로 전달되어 나중에 호출되는 함수입니다. 콜백 함수를 이용하면 특정 시점에 함수를 실행할 수 있으며 코드의 실행 순서를 제어할 수 있습니다.

function greet(name, callback) { console.log(`안녕하세요, ${name}님!`); callback(); } function sayGoodbye() { console.log("다음에 또 만나요!"); } greet("licat", sayGoodbye);

위의 예시에서 greet 함수는 인사 메시지를 출력한 후, 전달받은 함수를 호출합니다. 이렇게 특정 시점에 다시 호출 하기 때문에 콜백(call back) 함수로 불리게 되었습니다.

콜백 함수는 배열의 메서드(forEach, map, filter 등)와 비동기 프로그래밍에서 자주 사용됩니다. 예를 들어, 배열의 각 요소에 대해 특정 작업을 수행할 때 콜백 함수를 사용할 수 있습니다.

const numbers = [1, 2, 3, 4, 5]; numbers.forEach((number) => { console.log(number * 2); });

위의 예시에서 forEach 메서드는 배열의 각 요소에 대해 콜백 함수를 호출하여 각 요소를 두 배로 곱한 값을 출력합니다. 위의 예시와 같이 콜백 함수는 주로 화살표 함수로 작성됩니다.

2.2 재귀 함수

재귀 함수는 자기 자신을 호출하는 함수입니다. 재귀 함수를 사용하면 반복적인 작업을 간결하게 표현할 수 있습니다. 하지만 재귀 함수는 종료 조건을 반드시 설정해야 하며, 그렇지 않으면 무한 루프에 빠질 수 있습니다.

function factorial(n) { if (n === 0) { return 1; } return n * factorial(n - 1); } console.log(factorial(5)); // 120

위의 예시에서 factorial 함수는 주어진 숫자의 팩토리얼을 계산합니다. 종료 조건으로 n이 0일 때 1을 반환하고, 그렇지 않으면 n과 factorial(n - 1)을 곱한 값을 반환합니다. 이와 같이 재귀 함수를 사용하면 반복적인 작업을 간결하게 표현할 수 있습니다.

2.3 즉시 실행 함수

즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 정의되자마자 즉시 실행되는 함수입니다. 함수를 선언함과 동시에 실행하는 자바스크립트 패턴입니다.

변수를 전역 스코프에서 선언하지 않고, 즉시 실행 함수 안에서만 사용할 수 있도록 분리할 수 있습니다. 특정 스코프를 만들 때 유용하게 사용됩니다. 즉시 실행 함수는 주로 모듈 패턴을 구현할 때 사용됩니다.

(function() { // 코드 블록 })(); // 또는 (function() { // 코드 블록 }());