[엘리스sw] 3주차 5일 - 자바스크립트 실행 (변수와 객체)

---

◆ 자바스크립트 변수 정의 과정
◆  자바스크립트 Hoisting
◆  자바스크립트 내장 객체 1

◆  자바스크립트 내장 객체 2

◆  자바스크립트 내장 객체 3

---

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

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

• 파싱(Parsing) : 자바스크립트 엔진은 먼저 소스 코드를 읽어 들이고 이를 추상 구문 트리(AST)로 변환한다. AST는 코드의 구조를 트리 형태로 표현하여 각 요소의 관계와 의미를 파악하도록 돕는다.
• 컴파일(Compilation) : AST로 변환된 코드는 컴파일러에 의해 기계어나 중간 코드로 변환된다. 이러한 과정에서 최적화가 이루어져 실행 속도를 향상시키는 등의 작업이 수행될 수 있다.
• 실행(Execution) : 변환된 코드는 자바스크립트 엔진에 의해 실행된다. 실행 중에는 변수의 할당, 함수 호출, 객체 생성 등과 같은 다양한 작업이 이루어진다.

node.js

· 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이 발생하지 않는다.

변수와 함수의 호이스팅

// 예제 1: var 변수의 호이스팅
console.log(x); // undefined
var x = 5;
console.log(x); // 5

// 예제 2: let 변수의 호이스팅
// let 변수는 선언 단계에서 초기화되지 않아 호이스팅이 되지 않는다.
console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;
console.log(y); // 10

// 예제 3: 함수 선언문의 호이스팅
hoistedFunction(); // "Hello, I am a hoisted function!"

function hoistedFunction() {
  console.log("Hello, I am a hoisted function!");
}

// 예제 4: 함수 표현식의 호이스팅
// 함수 표현식은 변수 호이스팅이 발생하지만, 함수 자체는 호이스팅되지 않음
notHoistedFunction(); // TypeError: notHoistedFunction is not a function
var notHoistedFunction = function () {
  console.log("I am not hoisted!");
};

// 예제 5: 함수 선언문과 변수 호이스팅
// 함수 선언문과 변수 선언문이 함께 있을 때, 함수 선언문이 먼저 호이스팅된다.
combinedExample(); // "I am hoisted!"

var combinedExample;

function combinedExample() {
  console.log("I am hoisted!");
  combinedExample = function () {
    console.log("Now I am different!");
  };
}

 

var, let, const 비교

var	함수 스코프	재할당 가능
let	블록 스코프	재할당 가능
const	블록 스코프	재할당 불가능

 

반복문에서 var과 let의 차이

function varFor() {
	for (var i = 0; i < 3; ++i) {
		setTimeout(() => console.log("i: ", i), 0); }
	}


function letFor() {
	for (let i = 0; i < 3; ++i) {
		setTimeout(() => console.log("i: ", i), 0); }
	}

varFor();
letFor();

varFor

·  i는 varFor 함수 범위(함수 스코프)에 존재하는 변수이다.
· setTimeout이 호출될 때, i는 for 블럭이 끝난 시점에 소멸하지 않는다.

· 현재 코드 블록이 완료된 이후에 0ms 후에 콜백 함수를 실행하도록 스케줄링 되어 있다.

→ 코드가 여러 번 반복되는 동안 for 루프가 완전히 실행된 후에 콜백 함수가 실행된다.

letFor

·  i는 for블럭 안에 존재(블럭 스코프)하는 변수이다.
· 각 for block이 실행되고 i는 소멸한다. 다만, 이 경우 각 화살표 함수의 closure에 저장된다.

---

자바스크립트 내장 객체1

자바스크립트에는 숫자, 문자, 날짜, JSON 객체 다루기 등 유용한 객체를 제공한다.

 

window

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

const targetURL = "https://www.naver.com";
const windowSize = `height=${window.innerHeight}, width=${window.innerWidth}`;

window.open(
	targetURL, "Target", windowSize
);

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

const targetURL = "https://www.naver.com";
const windowSize = `height=${window.innerHeight}, width=${globalThis.innerWidth}`;

globalThis.open(
	targetURL, "Target", windowSize
);

 

document

·  브라우저에 로드된 웹페이지
·  문서의 title, URL 등의 정보를 얻는다.
·  element 생성, 검색 등의 기능 제공

function printDocumentInfo() {
	console.log("문서 URL:", document.URL);
	console.log("문서 타이틀:", document.title);
	console.log("모든 노드:", document.querySelectorAll("*"));
}

 

createElement, createTextNode

·  동적으로 원소를 생성함.

  // 새로운 div 요소 생성
  var newDiv = document.createElement("div");

  // 생성한 div에 텍스트 추가
  var textNode = document.createTextNode("Hello, this is a new div!");
  newDiv.appendChild(textNode);

  // 생성한 div를 문서의 body에 추가
  document.body.appendChild(newDiv);

// 주어진 todos 배열을 사용하여 todo 목록을 생성하는 함수
function createTodoList(todos) {
    // 배열의 각 요소에 대해 map 함수를 사용하여 새로운 li 엘리먼트를 생성하고 텍스트 노드를 추가한다.
    return todos.map((todo) => {
        const li = document.createElement("li"); // li 엘리먼트 생성
        li.appendChild(document.createTextNode(todo)); // li에 텍스트 노드 추가
        return li; // 생성된 li 엘리먼트 반환
    })
    .reduce((ul, li) => {
        ul.appendChild(li); // 각 li 엘리먼트를 ul 엘리먼트에 추가
        return ul; // 변경된 ul 엘리먼트 반환
    }, document.createElement("ul")); // 초기값으로 빈 ul 엘리먼트를 생성하여 reduce 함수 실행
}

const todos = ["Eat breakFast", "Do the Laundary"];

---

자바스크립트 내장 객체2

• Number : 자바스크립트의 number 원시타입을 감싸는 객체, 유의미한 상수값, 숫자를 변환하는 메서드 등을 제공함.
• NaN : Not a Number을 나타내는 객체
• isNaN() : 전역함수로, 입력값을 숫자로 변환했을 때 NaN이 되는지를 검사

 

원화를 달러로 바꾸는 함수

• Number.toFixed(자리수) : 숫자의 소수점 자리수를 제어하고, 반환된 값은 반올림된 문자열임.

function changeToUsd(krw) {
	const rate = 1046;
	return (krw / rate).toFixed(2);
}

const krw = 1000000;
console.log(changeToUsd(krw));  // 956.02 (문자열)

입력된 숫자나 숫자형식 문자열을 변환

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

console.log(formatNumber('12.345'))  // 12.35

· isNaN과 함께 활용하여, 유저의 입력을 포맷팅할 수 있음.
· formatNumber는 isNaN 함수로 빈 문자열, 잘못된 입력 등의 경우를 처리함.

---

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

 

최대값과 최소값 구하는 함수

•  Math.max, Math.min : 개별 숫자를 인자로 받아 각각 최대, 최솟값을 리턴

function getMaxDiff(nums) {
	return Math.max(...nums) - Math.min(...nums);
}

console.log(getMaxDiff([-1, -4, -7, 11])) // 18

 

랜덤으로 특정 범위의 숫자를 생성하는 함수

•   Math.random : 0에서 1사이의 float number을 구함.
•   Math.floor : 소수점 이하의 숫자를 버림.

function getRandomNumberInRange(min, max) {
    // 범위 : max - min + 1
	return Math.floor(Math.random() * (max - min + 1) + min);
}

// 길이가 10인 배열을 생성
// 50부터 100 사이의 숫자가 랜덤으로 생성하여 채움
let arr = Array.from({length: 10}).map(() => getRandomNumberInRange(50, 100))
console.log(arr)
// [54, 69, 62, 92, 59, 58, 60, 62, 79, 97]

---

자바스크립트 내장 객체3

Date

· 특정 시점의 날짜를 표시하기 위한 객체
· 날짜와 관련된 작업을 하기 위한 여러 메서드를 포함한다.
· 년도, 월, 일, 시, 분, 초, 밀리초 등을 구할 수 있음.

 

특정 날짜가 주말인지 확인하는 함수

•   Date.getDay() : 요일을 0(일요일)부터 6(토요일)로 반환함.

function isWeekend(today) {
	let day = today.getday()  // 요일 반환
	return day === 0 || day === 6;  // 일요일인지 토요일인지 판단
}

console.log(isWeekend(new Date("2024/1/10")));  // false

 

 

기존 날짜에 일수를 더한 후 그 결과를 문자열 형태의 날짜로 반환하는 함수

•   setDate(day) : Date 객체의 날짜 부분을 지정한 일로 설정, 범위 벗어나면 자동으로 다음 달이나 이전 달로 이동함.

const date = new Date();
date.setDate(15); // 현재 날짜의 일을 15로 설정

 

•   getDate() : Date 객체의 날짜 부분에서 일을 반환함. (1~31)

const date = new Date();
const dayOfMonth = date.getDate(); // 현재 날짜의 일을 반환

 

•   toDateString() : Date 객체를 형식화된 문자열로 반환

const date = new Date();
const dateString = date.toDateString(); // 현재 날짜를 형식화된 문자열로 반환

function addDays(date, days) {
	date.setDate(date.getDate() + days)
	return date.toDateString()
}

console.log(addDays(new Date("2024/1/10"), 100));
// Fri Apr 19 2024

 

주어진 시간이 현재로부터 며칠이나 흘렀는지 계산하는 함수

•  getTime() : 시간을 밀리초 단위(1970.1.1부터 흐른 시간)로 반환

function fromNow(targetTime) {
    // 현재 시간의 밀리초 표현
    const currentTime = new Date().getTime();

    // 주어진 시간의 밀리초 표현
    const givenTime = new Date(targetTime).getTime();

    // 현재로부터의 시간 차이 계산 (밀리초 단위)
    const timeDifference = currentTime - givenTime;

    // 밀리초를 일로 변환하여 날짜 차이 계산
    const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24))

    return daysDifference;
}

// 현재로부터 3일 전의 날짜 계산
const targetDate = new Date();  // 현재 날짜
targetDate.setDate(targetDate.getDate() - 3);

console.log(fromNow(targetDate))  // 3

---

String, JSON

• String : 자바스크립트의 문자열 원시 타입의 래퍼 객체, 문자열을 조작하기 위한 여러 메서드를 포함함.
• JSON : JSON 객체와 관련된 메서드를 담은 객체

• JSON.stringify() : 주어진 객체를 JSON 문자열로 변환

JSON.stringify({name: "Daniel", age: 12})
// {"name": "Daniel", "age": 12}

•   JSON.parse() : 주어진 JSON 문자열을 자바스크립트에 맞는 결과 객체로 변환

JSON.parse('{"name":"Daniel", "age":12')
// {name: "Daniel", age: 12}

---

trim()

· 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환

const str = "   Hello, World!   ";
const trimmedStr = str.trim();
console.log(trimmedStr); // "Hello, World!"

 

toUpperCase() / toLowerCase() 

· 문자열을 대문자/소문자로 변환한 값을 반환

const str = "hello";
const upperCaseStr = str.toUpperCase();
console.log(upperCaseStr); // 출력: "HELLO"

includes()

· 문자열 검색 성공시 true, 실패시 false 리턴

const str = "Hello, World!";
const hasSubstring = str.includes("World");
console.log(hasSubstring); // true

 

split()

· 주어진 문자열에 따라 타겟 문자열을 나누어서 배열로 반환

const str = "apple,orange,banana";
const fruitsArray = str.split(",");
console.log(fruitsArray); // ["apple", "orange", "banana"]

replace()

· 주어진 문자열을 검색하여 타겟 문자열로 변환
· 바꿀 문자열이 여러 개인 경우, 첫 번째로 매칭되는 문자열만 바꿈.

const str = "Hello, World!";
const newStr = str.replace("World", "Universe");
console.log(newStr); // "Hello, Universe!"

indexOf()

· 특정 문자열을 검색하여 시작점(최초로 나타나는 곳)의 인덱스를 반환, 없을 시 -1을 리턴

const str = "Hello, World!";
const index = str.indexOf("World");
console.log(index); // 7 (World가 시작하는 인덱스)