변수 정의 과정

자바스크립트 엔진

자바스크립트 엔진은 자바스크립트 코드를 읽어 실행하는 프로그램이다.
작성한 자바스크립트 코드는 자바스크립트 엔진을 통해 파싱되고 실행된다.
Chrome 브라우저의 경우 V8 엔진을 사용한다.

코드 실행 단계

• 자바스크립트 엔진은 코드 실행 전 실행 컨텍스트를 생성하고, 이는 두 단계를 통해 생성된다.
• 생성 단계에서 엔진은 변수, 함수 선언, 함수 표현 등을 읽어 실행 컨텍스트에 저장한다.
• 실행 단계에서 엔진은 변수 값을 할당하지만 실행단계에서는 그 값이 저장되는 공간이 생기는 것이지 저장되지는 않는다. 반면, 함수 객체는 값까지 전부 저장된다.

Hoisting

Hoisting은 변수가 선언된 시점보다 앞에서 사용되는 현상이다. 이는 var는 변수 저장시 undefined로 초기화 되기 때문이다. 함수는 생성 담계에서 함수 전체가 저장되므로 뒤에서 선언되어도 호출이 가능하다.

let 과 const는 둘다 역시 호이스팅이 발생하지만 변수 생성 단계에서 값이 초기화 되지 않기 때문에 접근 시 에러가 발생한다. ReferenceError: Cannot access 'x' before initialization

내장 객체

globalThis

globalThis는 환경별 차이를 통일하여 하나의 변수로 서로 다른 전역 객체를 지힝하는 변수이다.
전역 객체는 환경에 따라 다르다. 브라우저 환경은 window, node는 global 객체를 지칭한다.

window

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

document

브라우저에 로드된 웹페이지, html 문서 그 자체를 지칭하는 객체이다.
문서의 title, url 등의 정보를 얻고 element 생성, 검색등의 기능을 제공한다.
createElement 나 createTextNode로 동적으로 원소를 생성할 수 있지만 바로 html 문서에 보이지 않고, 다른 함수를 이용하여 문서에 보이게 한다.

number, NaN

number

자바스크립트의 number 원시타입을 감싸는 객체이며, 유의미한 상수값, 숫자를 변환하는 메소드 등을 제공한다.

NaN

Not a Number를 나타내는 객체이다.

• isNaN(): 전역 함수로, 입력값을 숫자로 변환했을 때 NaN이 되는지를 검사
• Number.toFixed(number): 숫자의 소수점 자릿수를 제어한다.

function formatNumber(n) {
	if (isNaN(n)) return '0';
    return Number(n).toFixed(2);
}

formatNumber(12.345) // 12.35
formatNumber('안녕') // '0'

Math

기본적인 수학 연산 메소드, 상수를 다루는 객체이다.
BigInt 타입과 호환되지 않고, Number 타입만을 인자로 다룬다.

• Math.max(number...): 숫자의 최댓값을 리턴한다.
• Math.min(number...): 숫자의 최솟값을 리턴한다.
• getMaxDiff(array): 배열의 최댓값, 최솟갑의 차이를 계산한다.
• Math.random(): 0에서 1 사이의 float number을 구한다.
• Math.floor(): 소숫점 이하 숫자를 버린다.
• getRandomNumberInRange(): max와 min 범위의 랜덤 숫자를 구한다.

Date

특정 시점의 날짜를 표시하기 위한 객체이다. 기본적으로 현재 컴퓨터의 시간대(타임존) 정보를 기반으로 생성된다. 따라서, Date 객체를 생성하면, 현재 시간대가 기준 UTC 시간대에서 얼마나 벗어나 있는지를 알 수 있다.

• date.getDay(): 요일을 0(일요일) 부터 6(토요일)로 구분한다. 이 외에 년도, 월, 일, 시, 분, 초 등을 구할 수 있다. getMonth() getHours()등이 가능하다.
• setDate(): 시간 설정. 설정시 월 변경 등의 시간 변환은 Date 객체가 처리한다.
• toDateString(): 특정 포맷의 문자열을 반환한다.
• fromNow(): 주어진 시간이 현재로부터 며칠이나 흘렀는지를 계산한다.
• getTime(): 시간을 밀리초 단위로 반환한다.
• new Date(): 객체를 생성한 시점의 시잔 벙보만 얻을 수 있다. 실시간의 밀리초를 얻기 위해선 정적 메소드인 Date.now()를 활용해야 한다.

string

자바스크립트의 문자열 원시 타입을 감싸고 있는 객체. 문자열을 조작하기 위한 여러 메소드를 포함한다.

JSON

자바스크립트 객체 구조와 유사한 문자 기반에 데이터 포맷이다. JSON은 서버와 통신할 때 자주 사용되는 데이터 포맷이다. 웹에서는 흔히 사용되기 때문에 반드시 알아야 한다.

{
    "name": "elice",
    "age": "6",
    "height": 16
}

자바스크립트는 JSON과 관련된 두 가지 메서드를 제공한다.

// 객체를 JSON으로 바꾸는 메서드
JSON.stringify()

// JSON을 객체로 바꾸는 메서드
JSON.parse()