LG CNS 부트캠프 학습일지 4일차

학습 내용

• 자바스크립트 기본 문법
• 자바스크립트로 HTML을 동적으로 수정하기
• 타입스크립트를 자바스크립트로 변환하는 방법

자바스크립트 기본 문법

기술면접을 볼 때 받았던 질문들이 기억났다. 자바스크립트를 기초부터 배우지는 않았기 때문에 기본적인 개념들을 잘 모르고 있었다. 이번 기회에 애매하게 알고 있던 것들이 무엇인지 짚어내고 개념을 다질 수 있었다.

var vs let

결론부터 말하면 let 을 사용하는 것이 좋다. let 이 var 을 대체하기 위해 추가된 것이다. 두 키워드 모두 변수를 선언할 때 사용한다.

var x = 10;
let y = 10;

두 키워드의 차이점은 선언한 변수가 유효한 범위가 다르다는 것이다. var 의 범위는 함수이고, let 의 범위는 블록이다. var 을 사용할 때는 이런 문제가 발생할 수 있다.

const foo = () => {
	for (var i = 0; i < 10; i++) {
	...
	}
	
	console.log(i); // 10
}

var 은 선언된 다음부터 함수 전체까지 유효하기 때문에 for 문 바깥에서도 유효한 값을 갖는다.

const bar = () => {
	for (let i = 0; i < 10; i++) {
		...
	}
	
	console.log(i); // error
}

반면 let 은 선언된 블록 안에서만 유효하기 때문에 for문 바깥에서는 유효하지 않고 접근하려고 하면 오류가 발생한다.

함수 호이스팅이란

어떤 함수가 호출되기 위해서는 그 함수가 먼저 정의되어 있어야 한다. 하지만 자바스크립트는 어느 곳에서든 함수를 호출할 수 있게 만들어져 있는데, 이를 함수 호이스팅이라고 한다. Qwen3.5 9B에게 물어보니 이렇게 알려준다.

Function Hoisting is a JavaScript language behavior where function declarations (using the function keyword) are moved (“lifted”) to the top of their current scope during the compilation phase, before any code runs.

이등호(==) vs 삼등호(===)

결론부터 말하면 이등호부터 삼등호를 사용하는 것이 좋다. Java나 C++를 떠올리면 이등호는 두 변수의 값을 비교할 때 사용한다. 하지만 자바스크립트는 Java나 C++같은 정적타입언어가 아니기 때문에 두 변수의 값을 비교하는게 비교적 너그럽다. 다음 코드를 보자.

let x = 10;
let y = "10";
console.log(x == y);

x == y 의 값은 무엇으로 출력될까. true 값이 나온다.

let x = 10;
let y = "10";
console.log(x === y);

x === y 의 결과는 false 값이 출력된다. 삼등호는 두 변수의 값과 타입을 모두 비교하기 때문이다. 실무면접에서 이등호와 삼등호의 차이가 무엇이냐고묻는다면 이렇게 답변하면 좋을 것이다. 이등호는 비교하는 두 값이 실질적으로 동일한지 비교하고, 삼등호는 두 값과 타입이 동일한지를 비교한다.

자바스크립트로 HTML을 동적으로 수정하기

document.getElementById()
document.getElementByClassName()
document.querySelector()

HTML의 DOM에서 원하는 요소를 찾아내는 방법은 다양하다. CSS에서 사용하는 선택자를 사용할 수 있다는 점이 흥미로웠다. 다만, HTML 파일을 수정하면 자바스크립트 파일도 같이 수정을 해주어야 한다는 점에서 관리하기 번거롭겠다는 생각이 들었다. 그래서 리엑트 같은 것들이 만들어졌다고 생각한다.

타입스크립트를 자바스크립트로 변환하는 방법

1. 타입스크립트 npm 패키지를 설치한다.

npm install typescript

2. 타입스크립트 설정파일을 만든다.

tsc --init

3. 프로젝트 안에 있는 타입스크립트 파일을 변환한다.

tsc

결론

자바스크립트는 HTML과 CSS 보다는 눈에 보여지는게 적어서 비교적 심심했다. 하지만 익숙해서 따라가는 것은 어렵지 않았다.

개인적으로 정적타입을 지원하는 점 때문에 타입스크립트를 선호하는데, 타입스크립트를 HTML에 바로 연결할 수는 없지만 tsc 명령어로 타입스크립트를 자바스크립트로 변환해서 사용할 수 있다는 것을 배웠다.