[엘리스] TIL #9

자바스크립트 변수 정의 과정

자바스크립트 엔진

• 파싱 후 코드를 읽어 실행하는 프로그램
• 코드를 파싱하여 AST로 변환한다. (트리 형태의 객체로 변환)
• 변환된 AST로
• 코드를 컴퓨터가 읽을 수 있도록 머신 코드로 변환하는 것
• 각 브라우저마다 엔진이 다르다 (크롬 : V8)

node.js

• 브라우저 외의 환경에서 자바스크립트 코드를 실행하도록 하는 프로그램
• 여러 프로그램으로 구성되고, 읽는 프로그램은 V8을 사용한다.
• 같은 자바스크립트 코드여도 브라우저 환경과 node.js 환경은 다르게 작동할 수 있다.

코드 실행

• 엔진은 실행 전 실행 컨텍스트를 생성한다.
  1. 생성 : 변수 선언을 읽는다.
  2. 실행 : 변수 값을 할당

Lexical Environment

• 함수가 사용하는 변수들을 둘러싼 환경
• 변수의 값은 함수의 렉시컬 환경에서 찾을 수 있다.
• Variable Object로 렉시컬 환경을 이해할 수 있다.
• Scope chain도 선언돼있어 렉시컬 환경 내에 변수가 없다면 체인을 따라서 변수를 찾아 나간다.
• Execution Context에 렉시컬 환경이 정의돼있는 것

생성 단계 : 실행 컨텍스트 생성

• 함수 선언문, 표현식, 변수를 읽어 실행 컨텍스트에 저장한다.
• 변수의 경우 실행 컨텍스트의 렉시컬 환경 구성
• 함수는 값이 저장 되지만, 변수는 값이 저장되지 않는다.

실행 단계 : 변수 값 할당, 코드 실행

• 변수 값을 할당하는 구문을 만나면 실행 컨텍스트에 값을 저장한다.
• 그 이전까지는
  • let, const : uninitialized 상태
  • var : undefined 상태
    로 let, const로 선언된 것은 값 할당 전에 사용되면 에러가 뜬다.
• 코드는 한 줄 씩 읽혀 실행된다.

Hoisting

코드 실행시 변수 처리

• 생성 단계에서 실행컨텍스를 생성하는데
  • 함수는 전체가 저장됨
  • var : undefined 로 초기화됨 -> 의미가 있는 것 ("정의되지 않음"이라는 의미)
  • let, const : 초기화 되지 않음

호이스팅

• 변수가 선언된 시점보다 앞에서 사용되는 현상
  var 변수가 생성 단계에서 undefined로 초기화되는 것이 원인
• 함수는 생성 단계에서 전체가 저장되므로 뒤에서 선언되어도 호출이 가능하다.
• let, const는 호이스팅이 되지 않는다.
  선언문 이전 접근시 ReferenceError가 발생하게 된다.
  초기화 이전 접근 불가 영역을 Temporal Dead Zone(TDZ)라고 한다.

변수 선언 키워드

이름	범위	재할당
var	함수 스코프	O
let	블록 스코프	X
const	블록 스코프	X

• var 은 함수 범위에 따라 존재하는 변수
  for 블록에서 사용되었으면 각 화살표 함수 클로저에 저장되지 않고, for 블록이 끝난 시점에 소멸하지 않는다.
• let 은 블럭 안에 존재하는 변수
  for 블록에서 사용되었다면 각 화살표 함수 클로저에 저장되며, 블록이 끝나면 소멸된다. block 마다 i가 바인딩 되는 것

내장 객체

globalThis

• 전역 객체를 지칭하는 변수
• 환경에 따라 다르게 저장된다.
• window, node 환경은 객체를 지칭하는데 이 환경별 차이를 통일하여 하나의 변수로 서로 다른 전역 객체를 가리키게 한다.

window

• DOM document와 주소 창 모두 포함하는 창
• 전역 스코프에 선언된 변수는 모두 window의 property가 된다.
• 현재 창의 정보를 얻거나 창을 조작한다.
  window.open(~)

globalThis

• 브라우저 환경에서 window객체와 같다.

document

• 브라우저에 로드된 웹페이지
• title, url 등의 정보를 얻는다.
• 동적으로 원소 생성 가능하여 자바스크립트 만으로 원소를 구성할 수 있다.

Number, NaN

• number 원시 타입을 감싸는 객체
• NaN : Not a Number
  • isNaN() : 전역 함수로 입력값을 숫자로 변환했을 때, NaN이 되는지 검사
• toFixed() : 숫자의 소숫점 자릿수를 제어한다.
  반환된 값은 반올림된 문자열
• Math : 기본적인 수학 메서드, 상수를 다룸. BigInt(100..000n)으로는 사용이 불가
  • .max, .min : 개별 숫자를 인자로 받아 최대, 최솟값을 리턴한다. 결과에 *10을 하면 0부터 9 사이의 숫자를 랜덤하게 구할 수 있다.
  • .random()은 0과 1사이의 float number을 구한다.
  • .floor()은 소수점 이하 숫자를 버린다.

Date

• 특정 시점의 날짜를 표시하는 객체
• .getDay() 요일을 반환한다.
  비슷하게 년도, 월, 일, 시, 분, 초, 밀리초 등을 구할 수 있다.
• .setDay()등의 메서드로 시간을 설정한다.
• 설정시 월 변경 등의 시간 변환은 Date가 처리한다.
• .toDateString()은 특정 포맷의 문자열을 반환

String, JSON

• 문자열 원시 타입의 래퍼 객체
• 여러 메서드가 있음
• .trimg(),toUpperCase()등은 변환된 새로운 문자열을 리턴한다.
• .includes()는 문자열 검색 성공 시 true, 실패 시 false를 리턴
• .split()은 문자열로 문자열을 나눠 배열로 반환
• .replace()는 주어진 문자열을 검색해 타겟 문자열로 반환
• .indexOf()는 특정 문자열을 검색해 시작점의 인덱스를 반환. 없으면 -1을 리턴한다.

JSON

• .stringify()는 주어진 객체를 JSON으로 만든다.
• .parse()는 주어진 JSON 문자열을 자바스크립트에 맞는 결과 객체로 만든다.