[Hanaro] 9일차 / JavaScript 기초(데이터 타입, Hoisting, 연산자)

JavaScript 시작하기

• Primitive(원시) Type
  • 숫자(Number, BigInt)
    • number인 123과 bigint인 123n은 다르다! 덧셈 같은 계산도 안된다.(TypeError) 하지만 number + float는 계산 가능
    • string + bigint 계산 시 문자열 합하기로 되어져서 나온다.
  • 문자열(string)
    • ex) s = new String() ⇒ [string: ‘’]
  • boolean
  • undefined
  • null
    • type은 object
  • Symbol
    • Symbol은 unique, 안의 값이 같아도 일치 연산자로 비교 시 false 임.
    • new 생성 불가
• Object(객체)/Reference(참조) Type
  • 객체({}, instance 객체)
    • 빈 객체 선언은 new Object(), {} 으로 선언
  • 함수(function object)
    • key와 value의 한 쌍을 프로퍼티라고 하고, function 안에 있으면 프로퍼티가 있으면 function 프로퍼티라고 한다.
    • 만약 프로퍼티가 없는 function이면 method라고 한다.
  • 배열([], Array)
  • RegExp Set/WeakSet
  • Map/WeakMap
  • Date
• 형 변환 (Type Conversion/Casting)
  • 문자열 병합 연산자
  • 병합 연산자
    • 5 + ‘30’; ⇒ 문자열로 형 변한되어 530 으로 출력
  • 산술 연산자
    • 5 * '30'; 같이 실행해도 형 변환되어 150으로 출력
• 암묵적(강제) 형변환 (Implicit coercion, Type coercion)
  • 해당 라인 (문, statement)에서만 형 변환되고 다시 원복
  • 예로 i = 100; 선언 후 i.toString(); 하면 ‘100’ 으로 출력한다. 하지만 다음 줄에서 typeof i 를 적으면 i는 number type으로 나온다! 이렇게 해당 라인에서만 형 변환되고 원복된다.
• Hoisting(호이스팅, scope: 전역, 함수, 블럭, 모듈, …)
  • JS 함수는 실행되기 전에 함수 안에 필요한 변수 값들을 모아서 유효 범위의 최상단에 선언한다.
  • 호이스팅이란 코드 평가시 선언문을 해당 scope의 최상단으로 끌어올려(내부적으로) 메모리 선점 (Linking)
  • 목적은 각 식별자의 메모리 위치를 미리 잡아 stack 영억 세팅 (실행이 빠름)
  • 대상은 var(함수형 scope)과 함수선언문
    • let, const도 hoisting이 되지만 선언과 초기화가 분리되어 실행되므로 초기화되기 전에 접근(사용)하면 안된다.
    • 선언문이 없는 변수는 호이스팅될 수 없으며 실행시 정의
  • 코드는 scope 별로, 평가(compile)된 후 실행되며, 평가 시 호이스팅된다.
    • 평가: 인터프리터로서의 컴파일 (선언문 먼저 호이스팅 → 구현부 → Target Code)
    • 실행: 인터프리터로서의 실행 (Target Code를 한 줄씩 차례로 실행)
  • 순서는 전역코드 평가→ 전역코드 실행→ 함수코드 평가(호출시)→ 함수코드 실행→ 복귀
• TDZ(Temporal Dead Zone)
  • 변수 선언 및 초기화 전에 사용 시 TDZ 상태에서 사용하는 것 → ReferenceError 발생
  • const, let, class는 영향을 받고 var, function, import 는 영향을 받지 않는다.

 

JavaScript - 연산자와 제어문, 디스트럭처링

• 연산자의 종류
  • 산술 연산자
    • 이항 연산자: +, -, *, /, %, 부호
    • 단항 연산자: ++, —
      • 하지만 증감 연산자는 풀어쓰자
  • 할당 연산자
    • let {id} = user;
  • 문자열 연결(병합) 연산자
    • ex) s + ‘bc’;
  • 비교 연산자
    • ===
    • typeof, instanceof, isArray
  • 논리 비교 연산자
    • ! ==, isNaN()
  • 삼항조건 연산자
    • ex) n > 0 ? n : s;
  • 쉼표 연산자, 그룹 연산자
    • ex) q = (p = x = 1, y = 2, z = 3);
  • 지수 연산자
    • ex) 2 ** 3; ⇒ 8
  • 옵셔널체이닝 연산자
    • ex) arr?.length; ⇒ 0
  • Null 병합 연산자
    • ex) arr = arr ?? []; (null이거나 undefined면 [] 할당, 출력)
  • 비트 연산자
  • 나머지 연산자
  • void 연산자
    • void 0 또는 void(0)
    • 평가/실행 후 undefined 반환
    • ex) d = void(c = a + b); ⇒ undefined ****