script의 async 와 defer, 'use strict'

이번 시간에는 html에서 JS 파일을 등록시에 어떤 방법들이 있고, 각각의 장단점에 관해서 알아보자!!

- async

HTML 파일을 다운받으면서, 동시에 JS 파일을 병렬적으로 다운받는다. 그리고, JS 파일이 다 다운받아지면, 설령 HTML 파일이 다 유저 창에 업로드되지 않았더라도, JS 파일 먼저 실행된다.

그러나, 위와 같이 html 파일이 다 실행되기도 전에, JS가 실행되서, 일부 html에서 아직 실행되지 않은 부분과 JS 사이에 충돌 가능성이 있다. 그래서 개발자의 코드가 JS 파일 순서에 의존적이라면, 이 옵션을 쓰면 안 된다.

- defer

병렬적으로 다운받아지는 것은 async와 같지만, defer는 지정해놓은 순서에 맞게 JS가 실행된다.

따라서, JS 코드 실행시에 가장 안정적인 방법이다. 무조건 추가하자!!

- 'use strict';

해당 문법은 ES5에서 출시됐다. TS 사용 시에는 필요없지만, JS 사용 시에는 main.js 파일 최상단에 꼭 쓰는게 좋다.

• 왜 써야하나??
  JS에서는 선언되지 않은 값에 할당한다던지, 기존에 존재하는 프로토타입을 변경한다든지 등 다른 언어에서는 일어나지 않은 비상식적인 일들이 일어난다. 이것은 JS가 정교하게 만들어지지 않은 태생적인 문제인데, 이런 일을 방지해주고자, ES5에서 이 문법이 추가됐다. => 아직 let을 선언하지 않았음에도, a가 자동적으로 선언과 할당이 이뤄진다.

• 자료출처

script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향

항상 아무 생각없이 defer를 썼는데, 이제라도 제대로된 이유를 알게 되서 기쁘다.

오늘 TIL은 드림 코딩 엘리님의 강의와 코드스테이츠에서 학습한 내용 등을 바탕으로 작성됐다. 또한, 그 어떠한 상업적인 용도도 없음을 밝힌다.