4단계 — JavaScript 기초

브라우저를 움직이는 언어. 변수·함수·이벤트·비동기 네 가지만 잡으면 90% 가 됩니다.

1. 변수 세 종류

const name = "코딩스테어즈";  // 바뀌지 않을 값 (대부분 const)
let count = 0;                 // 바뀔 수 있는 값
// var 는 옛 키워드 — 신규 코드에선 사용 ✗

원칙: 기본은 const, 바뀌어야 할 때만 let. const 가 많을수록 변수 추적이 쉽습니다.

2. 타입 — 기본 7 개

typeof "hello"         // "string"
typeof 42              // "number"
typeof true            // "boolean"
typeof undefined       // "undefined"
typeof null            // "object" (JS 역사적 버그)
typeof Symbol()        // "symbol"
typeof 42n             // "bigint"
typeof {}              // "object"
typeof []              // "object" (Array.isArray 로 구분)

null 과 undefined 의 차이:

• undefined — 값이 아직 할당 안 됨
• null — 명시적으로 "비어 있음"

3. 함수 — 세 가지 형태

// 함수 선언
function add(a, b) {
  return a + b;
}

// 함수 표현식 (변수에 할당)
const subtract = function(a, b) { return a - b; };

// 화살표 함수 (요즘 가장 많이)
const multiply = (a, b) => a * b;
const square = (x) => {
  const result = x * x;
  return result;
};

화살표 함수는 this 바인딩이 없어 콜백으로 편리. 메서드 정의 · 생성자로는 쓰지 마세요.

4. 객체와 배열

// 객체
const user = {
  name: "홍길동",
  age: 25,
  greet() { return `안녕, ${this.name}`; },
};

user.name               // "홍길동"
user["name"]            // 동일
user.greet()            // "안녕, 홍길동"

// 배열
const fruits = ["사과", "바나나", "체리"];
fruits[0]               // "사과"
fruits.length           // 3
fruits.push("수박")      // 끝에 추가
fruits.map(f => f.length) // [2, 3, 2, 2]

5. 이벤트 — 사용자 반응 처리

<button id="hi">눌러 보세요</button>
<input id="name" placeholder="이름">

<script>
  const btn = document.getElementById("hi");
  const name = document.getElementById("name");

  btn.addEventListener("click", () => {
    alert(`안녕하세요, ${name.value}님!`);
  });

  name.addEventListener("input", (e) => {
    console.log("현재 값:", e.target.value);
  });
</script>

이벤트 패턴 3 단계:

1. 요소 찾기 (getElementById, querySelector)
2. 이벤트 등록 (addEventListener)
3. 콜백 안에서 반응 처리

6. 비동기 — Promise · async/await

네트워크 요청 · 파일 읽기처럼 시간이 걸리는 작업.

// fetch 는 Promise 반환
fetch("/api/users")
  .then(res => res.json())
  .then(users => console.log(users))
  .catch(err => console.error(err));

// async/await — 위와 동등하지만 동기처럼 읽힘
async function loadUsers() {
  try {
    const res = await fetch("/api/users");
    const users = await res.json();
    console.log(users);
  } catch (err) {
    console.error(err);
  }
}

loadUsers();

async 함수는 항상 Promise 반환. await 는 async 함수 안에서만 사용 가능.

7. 모던 문법 5 가지

// 1. 구조 분해
const { name, age } = user;
const [first, second] = fruits;

// 2. 전개 연산자
const newUser = { ...user, email: "a@b.com" };
const extended = [...fruits, "딸기"];

// 3. 옵셔널 체이닝
const city = user?.address?.city;           // undefined 안전

// 4. null 병합
const displayName = user.nickname ?? "손님";

// 5. 템플릿 리터럴
const msg = `안녕 ${name}, 나이 ${age}`;

이 다섯이 현대 JS 코드의 절반 이상을 차지합니다.

8. 배열 메서드 — 반복문 대체

const nums = [1, 2, 3, 4, 5];

nums.map(n => n * 2)              // [2, 4, 6, 8, 10]
nums.filter(n => n > 2)           // [3, 4, 5]
nums.reduce((sum, n) => sum + n, 0)  // 15
nums.find(n => n > 3)             // 4
nums.some(n => n > 4)             // true
nums.every(n => n > 0)            // true
nums.forEach(n => console.log(n))  // 1 2 3 4 5

for 루프 대신 이 메서드들을 쓰면 의도가 명확해집니다.

9. JSON — 서버와 주고받는 형식

// 객체 → 문자열
const str = JSON.stringify({ name: "홍길동", age: 25 });
// '{"name":"홍길동","age":25}'

// 문자열 → 객체
const obj = JSON.parse('{"name":"홍길동","age":25}');
// { name: "홍길동", age: 25 }

localStorage.setItem · fetch 와 짝으로 자주 등장.

10. 직접 해 보기

간단 할 일 목록 앱 (todo list) 로 다 써 보세요:

<input id="task" placeholder="할 일">
<button id="add">추가</button>
<ul id="list"></ul>

<script>
  const task = document.getElementById("task");
  const list = document.getElementById("list");

  document.getElementById("add").addEventListener("click", () => {
    if (!task.value.trim()) return;
    const li = document.createElement("li");
    li.textContent = task.value;
    li.addEventListener("click", () => li.remove());
    list.appendChild(li);
    task.value = "";
  });
</script>

"입력 · 추가 · 삭제" 한 사이클을 직접 손으로 경험하면 — 이 패턴이 모든 프론트의 기본.

11. 자주 걸리는 자리

• == vs === — 항상 === 사용. == 는 타입 변환 이상 동작
• this 혼동 — 화살표 함수는 this 상속, 일반 함수는 호출 방식에 따라
• 콜백 지옥 — Promise chain 또는 async/await 로 풀어 씀
• 전역 변수 오염 — const/let 으로 스코프 제한
• try/catch 없이 await — 에러 미처리 · UnhandledPromiseRejection

12. 다음으로 TypeScript

JS 에 타입 을 얹은 언어가 TypeScript. VS Code 의 자동완성 · 에러 조기 발견 · 리팩터 안전성. 모던 웹 개발은 거의 TS.

더 깊이

• JavaScript 기초 노트
• TypeScript strict 노트
• 폼 + Zod 노트

다음 단계

5단계에서는 같은 일을 더 우아하게 적게 짜는 React 19 를 만나요.