2025-04-07 TIL - Day 33 (JavaScript 기초 정리)

오늘은 JavaScript의 기초 개념을 정리하며 전반적인 언어의 구조와 활용법을 익혔다. JavaScript가 단순한 스크립트 언어 그 이상으로, 사용자와의 상호작용을 이끄는 핵심 도구라는 사실을 다시금 느낄 수 있었다.

---

✅ 학습 목표

• Script 언어와 JavaScript의 차이 및 개념 이해
• JavaScript 코드 작성 방식 (인라인, 내부, 외부)
• 변수 선언 방식(var, let, const)과 자료형 이해
• 연산자 활용 및 간단한 DOM 조작 예제 실습
• 조건문/반복문/분기문을 이용한 간단한 웹 인터랙션 구현

---

🔍 1. JavaScript 개요

JavaScript는 웹 페이지의 동적인 동작을 담당하는 대표적인 스크립트 언어이다. 컴파일 과정 없이 인터프리터 방식으로 실행되며, HTML/CSS와 함께 웹을 구성하는 삼대 축 중 하나다.

• 장점: 운영체제 독립적, 컴파일 불필요, 웹 브라우저 내장
• 단점: 인터프리터 특성상 느릴 수 있음

💡 객체 지향 기반이며, 함수형 프로그래밍 요소도 포함되어 있음

---

🧾 2. 코드 작성 방식

HTML에 JavaScript를 삽입하는 방식은 세 가지다:

1. Inline 방식: 태그 내 onclick="..." 형식으로 직접 작성
2. Internal 방식: <script> 태그 내부에 함수 정의 및 호출
3. External 방식: .js 파일로 분리 후 <script src="..."></script>로 불러오기

보통 유지보수와 모듈화를 고려하면 외부 방식이 권장됨

---

📦 3. 변수 선언과 자료형

변수 선언은 var, let, const로 구분되며, 각각의 스코프와 재할당 가능 여부가 다르다.

키워드	스코프	재선언	재할당	특징
var	함수	가능	가능	호이스팅 발생 (초기화는 안 됨)
let	블록	불가능	가능	TDZ 존재
const	블록	불가능	불가능	상수, 객체 속성은 변경 가능

주요 자료형

• Primitive: string, number, boolean, null, undefined
• Reference: object, array, function

typeof로 타입 확인 가능, null은 특이하게도 object로 인식됨

---

➕ 4. 연산자와 간단한 DOM 조작

덧셈 계산기를 통해 DOM 객체에 접근하고 이벤트 처리하는 법을 학습했다.

const number1 = document.getElementById("input1");
const number2 = document.getElementById("input2");
const result = document.getElementById("calcResult");

function plusFn() {
  const value1 = Number(number1.value);
  const value2 = Number(number2.value);
  result.innerText = value1 + value2;
}

---

🔁 5. 반복문 / 조건문 활용 실습

메뉴 주문 시스템

사용자로부터 메뉴 번호를 입력받아 switch-case문으로 분기 처리하는 방식 실습.

• prompt()로 입력 받고
• switch-case + while문으로 반복
• 총 주문량, 가격 계산 후 alert() 출력

Up & Down 게임 구현

• 1~200 사이 난수 생성 후, 맞출 때까지 반복
• 사용자 입력 비교 → [UP]/[DOWN] 출력
• break, continue로 흐름 제어

---

📘 느낀점

• JavaScript는 HTML과 결합해 사용자 경험을 풍부하게 만드는 도구라는 점을 실감했다.
• 코드 작성 방식에 따라 유지보수 효율성이 크게 달라짐을 깨달았고, 외부 JS 파일 관리의 중요성을 체감했다.
• var/let/const 각각의 특성과 스코프를 명확히 이해하는 것이 추후 복잡한 프로젝트에서 중요해 보였다.
• 반복문과 조건문만으로도 꽤 유의미한 기능(UpDown 게임, 주문 시스템 등)을 구현할 수 있어 재밌었다.