Javascript

Shin Woohyun·2021년 7월 25일

V8 엔진으로 브라우저, node.js에서 javascript를 실행시킬 수 있다.

script

1.head에 script를 넣었을 때
html이 parsing되다가 script를 요소를 만나면, parsing을 멈추고, js파일을 fetching->executing(다운로드 받아서 실행)한 뒤에, 다시 html parsing을 진행한다.
-> 화면을 보기까지 시간이 많이 걸린다.
2.body 끝에 script를 넣었을 때
html의 parsing이 끝나고, js fetching->executing
-> html화면은 빠르게 보이지만 js가 실행되기까지 시간이 걸린다.
3.head+async
parsing html하다가 script를 만나면 fetching도 병렬로 진행하다가, parsing을 멈추고 js executing을 한 뒤에, 다시 parsing한다.
-> fetching 시간을 절약할 수 있지만 html요소가 정의되기 전에 js가 실행되게 된다.
4.head+defer
parsing html과 fetching을 병렬 진행하다가, parsing이 끝나면 js executing한다.
-> 추천. js파일이 여러 개라면 순서대로 진행할 수 있다.

script 요소의 defer로 head에 javascript를 추가하자.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/script

'use strict'를 js 파일 맨 위에 선언하자.

js는 너무 유연한 언어이기 때문에 위험한 상황(선언되지 않은 변수도 받아들여주는 등등)을 피하기 위해 use strict를 선언해주어야 한다.

Variable (Mutable) rw(read/write)

let name
변수를 선언하면 변수가 메모리를 가리키게 된다. 포인터.
변수에 값을 할당하면 변수가 가리키는 메모리에 값이 들어간다.
var은 쓰지말자.
var hoisting 어디에 선언했느냐와 상관없이 항상 제일 위로 선언을 끌어올려주는 것

Constant (Immutable) r(read only)

const 포인터가 잠겨서 값을 할당하면 변경할 수 없다.

보안 상 좋다.
하나의 프로세스 안에서 다양한 thread가 동시에 돌아가게 되는데, 역시 변하지 않는 값을 사용하는 게 좋다.
실수가 덜 난다.

Variable types

primitive, single item : number, string, boolean, null, undefined, symbol
object, box container
function, first-class function
primitive는 값이 메모리에 바로 저장되고, object는 너무 커서 reference가 저장된다. reference는 실제 object를 가리킨다.

special numeric values : Infinity, NaN
boolean false : 0, null, undefined, NaN, ''
null이라고 할당하는 경우에는 empty한 null을 지정해준 것이고, undefined는 미정의 상태.

-Symbol, 고유한 식별자 생성

Immutable data types: primitive types, frozen objects
Mutable data types: all objects by default are mutable in JS.

Operator

Increment & decrement operators

let counter = 2;
const preIncrement = ++counter;
// counter = counter + 1;
// preIncrement = counter;
const postIncrement = counter++;
// postIncrement = counter;
// counter = counter + 1;

x += y ; // x = x + y

Logical operator(or, and, not)

or, and를 사용할 때 앞에서부터 순차적으로 검사하다가 조건에 맞으면 멈추게 된다. 그래서 간단한 연산부터 배치하면 좋다.

Equality(==, ===)

== loose, with type conversion
=== strict, no type conversion

Ternary operator ? :

condition ? value1 : value2 간단한 경우에만 사용

Switch statement

const browser = 'IE';
switch (browser) {
  case 'IE':
    console.log('go away!');
    break;
  case 'Chrome':
  case 'Firefox':
    console.log('love you!');
    break;
  default:
    console.log('same all!');
    break;
}