자바스크립트

웹 브라우저에서 동적인 기능을 구현하기 위해 만들어진 인터프리터 기반의 동적 타입 프로그래밍 언어로, 현재는 브라우저뿐 아니라 서버(Node.js), 모바일, 데스크톱 등 다양한 환경에서 사용됩니다.

핵심 특징

항목내용
개발자Brendan Eich (1995년, Netscape)
표준ECMAScript (ECMA-262)
타입 시스템동적 타입 (런타임에 타입 결정)
실행 방식인터프리터 + JIT 컴파일
패러다임멀티 패러다임 (객체지향, 함수형, 이벤트 기반)
실행 환경브라우저 (V8, SpiderMonkey), 서버 (Node.js)

JavaScript의 위치

웹 기술 3요소:

HTML  → 구조 (뼈대)       "무엇을 보여줄 것인가"
CSS   → 표현 (디자인)      "어떻게 보여줄 것인가"
JS    → 동작 (기능)        "어떻게 동작할 것인가"

JavaScript 실행 환경:

┌──────────────────────────────────────┐
│            브라우저 (Chrome, Firefox)   │
│  ┌─────────────┐  ┌───────────────┐  │
│  │  JS 엔진     │  │  Web API      │  │
│  │  (V8 등)     │  │  (DOM, fetch, │  │
│  │              │  │   setTimeout) │  │
│  └─────────────┘  └───────────────┘  │
└──────────────────────────────────────┘

┌──────────────────────────────────────┐
│            서버 (Node.js)              │
│  ┌─────────────┐  ┌───────────────┐  │
│  │  V8 엔진     │  │  Node API     │  │
│  │              │  │  (fs, http,   │  │
│  │              │  │   net, crypto)│  │
│  └─────────────┘  └───────────────┘  │
└──────────────────────────────────────┘

주요 특징 상세

1. 동적 타입

let x = 10;         // number
x = "hello";        // string으로 변경 가능
x = true;           // boolean으로 변경 가능
x = { name: "홍길동" }; // object로 변경 가능

// 타입이 런타임에 결정 → 유연하지만 버그 가능성
console.log(1 + "2");     // "12" (암묵적 타입 변환)
console.log(true + 1);    // 2
console.log(null + 1);    // 1

2. 함수가 일급 객체 (First-Class Function)

// 변수에 할당
const greet = function(name) {
    return `안녕 ${name}`;
};

// 함수의 인자로 전달
function execute(fn, value) {
    return fn(value);
}
execute(greet, "홍길동");  // "안녕 홍길동"

// 함수가 함수를 반환
function multiplier(factor) {
    return function(num) {
        return num * factor;
    };
}
const double = multiplier(2);
double(5);  // 10

3. 프로토타입 기반 객체지향

// Java: 클래스 기반 상속
// JavaScript: 프로토타입 체인 기반 상속

function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {
    return `${this.name} makes a sound`;
};

function Dog(name) {
    Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function() {
    return `${this.name} barks`;
};

// ES6 class 문법 (내부적으로는 여전히 프로토타입)
class Cat extends Animal {
    meow() {
        return `${this.name} meows`;
    }
}

4. 비동기 처리

// 1. 콜백
setTimeout(function() {
    console.log("1초 후 실행");
}, 1000);

// 2. Promise
fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

// 3. async/await (Promise의 문법적 설탕)
async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

5. 이벤트 루프 (Single Thread + Non-Blocking)

JavaScript는 싱글 스레드이지만, 이벤트 루프로 비동기 처리

┌──────────────────────────────────────┐
│           Call Stack (LIFO)           │
│  현재 실행 중인 함수                    │
└──────────────┬───────────────────────┘
               │
               ▼ 비동기 작업 발생 시
┌──────────────────────────────────────┐
│          Web API / Node API           │
│  (setTimeout, fetch, I/O 등)          │
│  백그라운드에서 처리                    │
└──────────────┬───────────────────────┘
               │ 완료 시 콜백을 큐에 등록
               ▼
┌──────────────────────────────────────┐
│          Task Queue (FIFO)            │
│  실행 대기 중인 콜백                    │
└──────────────┬───────────────────────┘
               │
               ▼
┌──────────────────────────────────────┐
│          이벤트 루프                    │
│  "Call Stack이 비었으면                │
│   Task Queue에서 꺼내서 실행"          │
└──────────────────────────────────────┘

console.log("1");

setTimeout(() => {
    console.log("2");
}, 0);

console.log("3");

// 출력 순서: 1 → 3 → 2
// setTimeout 콜백은 Call Stack이 비어야 실행됨

Java vs JavaScript

항목JavaJavaScript
타입정적 타입 (컴파일 시 확인)동적 타입 (런타임에 결정)
실행 환경JVM브라우저 / Node.js
컴파일바이트코드 → JVM 실행인터프리터 + JIT
스레딩멀티 스레드싱글 스레드 + 이벤트 루프
객체지향클래스 기반프로토타입 기반
용도백엔드, 안드로이드, 엔터프라이즈웹 프론트/백엔드, 풀스택
Null 처리NullPointerExceptionundefined + null
 
이름은 비슷하지만 완전히 다른 언어

"Java와 JavaScript의 관계는
 Car와 Carpet의 관계와 같다"

마케팅 목적으로 이름을 빌려온 것
(당시 Java의 인기에 편승)

ECMAScript 주요 버전

버전연도주요 추가 기능
ES52009strict mode, JSON, Array 메서드
ES6 (ES2015)2015let/const, 화살표 함수, class, Promise, 모듈
ES20172017async/await
ES20202020Optional Chaining (?.), Nullish Coalescing (??)
ES20222022Top-level await, private 필드 (#)
 
// ES6+ 주요 문법

// let, const
const PI = 3.14;        // 재할당 불가
let count = 0;          // 재할당 가능 (블록 스코프)

// 화살표 함수
const add = (a, b) => a + b;

// 템플릿 리터럴
const name = "홍길동";
console.log(`안녕하세요 ${name}님`);

// 구조분해 할당
const { id, name: userName } = { id: 1, name: "홍길동" };
const [first, ...rest] = [1, 2, 3, 4];

// Optional Chaining + Nullish Coalescing
const city = user?.address?.city ?? "서울";

JavaScript 생태계

JavaScript
  │
  ├── 프론트엔드
  │    ├── React (Meta)
  │    ├── Vue.js
  │    ├── Angular (Google)
  │    └── Svelte
  │
  ├── 백엔드
  │    ├── Node.js
  │    ├── Express
  │    ├── NestJS
  │    └── Deno / Bun
  │
  ├── 모바일
  │    ├── React Native
  │    └── Ionic
  │
  ├── 데스크톱
  │    └── Electron (VS Code, Slack)
  │
  └── 슈퍼셋
       └── TypeScript (정적 타입 추가)

CSLOG에서 보기