JavaScript 시작하기 | 웹 개발의 필수 언어 완벽 입문

들어가며

JavaScript는 웹 브라우저에서 동작하는 유일한 표준 스크립트 언어로 널리 쓰이며, Node.js를 통해 서버·CLI·도구까지 확장된 범용 언어입니다. 이 글에서는 역사와 표준(ECMAScript), 실행 환경, 기본 문법, var / let / const를 한 번에 정리하고, 이어서 변수와 타입 글로 연결할 수 있게 구성했습니다.

---

JavaScript의 역사와 ECMAScript

짧은 역사

• 1995년: Netscape에서 웹 페이지에 동작을 넣기 위해 Mocha → LiveScript → JavaScript로 이름이 바뀌며 등장했습니다. 당시 이름의 “Java”는 마케팅적 연관일 뿐, 언어 설계는 Java와 다릅니다.
• 1997년~: 브라우저마다 제각각 구현되던 것을 맞추기 위해 ECMA가 ECMAScript라는 표준 명세를 제정했습니다. ES가 붙은 버전(ES5, ES2015 등)이 바로 그 표준의 세대입니다.
• 2015년(ES2015 / ES6): let/const, 화살표 함수, 클래스, 모듈(import/export) 등 현대 JavaScript의 뼈대가 한꺼번에 들어온 큰 업데이트였습니다.
• 이후 매년 명세가 갱신됩니다(ES2016, ES2017, …). 통칭 모던 JavaScript는 대략 ES2015 이후 문법을 가리킵니다.

ECMAScript와 JavaScript의 관계

용어	의미
ECMAScript	언어의 문법·타입·내장 객체를 정의한 표준 문서
JavaScript	ECMAScript를 구현한 언어(브라우저의 V8·SpiderMonkey, Node.js의 V8 등)

개발자 입장에서는 “ECMAScript 몇까지 지원하나?”가 호환성의 기준이 됩니다. 예: “ES2020의 BigInt를 쓰려면 빌드 타깃/브라우저 버전을 확인해야 한다”처럼 말합니다.

---

실행 환경: 브라우저 vs Node.js

같은 JavaScript 문법이라도 제공하는 API가 환경마다 다릅니다.

브라우저

• 역할: HTML/CSS를 그리고, DOM(문서 객체 모델 — HTML을 객체 트리로 다루는 방식)을 조작하고, 이벤트(클릭, 입력)에 반응합니다.
• 대표 API: document, window, fetch, localStorage 등 웹 전용 API.
• 실행: HTML의 <script> 또는 type="module"로 로드합니다.

<script>
  console.log(document.title);
</script>

Node.js

• 역할: 서버, 빌드 스크립트, CLI 도구. 파일·프로세스·HTTP 서버 등 OS에 가까운 작업에 적합합니다.
• 대표 API: fs, path, http, process 등. 브라우저의 window/document는 없습니다.
• 실행: 터미널에서 node 파일.js 또는 package.json의 스크립트로 실행합니다.

// Node.js (예: server.js)
const http = require("http");
// 또는 "type": "module" 인 프로젝트에서는 import 사용

한 줄 정리

구분	브라우저	Node.js
대표 목적	UI·페이지 상호작용	서버·도구·자동화
DOM	있음	없음 (대체로)
모듈	import/export + 번들러 조합이 일반적	require(CJS) 또는 import(ESM, package.json 설정)

학습 순서 제안: 문법은 어디서든 같으므로, 콘솔 로그와 조건문은 브라우저 개발자 도구나 Node 둘 다 OK입니다. 웹 UI를 목표로 하면 곧바로 HTML과 함께 브라우저를 쓰고, 백엔드를 목표로 하면 Node를 병행하면 됩니다.

---

기본 문법: 변수, 타입, 연산자

변수 선언(개요)

값을 담는 이름이 변수입니다. 키워드는 **var / let / const**이며, 아래 var vs let vs const에서 차이를 정리합니다.

let count = 0;
const siteName = "pkglog";

타입(개요)

JavaScript는 동적 타입입니다. 변수에 숫자를 넣었다가 문자열을 넣는 것이 문법상 가능합니다(실무에서는 피하는 편이 좋습니다).

대표적인 원시 타입(primitive):

• string, number, bigint, boolean, undefined, symbol
• null은 별도로 “값이 비어 있음”을 나타냅니다.

객체 타입: 배열, 함수, 일반 객체 { } 등은 참조로 다룹니다.

typeof 42;           // "number"
typeof "hello";      // "string"
typeof true;         // "boolean"
typeof undefined;     // "undefined"
typeof { a: 1 };     // "object"
typeof (() => {});   // "function"

연산자(자주 쓰는 것)

• 산술: +, -, *, /, %, **(거듭제곱)
• 비교: ===, !==(동등 비교는 삼중 등호 권장), <, >, <=, >=
• 논리: &&, ||, !
• 널 병합 / 옵셔널 체이닝(ES2020+): ??, ?.

// == 는 형 변환을 해서 예측이 어렵습니다. === 를 기본으로 쓰세요.
0 == false;   // true (피하기)
0 === false;  // false

const name = null;
const display = name ?? "guest";  // "guest"

자세한 변수·타입·형 변환은 JavaScript 변수와 데이터 타입에서 이어집니다.

---

var vs let vs const

한눈에 비교

키워드	스코프	재선언	재할당	비고
var	함수 스코프	가능(같은 스코프)	가능	호이스팅 동작이 특이함
let	블록 스코프	불가(같은 블록)	가능	루프·if에 안전
const	블록 스코프	불가	불가(재바인딩)	객체 내용 변경은 가능

let과 const를 기본으로

// ✅ 권장: 기본은 const, 바꿔야 할 때만 let
const apiBase = "https://api.example.com";
let retryCount = 0;
retryCount += 1;

// ❌ 새 코드에서 var는 피하기
var oldStyle = 1;

var의 대표적인 문제(이해용)

var는 블록이 아니라 함수 기준으로 스코프가 잡히고, 선언이 위로 끌려 올려지는 호이스팅 때문에 실수가 나기 쉽습니다.

if (true) {
  var x = 1;
}
console.log(x); // 1 — 블록 밖에서도 보임 (let이었다면 ReferenceError)

console.log(hoist);
var hoist = 2;  // undefined가 먼저 찍힐 수 있음(선언만 호이스팅)

실무 규칙: 새 코드는 **const → 필요 시 let**만 사용하고, var는 레거시 코드 읽기 정도로 알아 두면 충분합니다.

---

첫 코드 예제

브라우저 콘솔이나 Node에서 실행해 볼 수 있는 최소 예제입니다.

function greet(name) {
  return `Hello, ${name}!`;
}

const user = "developer";
console.log(greet(user));

HTML 파일에 넣을 때는 </script> 직전에 두거나, script src="app.js"로 분리합니다.

---

정리

1. ECMAScript는 표준, JavaScript는 그걸 구현한 언어·런타임이라고 보면 됩니다.
2. 브라우저는 DOM·UI, Node.js는 서버·도구·파일 — 같은 문법, 다른 API입니다.
3. 타입은 동적이지만 typeof와 ===로 습관적으로 안전하게 다룹니다.
4. **const / let을 쓰고 var**는 레거시용으로만 이해합니다.

다음 단계

• JavaScript 변수와 데이터 타입 | let, const, var 완벽 정리
• JavaScript 함수 | 선언·표현식·화살표·클로저
• JavaScript DOM 조작 | 웹 페이지 동적으로 제어하기

---

관련 글

• HTML/CSS 시작하기 | 웹 개발 첫걸음
• TypeScript 시작하기 | 설치, 설정, 기본 문법