✨ HTML과 자바스크립트를 연결하는 여러 방법
HTML과 자바스크립트를 연결할 때 스크립트를 삽입하는 위치는 사실 다 가능하다. head 마지막, body 마지막 등 여러 방법이 있는데, 그동안은 body 마지막에 삽입하는 게 가장 좋다고 알고 있었다. 그래야 브라우저 동작 과정에서 HTML 로드가 다 끝나고 자바스크립트가 실행되기에 지연이 발생한다거나, 아직 생성되지 않은 DOM트리를 조작하여 오류가 발생하는 것을 막을 수 있기 때문이다. 이번에는 head에 추가하는 방법에 대해 알아본다.
async
<script async src="script.js">
자바스크립트의 다운과 HTML 파싱을 병렬로 진행한다. 다음과 같은 순서로 동작한다.
- HTML 파싱
- 도중에 자바스크립트 태그를 만나 다운(fetch)를 병렬로 진행
- 자바스크립트 다운 완료시, HTML 파싱 일시 중단
- 자바스크립트 실행
- 자바스크립트 실행 완료시, HTML 파싱 재개
이 방식의 문제점은, HTML이 다 읽히지 않은 상태에서, 즉 DOM 트리가 다 생성되지 않은 상태에서 JS를 실행하면 생성되지 않은 DOM을 조작하다가 오류가 발생할 수 있다는 것이다.
이러한 문제점을 개선하면서도 HTML파싱과 자바스크립트의 다운을 병렬적으로 진행할 수 있는 장점을 살린 것이 defer 방법이다.
defer
<script defer src="script.js">
추천되는 방법인 defer은 다음과 같은 순서로 동작한다.
- HTML 파싱
- 도중에 자바스크립트 태그를 만나 다운(fetch)를 병렬로 진행
- 자바스크립트 다운 완료시, 바로 실행하지 않고 대기
- HTML 파싱 완료시, 자바스크립트 실행
HTML 파싱과 자바스크립트 다운을 동시에, 병렬로 진행하여 HTML을 다 읽고 난 후 자바스크립트 다운을 또 기다릴 필요가 없다. 또한 자바스크립트 다운이 먼저 끝나도 HTML 파싱이 완료되어야 자바스크립트가 실행되므로 async와 같은 오류가 발생하지 않는다.
use strict
바닐라 자바스크립트로 개발할 때에는 js파일 상단에 use strict를 걸어 strict mode로 개발해야 한다. 엔진이 효율적으로 실행되어 성능이 개선되기 때문이다.
✨ Javascript Operator
따로 공부하지 않아도 상식적으로 (?) 다들 알고 있는 것 외에, 새롭게 알게 된 것을 정리해본다.
String concatenation
-
string 데이터로
sam's book을 입력하고 싶다면, 가운데의 ' 는\와 함께 사용해야한다.
ex)'sam\'s book'
근데 사실 저렇게 안해도"sam's book"라고 해도 된다. -
특수문자 열을 사용할 수 있다.
\n: 줄바꿈\t: tab
증가, 감소 연산자 ++, --
할당, 업데이트 순서에 차이가 있는 두 가지 방식이 있다.
- pre increment
const preIncrement = ++counter;
// 위의 코드는 아래와 같다
counter = counter+1;
preIncrement = counter;- post imcrement
const postIncrement = counter++;
// 위의 코드는 아래와 같다
postIncrement = counter;
counter = counter+1;Logical operator
-
&& 연산자는 첫 조건이 false면 거기서 멈추고, || 연산자는 첫 조건이 true이면 거기서 멈춘다. 뒤의 조건들에 대해서 더 판별하지 않는다.
-
따라서 비교연산자를 사용할 때 조건으로 함수같이 연산 시간이 길게 필요한 것을 넣을거라면 가장 마지막에 배치하는 것이 효율적이다.
✨ 함수 매개변수
- 기본 매개변수 설정 : 인자가 전달되지 않았을 경우의 default값을 설정할 수 있다.
function greeting (name = 'stranger') {
console.log(`Hello, ${name}!`)
}
greeting('Nick') // Hello, Nick!
greeting() // Hello, stranger!...args: 인자의 목록을 배열로 받을 수 있다.
function test(...args) {
console.log(args); // [1,2,3,4,5]
console.log(Array.isArray(args)); // true
}
console.log(test(1, 2, 3, 4, 5));