기본지식(JAVASCRIPT)
script 로드 방식 차이
defer
<script>는 다운로드와 실행이 순차적으로 진행되는 것과 달리 defer 속성을 가진 스크립트는 브라우저가 <script defer>를 만났을 때 다운로드를 시작하지만, html 파싱을 막지 않고 </html>을 만났을 때 실행됩니다. (DOMContentLoaded 이벤트 이전에 실행됩니다) 스크립트를 <body>태그의 맨 마지막 줄에 작성하는 것과 같이 스크립트가 DOM을 조작하는 내용을 포함하는 것이 좋습니다. 하지만 일부 브로우저에서는 defer속성을 지원하지 않음
async
async 속성을 가진 스크립트는 <script>, <script defer>와 마찬가지로 브라우저가 해당 요소를 만났을 때 외부 스크립트 다운로드를 시작합니다. defer와 마찬가지로 다운로드 중에 HTML 파싱을 막지 않지만 다운로드가 완료되면 즉시 실행하고 실행하는 동안 브라우저는 HTML 파싱을 멈춥니다. async속성의 스크립트에는 DOM을 조작하지 않으며 앞뒤에 로드되고 실행될 스크립트와 의존성이 없는 코드만 포함하는 것이 좋습니다. 일부 브로우저에서는 async속성을 지원하지 않음
async는 순서없이 로드가 가능하지만 defer는 마크업 순서대로 로딩된다.
변수 선언 방식
let(변수 재선언 불가능, 변수 재할당 가능)
let은 변수의 재할당은 가능하지만 var처럼 재 선언은 되지 않다. (그렇게 하면 에러)
const (변수 재선언 불가능, 변수 재할당 불가능)
const의 경우 constant(상수)의 의미 그대로 한 번만 선언하고 또 값을 재할당을 통해 바꿀 수도 없.
var (변수 재선언 가능)
변수 선언을 여러 번해도 에러없이 각기 다른 값이 출력될 수 있.
이는 필요할 때 마다 변수를 사용할 수 있다는(편리하다는) 장점이 될 수 도 있지만, 같은 이름의 변수명을 남용하는 문제를 야기할 가능성이 높아지기에 단점이 더 크다고 할 수 있다. 이를 보완하기 위해 ES6부터 let, const가 추가되었. 출처: https://backstreet-programmer.tistory.com/76 [글쓰는 개발자]
호이스팅
👉 호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.
자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅한다.
변수의 범위가 전역 범위인지 함수 범위인지에 따라서 다르게 동작될 수 있다.
전역 범위(global scope) : 전역 범위에서는 스크립트 단위에서 최상단으로 끌어 올려진다.
함수 범위(function scope) : 함수 범위에서는 해당 함수의 최상단으로 끌어 올려진다.
Last updated
