Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript에서 익명 함수와 IIFE로 구현하는 캡슐화 완벽 가이드

객체 지향 프로그래밍 언어(Java, C++ 등)는 private 필드를 통해 클래스의 내부 동작을 외부로부터 숨기는 데이터 은닉(data hiding) 기능을 기본적으로 제공합니다. 하지만 전통적인 JavaScript에는 이러한 캡슐화를 위한 내장 문법이 없었습니다.

다행히 익명 함수(Anonymous Function)IIFE(즉시 실행 함수 표현식)를 활용하면 JavaScript에서도 변수와 함수를 효과적으로 숨길 수 있습니다. 이번 글에서는 그 방법을 예제와 함께 살펴보겠습니다.

문제 상황: 전역 네임스페이스 오염

먼저 아래처럼 코드를 전역 스코프에 그대로 작성했다고 가정해 보겠습니다.

const HIDDEN_CONST = 100;
function fnWeWantToHide(x, y) {
    return (x + y) * HIDDEN_CONST
}
console.log(fnWeWantToHide(1, 2))

이 코드는 정상적으로 동작하지만, HIDDEN_CONSTfnWeWantToHide라는 이름이 전역 네임스페이스(global namespace)에 그대로 노출됩니다. 코드 규모가 커지면 다른 스크립트나 라이브러리와 이름이 충돌하거나, 의도치 않게 외부에서 내부 로직에 접근할 위험이 생깁니다.

해결 방법: IIFE(즉시 실행 함수 표현식)

이 문제는 코드를 IIFE로 감싸는 것만으로 해결할 수 있습니다. IIFE는 정의되자마자 즉시 실행되는 함수 표현식으로, 내부에 선언된 모든 변수와 함수가 해당 함수의 지역 스코프에 갇히게 됩니다.

(() => {
const HIDDEN_CONST = 100;
function fnWeWantToHide(x, y) {
    return (x + y) * HIDDEN_CONST
}
console.log(fnWeWantToHide(1, 2))
})()

실행 결과는 이전과 동일하게 300이 출력됩니다. 하지만 결정적인 차이가 있습니다. HIDDEN_CONSTfnWeWantToHide는 이제 익명 함수 내부에 완전히 숨겨져 있으며, 더 이상 전역 네임스페이스를 오염시키지 않습니다.

동작 원리

JavaScript는 함수 스코프(function scope)를 따르기 때문에, 함수 내부에서 선언된 const, let, var 및 함수 선언은 함수 밖에서 접근할 수 없습니다. IIFE는 이 특성을 역으로 활용한 것으로, 다음과 같은 장점을 제공합니다.

  • 네임스페이스 보호: 전역 변수 충돌 위험을 제거합니다.
  • 정보 은닉: 내부 구현 세부 사항을 외부에 노출하지 않습니다.
  • 모듈 패턴의 기반: 필요한 값만 반환(return)하여 공개 API처럼 사용할 수 있습니다.

참고: 최신 JavaScript의 private 필드

ES2022부터는 클래스 문법에서 # 접두사를 사용한 진짜 private 필드가 표준으로 도입되었습니다. 예를 들어 #count처럼 선언하면 클래스 외부에서 접근할 수 없습니다. 다만 레거시 환경 지원이나 간단한 스크립트에서는 여전히 IIFE를 활용한 캡슐화가 널리 사용되는 실용적인 기법입니다.

마무리

익명 함수와 IIFE를 활용하면 별도의 문법 확장 없이도 JavaScript에서 캡슐화와 정보 은닉을 구현할 수 있습니다. 전역 오염을 막고 코드의 안정성을 높이고 싶다면, 내부 로직을 IIFE로 감싸는 습관을 들여보세요.