본 자료는 박규하 코치님과 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

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

자바스크립트 엔진

• 자바스크립트 코드를 읽어 실행하는 프로그램
• 작성한 자바스크립트 코드는 자바스크립트 엔진을 통해 파싱되고 실행된다.
• Chrome 브라우저의 경우 V8엔진을 사용한다.
• node.js는 브라우저 외의 환경에서 자바스크립트 코드를 실행하도록 하는 프로그램
• 브라우저 환경과 node.js 환경은 같은 코드도 다르게 동작할 수 있다.

자바스크립트 코드 실행

• 코드 실행 전
  • 실행 컨텍스트 생성
• 실행 컨텍스트 생성 단계
  • 자바스크립트 엔진은 변수 선언을 읽는다.
• 실행 컨텍스트 실행 단계
  • 자바스크립트 엔진은 변수 값을 할당한다.

렉시컬 환경

• 함수가 사용하는 변수들을 둘러싼 환경을 의미
• 특정 변수의 값은 함수의 렉시컬 환경안에서 찾을 수 있다.
• 실행 컨텍스트 안에 정의된 Variable Object로 이해할 수 있다.

생성단계에서의 코드실행

• 자바스크립트 엔진은 생성단계에서 함수 선언문, 함수 표현식, 변수 등을 읽어 저장한다.
• 변수의 경우, 실행 컨텍스트의 렉시컬 환경을 구성
• 함수 선언문 외에 변수는 값이 저장되지 않는다.

실행단게에서의 코드실행

• 변수에 값을 할당하는 구문을 만나면 값을 저장한다.
• 그 외 코드를 한 줄 씩 읽어 나간다.

자바스크립트 Hoisting

코드 실행 시 변수 처리

• 엔진이 코드를 읽으면, 생성단계에서 실행 컨텍스트를 생성한다.
• 이때 함수 선언문은 실행단계에서 함수전체가 실행 컨텍스트에 저장된다.
• var 변수는 저장 시 undefined로 초기화된다.
• let, const는 초기화되지 않는다.

Hoisting

• 변수가 선언된 시점보다 앞에서 사용되는 현상이다.

var, let, const

• var는 함수스코프
• let, const는 블록스코프

자바스크립트 내장객체

global This

• 전역 객체를 지칭하는 변수
• 브라우저 환경은 window, node환경은 global 객체를 지칭

window

• DOM document를 표현하는 창을 나타내는 객체
• 전역스코프에 선언된 변수는 모두 window의 property가 된다.
• 현재 창의 정보를 얻거나 창을 조작한다.

document

• 브라우저에 로드된 웹 페이지
• createElement, createTextNode는 동적으로 원소를 생성한다.

Number, NaN

• number의 원시타입을 감싸는 객체
• NaN
  • Not a Number
• isNaN()
  • 전역함수로, 입력값을 숫자로 변환했을 때 NaN이 되는지 검사

Math

• Number 타입만 인자로 가진다.
• toFixed, pow, sqrt

Date

• 특정 시점의 날짜를 표시하기 위한 객체
• getDay, getTime, setDate, toDateString

String, JSON

• trim(), toUpperCase()
• includes()
  • 문자열 검색 성공 시 true, 실패 시 false
• split(), replace()
• indexOf()
  • 특정 문자열을 검색
• JSON.stringify()
  • 주어진 객체를 JSON 문자열로 만든다.
• JSON.parse()
  • 주어진 JSON 문자열은 자바스크립트에 맞는 결과 객체로 만든다.