JavaScript에서 즉시 실행 함수 표현식(IIFE)의 함정
두 가지 코드 조각을 살펴보겠습니다.
첫 번째:
let result = 1
+function() {
return 2;
}();
console.log(result);
두 번째:
let result = 1;
+function() {
return 2;
}();
console.log(result);
이 두 코드 조각은 거의 동일하지만,
실행하면 결과가 다릅니다.
첫 번째 코드는 콘솔에 숫자 3을 출력하고,
두 번째는 숫자 1을 출력합니다.
이런 차이가 발생한 이유는 한 경우에는 첫 번째 줄 코드 끝에 세미콜론이 없고, 다른 경우에는 있기 때문입니다.
이렇게 물을 수 있습니다: 어떻게 그럴 수 있죠, JavaScript에서는 명령어 끝의 세미콜론이 필수가 아닌데! 사실 이는 완전히 사실이 아닙니다. 실제로 어떤 일이 일어나는지 알아봅시다.
첫 번째 코드는 이렇게 다시 쓸 수 있습니다:
let result = 1 + function() {
return 2;
}();
console.log(result); // 3을 출력함
이제 즉시 실행 함수 호출의 결과인 2가
1에 더해진다는 것이 명확해졌습니다. 따라서 최종
결과는 3이 됩니다.
반면, 1 뒤에 세미콜론을 넣으면 인터프리터가 코드를 다르게 해석합니다:
// 첫 번째 명령어:
let result = 1;
// 두 번째 명령어:
+function() {
return 2;
}();
// 세 번째 명령어:
console.log(result); // 1을 출력함
즉, 변수 할당과 즉시 실행 함수 호출이 별개의 명령어가 됩니다. 모두 세미콜론의 존재 때문입니다!
결국 이 경우 즉시 실행 함수 호출은
아무것도 하지 않습니다. 그냥
아무 영향도 주지 않고 숫자 2를 반환할 뿐이며,
변수 result에는 영향을 미치지 않습니다.
그렇다면 우리가 JavaScript에서 왜 세미콜론을 쓰지 않아도 되는지 알아보겠습니다. 세미콜론 없는 이런 코드가 있다고 가정해 보세요:
let result = 1 // result에 1이 기록됨
let test = 2 // test에 2가 기록됨
인터프리터가 각 줄 끝에 자동으로 세미콜론을 넣었기 때문에 이 코드는 정상적으로 작동합니다.
하지만 이런 코드를 보세요:
let result = 1
+ 2; // result에 3이 기록됨
이제 첫 번째 줄 끝에 세미콜론이 자동으로 삽입되지 않습니다. 왜냐하면 인터프리터가 두 번째 줄의 명령어가 첫 번째 줄 명령어의 일부라는 것을 이해하기 때문입니다.
하지만 우리가 직접 세미콜론을 넣으면 결과는 완전히 달라집니다:
let result = 1; // result에 1이 기록됨
+ 2; // 명령어는 아무것도 하지 않지만, 오류도 발생하지 않음
결국, 인터프리터는 다음 명령어가 이전 명령어의 일부가 아닌 경우에만 자동으로 세미콜론을 넣습니다.
그리고 이 코드를 보세요:
let result = 1
+function() {
return 2;
}();
console.log(result);
실제로 두 번째 줄은 첫 번째 줄 명령어의 연속일 뿐이며 인터프리터는 자동으로 세미콜론을 넣지 않습니다. 바로 이것이, 우리가 첫 번째 줄 끝에 직접 세미콜론을 쓰면 결과가 완전히 달라지는 이유입니다. 이는 문제를 피하기 위해 필요한 곳에는 항상 세미콜론을 쓰는 것이 최선이라는 점을 시사합니다.
