자바스크립트란? 웹을 움직이는 언어 쉽게 이해하기

자바스크립트는 웹을 움직이는 언어입니다

자바스크립트(JavaScript)는 웹 브라우저 안에서 실행되는 프로그래밍 언어입니다. 버튼을 클릭했을 때 화면이 반응하거나, 폼 입력값을 검증하거나, 메뉴에 애니메이션이 붙거나, 페이지를 새로고침하지 않고도 새로운 콘텐츠가 불러와질 때 — 그 뒤에는 전부 자바스크립트가 있습니다. 어떤 기기든, 어떤 브라우저든 내부에 자바스크립트 엔진이 내장되어 있기 때문에, 자바스크립트는 웹에서 네이티브로 실행되는 유일한 언어이기도 합니다.

요즘은 브라우저 밖에서도 활발히 쓰입니다. Node.js, Deno, Bun 같은 런타임 덕분에 서버, 커맨드라인 도구, 빌드 스크립트, API까지 자바스크립트로 만들 수 있죠. 같은 언어로 프론트엔드와 백엔드를 모두 다룰 수 있다는 점이 자바스크립트가 이렇게 널리 쓰이는 큰 이유 중 하나입니다.

자바스크립트 코드가 실제로 어떻게 생겼는지 살짝 맛보기:

세 줄에 세 가지 아이디어가 담겨 있습니다. 변수 선언, 내장 함수 호출, 그리고 템플릿 문자열 출력까지. 실제 자바스크립트 코드라면 어느 페이지를 열어봐도 이 세 가지가 빠지지 않습니다.

자바스크립트는 어디서 실행될까

자바스크립트 자체는 그저 언어 명세(ECMAScript라고 부릅니다)일 뿐입니다. 이 코드를 실제로 돌리려면 엔진, 즉 코드를 읽어서 실행해 주는 프로그램이 필요합니다. 자주 마주치게 될 엔진은 크게 두 가지입니다.

• 브라우저. Chrome과 Edge는 V8을 씁니다. Firefox는 SpiderMonkey, Safari는 JavaScriptCore를 사용합니다. 아무 웹페이지나 열고 F12를 누른 뒤 Console 탭에 자바스크립트를 붙여 넣어 보세요. 바로 실행됩니다.
• Node.js. V8 엔진을 브라우저 밖으로 꺼내서, 파일 시스템·네트워크·운영체제에 접근할 수 있게 만든 런타임입니다. 서버 사이드 자바스크립트가 가능한 이유가 바로 여기 있습니다.

// 브라우저 콘솔에서 실행:
document.title = "새 탭 제목";

// Node.js 로 실행:
// $ node script.js

브라우저에서 돌아가는 자바스크립트는 페이지(DOM)를 건드릴 수 있지만 파일 시스템에는 손댈 수 없습니다. 반대로 Node.js에서 돌아가는 자바스크립트는 파일을 읽고 소켓을 열 수 있지만, 다룰 페이지 자체가 없죠. 같은 언어인데 쓸 수 있는 능력이 전혀 다른 셈입니다.

자바스크립트 사용처

한마디로 말하면, 웹과 관련된 거의 모든 것이라고 보면 됩니다. 좀 더 풀어서 설명하면, 여러분이 실제로 마주칠 순서대로 대략 이렇습니다:

• 인터랙티브 웹 페이지. 폼 유효성 검사, 드롭다운, 모달, 실시간 검색, 드래그 앤 드롭 같은 것들.
• 싱글 페이지 앱(SPA). Gmail, Figma, Notion, Linear 처럼 애플리케이션 전체가 자바스크립트로 렌더링되고 업데이트되는 서비스들. 보통 React, Vue, Svelte 같은 프레임워크를 사용합니다.
• 백엔드 서버. Node.js, Express, Fastify, NestJS 등으로 만드는 REST API, GraphQL 엔드포인트, 실시간 서비스.
• 빌드·개발 도구. 번들러(Vite, esbuild, webpack), 린터(ESLint), 테스트 러너(Vitest, Jest) 같은 도구들.
• 크로스 플랫폼 앱. Electron으로 만든 데스크톱 앱(VS Code, Slack, Discord)이나 React Native로 만든 모바일 앱.

첫날부터 이걸 다 알 필요는 없습니다. 다만 이 정도 범위를 알고 있으면 "그냥 자바스크립트일 뿐"이라는 말이 결코 좁은 의미로 들리지 않을 거예요.

자바스크립트 동작 원리

아주 단순화한 모델로 설명해 볼게요. 여러분이 소스 코드를 작성하면, 자바스크립트 엔진이 그걸 내부 표현으로 파싱한 뒤 실행합니다. 최신 엔진은 JIT(just-in-time) 컴파일 방식을 씁니다. 처음에는 빠르게 인터프리팅하다가, 프로그램이 돌아가는 동안 자주 실행되는 핫 코드 경로를 머신 코드로 최적화하는 방식이죠.

자바스크립트는 배포하기 전에 바이너리로 컴파일하지 않습니다. 그냥 소스 코드를 브라우저(또는 Node)에 넘기면 엔진이 나머지를 알아서 처리해 줍니다:

브라우저 콘솔에 붙여넣어 실행하거나, greet.js로 저장한 뒤 node greet.js로 돌려보세요. 결과는 똑같습니다. 컴파일도, 빌드 설정도, 설치할 것도 필요 없습니다. 이 정도 간단한 코드라면요.

자바스크립트와 자바의 차이

이름은 비슷하지만 완전히 다른 언어입니다. 자바스크립트라는 이름은 1995년 당시 인기 있던 자바(Java)의 인지도에 편승하려는 마케팅 결정으로 붙여진 것인데, 그 탓에 지금까지도 입문자들이 헷갈려 합니다.

	JavaScript	Java
타입	동적 타입	정적 타입
실행 환경	브라우저, Node.js	JVM
패러다임	멀티 패러다임, 프로토타입 기반	클래스 기반 OOP
컴파일	JIT, 별도 빌드 단계 불필요	바이트코드로 먼저 컴파일

누군가 "자바를 배웠으니 자바스크립트도 안다"고 말한다면, 전혀 그렇지 않습니다. 그냥 알파벳 네 글자가 겹칠 뿐, 서로 다른 언어라고 생각하는 편이 맞습니다.

자바스크립트와 타입스크립트의 차이

타입스크립트는 자바스크립트에 타입 시스템을 얹은 언어입니다. 타입 어노테이션을 붙여서 코드를 작성하면 TypeScript 컴파일러가 타입을 검사하고, 최종 결과물은 어디서든 돌아가는 순수 자바스크립트로 변환됩니다.

// JavaScript — 타입이 암묵적입니다:
function add(a, b) {
    return a + b;
}

// TypeScript — 타입이 명시적입니다:
function add(a: number, b: number): number {
    return a + b;
}

유효한 자바스크립트 파일은 모두 유효한 TypeScript 파일입니다. 즉, TypeScript는 자바스크립트의 경쟁자가 아니라 상위 집합(superset)이에요. 오늘날 규모가 큰 프로젝트 대부분이 TypeScript로 작성되지만, 그래도 자바스크립트를 먼저 배우는 게 맞는 순서입니다. TypeScript가 어디에 타입을 붙이는 도구인지 이해하려면, 그 바탕이 되는 자바스크립트부터 알아야 하거든요.

간단한 역사 — 자바스크립트의 이상한 점들이 왜 생겼을까

자바스크립트는 1995년 넷스케이프의 Brendan Eich가 단 10일 만에 만들어낸 언어입니다. 이 탄생 비화가 중요한 이유는, 지금도 남아 있는 몇몇 어색한 부분들(느슨한 동등 비교, 자동 세미콜론 삽입, typeof null === "object" 같은 것들)이 바로 그 극한의 시간 압박 속에서 내려진 결정이기 때문이에요. 그리고 웹의 하위 호환성을 지키기 위해 그대로 박제되어 버린 거죠.

이 언어는 ECMAScript라는 이름으로 표준화되어 있고, 매년 새 버전이 나옵니다. 그중에서도 ES2015가 특히 큰 변화였어요 — let, const, 화살표 함수, 클래스, 모듈이 이때 들어왔죠. 누가 "ES6" 또는 "모던 자바스크립트"라고 말하면, 대략 2015년 이후에 추가된, 지금은 어디서든 지원되는 기능들을 가리킨다고 보면 됩니다.

요즘의 자바스크립트는 쓰기에 정말 괜찮은 언어입니다. 옛날의 어수선한 부분들이 여전히 남아 있긴 하지만, 이 강의에서 다룰 몇 가지 습관만 들이면 대부분 피해 갈 수 있어요.

핵심 정리

• 자바스크립트는 모든 브라우저에서 돌아가고, Node.js를 통해 서버에서도 실행됩니다.
• 웹이 닿는 거의 모든 영역에서 쓰여요 — UI, 백엔드, 개발 도구, 심지어 데스크톱·모바일 앱까지.
• 자바(Java)와는 완전히 다른 언어입니다. TypeScript는 자바스크립트에 정적 타입을 더한 상위 집합이에요.
• 역사적인 잔재가 남아 있긴 하지만, 실제로 여러분이 쓰게 될 건 모던 자바스크립트(ES2015+)입니다.

다음: 자바스크립트 실행해 보기

배경 설명은 이쯤 하고, 이제 직접 코드를 돌려볼 차례입니다. 다음 문서에서는 초보자가 자바스크립트를 실행해볼 수 있는 세 가지 환경을 다룹니다 — 브라우저 콘솔, HTML 파일, 그리고 커맨드라인에서의 Node.js입니다.