자바스크립트 함수 완벽 가이드: 함수 표현식부터 모던 자바스크립트까지

개발을 하다 보면 같은 코드를 반복해서 작성하게 되는 경우가 많습니다. 코드의 중복은 유지보수를 어렵게 만들고 버그가 발생할 확률을 높이죠. 이런 문제를 해결하기 위해 우리는 함수를 사용합니다. 오늘은 자바스크립트에서 함수를 다루는 다양한 방법과 실제 개발할 때 어떻게 활용하는지 자세히 알아보겠습니다.

1. 함수의 기본: 선언문 vs 표현식

자바스크립트에서 함수를 정의하는 방법은 크게 두 가지가 있습니다.

함수 선언문 (Function Declaration)

function sayHello(name) {
  return `안녕하세요, ${name}님!`;
}

함수 표현식 (Function Expression)

const sayHello = function(name) {
  return `안녕하세요, ${name}님!`;
};

얼핏 보면 비슷해 보이지만, 중요한 차이가 있습니다. 함수 선언문은 호이스팅(hoisting)되어 코드의 최상단으로 끌어올려지는 반면, 함수 표현식은 코드가 해당 라인에 도달했을 때 실행됩니다.

// 함수 선언문은 이렇게 호출해도 동작합니다
console.log(sayHello1("철수")); // "안녕하세요, 철수님!"

function sayHello1(name) {
  return `안녕하세요, ${name}님!`;
}

// 함수 표현식은 에러가 발생합니다
console.log(sayHello2("영희")); // ReferenceError

const sayHello2 = function(name) {
  return `안녕하세요, ${name}님!`;
};

2. 화살표 함수 (Arrow Function)

ES6에서 도입된 화살표 함수는 더 간결한 문법을 제공합니다. 실무에서는 콜백 함수를 작성할 때 자주 사용됩니다.

// 기본적인 화살표 함수
const add = (a, b) => a + b;

// 객체를 반환할 때는 괄호가 필요합니다
const createUser = (name, age) => ({ name, age });

// 실제 사용 예시
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

하지만 화살표 함수에는 몇 가지 주의할 점이 있습니다:

1. this 바인딩이 일반 함수와 다릅니다
2. arguments 객체를 사용할 수 없습니다
3. constructor로 사용할 수 없습니다

3. 즉시 실행 함수 (IIFE)

즉시 실행 함수는 정의되자마자 실행되는 함수입니다. 주로 전역 스코프 오염을 방지하거나 초기화 코드를 작성할 때 사용됩니다.

// 기본적인 IIFE
(function() {
  const secret = "비밀 값";
  console.log("초기화 완료!");
})();

// 모듈 패턴으로 활용
const counter = (function() {
  let count = 0;  // private 변수

  return {
    increment() { count += 1; return count; },
    decrement() { count -= 1; return count; }
  };
})();

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1

4. 파라미터 다루기

기본값 매개변수

function createProfile(name = '익명', age = 0, isAdmin = false) {
  return {
    name,
    age,
    isAdmin,
    createdAt: new Date()
  };
}

console.log(createProfile("김코딩", 25));  // isAdmin은 false로 기본값 사용

Rest 파라미터

function calculateTotal(...numbers) {
  // reduce를 사용한 더 우아한 방법
  return numbers.reduce((sum, num) => sum + num, 0);
}

console.log(calculateTotal(1, 2, 3, 4, 5)); // 15

5. 실전 활용: 고차 함수

고차 함수는 함수를 인자로 받거나 함수를 반환하는 함수입니다. 실무에서 자주 사용되는 패턴입니다.

// 디바운스 함수 구현 예시
function debounce(func, delay) {
  let timeoutId;

  return function(...args) {
    // 이전 타이머 취소
    clearTimeout(timeoutId);

    // 새로운 타이머 설정
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 사용 예시
const handleSearch = debounce((searchTerm) => {
  console.log(`검색어: ${searchTerm}`);
  // API 호출 등의 무거운 작업
}, 300);

// 검색 입력 시 호출
handleSearch("자바스크립트");

마치며

함수는 자바스크립트에서 가장 중요한 개념 중 하나입니다. 특히 최근의 리액트와 같은 프레임워크들은 함수형 프로그래밍 패러다임을 적극적으로 활용하고 있어서, 함수를 잘 이해하고 활용하는 것이 더욱 중요해졌습니다.

함수를 작성할 때는 항상 다음을 고려해보세요:

• 함수가 하나의 역할만 하고 있나요? (단일 책임 원칙)
• 함수 이름이 그 역할을 잘 설명하고 있나요?
• 다른 개발자가 봤을 때 이해하기 쉬운가요?

이러한 원칙들을 지키면서 함수를 작성하면, 더 유지보수하기 좋은 코드를 만들 수 있습니다.