자바스크립트 모듈과 엄격한 모드(strict mode)

업무를 하다보면 막히는 부분이 있을 때 기존의 코드를 참고하거나 구글 검색을 주로 많이 하는 편이었다. 자바스크립트계의 바이블이라는 <모던 자바스크립트 딥다이브>를 읽으면서 그동안 어떻게 이걸 모르고 개발했지? 라는 생각을 많이 하기도 했어서 이번 기회에 자바스크립트 docs 정독을 했다.

 

얼마 전에 학습했던 자바스크립트의 스코프와 클로저 개념에 대해서도 정리가 잘 되어있었고, 이번엔 외부 스크립트를 임포트해서 사용할 때 type="module"을 명시하는 것과 스크립트 최상단에 "use strict"를 선언하는 것에 대해서 이해하게 되어 정리하고자 한다.  

 

기본적인 자바스크립 개념을 이해하기 위해 공식 문서를 꼭 한번 정독해야 한다고 생각한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript

 

자바스크립트 모듈

 

자바스크립트 모듈에 관한 개념은 mdn의 자바스크립트 안내서에 작성되어 있다. 모듈은 기능별로 스크립트를 분할하기 위해 도입된 개념이다. 모듈을 활용하여 관심사를 분리하고 가독성을 개선하며, 브라우저의 로딩을 최적화한다.

 

모듈로 사용하기 위해서는 <script src="stop-watch.js" type="text/javascript">와 같이 사용하던 것을 type="module"로 사용해야 한다. 모듈로 선언한 경우에는 변수 선언도 스코프가 모듈로 제한된다. 

 

type="text/javascript" 경우에는 js 파일 내에서 선언한 변수는 전역 스코프를 가진다. 그래서 html 내에서 변수를 사용하는 것도 가능하다. 하지만 모듈인 경우에는 다른 곳에서는 마음대로 사용할 수 없어서 아래와 같이 오류가 발생한다.  

type="text/javascript" 의 변수는 전역 스코프

type="module" 의 변수는 지역 스코프

 

모듈의 기능을 사용하기 위해서는 export 문을 사용하고 사용 또한 모듈 내에서 import 해야한다. let, const, val, function, class 모두 export, import가 가능하며, 이렇게 기능을 가져와서 동일한 파일 내에 작성한 것처럼 사용할 수 있다.

 

html 내에서 인터널 스크립트로 아래와 같이 작성하는 것도 가능하다. 

export const localScope = 'localScope';

<script type="module">
    import {localScope} from "./stop-watch.js";
    console.log(localScope)
</script>

 

 

html 내에서 import 하여 사용하지 않는다면 <script src="stop-watch.js" type="module"> 과 같이 삽입하여 사용할 수 있다. 이러한 내용 외에도 모듈 관련한 내용이 더 있으니 공식문서를 꼭 읽어보기를 권한다.

 

 

Strict mode

 

모듈을 사용하면 표준 스크립트와 다르게 동작할 수 있는데 이는 자동적으로 모듈이 strict mode를 사용하기 때문이다. strict mode에 관련된 내용은 자바스크립트 참고서의 기타 하위 메뉴에 정리되어 있다.

 

엄격 모드를 전체 스크립트에 적용하기 위해서는 최상단에 "use strict"를 삽입한다.

함수에 사용하기 위해서는 함수의 본문 처음에 "use strict"를 삽입한다.

 

자바스크립트는 기본적으로 "느슨한 모드(sloppy mode)"인데 이를 엄격한 모드로 변경하면 동작에 변화가 발생한다.

 

1.  선언하지 않은 변수를 사용할 수 없고, 함수를 선언하기 전에 사용할 수 없다.
2. this로 함수에 전달된 값은 강제로 객체가 되지 않는다. (중요) 특정 this 명세를 위해서는 bind, call, apply를 사용해야 한다.
3. delete 연산자를 사용해서 객체를 삭제하는 경우 일부 프로퍼티에서 삭제가 불가하다.
4. with 문을 사용할 수 없다. 

위의 네 가지 외에도 기존의 느슨한 모드에서는 허용되었던 실수들이 엄격한 모드에서는 에러를 발생시키기 때문에 공식 문서를 통해 숙지하고 있어야 한다.