자바스크립트 함수에서 선행 느낌표(!) 구문이란? 익명 함수 즉시 실행 방법

선행 느낌표(!) 구문이란?

자바스크립트에서 function 키워드로 시작하는 문장은 함수 선언(function declaration)으로 해석됩니다. 그렇기 때문에 이름 없는 익명 함수를 그대로 작성하면 문법 오류가 발생합니다. 이 문제를 피하려면 함수 앞에 느낌표(!) 같은 단항 연산자를 붙여 전체 코드를 '표현식'으로 만들어야 합니다. 이것이 바로 선행 느낌표 구문입니다.

!function(){
    // 원하는 작업 수행
}();

느낌표는 단항 연산자이므로, 뒤따르는 function 키워드가 선언이 아니라 함수 표현식의 일부로 파싱됩니다. 결과적으로 익명 함수가 정의되는 즉시 실행되며(IIFE, 즉시 실행 함수 표현식), 느낌표는 함수의 반환 값을 불리언 값으로 반전시키는 역할도 합니다.

더하기(+) 기호 사용하기

느낌표 대신 더하기(+) 기호를 사용해도 동일하게 동작합니다.

+function(){
    // 원하는 작업 수행
}();

이 경우에는 함수의 반환 값이 숫자(number) 타입으로 변환된다는 차이가 있습니다.

틸데(~) 연산자 사용하기

비트 NOT 연산자인 틸데(~) 역시 유효한 문법입니다.

~function(){
    // 원하는 작업 수행
    return 0;
();

틸데를 사용하면 반환 값이 32비트 정수로 변환되어 비트 반전이 적용됩니다.

정리

핵심은 어떤 기호를 사용하든 function 키워드가 문장의 맨 앞에 오지 않도록 만드는 것입니다. 다만 실무에서는 의미를 명확히 하고 가독성을 높이기 위해 괄호로 감싸는 전통적인 방식인 (function(){ ... })();을 사용하는 것이 일반적으로 권장됩니다.