기본 문법

이 장에서는 JavaScript 코드를 읽고 쓰는 데 매일 필요한 문법을 다룹니다. 변수 선언, 함수, 조건과 반복, 템플릿 리터럴, 그리고 현대 JavaScript에서 아주 자주 보이는 구조 분해와 전개 문법까지 차례로 살펴봅니다.

변수 선언: let, const, var

변수를 선언하는 키워드는 세 가지입니다. 새 코드에서는 기본으로 const를 쓰고, 값을 다시 대입해야 할 때만 let을 씁니다. var는 오래된 코드에서 볼 수 있지만 새로 쓸 이유는 거의 없습니다.

const greeting = "안녕하세요";
let count = 0;
count += 1;

if (true) {
  let inside = "블록 안";
  var leaked = "함수 범위";
}
console.log(leaked); // "함수 범위" — var는 블록을 벗어납니다
// console.log(inside); // ReferenceError — let은 블록 안에서만 보입니다

const user = { name: "민수" };
user.name = "지은"; // 가능: const는 변수의 재대입만 막고, 객체 내용은 바꿀 수 있습니다

const가 객체를 "얼려 주지" 않는다는 점에 주의하세요. 객체 자체를 바꾸지 못하게 하려면 Object.freeze()를 써야 합니다.

함수와 화살표 함수

함수를 만드는 방법도 여러 가지입니다. 함수 선언은 파일 어디에서든 호출할 수 있고, 화살표 함수는 짧은 콜백을 쓸 때 특히 편합니다. 매개변수에는 기본값과 나머지 매개변수(...)를 쓸 수 있습니다.

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

// 화살표 함수: 본문이 식 하나면 중괄호와 return을 생략할 수 있습니다
const square = (x) => x * x;
const makeUser = (name) => ({ name, createdAt: Date.now() }); // 객체를 돌려줄 땐 괄호로 감쌉니다

// 기본값과 나머지 매개변수
function greet(name = "손님", ...tags) {
  return `${name}님 (${tags.join(", ")})`;
}

console.log(add(2, 3));             // 5
console.log(square(4));             // 16
console.log(greet());               // "손님님 ()"
console.log(greet("하나", "vip", "new")); // "하나님 (vip, new)"

화살표 함수는 자기만의 this를 갖지 않는다는 차이도 있습니다. 이 내용은 6장에서 자세히 다룹니다.

조건과 반복

비교에는 항상 ===와 !==를 쓰는 습관을 들이세요. ==는 비교 전에 타입을 바꾸기 때문에 0 == ""가 true가 되는 식의 예상치 못한 결과가 나옵니다.

const items = ["사과", "배", "포도"];

for (const item of items) {
  console.log(item); // 값을 하나씩
}

for (let i = 0; i < items.length; i += 1) {
  if (items[i] === "배") continue;
  console.log(i, items[i]);
}

const score = 82;
const grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";

switch (grade) {
  case "A":
    console.log("훌륭합니다");
    break;
  case "B":
    console.log("좋습니다");
    break;
  default:
    console.log("조금 더 힘내세요");
}

// 값이 없을 수 있을 때: ?. 와 ??
const config = { server: { port: 0 } };
const port = config.server?.port ?? 3000; // 0 (??는 null/undefined일 때만 기본값)
const host = config.server?.host ?? "localhost";

for...of는 배열의 값을, for...in은 객체의 키를 돌며 꺼냅니다. 배열에는 for...of를 쓰는 것이 안전합니다. 기본값을 줄 때 || 대신 ??를 쓰면 0이나 빈 문자열 같은 정상 값이 덮어써지지 않습니다.

템플릿 리터럴

백틱으로 감싼 문자열 안에서는 ${...}로 식을 넣을 수 있고, 여러 줄도 그대로 쓸 수 있습니다.

const product = "키보드";
const price = 45000;

const message = `${product}의 가격은 ${price.toLocaleString("ko-KR")}원입니다.
배송비 포함 금액: ${(price + 3000).toLocaleString("ko-KR")}원`;

console.log(message);

구조 분해 할당

객체나 배열에서 필요한 값만 꺼내 변수로 만들 수 있습니다. 이름 바꾸기와 기본값도 함께 지정할 수 있고, 함수 매개변수에서도 그대로 쓸 수 있습니다.

const order = { id: 17, customer: "서연", items: ["펜", "노트"], memo: undefined };

const { id, customer: buyer, memo = "메모 없음" } = order;
console.log(id, buyer, memo); // 17 "서연" "메모 없음"

const [first, second] = order.items;
console.log(first, second); // "펜" "노트"

// 값 맞바꾸기
let a = 1;
let b = 2;
[a, b] = [b, a];

// 매개변수에서 구조 분해
function printOrder({ id, items }) {
  console.log(`#${id}: ${items.length}개`);
}
printOrder(order);

전개 문법(spread)

...를 배열이나 객체 앞에 붙이면 그 안의 요소를 펼칩니다. 원본을 바꾸지 않고 복사본을 만들거나 합칠 때 자주 씁니다. 다만 한 단계만 복사하는 얕은 복사라는 점을 기억하세요.

const base = [1, 2, 3];
const more = [...base, 4, 5]; // [1, 2, 3, 4, 5]

const defaults = { theme: "light", lang: "ko" };
const settings = { ...defaults, theme: "dark" }; // 뒤에 쓴 값이 이깁니다

console.log(Math.max(...base)); // 3

// 원본 객체는 그대로입니다
console.log(defaults.theme); // "light"

정리

• 변수는 기본으로 const, 다시 대입할 때만 let을 쓰고 var는 피합니다.
• 함수는 선언문과 화살표 함수를 상황에 맞게 쓰며, 기본값과 나머지 매개변수를 활용합니다.
• 비교는 ===, 값이 없을 수 있으면 ?.와 ??를 씁니다.
• 템플릿 리터럴, 구조 분해, 전개 문법은 현대 JavaScript 코드 곳곳에 등장하므로 손에 익혀 두면 좋습니다.