[script async 와 defer 차이점]
<script async src="main.js"><script>
<script defer src="main.js"><script>
- async : parsing html, fetching js, executing js 병렬로 진행. 다운로드시간을 절약할 수 있지만 요소가 html에서 정의 되기 전에 js가 실행될 가능성 있고, page가 늦게 열릴 수 있다는 단점. 여러개의 js가 있을경우 순서에 의존적이라면 문제가 생길 수 있다.
- defer : fetching js만 병렬로 실행하고 parsing HTML이 끝난 후에 executing js. 사용자에게 page를 보여준 후 js 실행. 원하는 대로 js를 실행 시킬 수 있다.
<use strict>
js를 이용할 때 제일 윗부분에 'use strict'; 를 써넣는게 좋다.(typeScript의 경우 x)
- 조금 더 상식적인 범위 안에서 javascript를 이용할 수 있고 engine이 더 효율적으로 분석할 수 있게 해준다.
[data types]
- Block scope : block 안에 코드를 작성하면 밖에서는 코드를 알 수 없음. 변수도 마찬가지
- Global scope : application이 시작되고 끝날때까지 항상 메모리에 남아있어 확인이 가능하다. 최소한으로 사용하면 좋기때문에 가능하면 class나 함수 안에서 정의해서 사용.
<let>
javascript에서 사용하는 mutable변수. (var는 사용하지말기!!)
- var hoisting : 어디에 선언하든 상관없이 선언을 가장 위로 끌어올려주는 것.)
- var has no block scope.
<Constans>
값을 선언함과 동시에 잠겨서 변경불가. Immutable data type
- immutable data type 사용 이유?
- security
- thread safety
- reduce human mistakes
*값이 바뀌는 것들이 아니면 왠만하면 const로 작성하는 것이 바람직하다.
<Variable types>
primitive / object
- primitive : single item (number, string, boolean, null, undefined, symbol)
- object : single type들을 묶어서 한 box단위로 관리.
Number : javascript에서는 number하나로 가능.
//양의 무한대 infinity
const infinity = 1/0;
//음의 무한대 -Infinity
const negativeInfinity = -1/0;
//NaN (Not a Number)
const nAn = 'not a number'/0;
*bigInt : 최근에 추가된 type (chrome, firefox에서만 지원)
String
const jiya = 'jiya'; //jiya
const greeting = 'hello' + jiya; //hello jiya
//template literals(string)
const hiJiya = `hi ${jiya}!`; //hi jiya!
boolean
- false: 0, null, undefines, NaN, ''
- true : any other value
null
명확하게 비어져 있다고 할당하는 것.
undefined
명확하게 정해지지 않은 상태.
symbol
동시다발적으로 일어날 수 있는 코드에서 우선순위를 주고싶을 때 식별자로 주는 것.
동일한 string을 주었어도 각기 다른 것으로 구분된다. (Symbol.for을 사용하면 같은 것으로 나온다.)
<Dynamic typing>
dynamically typed language -->typeScript가 나오게 된 이유가 됨.
<Immutable vs Mutable data types>
Immutable data types: primitive, frozen objects ( i.e. object.freeze() )
Mutable data types: all objects by default are mutable in JS
'공부 > JavaScript' 카테고리의 다른 글
class vs object, class정리 (dreamcoding) | ES6 (0) | 2021.01.27 |
---|---|
Arrow Function (dreamcoding)| ES6 (0) | 2021.01.26 |
operator, if, for loop ~(dreamcoding) | ES6 (0) | 2021.01.25 |
중복 제거하고 정렬하기(Set, sort) (0) | 2020.10.25 |
0626 자바스크립트 (0) | 2020.06.29 |