즉시 실행 함수를 활용해 strict mode 의 충돌 없애기

암묵적 전역(implicit global)

자바스크립트에서 var, let, const 와 같은 키워드 없이도 변수를 선언할 수 있다는 사실 알고 계셨나요? 저는 변수를 선언할 때 let, const 를 사용해야 한다고 배웠고, 그래서인지 키워드가 빠지면 오류가 날 거라고 당연스레 생각했었는데요.

자바스크립트는 어떤 변수가 선언되지 않은 채(키워드 없이) 값이 할당된 경우, 이를 전역 객체의 프로퍼티로 동적으로 생성한다고 합니다. 암묵적 전역(implicit global) 이라고 하는 현상입니다.

strict mode

자바스크립트에서 어떠한 현상이 있다고 해서 반드시 그것을 알고 활용해야만 하는 것은 아닙니다. 암묵적 전역이 바로 그런 케이스라고 할 수 있죠.

대신 변수를 선언할 때는 반드시 let, const 키워드를 사용해야 합니다. (ES6부터 배운 터라 var 를 사용하는 것도 별로라고 배워왔는데..심지어 생략이라니요)

물론 프로그래머도 사람인 이상 언제나 오류가 있을 수 밖에 없죠. 문법적으로 지식이 부족해서 실수할 수도 있겠구요. 이를 지원하기 위해 등장한 것이 'strict mode' 입니다. 'use strict'; 라는 코드를 추가하는 것으로 보다 더 엄격하게 문법을 적용하는 것이죠.

하지만 strict mode 를 어디에서는 사용하고 어디에서는 사용하지 않을 경우 도리어 오류가 발생하는 경우들이 있다고 합니다. 특히 외부의 라이브러리를 가져와 사용하는 경우에 이런 현상이 나타날 가능성이 높습니다.

즉시 실행 함수

내가 작성한 스크립트에 strict mode 를 적용하면서도 외부 라이브러리와의 충돌을 피하는 방법이 있습니다. 바로 즉시 실행 함수를 사용하는 방법입니다.

보통 익명함수로 작성되는 즉시 실행 함수는 함수가 선언됨과 동시에 바로 한 번 호출되는 함수를 말합니다. 그룹 연산자 () 로 함수를 감싸서 정의하고 실행하게 되는데요. 여기에 'use strict'; 를 추가하는 것이죠.

(function () {
  'use strict';
  ...  // 여기에 작성
}());

위와 같은 형태로 strict mode 를 적용하게 되면 충돌 없이도 strict mode 를 적용할 수 있게 됩니다.

outro

사실 ESLint 와 같은 도구를 사용하는 것이 개인적으로는 더 좋은 대안이 아닌가 싶습니다. 브라우저 중에서 여전히 strict mode 를 일부만 지원하는 경우도 있다고 하거든요. (익스플로러 10 이하는 아예 지원도 안 한다는데...근데 그건 익스플..읍읍)

간단히 정리한 만큼 관련하여 더 궁금하신 분들을 위해 mdn 공식 문서와 poiemaweb 관련 링크를 연결해 두었습니다. 오늘 작성한 글도 대부분 이 두 문서의 내용을 바탕으로 했음을 알려드립니다.