0. JavaScript
0.1 실행 방법
1️⃣ 내부 스크립트 <script></script>2️⃣ 외부 스크립트외부 js 파일 생성 후
<script src="./script.js"></script>0.2 스크립트 작성 위치
➡️ head
- 아직 HTML이 다운되지 않은 상태에서 script 실행을 시도해서 태그에 대한 정보가 없어 실행되지 않는다.
<html lang="en">
<head>
<script src="/1021/script.js"></script> <!-- 여기에 위치 -->
</head>
<body></body>
</html>➡️ end of the body
- 문제없이 실행된다.
- 하지만 HTML 용량이 매우 큰 경우에는 브라우저가 HTML 문서 전체를 다운로드한 다음 스크립트를 다운받으면 페이지가 매우 느려질 수 있다.
<html lang="en">
<head>
</head>
<body>
<div></div>
<script src="/1021/script.js"></script> <!-- 여기에 위치 -->
</body>
</html>➡️ with async ⭐
- HTML 파싱과 스크립트 다운로드를 병렬적으로 진행한다.
- 모두 다운로드되길 기다리지 않고 동작한다.
- 스크립트 실행 중에는 HTML 파싱을 멈춘다.
- 먼저 다운로드된 스크립트를 실행한다.
- 순서가 보장되지 않는다.
➡️ with defer ⭐
- HTML 파싱과 스크립트 다운로드를 병렬적으로 진행한다.
- 모두 다운로드된 후 실행된다.
- 순서가 보장된다.
- 길이가 긴 스크립트가 앞에 있어도 먼저 실행된다.
- 다운로드는 병렬적으로 진행되지만 실행은 순서대로 이루어진다.
- header에서 사용이 권장된다.
실무에서는 defer를 DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우에 적용하고, async는 방문자 수 카운터나 광고 관련 스크립트처럼 독립적인 스크립트나 실행 순서가 중요하지 않은 경우에 적용합니다.
출처 javascript.info
0.3 변수와 상수
➡️ 변수: 변할 수 있는 값
-
키워드: 특별한 목적을 가지고 설계된 예약 단어
-
var
문제점:
- 자바스크립트는 사용 공간을 공유하기 때문에, 변수명이 같을 경우 값을 변경할 가능성이 있다. -
let
- 같은 이름의 식별자를 2개 만들 수 없다.
- 재할당은 가능하다.
➡️ 상수: 변하지 않는 값
- const
- 중복도 안 되고, 재할당도 안 된다.
- 선언과 할당을 따로 할 수 없다.
- 선언과 동시에 할당을 해주어야 한다.
- 이미 할당된 후에는 데이터 조작이 가능하다.
// 예시 const a = [10] a.push(10) console.log(a) // [10, 20]
0.4 데이터 타입(자료형)
0.4.1 기본 자료형
문자, 숫자, 논리, undefined, null, symbol
0.4.2 참조 자료형
객체, 배열, 함수
0.4.3 기본 자료형 vs 참조 자료형
🤔 왜 기본 자료형과 참조 자료형으로 구분했을까?
➡️ 기본 자료형은 값을 복사할 때 값 자체가 들어감
➡️ 참조 자료형은 주소를 참조함
-
얕은 복사
- 참조형 타입의 값이 바로 아래 단계의 값만 복사하는 방법
- 새로운 객체가 만들어진 것이 아니라 기존 객체 내부의 값만 바뀐 것
- 주소 값이 동일하다.
-
깊은 복사
- 서로에게 영향을 주지 않는다. (독립적)
- 참조형 타입 안의 모든 참조가 끊어지는 방법
- 메모리 공간을 추가로 확보한다.
- 주소 값이 다르다.
-
기본형 데이터와의 차이는 참조형 데이터 안에 있는 기본형 데이터를 저장하기 위해 기본형 데이터의 주소를 담은 공간을 새로 생성했다는 점이다.
배운 점
1. 스크립트 작성 시 아무 생각 없이 하단에 작성했었는데 명확한 이유를 알게 되었다.
2. defer와 async를 상황에 맞게 사용해 더 효율적으로 JS를 가져와야겠다.
3. 깊은 복사와 얕은 복사 또한 이유는 명확히 모르던 채로 결과만 알고 있었는데 그렇게 되는 과정과 언제 얕은 복사를 사용해야 하는지, 깊은 복사가 왜 안전한지 알게 되었다.
천천히 가더라도 즐겁게 ☁