다시 보는 javascript

난 옛날 사람이다.

한참 다른 곳만 보다 그동안 javascript가 이렇게 발전하고 있었고 그 무지함에 반성을 한다.

 

■ 'use strict'

• 타입스크립트는 상관없지만, 바닐라 스크립트를 사용할때 이 옵션을 켜두면 좀 더 강력하게 javascript 코드를 컴파일한다.

  선언되지 않은 변수 사용불가

• 브라우저의 컴파일 속도가 빨라진다.

■ async vs defer

• 아래와 같이 코드를 사용하면, html 코드를 파싱하면서 javascript 소스도 다운받게 되어 효율적이지만, 파싱할때 아직 다운되지 않은 javascript를 호출하면 오류가 발생한다.

<script async src="./main.js"></script>

• 아래와 같이 사용하면, html을 먼저 parsing하고 나 후에 javascript를 동작시켜서 오류를 예방하고 다운로드는 병렬적으로 처리된다.

<script defer src="./main.js"></script>

■ let (added in ES6)

var의 hositing : 어디에서 선언하더라도 가장 위에서 선언한것으로 해준다. var는 선언을 하지 않아도 사용이 가능한 변수 문법 var는 {블록}을 모두 무시한다.

■ const (immutable data type)

• 변경될 수 없는 상수
• security
• thread safety
• reduce human mistakes

const bigInt = 112231231231231231231231231312312312n;

■ `를 이용하는 방법

console.log(`value: ${variable1}, type: ${typeof variable}`)

■ variable types

let a = 12; let a: number =12;

■ boolean

• false : 0, null, undefined, NaNm ''
• true : any other value

■ Symbol

const symbol1 = Symbol('id') const symbol2 = Symbol('id') console.log(symbol1 === symbol2) //false const symbol1 = Symbol.for('id') const symbol2 = Symbol.for('id') console.log(symbol1 === symbol2) // true console.log(`value: $(symbol.description), type:${typeof symbol}`)

■ loose equality

• '==' 2개짜리 등호는 type을 변경해서 비교해서 비교한다.

const num1 = 1 const str1 = '1' console.log(num1== str1) //true console.log(num1=== str1) //false const nm1 = {name : 'akami'} const nm2 = {name : 'akami'} const nm3 = nm1 console.log(nm1== nm2) //false console.log(nm1=== nm2) //false console.log(nm1=== nm3) //true

console.log(0 == false) //true console.log(0 === false) //fasle console.log('' == false) //true console.log('' === false) //false console.log(null == undefined) //true console.log(null === undefined) //false

■ Arrow funciton

const simplePrint =()=>console.log('simle print'); const sum = (a,b)=>console.log(a+b); const mulply=(a,b)=>{ console.log(a*b) return a*b; }

■ IIFE

(function sayHello(){ console.log('hello'); })();