TIL] 엘리스 SW 엔지니어 트랙 Day 016

📖 오늘 배운 내용 - 2021.11.13

• 자바스크립트 변수 정의 과정
• 호이스팅
• 자바스크립트 내장 객체

 

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

• variable object와 Scope chain은 렉시컬 환경에 속한다

 

📕 자바스크립트 엔진

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

 

📕 자바스크립트 코드 실행

• JS엔진은 코드 실행 전 실행 컨텍스트를 생성한다.
• 실행 컨텍스트는 두 단계를 통해 생성된다.
• 생성 단계에서 JS엔진은 변수 선언을 읽는다.
• 실행 단계에서 JS엔진은 변수 값을 할당한다.

 

📕 렉시컬 환경(Lexical Environment)

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

[JavaScript] 자바스크립트 변수의 유효범위, 렉시컬 환경

 

📕 생성 단계에서의 코드 실행

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

 

📕 실행 단계에서의 코드 실행

• JS 엔진은 변수에 값을 할당하는 구문을 만나면 실행 컨텍스트에 값을 저장한다.
  • 그 전에는 let, const는 uninitialize, var는 undefined
• 그 외 코드를 한 줄씩 읽어 나가며 실행한다.

 

📝 자바스크립트 호이스팅, Hoisting

[JavaScript] 자바스크립트 블록레벨 스코프, 함수레벨 스코프

 

📝 자바스크립트 내장 객체

📕 globalThis

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

 

📕 window

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

 

📕 document

• 브라우저에 로드된 웹페이지
• 문서의 title, URL 등의 정보를 얻는다.
• element 생성, 검색 등의 기능 제공
• createElement, createTextNode는 동적으로 원소를 생성한다.
• 이를 이용해 자바스크립트만으로 원소를 구성할 수 있다.

 

📕 NaN

• NaN : Not a Number를 나타내는 객체
• isNaN() : 전역 함수로 입력 값을 숫자로 변환했을 때 NaN이 되는지를 검사

 

📕 Data

• 특정 시점의 날짜를 표시하기 위한 객체
• Date.getDay() : 요일 반환, 0(일요일) ~ 6(토요일)
• Date.setDate() : 시간 설정
• DateString() : 특정 포맷의 문자열을 반환
• getTime() : 시간을 밀리초 단위로 반환
  • 밀리초는 1970.1.1 시점부터 흐른 시간

Date.prototype.getFullYear - 년도
Date.prototype.getMonth - 월 - 1 (1월은 0, 2월은 1, ...)
Date.prototype.getDate - 일
Date.prototype.getHours - 시
Date.prototype.getMinutes - 분
Date.prototype.getSeconds - 초

 

📝 Date 객체 확인 방법

// 방법 1
Object.prototype.toString.call(date) === '[object Date]

// 방법 2
date instanceof Date

 

💡 오늘 깨달은 것

• 이번 주 난이도가 올라가면서 내용 및 문제들이 많이 어려워졌다. 디스코드 레이서 채널을 보면서 다시 한번 느낀 거는 내가 어려우면 다른 사람들도 어려워한다. 주눅 들지 말고 노력한 뒤에 질문해보자!
• 스터디에서 렉시컬 환경에 대해서 발표한 적이 있어서 다시 한번 복습할 수 있었던 시간이었다.
• variable object와 Scope chain은 렉시컬 환경에 속한다
• 소문자 판별 el >= "a" && el<= "z"
• 실시간으로 현재 시간의 밀리초를 얻기 : Date.now()

 

📌 참고

• 실행 컨텍스트(렉시컬 환경과 this)
• TDZ을 모른 채 자바스크립트 변수를 사용하지 말라
• How to check whether an object is a date?