멍발자의 개발
JavaScript (2) 본문
API (Application Programming Interface)
console API는 브라우저가 이해할 수 있는 함수들이다.
자바스크립트의 공식 사이트: ecma-international.org
개발자가 보기에 더 편한 자바스크립트 사이트: developer.mozilla.org
일반 회사에서 만든 사이트라 추천되지 않음: www.w3schools.com
async vs defer의 차이점
head안에 script 요소를 포함하는 것은 좋은 방법이 아니다.
body안 끝부분에 script를 추가하는 것도 괜찮지만
웹페이지에서 자바스크립트의 의존도가 높은 경우에는 좋지 않다.
async
boolean값의 속성값이기 때문에 선언하는 것만으로도 true로 설정이 되어 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<script>asyn src="main.js></script>
</head>
<body>
<div></div>
</body>
</html>장점: body 끝에 사용하는 것보다는 fetching이 parsing하는 동안 병렬적으로 일어나기 때문에
다운로드 받는 시간을 절약할 수 있다.
단점: 자바스크립트가 html이 parsing 되기도 전에 실행되기 때문에 원하는 요소가 아직 정해져있지 않을 수 있다. 사용자가 페이지를 보는 것에 시간이 걸릴 수 있다.
defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<script>defer src="main.js></script>
</head>
<body>
<div></div>
</body>
</html>=> 가장 좋은 옵션이다. html을 parsing하는 동안 필요한 자바스크립트 파일을 다 다운받아 놓고
html parsing을 먼저 해서 사용자에게 보여 준 다음 바로 이어서 자바 스크립트를 사용하게 된다.
head안에 defer을 넣어 쓰는 것이 안전하고 효율적이다.
'use strict';
제일 위에 'use strict'; 를 선언하자.
=> 자바스크립트는 유연하기 때문에 선언되지 않은 변수를 할당한다든지
비상식적인 경우가 발생하게 됨으로 이런 문제를 발생하는 것을 막기 위함이다.
데이터 타입 let vs var, hoisting
Valiable : 변수
=> 변경될 수 있는 값
let (added in ES6)
{} block scope : 작성하게 되면 블럭 밖에서는 블럭 안에 있는 내용들을 볼 수 없다.
var (don't ever use this!) : 값을 선언하지도 않았는데 할당된 경우가 발생할 수 있다.
var은 block scope을 사용할 수 없다. 아무곳에서나 볼 수 있다.
var hoisting (move declaration from bottom to top) : 어디에 선언했느냐와 상관없이 제일 위로 끌어올려주는 것을 말한다.
let (use this!) : 변수를 선언할 때는 var보다 let을 사용해야 한다.
constans : 한 번 값을 할당하면 값이 절대 바뀌지 않는 것을 말한다. 가리키는 포인터가 잠겨 있는 것이다.
Mutabe : 변경이 가능한 데이터 타입
Immutable : 변경이 불가능한 타입 (constans이 바로 immutable 타입이다. 보안 효과)
<자바 스크립트의 변수 타입>
| Mutable | Immutable |
| let | const |
Variable types
1) primitive, single item: number, string, boolean, null, undefiend, symbol
2) object, box container
3) function, first-class function
<number>
const infinity = 1 / 0; = 숫자를 0으로 나누었을 때
const negativeInfinity = - 1 / 0; = 음수를 0으로 나누었을 때
const nAn = 'not a number' / 2; 나누고자 하는 값이 숫자가 아닐 때
const bigInt = 123456486768n; 뒤에 n만 붙이면 bigInt가 된다.
<string>
const char = 'c';
const helloBob = 'hi ${brendan}!'; //template literals (string) 자주 사용하는 string
'STUDY > JavaScript' 카테고리의 다른 글
| jQuery API 정리 (0) | 2022.11.02 |
|---|