자바스크립트 복습 (심화버전) - bom / dom / this / defer

오랜만에 자바스크립트를 복습하였다.

자바스크립트에서는 여러 문법을 지원하지만, 오늘은 다음과 같은 내용을 복습하였다.

BOM / DOM / 자바스크립트 파일 효과적으로 가져오기 / This

---

BOM

BOM이란 브라우저 객체 모델을 뜻한다. 브라우저 객체 모델이란 브라우저를 객체처럼 여기는 것을 말한다.

정리

연산자는 " . "이다. 가장 많이 쓰는 것은 document이다.  자세한 부분은 영상을 참고하자.

https://youtu.be/3c4xp8U3jjM?si=9DXZHx1Ly6YAWI-A

---

참고로 window가 가장 최상위 객체이다. BOM은 그 밑에 존재하는 객체다. 이 부분을 헷갈려하지 말자.

---

DOM

DOM이란 문서 객체 모델을 뜻한다. 문서 객체 모델이란 "문서를 객체화"한 것을 말한다. 스크립트 언어로 브라우저를 해석하기 위함이다. (자바스크립트)

HTML을 보면 트리구조처럼 생겼다. 이것을 DOM 트리라고 부른다, 각각의 요소를 "노드"라고도 불린다.

정리

특히 querySelector와 getElementById 함수를 많이 쓴다.

결국 DOM은 HTML을 이용해서 자바스크립트에서 조작하게 만들 수 있는 것이다. DOM을 언어로 착각할 수 있는데, 엄연히 API이다.

자세한 부분은 아래 영상을 참고하자.

https://youtu.be/aTGhKjoZeao?si=Hd1yYjgqeH3OsR4B

---

자바스크립트 파일 효과적으로 가져오기.

자바스크립트 파일을 가져올 때, "script" 태그를 이용하게 된다. 이때 "defer" 문법을 안 쓰면 오류가 뜰 수 있다.

이유는 간단하다. script을 해석할 때 존재하지 않는 BOM 요소가 있다면 에러가 뜨기 때문이다. 참고로 파일 해석은 맨 위에서부터 시작해서 순차적으로 내려가는 것이다.

HTML 파싱을 하기도 전에 DOM 요소에 접근하려면 에러가 뜬다. 아직 값이 없어서 btn이 Null로 뜬다.

이런 일이 안 일어나기 위해 해결하는 방법은 여러 가지다. 그러나 HTML이 발전함에 따라 HTML5에서는 

defer와 async 속성으로 해결이 가능하다. 사용은 scrpt를 사용하고, src을 정의하고 그 파일 뒤에 defer 혹은 async을 작성해 주면 된다.

defer는 비동기로 자바스크립트 파일을 가져온다. 단, HTML 파싱이 완료되고 자바스크립트 파일을 불러온다.

async은 비동기로 자바스크립트 파일을 가져온다. 단, HTML 파싱이 완료되지 않았어도 먼저 로딩되는 자바스크립트 파일부터 실행이 된다.

---

참고로 비동기와 동기가 무엇인지 궁금하다면 밑의 영상을 참고하자.

https://youtu.be/sN4E9_u7xQk?si=GUM1KCNVPNHQMfuO

---

This

자바스크립트에서 헷갈리는 문법이 있다면 그중 하나가 this일 것이다.

this가 무엇일까?

this을 MDN에서는 다음과 같이 정의한다.

'this'는 현재 진행되고 있는 함수에서 실행되고 있는 객체를 가리킨다.

 

즉, this는 함수 자체에 있는 "자기 자신의 객체"를 뜻하기도 한다.

아주 쉽게 말하면 "호출한 객체"라고 말할 수 있다.

대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정된다.

아, 참고로 함정이 있다. "대부분의 경우"라고 했지 "무조건"은 아니다. 이건 곧 예외가 있다는 것이다.

예외

1. 따로 호출 값이 없다면 기본적으로 전역 스코프에서 window 객체이다. 

2. 화살표 함수에서 this가 조금 달라진다.

3. Strict Mode(엄격모드)에서 this가 조금 달라진다.

---

만일 특정 객체로 지정해서 호출하고 싶다면 

"bind" 함수를 이용해야 한다.

예시 코드는 다음과 같다.

그리고 사용자, 즉 개발자 본인이 정의해서 만드는 함수(클래스)에서도 this를 사용한다.

이때 생성자는 this 자기 자신을 가리키는 인스턴스로 정의가 된다.

예시 코드는 다음과 같다.

---

화살표 함수에서 this는 자신을 감싼 정적 범위이다.

예시 코드는 다음과 같다.

위 코드는 전체 범위, "window" 객체다. 그러나 화살표 함수에서는 "person" 객체이다.

직접 자바스크립트에서 콘솔을 찍어보면 결과가 다르게 나온다.

다만, 화살표 함수를 사용하면 안 되는 경우가 존재한다.

그건 바로 객체 메서드를 선언할 때이다.

이때에는 화살표 함수를 사용하면 안 된다. (메서드란 쉽게 말해서 함수라고 생각하면 편하다.)

---

마지막으로,

엄격모드를 사용하고 싶다면

가장 자바스크립트의 최상단에 'use strict'; 을 기입해 주면 된다.

엄격모드를 실행하면 자바스크립트에서 문법을 더 엄격하게 검수하게 된다.