[2026.03.30]TIL - 1일차 JavaScript 기초 정리

inline / internal / external, 변수, 자료형, Infinity / NaN, window 객체 함수

 

 

부트캠프를 시작하면서 JavaScript의 가장 기초적인 내용부터 다시 정리했다.

이번에는 단순히 코드를 따라 치는 데서 끝내지 않고, 어떤 방식으로 자바스크립트를 작성하는지, 변수와 자료형은 어떻게 동작하는지, 

브라우저에서 제공하는 대화형 함수는 무엇이 있는지를 중심으로 학습했다.

 

오늘 공부한 파일은 총 3개였고, 내용은 아래와 같다.

 

• JavaScript 사용 방식: inline / internal / external
• 변수 선언 방식과 자료형
• 변수의 범위(전역 변수, 지역 변수)
• Infinity, NaN
• window 객체의 대화형 함수: alert(), confirm(), prompt()

---

1. JavaScript 사용 방법 3가지

 

HTML에서 JavaScript를 사용하는 방법은 크게 3가지가 있다.

 

 

1) inline 방식

 

HTML 태그 안에 직접 JavaScript 코드를 작성하는 방식이다.

 

예를 들어 클릭 이벤트에 바로 코드를 넣어서 실행할 수 있다.

간단한 테스트에는 편하지만, 코드가 길어질수록 HTML과 JavaScript가 섞여서 가독성이 떨어진다.

2) internal 방식

 

HTML 문서 안의 <script> 태그 내부에 JavaScript를 작성하는 방식이다.

 

HTML 파일 하나 안에서 구조와 동작을 같이 관리할 수 있다.

규모가 크지 않을 때는 사용하기 괜찮지만, 코드가 많아지면 역시 분리의 필요성이 커진다.

 

3) external 방식

 

별도의 .js 파일을 만든 뒤 HTML에서 불러오는 방식이다.

 

이번 학습에서는 test.js 파일을 따로 만들고 HTML에서 연결하는 방식도 실습했다.

실무에서는 보통 이 방식이 가장 많이 사용된다.

정리
결국 세 방식 모두 실행은 가능하지만,
코드가 많아질수록 external 방식이 가장 깔끔하고 관리하기 좋다는 점을 직접 확인할 수 있었다.
학습시에는 코드가 길지 않아  internal 방식으로  JavaScript를 작성했다.

---

2. DOM 요소 접근과 실행 시점의 차이

 

이번 실습에서 중요하게 느낀 부분 중 하나는

페이지가 로드되기 전과 후의 차이였다.

document.getElementsByTagName("li")처럼 HTML 요소를 가져오는 코드는

브라우저가 아직 태그를 다 읽기 전에 실행되면 원하는 요소를 찾지 못할 수 있다.

 

즉,

• 페이지 로드 전: 태그를 아직 다 읽지 못해서 요소 접근이 안 될 수 있음
• 페이지 로드 후: 요소가 생성된 뒤라서 정상 접근 가능

그래서 window.onload를 사용하면

문서가 모두 로드된 뒤에 코드를 실행할 수 있다.

 

정리
- DOM 조작은 실행 시점이 중요하다.
- HTML 요소가 만들어지기 전에 접근하면 오류가 날 수 있다.
- window.onload는 이런 문제를 방지하는 대표적인 방법이다.

---

3. 변수 선언 :  var, let, const

JavaScript에서 변수를 선언하는 키워드는 대표적으로 var, let, const가 있다.

 

1) var

 

예전부터 사용되던 방식이다.

특징 중 하나는 호이스팅(hoisting) 이 발생한다는 점이다.

 

즉, 선언 전에 변수를 사용해도 에러가 아니라 undefined가 나올 수 있다.

특징

• 선언이 위로 끌어올려지는 것처럼 동작
• 예상하지 못한 동작이 생길 수 있음
• 최근에는 let, const를 더 많이 사용함
• 함수 안에서 선언하면 지역변수지만 if문 같이 블록 안에서 선언했을 때 블록 바깥에서도 사용 가능.

 

2) let

 

값을 다시 변경할 수 있는 변수이다.

특징

 

• 재할당 가능
• var보다 안전하게 사용 가능
• 블록 단위 스코프를 가짐 (지역범위가 블록 단위)

 

실제로 요즘 JavaScript에서는 일반 변수 선언 시 let을 많이 사용한다.

 

3) const

 

한 번 값을 저장하면 다시 바꿀 수 없는 상수이다.

const test = 3 선언 이후 test3 = 30으로 변경하면 오류가 뜬다.

 

특징

 

• 재할당 불가
• 값이 고정되어야 하는 경우 사용
• 선언과 동시에 초기화해야 함

정리
변수를 선언할 때는 상황에 따라 다르지만, 보통은 아래처럼 생각하면 정리가 쉽다.
- 값이 바뀔 수 있음 → let
- 값이 바뀌면 안 됨 → const
- 특별한 이유가 없다면 var는 지양

---

4. 변수의 범위 :  전역 변수와 지역 변수

 

이번에 같이 배운 내용 중 중요한 부분은 변수의 범위(scope) 였다.

 

전역 변수 함수 밖에서 선언한 변수로, 여러 함수에서 공통으로 사용할 수 있다. 특징 프로그램 전체에서 접근 가능 값이 계속 유지됨

지역 변수 함수 내부에서 선언한 변수로, 해당 함수 안에서만 사용할 수 있다. 특징 함수 실행 중에만 존재 함수 밖에서는 접근 불가

 

 

변수는 그냥 선언만 하는 게 아니라

어디에서 선언했는지에 따라 사용할 수 있는 범위가 달라진다는 점이 중요했다.

 

특히 지역 변수는 함수 밖에서 접근하려고 하면 에러가 발생하므로

코드를 작성할 때 변수 위치를 잘 생각해야 한다.

 

---

5. JavaScript 자료형 정리

 

JavaScript는 동적 타입 언어라서

하나의 변수에 다양한 타입의 값을 넣을 수 있다.

 

이번 실습에서는 typeof를 사용해서 자료형을 확인했다.

대표적인 자료형

• string : 문자열
• number : 숫자
• boolean : true / false
• null : 비어 있는 값
• object : 객체
• array : 배열도 object로 분류됨
• function : 함수

템플릿 리터럴

 

문자열을 더 편하게 작성하는 방법으로 백틱(₩)을 사용했다.

기존의 문자열 연결보다 가독성이 좋고, 변수 값을 넣기가 편하다.

예를 들어 문자열 안에 변수나 표현식을 자연스럽게 삽입할 수 있다.

 

 

장점

• 문자열과 변수 연결이 간편함
• 가독성이 좋음
• 실제 개발에서 자주 사용됨

---

6. Infinity와 NaN

 

이번 파일에서는 JavaScript의 특이한 숫자 처리도 배웠다.

1) Infinity 숫자를 0으로 나누면 무한대를 의미하는 Infinity가 나온다. 예를 들어 양수를 0으로 나누면 양의 무한대, 음수를 0으로 나누면 음의 무한대가 된다. 정리 10 / 0 → Infinity -10 / 0 → -Infinity

2) NaN 숫자가 아닌 값을 숫자처럼 계산하려고 하면 NaN이 나온다. 뜻은 Not a Number 이다. 예를 들어 문자열을 숫자로 나누는 경우가 대표적이다. 정리 정상적인 숫자 계산이 아닐 때 발생 NaN은 자기 자신과도 같지 않다 비교할 때는 Number.isNaN()을 사용하는 것이 좋다

 

중요하게 기억할 점

 

보통 값 비교를 할 때 ===를 쓰지만,

NaN === NaN은 false가 나온다.

 

그래서 NaN 여부를 확인할 때는

반드시 Number.isNaN() 같은 전용 방법을 사용하는 것이 안전하다.

 

---

7. window 객체의 대화형 함수

 

브라우저는 사용자와 간단히 상호작용할 수 있는 함수를 제공한다.

이번 실습에서는 alert(), confirm(), prompt()를 배웠다.

1) alert() 가장 기본적인 대화창이다. 단순히 메시지를 보여주는 용도로 사용한다. 특징 알림창 출력 확인 버튼만 존재 가장 단순한 형태

2) confirm() 확인 / 취소 버튼이 함께 있는 대화창이다. 결과값은 true 또는 false로 반환된다. 이번 예제에서는 사용자가 확인을 누르면 배경색을 pink로 바꾸는 방식으로 활용했다. 특징 확인 → true 취소 → false 조건문과 함께 자주 사용

3) prompt() 사용자에게 직접 값을 입력받을 수 있는 대화창이다. 문자열 형태로 값을 반환하기 때문에, 필요한 경우 숫자로 변환해서 사용해야 한다. 특징 텍스트 입력 가능 반환값은 문자열 조건문이나 switch문과 함께 활용 가능

 

이번 코드를 정리하면서 같이 눈여겨본 부분도 있다.

switch문에서 break의 중요성

switch문에서 break를 쓰지 않으면
한 case만 실행되는 것이 아니라 다음 case들도 계속 실행될 수 있다.

즉, 원하는 값 하나만 처리하고 끝내려면
대부분의 경우 break가 필요하다.

이 부분은 단순 문법이 아니라 실제로 자주 실수할 수 있는 부분이라서 기억해둘 필요가 있다.

---

8. 오늘 공부하면서 정리한 핵심 & 느낀 점

 

오늘은 JavaScript 문법 중에서도 정말 기본이 되는 내용들을 한 번에 다뤘다.

 

정리하면 아래와 같다.

 

• JavaScript는 inline / internal / external 방식으로 사용할 수 있다.
• 실무에서는 보통 external 방식이 가장 깔끔하다.
• 변수 선언은 let, const 중심으로 사용하는 것이 좋다.
• JavaScript는 동적 타입 언어라서 다양한 자료형을 다룰 수 있다.
• Infinity, NaN처럼 일반적인 숫자와 다른 특수한 값도 존재한다.
• alert(), confirm(), prompt()를 이용해 사용자와 상호작용할 수 있다.
• DOM 조작은 페이지 로드 시점이 중요하다.

---

오늘 배운 내용은 전부 기초이지만,

이 기초가 앞으로 DOM 조작, 이벤트 처리, 조건문, 반복문, 함수 활용으로 이어진다고 생각하니 더 중요하게 느껴졌다.

 

특히 단순히 문법만 보는 것이 아니라,

 

• 왜 window.onload가 필요한지
• 왜 let, const를 구분해서 써야 하는지
• 왜 NaN은 일반 비교로 확인하면 안 되는지

 

이런 부분까지 같이 이해하려고 하니 훨씬 정리가 잘 됐다.

 

처음에는 쉬워 보여도, 결국 이런 기초가 쌓여야 나중에 더 복잡한 코드를 읽고 작성할 수 있을 것 같다.