자바스크립트 실행
자바스크립트 변수 정의 과정
자바스크립트 엔진
- 자바스크립트 엔진은 자바스크립트 코드를 읽어 실행하는 프로그램
- 작성한 자바스크립트 코드는 자바스크립트 엔진을 통해 파싱되고 실행된다.
- Chrome 브라우저의 경우 V8 엔진을 사용한다.
- node.js는 브라우저 외의 환경에서 자바스크립트 코드를 실행하도록 하는 프로그램
- node.js는 여러 프로그램으로 구성되며, 자바스크립트 코드를 읽는 프로그램으로 V8을 사용한다.
- 브라우저 환경과 node.js 환경은 같은 자바스크립트 코드를 작성해도 다르게 동작할 수 있다.
자바스크립트 코드 실행
- 자바스크립트 엔진은 코드 실행 전 실행 컨텍스트를 생성한다.
- 실행 컨텍스트는 두 단계를 통해 생성된다.
- 생성 단계에서는 자바스크립트 엔진은 변수 선언을 읽는다.
- 실행 단계에서 자바스크립트 엔진은 변수 값을 할당한다.
렉시컬 환경(Lexical Environment)
- 함수의 렉시컬 환경은, 함수가 사용하는 변수들을 둘러싼 환경을 의미한다.
- 특정 변수의 값은 함수의 렉시컬 환경 안에서 찾을 수 있다.
- 렉시컬 환경은 실행 컨텍스트 안에서 정의된 Variable object로 이해할 수 있다.
생성 단계에서의 코드 실행
- 자바스크립트 엔진은 생성 단계에서 함수 선언문, 함수 표현식, 변수 등을 읽어 실행 컨텍스트에 저장한다.
- 변수의 경우, 실행 컨텍스트의 렉시컬 환경을 구성한다.
- 함수 선언문 외에 변수는 값이 저장되지 않는다.
실행 단계에서의 코드 실행
- 자바스크립트 엔진은 변수에 값을 할당하는 구문을 만나면 실행 컨텍스트에 값을 저장한다.
- 그 외 코드를 한 줄씩 읽어 나가며 실행한다.
자바스크립트 코드 실행
자바스크립트 Hoisting
코드 실행 시 변수 처리
- 자바스크립트 엔진이 코드를 읽으면, 생성 단계에서 실행 컨텍스트를 생성한다.
- 이때 함수 선언문은 실행 단계에서 함수 전체가 실행 컨텍스트에 저장된다.
- var 변수는 저장 시 undefined로 초기화된다.
- let, const는 초기화되지 않는다.
Hoisting
- Hoisting은 변수가 선언된 시점보다 앞에서 사용되는 현상
- 이는 var 변수가 생성 단계에서 undefined로 초기화되는 것이 원인
- 함수는 생성 단계에서 함수 전체가 저장되므로 뒤에서 선언되어도 호출이 가능
- let, const 변수는 생성 단계에서 초기화되지 않는다.
- 선언문 이전에 접근 시 ReferenceError가 발생
- 이 경계를 Temporal Dead Zone(TDZ)라 한다
- 따라서 let, const는 hoisting이 발생하지 않는다.
var, let, const
- var, let은 변수에 재할당이 가능하지만, const는 재할당이 불가능
- var은 함수 스코프, let과 const는 블록 스코프 변수
- varFor에서 i는 varFor 함수 범위에 존재하는 변수이다.
- 따라서 setTimeout이 호출될 때, i는 for 블럭이 끝난 시점에 소멸하지 않는다.(i for 블록에 관한 변수가 아니기 때문에 setTimeout에 호출이 되었을 때 i는 블록에서 참조 되는 것이 아님)
- letFor에서 i는 for 블럭 안에 존재하는 변수이다.
- 각 for block이 실행되고 i는 소멸한다. 다만, 이 경우 각 화살표 함수의 closure에 저장된다.
자바스크립트 내장 객체 1
자바스크립트의 내장 객체들
- 숫자 다루기, 문자 다루기, 날짜 다루기, JSON 객체 다루기 등에 유용한 객체를 제공한다.
globalThis
- globalThis는 전역 객체를 지칭하는 변수이다.
- 전역 객체는 환경에 따라 다르다.
- 브라우저 환경은 window, node 환경은 global 객체를 지칭한다.
- globalThis는 환경별 차이를 통일하여 하나의 변수로 서로 다른 전역 객체를 가리키게 한다.
- globalThis는 브라우저 환경에서 window객체와 같다.
window
- DOM document를 포함하는 창을 나타내는 객체
- 전역 스코프에 선언된 변수는 모두 window의 property가 된다.
- 현재 창의 정보를 얻거나, 창을 조작한다.(브라우저를 조작하는데 있어 유용한 객체)
document
- 브라우저에서 로드된 웹페이지
- 문서의 title, URL 등의 정보를 얻는다.
- element 생성, 검색 등의 기능 제공
- createElement, createTextNode는 동적으로 원소를 생성한다.
- 이를 이용해 자바스크립트만으로 원소를 구성할 수 있다.
자바스크립트 내장 객체 2
Number, NaN
- Number는 자바스크립트의 number 원시타입을 감싸는 객체.
- 유의미한 상수값, 숫자를 변환하는 메서드 등을 제공한다.
- NaN - Not a Number를 나타내는 객체.
- isNaN() - 전역 함수로, 입력값을 숫자로 변환했을 때 NaN이 되는지를 검사.
- Number.toFixed 메서드는 숫자의 소숫점 자릿수를 제어한다.
- 반환된 값은 반올림된 문자열이다.
- changeToUsd에서 변환된 krw를 소숫점 둘째자리까지만 처리하도록 한다.
- isNaN과 함께 활용하여, 유저의 입력을 포맷팅할 수 있다.
- formatNumber는 isNaN 함수로 빈 문자열, 잘못된 입력 등의 경우를 처리한다.
Math
- BigInt 타입과 호환되지 않고, Number 타입만을 인자로 다룬다.
- getMaxDiff 함수는 배열의 최댓값, 최솟값으 차이를 계산
- Math.random()은 0에서 1사이의 float number을 구한다.
- Math.floor는 소숫점 이하 숫자를 버린다.
자바스크립트 내장 객체 3
Date
- 특정 시점의 날짜를 표시하기 위한 객체.
- 날짜와 관련된 작업을 하기 위한 여러 메서드를 포함한다.
- Date.getDay()는 요일을 0(일요일)부터 6(토요일)으로 구한다.
- 이 외에 년도, 월, 일, 시, 분, 초, 밀리초 등을 구할 수 있다.
- setDate() 등의 메서드로 시간을 설정한다.
- 설정 시 월 변경 등의 시간 변환은 Date 객체가 처리한다.
- toDateString() 메서드는 특정 포맷의 문자열을 반환한다.
- getTime() 메서드는 시간을 밀리초 단위로 반환한다.
- 이때 밀리초는 1970.1.1 시점부터 흐른 시간이다.
- fromNow는 주어진 시간이 현재로부터 며칠이나 흘렀는지를 계산한다.
String, JSON
- 자바스크립트의 문자열 원시 타입의 래퍼 객체.
- 문자열을 조작하기 위한 여러 메서드를 포함한다.
- JSON - JSON 객체와 관련된 메서드를 담은 객체.
- trim(), toUpperCase() 등은 변환된 새로운 문자열을 리턴한다.
- includes() 메서드는 문자열 검색에 성공시 true, 실패 시 false를 리턴한다.
- toUserList()는 이름의 배열을 받아 리스트 태그 목록의 문자열을 계산한다.
- split()은 주어진 문자열에 따라 타겟 문자열을 나눈다.
- replace()는 주어진 문자열을 검색하여 타겟 문자열로 변환한다.
- indexOf()는 특정 문자열을 검색하여 시작점의 인덱스를 반환한다. 없을 시 -1을 리턴한다.
- JSON.stringify()는 주어진 객체를 JSON 문자열로 만든다.
- JSON.parse()는 주어진 JSON 문자열을 자바스크립트에 맞는 결과 객체로 만든다.
