공부/JavaScript

async, defer / data types ~ (dreamcoding) | ES5+

Dev_YJ 2020. 12. 9. 22:40

[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