10분 안에 JavaScript 배우기

1 September 2025 — 프로그래밍 언어

JavaScript는 웹 개발에서 널리 사용되는 고수준의 인터프리터 프로그래밍 언어로, 다양성으로 유명합니다. 이 튜토리얼은 현대 JavaScript(ES6+) 기능을 다루어 언어를 빠르게 배울 수 있도록 도와줍니다.

1. 첫 번째 JavaScript 프로그램 작성하기

간단한 프로그램부터 시작해보겠습니다. hello.js라는 파일을 만들고 다음 코드를 입력하세요:

console.log("Hello, World!");

파일을 저장하고 터미널이나 명령줄에서 다음 명령을 실행하세요:

node hello.js

또는 HTML 파일에 포함시킬 수 있습니다:

<script>
  console.log("Hello, World!");
</script>

출력 결과는 다음과 같습니다:

Hello, World!

이 간단한 프로그램은 JavaScript의 기본 출력 기능을 보여줍니다. console.log() 함수는 콘솔에 텍스트 정보를 표시하는 데 사용됩니다.

2. 기본 문법

JavaScript의 문법은 다른 C 스타일 언어와 유사합니다. 문장을 끝낼 때 세미콜론을 사용하고, 코드 블록을 정의할 때 중괄호 {}를 사용합니다.

// 이것은 한 줄 주석입니다
console.log("Hello, World!");

/*
이것은 여러 줄에 걸친
여러 줄 주석입니다.
*/

JavaScript의 기본 문법 규칙:

세미콜론: 문장을 끝낼 때 선택사항이지만 권장됩니다
주석: 한 줄 주석은 //로 시작하고, 여러 줄 주석은 /* */로 시작합니다
대소문자 구분: JavaScript는 대소문자를 구분합니다
코드 블록: 중괄호 {}로 정의됩니다

3. 변수와 데이터 타입

JavaScript에서 변수는 let, const, 또는 var를 사용하여 선언됩니다. 현대 JavaScript는 let과 const를 선호합니다.

변수 선언:

let name = "John"; // 변경 가능한 변수
const age = 25;     // 변경 불가능한 상수
var oldWay = "deprecated"; // var 사용은 피하세요

JavaScript의 주요 데이터 타입:

Number: 42, 3.14, -10
String: "hello", 'world', `template`
Boolean: true, false
Undefined: undefined (선언되었지만 할당되지 않은 변수)
Null: null (의도적인 값 부재)
Object: {key: "value"}, [1, 2, 3]
Symbol: Symbol("description") (ES6+)
BigInt: 1234567890123456789012345678901234567890n (ES2020+)

3.1 Number 타입

JavaScript는 모든 숫자 값에 64비트 부동 소수점 숫자를 사용합니다.

let integer = 42;
let float = 3.14159;
let scientific = 2.5e3; // 2500
let hex = 0xFF;         // 255
let binary = 0b1010;    // 10
let octal = 0o10;       // 8

3.2 String 타입

문자열은 작은따옴표, 큰따옴표 또는 템플릿 리터럴로 생성할 수 있습니다.

let single = '작은따옴표 문자열';
let double = "큰따옴표 문자열";
let template = `템플릿 리터럴`;

// 보간이 있는 템플릿 리터럴
let name = "Alice";
let greeting = `안녕하세요, ${name}님!`; // "안녕하세요, Alice님!"

문자열 연산:

let text = "JavaScript 프로그래밍";
console.log(text.length);        // 문자열 길이: 17
console.log(text.toUpperCase()); // "JAVASCRIPT 프로그래밍"
console.log(text.toLowerCase()); // "javascript 프로그래밍"
console.log(text[0]);            // 첫 번째 문자: "J"
console.log(text.slice(0, 10)); // "JavaScript"

3.3 Boolean 타입

Boolean 타입에는 true와 false 두 가지 값이 있습니다.

let isActive = true;
let isComplete = false;

// 논리 연산
let result1 = true && false;  // false
let result2 = true || false;  // true
let result3 = !true;          // false

3.4 Undefined와 Null

undefined는 변수가 선언되었지만 값이 할당되지 않았음을 의미합니다. null은 의도적인 값 부재입니다.

let unassigned; // undefined
let empty = null;

if (unassigned === undefined) {
  console.log("변수가 정의되지 않았습니다");
}

if (empty === null) {
  console.log("값이 null입니다");
}

4. 데이터 구조

4.1 배열

배열은 순서가 지정된 변경 가능한 값의 컬렉션입니다.

let numbers = [1, 2, 3, 4, 5];
numbers.push(6);        // 요소 추가: [1, 2, 3, 4, 5, 6]
numbers.pop();          // 마지막 제거: [1, 2, 3, 4, 5]
numbers.unshift(0);     // 시작 부분에 추가: [0, 1, 2, 3, 4, 5]
numbers.shift();        // 첫 번째 제거: [1, 2, 3, 4, 5]
numbers[0] = 10;        // 수정: [10, 2, 3, 4, 5]

배열 메서드:

let fruits = ["사과", "바나나", "오렌지"];

// 반복
fruits.forEach(fruit => console.log(fruit));

// 변환
let lengths = fruits.map(fruit => fruit.length); // [2, 3, 3]

// 필터링
let longFruits = fruits.filter(fruit => fruit.length > 2); // ["바나나", "오렌지"]

// 찾기
let hasApple = fruits.includes("사과"); // true
let bananaIndex = fruits.indexOf("바나나"); // 1

4.2 객체

객체는 키-값 쌍의 컬렉션입니다.

let person = {
  name: "John",
  age: 30,
  city: "뉴욕",
  isStudent: false
};

// 속성 접근
console.log(person.name);       // "John"
console.log(person["age"]);     // 30

// 속성 추가
person.country = "미국";
person["occupation"] = "개발자";

// 속성 제거
delete person.isStudent;

// 객체 메서드
let keys = Object.keys(person);    // ["name", "age", "city", "country", "occupation"]
let values = Object.values(person); // ["John", 30, "뉴욕", "미국", "개발자"]
let entries = Object.entries(person); // [["name", "John"], ["age", 30], ...]

4.3 Set

Set은 고유한 값의 컬렉션입니다.

let numbers = new Set([1, 2, 3, 3, 4, 4, 5]);
console.log(numbers); // Set {1, 2, 3, 4, 5}

// Set 연산
numbers.add(6);       // 값 추가
numbers.delete(1);    // 값 제거
numbers.has(2);       // true
numbers.size;         // 5

// 반복
numbers.forEach(num => console.log(num));

4.4 Map

Map은 모든 데이터 타입을 키로 사용할 수 있는 키-값 쌍의 컬렉션입니다.

let map = new Map();
map.set("name", "Alice");
map.set(1, "넘버 원");
map.set(true, "불리언 참");

console.log(map.get("name"));    // "Alice"
console.log(map.has(1));         // true
console.log(map.size);           // 3

// 반복
for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

5. 연산자

JavaScript는 계산과 비교를 위한 다양한 연산자를 제공합니다.

산술: +, -, *, /, %, ** (지수)
비교: ==, ===, !=, !==, >, <, >=, <=
논리: &&, ||, !
할당: =, +=, -=, *=, /=, %=
삼항: condition ? expr1 : expr2

5.1 산술 연산자

let a = 10, b = 3;

console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.333...
console.log(a % b);   // 1
console.log(a ** b);  // 1000

5.2 비교 연산자

let x = 5, y = 10;

console.log(x == y);    // false
console.log(x === y);   // false (엄격한 동등)
console.log(x != y);    // true
console.log(x !== y);   // true (엄격한 부등)
console.log(x > y);     // false
console.log(x < y);     // true
console.log(x >= y);    // false
console.log(x <= y);    // true

5.3 논리 연산자

let a = true, b = false;

console.log(a && b);   // false
console.log(a || b);   // true
console.log(!a);       // false

6. 제어 흐름

6.1 if 문

let age = 20;

if (age >= 18) {
  console.log("성인");
} else if (age >= 13) {
  console.log("청소년");
} else {
  console.log("어린이");
}

6.2 switch 문

let day = "월요일";

switch (day) {
  case "월요일":
    console.log("주간 시작");
    break;
  case "금요일":
    console.log("주말이 코앞");
    break;
  default:
    console.log("일반적인 날");
}

6.3 for 루프

// 전통적인 for 루프
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// for...of 루프 (배열, 문자열)
let fruits = ["사과", "바나나", "오렌지"];
for (let fruit of fruits) {
  console.log(fruit);
}

// for...in 루프 (객체 속성)
let person = {name: "John", age: 30};
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

6.4 while 루프

// while 루프
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

// do...while 루프
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

6.5 break와 continue

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // 루프 종료
  }
  if (i % 2 === 0) {
    continue; // 짝수 건너뛰기
  }
  console.log(i); // 1, 3
}

7. 함수

함수는 재사용 가능한 코드 블록입니다.

7.1 함수 선언

function greet(name) {
  return `안녕하세요, ${name}님!`;
}

console.log(greet("Alice")); // "안녕하세요, Alice님!"

7.2 함수 표현식

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 5)); // 20

7.3 화살표 함수 (ES6+)

const add = (a, b) => a + b;
const square = x => x * x;
const greet = name => `안녕하세요, ${name}님!`;

console.log(add(2, 3));      // 5
console.log(square(4));      // 16
console.log(greet("Bob"));   // "안녕하세요, Bob님!"

7.4 기본 매개변수

function createUser(name, age = 18, isActive = true) {
  return {name, age, isActive};
}

console.log(createUser("John"));        // {name: "John", age: 18, isActive: true}
console.log(createUser("Alice", 25));  // {name: "Alice", age: 25, isActive: true}

7.5 나머지 매개변수

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10
console.log(sum(5, 10, 15));  // 30

7.6 전개 연산자

let numbers = [1, 2, 3];
let moreNumbers = [4, 5, 6];
let allNumbers = [...numbers, ...moreNumbers]; // [1, 2, 3, 4, 5, 6]

let person = {name: "John", age: 30};
let updatedPerson = {...person, city: "뉴욕"}; // {name: "John", age: 30, city: "뉴욕"}

8. 클래스와 객체 (ES6+)

8.1 클래스 선언

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    return `저는 ${this.name}이고, ${this.age}살입니다`;
  }

  haveBirthday() {
    this.age++;
    return `${this.name}의 생일, 이제 ${this.age}살입니다`;
  }
}

let person = new Person("John", 25);
console.log(person.introduce());      // "저는 John이고, 25살입니다"
console.log(person.haveBirthday());   // "John의 생일, 이제 26살입니다"

8.2 상속

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name}가 소리를 냅니다`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name, "개");
    this.breed = breed;
  }

  makeSound() {
    return `${this.name}가 짖습니다`;
  }

  fetch() {
    return `${this.name}가 공을 가져옵니다`;
  }
}

let dog = new Dog("Buddy", "골든 리트리버");
console.log(dog.makeSound()); // "Buddy가 짖습니다"
console.log(dog.fetch());     // "Buddy가 공을 가져옵니다"

8.3 게터와 세터

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  get diameter() {
    return this.radius * 2;
  }

  set diameter(diameter) {
    this.radius = diameter / 2;
  }

  get area() {
    return Math.PI * this.radius ** 2;
  }
}

let circle = new Circle(5);
console.log(circle.diameter); // 10
console.log(circle.area);     // 78.53981633974483

circle.diameter = 20;
console.log(circle.radius);   // 10

9. 비동기 JavaScript

9.1 콜백

function fetchData(callback) {
  setTimeout(() => {
    callback("데이터 수신");
  }, 1000);
}

fetchData(data => {
  console.log(data); // 1초 후 "데이터 수신"
});

9.2 프로미스

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("데이터 수신");
      // reject("오류 발생");
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data)) // "데이터 수신"
  .catch(error => console.error(error));

9.3 async/await (ES2017+)

async function getData() {
  try {
    let data = await fetchData();
    console.log(data); // "데이터 수신"
  } catch (error) {
    console.error(error);
  }
}

getData();

9.4 Fetch API

async function getUser() {
  try {
    let response = await fetch('https://api.example.com/user');
    let user = await response.json();
    console.log(user);
  } catch (error) {
    console.error('오류:', error);
  }
}

10. 오류 처리

try {
  let result = 10 / 0;
  if (!isFinite(result)) {
    throw new Error("0으로 나누기");
  }
  console.log(result);
} catch (error) {
  console.error("오류:", error.message);
} finally {
  console.log("이것은 항상 실행됩니다");
}

11. 모듈 (ES6+)

11.1 내보내기

// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export default function multiply(a, b) {
  return a * b;
}

11.2 가져오기

// main.js
import multiply, { PI, add } from './math.js';

console.log(PI);           // 3.14159
console.log(add(2, 3));    // 5
console.log(multiply(4, 5)); // 20

12. 현대 JavaScript 기능

12.1 구조 분해 할당

// 배열 구조 분해 할당
let [first, second, third] = [1, 2, 3];
console.log(first, second, third); // 1 2 3

// 객체 구조 분해 할당
let {name, age} = {name: "John", age: 30, city: "NY"};
console.log(name, age); // John 30

// 함수 매개변수 구조 분해 할당
function greet({name, age}) {
  return `안녕하세요 ${name}님, ${age}살입니다`;
}

12.2 템플릿 리터럴

let name = "Alice";
let age = 25;

// 기본 보간
let greeting = `안녕하세요, ${name}님!`;

// 여러 줄 문자열
let message = `
  이름: ${name}
  나이: ${age}
  상태: ${age >= 18 ? "성인" : "미성년자"}
`;

// 표현식 평가
let calculation = `2 + 3 = ${2 + 3}`; // "2 + 3 = 5"

12.3 옵셔널 체이닝 (?.)

let user = {
  profile: {
    name: "John",
    address: {
      city: "뉴욕"
    }
  }
};

console.log(user?.profile?.name);           // "John"
console.log(user?.profile?.age);            // undefined
console.log(user?.profile?.address?.city);  // "뉴욕"
console.log(user?.employment?.company);     // undefined (오류 없음)

12.4 Nullish 병합 연산자 (??)

let name = "";
let age = 0;
let city = null;
let country = undefined;

console.log(name || "알 수 없음");    // "알 수 없음" (빈 문자열은 falsy)
console.log(name ?? "알 수 없음");    // "" (null/undefined만)

console.log(age || 18);           // 18 (0은 falsy)
console.log(age ?? 18);           // 0 (null/undefined만)

console.log(city ?? "알 수 없음");   // "알 수 없음"
console.log(country ?? "미국");    // "미국"

13. 유용한 배열 메서드

let numbers = [1, 2, 3, 4, 5];

// map: 각 요소 변환
let squares = numbers.map(n => n * n); // [1, 4, 9, 16, 25]

// filter: 요소 선택
let evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// reduce: 값 누적
let sum = numbers.reduce((total, n) => total + n, 0); // 15

// find: 첫 번째 일치 요소 찾기
let firstEven = numbers.find(n => n % 2 === 0); // 2

// some: 어떤 요소가 일치하는지 확인
let hasEven = numbers.some(n => n % 2 === 0); // true

// every: 모든 요소가 일치하는지 확인
let allPositive = numbers.every(n => n > 0); // true

// sort: 요소 정렬
let sorted = numbers.sort((a, b) => b - a); // [5, 4, 3, 2, 1]

14. 날짜와 시간

let now = new Date();
console.log(now.toString());      // 현재 날짜와 시간
console.log(now.getFullYear());   // 현재 연도
console.log(now.getMonth());      // 현재 월 (0-11)
console.log(now.getDate());       // 현재 일 (1-31)
console.log(now.getHours());      // 현재 시간 (0-23)

// 날짜 형식 지정
console.log(now.toLocaleDateString()); // 지역화된 날짜 문자열
console.log(now.toLocaleTimeString()); // 지역화된 시간 문자열
console.log(now.toISOString());        // ISO 형식 문자열

// 특정 날짜 생성
let specificDate = new Date(2025, 0, 1); // 2025년 1월 1일
let timestamp = new Date(1640995200000); // 타임스탬프에서

15. 정규 표현식

let text = "안녕하세요, 제 이메일은 [email protected]이고 전화번호는 123-456-7890입니다";

// 이메일 패턴
let emailPattern = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
let emails = text.match(emailPattern); // ["[email protected]"]

// 전화번호 패턴
let phonePattern = /\d{3}-\d{3}-\d{4}/g;
let phones = text.match(phonePattern); // ["123-456-7890"]

// test 메서드
let isValidEmail = emailPattern.test("[email protected]"); // true

// replace 메서드
let maskedText = text.replace(phonePattern, "XXX-XXX-XXXX");
console.log(maskedText);

JavaScript는 계속 발전하는 강력하고 다재다능한 언어입니다. 이 튜토리얼은 시작하는 데 필요한 기본 개념을 다루지만, 제너레이터, 프록시, 웹 API와 같은 고급 주제를 포함하여 탐색할 것이 훨씬 더 많습니다.