자바스크립트 기초 입문 튜토리얼

자바스크립트란 무엇이고 어디에 쓰이는가

자바스크립트는 ECMAScript로 표준화된 동적 타입 언어입니다. 원래 웹 페이지에서 클릭에 반응하고, 화면을 갱신하고, 서버와 통신하기 위해 만들어졌습니다. 오늘날에는 Node.js, Deno, Bun을 통해 서버와 개발 도구에서, Electron으로 데스크톱 앱에서, React Native로 모바일 앱에서도 실행됩니다. 프런트엔드 개발자, 풀스택 개발자 등 웹을 만드는 사람이라면 누구나 사용합니다. 이 페이지의 현대적 문법(let, const, 화살표 함수, 클래스, 모듈)은 ES2015 이후 버전에서 도입되었습니다.

Hello, world 실행하기

방법 1: 아무 웹 페이지나 열고 F12(Mac에서는 Cmd+Option+J)를 눌러 개발자 콘솔을 연 다음 아래 한 줄을 입력합니다. 방법 2: nodejs.org에서 Node.js를 설치하고, 그 한 줄을 hello.js로 저장해 실행합니다.

console.log("Hello, world");

node hello.js
# Hello, world

변수와 기본 자료형

다시 대입하지 않는 값에는 const를, 바뀌는 값에는 let을 사용하세요. 블록 스코프를 무시하는 예전 방식의 var는 피하세요. typeof는 값의 타입을 알려 줍니다.

const name = "Ada";
let count = 1;
count += 1;
console.log(`${name} has ${count} items`); // Ada has 2 items
console.log(0.1 + 0.2);                    // 0.30000000000000004
console.log(Number("12") + 1, "12" + 1);   // 13 121

제어 흐름: if, 반복문, 동등 비교

비교는 항상 ===와 !==를 사용하세요. 느슨한 ==는 먼저 타입을 변환하므로 0 == ""가 true가 됩니다.

const score = 72;
if (score >= 90) {
  console.log("A");
} else if (score >= 70) {
  console.log("B"); // B
} else {
  console.log("C");
}
for (let i = 0; i < 3; i++) console.log(i); // 0 1 2
for (const fruit of ["apple", "pear"]) console.log(fruit);
let n = 10;
while (n > 1) n = Math.floor(n / 2);
console.log(n); // 1

함수

함수는 값입니다. 변수에 저장하고, 다른 함수에 넘기고, 반환할 수 있습니다. 화살표 함수는 더 짧은 형태이며 콜백에 자주 쓰입니다.

function greet(name, greeting = "Hello") {
  return `${greeting}, ${name}!`;
}
const square = (x) => x * x;
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
console.log(greet("Lin"));     // Hello, Lin!
console.log(square(5));        // 25
console.log(sum(1, 2, 3, 4));  // 10

배열과 객체

배열은 순서가 있는 목록이고, 객체는 문자열 키를 값에 대응시킵니다. 둘 다 참조로 전달됩니다. 키가 문자열이 아니거나 값이 중복되면 안 될 때는 내장된 Map과 Set을 대안으로 쓸 수 있습니다.

const nums = [3, 1, 2];
nums.push(5);
const doubled = nums.map((n) => n * 2);
const evens = nums.filter((n) => n % 2 === 0);
console.log(doubled, evens);             // [ 6, 2, 4, 10 ] [ 2 ]
console.log([...nums].sort((a, b) => a - b)); // [ 1, 2, 3, 5 ]
const user = { name: "Ann", age: 31 };
user.city = "Oslo";
const { name, age } = user;              // destructuring
console.log(name, age, Object.keys(user)); // Ann 31 [ 'name', 'age', 'city' ]
console.log(JSON.stringify(user));       // {"name":"Ann","age":31,"city":"Oslo"}

대표 기능: 프로미스를 이용한 비동기 코드

자바스크립트는 이벤트 루프를 가진 단일 스레드에서 코드를 실행합니다. 타이머, 네트워크, 파일처럼 오래 걸리는 작업은 실행을 막지 않고, 나중에 완료되는 프로미스를 반환합니다. async 함수에서 await를 쓰면 이런 코드를 위에서 아래로 순서대로 작성할 수 있습니다.

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
async function main() {
  console.log("start");
  await wait(500);
  console.log("half a second later");
  const [a, b] = await Promise.all([wait(100).then(() => 1), wait(200).then(() => 2)]);
  console.log(a + b); // 3
}
main();
console.log("main() was called"); // prints before "half a second later"

클래스(class Dog extends Animal {}), 모듈(import와 export), 옵셔널 체이닝(user?.address?.city), null 병합 연산자(value ?? "default")도 자주 쓰게 될 현대적 기능입니다.

오류 처리

Error 객체를 던지고 try/catch로 잡습니다. async 함수에서는 거부된 프로미스가 await 위치에서 예외가 됩니다.

function parseAge(text) {
  const age = Number(text);
  if (!Number.isInteger(age) || age < 0) {
    throw new Error(`invalid age: ${text}`);
  }
  return age;
}
try {
  console.log(parseAge("41"));  // 41
  console.log(parseAge("abc"));
} catch (err) {
  console.log(err.message);     // invalid age: abc
} finally {
  console.log("done");
}

작은 완성 프로그램: 데이터를 가져와 요약하기

이 Node.js 스크립트(Node 18 이상은 fetch가 내장되어 있습니다)는 공개 API에서 JSON을 내려받아 짧은 요약을 출력합니다. repos.mjs로 저장하고 node repos.mjs nodejs로 실행하세요.

const org = process.argv[2] ?? "nodejs";
async function topRepos(name, n = 3) {
  const res = await fetch(`https://api.github.com/orgs/${name}/repos?per_page=100`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const repos = await res.json();
  return repos
    .sort((a, b) => b.stargazers_count - a.stargazers_count)
    .slice(0, n)
    .map((r) => `${r.stargazers_count}\t${r.name}`);
}
try {
  const lines = await topRepos(org);
  console.log(lines.join("\n"));
} catch (err) {
  console.error("failed:", err.message);
  process.exitCode = 1;
}

.mjs 확장자는 파일을 ES 모듈로 만들어 최상위에서 await를 쓸 수 있게 해 줍니다.

초보자가 자주 하는 실수

• === 대신 ==를 사용해 예상치 못한 타입 변환이 일어나는 경우.
• await를 빠뜨려 값 대신 대기 중인 Promise 객체를 받는 경우.
• const가 객체를 불변으로 만든다고 기대하는 경우. const는 재대입만 막으며 obj.x = 1은 여전히 동작합니다. 필요하면 Object.freeze를 사용하세요.
• 객체나 배열을 ===로 비교하는 경우. 이 연산자는 내용이 아니라 동일한 대상인지를 비교합니다.
• 메서드를 콜백으로 넘기다가 this를 잃는 경우. 화살표 함수나 .bind(obj)를 사용하세요.

다음 학습 단계

가장 완성도 높은 무료 레퍼런스인 MDN JavaScript Guide를 읽고, 브라우저 DOM(document.querySelector, 이벤트)으로 연습하세요. 그다음 npm과 모듈, 프런트엔드용 React·Vue·Svelte 같은 프레임워크, 또는 서버용 Node.js를 배우면 됩니다. 자바스크립트 위에 TypeScript를 더하면 정적 타입과 더 나은 편집기 지원을 얻습니다.