JavaScript | 웹의 프로그래밍 언어

📖 상세 설명

JavaScript는 1995년 Brendan Eich가 Netscape에서 단 10일 만에 만든 프로그래밍 언어입니다. 원래 Mocha라 불렸다가 LiveScript를 거쳐 JavaScript로 이름이 바뀌었으며, 오늘날 전 세계 웹사이트의 98% 이상에서 사용되는 가장 널리 쓰이는 프로그래밍 언어입니다.

JavaScript는 처음에 브라우저에서 간단한 동적 효과를 위해 설계되었지만, 2009년 Node.js의 등장으로 서버 사이드까지 영역을 확장했습니다. 이로 인해 풀스택 개발이 가능해졌고, npm 생태계는 200만 개 이상의 패키지로 세계 최대 오픈소스 생태계가 되었습니다.

JavaScript의 핵심 특징은 동적 타이핑, 일급 함수, 프로토타입 기반 상속, 이벤트 기반 비동기 프로그래밍입니다. 싱글 스레드로 동작하지만 이벤트 루프를 통해 비동기 작업을 효율적으로 처리하여, I/O 바운드 작업에서 뛰어난 성능을 발휘합니다.

실무에서 JavaScript는 React, Vue, Angular 같은 프론트엔드 프레임워크부터 Node.js 기반 백엔드, React Native나 Electron을 통한 모바일/데스크톱 앱 개발까지 활용됩니다. 2025년 현재 GitHub에서 가장 많이 사용되는 언어이며, AI/ML 분야에서도 TensorFlow.js로 머신러닝 모델을 브라우저에서 직접 실행할 수 있습니다.

💻 코드 예제

// 1. 기본 문법과 비동기 처리
async function fetchUserData(userId) {
    try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) throw new Error('네트워크 응답 실패');
        const user = await response.json();
        console.log(`사용자: ${user.name}, 이메일: ${user.email}`);
        return user;
    } catch (error) {
        console.error('데이터 가져오기 실패:', error.message);
        throw error;
    }
}

// 2. 배열 메서드와 함수형 프로그래밍
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const result = numbers
    .filter(n => n % 2 === 0)      // 짝수만: [2, 4, 6, 8, 10]
    .map(n => n * n)               // 제곱: [4, 16, 36, 64, 100]
    .reduce((sum, n) => sum + n, 0); // 합계: 220

console.log(`짝수 제곱의 합: ${result}`);

// 3. 클래스와 모듈 패턴 (ES6+)
class EventEmitter {
    #listeners = new Map();

    on(event, callback) {
        if (!this.#listeners.has(event)) {
            this.#listeners.set(event, []);
        }
        this.#listeners.get(event).push(callback);
        return this;
    }

    emit(event, ...args) {
        const callbacks = this.#listeners.get(event) || [];
        callbacks.forEach(cb => cb(...args));
    }
}

// 사용 예시
const emitter = new EventEmitter();
emitter.on('data', (msg) => console.log('받은 메시지:', msg));
emitter.emit('data', '안녕하세요!'); // 출력: 받은 메시지: 안녕하세요!

🗣️ 실무에서 이렇게 말하세요

💬 회의에서

"이 기능은 서버 사이드 렌더링이 필요해서 Next.js로 구현하는 게 좋겠습니다. JavaScript 번들 크기도 코드 스플리팅으로 초기 로딩을 200KB 이하로 줄일 수 있어요."

💬 면접에서

"JavaScript의 이벤트 루프는 콜스택, 태스크 큐, 마이크로태스크 큐로 구성됩니다. Promise의 then은 마이크로태스크로 처리되어 setTimeout보다 먼저 실행됩니다. 이런 실행 순서를 이해하고 있어야 비동기 버그를 예방할 수 있습니다."

💬 코드 리뷰에서

"여기 async/await을 쓰고 있는데 에러 핸들링이 없네요. try-catch로 감싸거나 .catch() 체이닝을 추가해주세요. 프로덕션에서 unhandled rejection으로 크래시가 날 수 있습니다."

⚠️ 흔한 실수 & 주의사항

❌

== 대신 === 사용하기

`== `는 타입 강제 변환을 하므로 `'5' == 5`가 true입니다. 항상 `===`를 사용하여 타입까지 비교하세요. ESLint의 eqeqeq 규칙을 활성화하면 실수를 방지할 수 있습니다.

❌

클로저와 루프 변수 문제

for 루프에서 var를 쓰면 클로저가 마지막 값만 참조합니다. let을 사용하거나 forEach/map 같은 배열 메서드를 사용하세요.

✅

모던 JavaScript 문법 활용

const/let, 화살표 함수, 구조 분해, 스프레드 연산자, optional chaining(?.), nullish coalescing(??) 등 ES6+ 문법을 적극 활용하면 코드가 간결하고 안전해집니다.

🔗 관련 용어

📚 더 배우기

📄 MDN JavaScript 문서 (공식) 🎓 모던 JavaScript 튜토리얼 📖 ECMAScript 스펙