JavaScript 기초 예제

출력 결과

결과가 여기에 표시됩니다.

1. 변수 (var, let, const)

// var - 함수 스코프 (비권장)
var oldVar = "I'm var";

// let - 블록 스코프, 재할당 가능
let count = 0;
count = 1;

// const - 블록 스코프, 재할당 불가
const PI = 3.14159;
const person = { name: "홍길동" };
person.name = "김철수"; // 객체 속성은 변경 가능

2. 데이터 타입

// 기본 타입 (Primitive)
let str = "문자열";      // String
let num = 42;            // Number
let float = 3.14;        // Number (정수와 구분 없음)
let bool = true;         // Boolean
let empty = null;        // Null
let notDefined;          // Undefined
let sym = Symbol("id");  // Symbol
let big = 9007199254740991n; // BigInt

// 참조 타입 (Reference)
let obj = { key: "value" };  // Object
let arr = [1, 2, 3];         // Array
let func = function() {};    // Function

3. 연산자

// 산술 연산자
let a = 10, b = 3;
// +, -, *, /, %, **

// 비교 연산자
// ==, ===, !=, !==, <, >, <=, >=
// == vs === (타입 비교 차이)

// 논리 연산자
// && (AND), || (OR), ! (NOT)

// 삼항 연산자
let result = a > b ? "크다" : "작다";

// Nullish coalescing (??)
let value = null ?? "기본값";

// Optional chaining (?.)
let obj = { nested: { value: 42 } };
let safe = obj?.nested?.value;

4. 조건문

// if-else
if (조건1) {
    // 실행
} else if (조건2) {
    // 실행
} else {
    // 실행
}

// switch
switch (값) {
    case 'A':
        break;
    case 'B':
        break;
    default:
        break;
}

5. 반복문

// for
for (let i = 0; i < 5; i++) { }

// while
while (조건) { }

// do-while
do { } while (조건);

// for...of (배열 순회)
for (const item of array) { }

// for...in (객체 키 순회)
for (const key in object) { }

// forEach, map, filter, reduce

6. 함수

// 함수 선언식
function greet(name) {
    return `Hello, ${name}!`;
}

// 함수 표현식
const greet = function(name) {
    return `Hello, ${name}!`;
};

// 화살표 함수
const greet = (name) => `Hello, ${name}!`;

// 기본 매개변수
const greet = (name = "Guest") => `Hello, ${name}!`;

// Rest 파라미터
const sum = (...numbers) => numbers.reduce((a, b) => a + b, 0);

// 콜백 함수
setTimeout(() => console.log("1초 후"), 1000);

7. 배열

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

// 기본 메서드
fruits.push("포도");     // 끝에 추가
fruits.pop();            // 끝에서 제거
fruits.unshift("딸기");  // 앞에 추가
fruits.shift();          // 앞에서 제거

// 고차 함수
const numbers = [1, 2, 3, 4, 5];
numbers.map(n => n * 2);           // [2, 4, 6, 8, 10]
numbers.filter(n => n > 2);        // [3, 4, 5]
numbers.find(n => n > 2);          // 3
numbers.reduce((acc, n) => acc + n, 0); // 15
numbers.every(n => n > 0);         // true
numbers.some(n => n > 4);          // true

8. 객체

// 객체 리터럴
const person = {
    name: "홍길동",
    age: 25,
    greet() {
        return `안녕하세요, ${this.name}입니다.`;
    }
};

// 속성 접근
person.name;      // 점 표기법
person["age"];    // 대괄호 표기법

// 구조 분해 할당
const { name, age } = person;

// 스프레드 연산자
const newPerson = { ...person, city: "서울" };

// Object 메서드
Object.keys(person);    // ["name", "age", "greet"]
Object.values(person);  // ["홍길동", 25, ...]
Object.entries(person); // [["name", "홍길동"], ...]

9. 클래스 (ES6)

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

    speak() {
        return `${this.name} makes a sound.`;
    }
}

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

    speak() {
        return `${this.name} barks!`;
    }
}

const dog = new Dog("멍멍이", "진돗개");

10. 모듈 (ES6)

// math.js
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export default class Calculator { }

// main.js
import Calculator, { PI, add } from './math.js';
import * as math from './math.js';

모듈은 서버 환경에서만 동작합니다.