Hello JavaScript — landscape, runtime, tooling

1. JavaScript là gì? Lịch sử ngắn

JavaScript được tạo ra trong 10 ngày bởi Brendan Eich tại Netscape, năm 1995. Mục tiêu: thêm "scripting nhẹ" cho trình duyệt Netscape Navigator — một thứ ngôn ngữ mà designer hoặc người không-phải-kỹ sư có thể viết được. Tên ban đầu là Mocha, sau đổi LiveScript, cuối cùng đổi JavaScript vào tháng 12 năm 1995 — đơn thuần là marketing khi Java đang là ngôn ngữ hot.

Năm 1996, Netscape submit JavaScript cho ECMA International để chuẩn hoá. Spec ra đời với tên ECMAScript (ES). Lịch sử các phiên bản:

Quy trình chuẩn hoá quản lý bởi TC39 (Technical Committee 39) — gồm đại diện từ các công ty implement engine (Google, Mozilla, Apple, Microsoft, Meta...). Mỗi proposal đi qua 4 stage (0 → 4). Đến stage 4 mới vào spec chính thức. Mỗi tháng 6, spec năm đó được finalize.

2. Ngôn ngữ vs Runtime vs Môi trường — tách 3 lớp

Đây là phần mà phần lớn người mới JS bỏ qua, và sau đó gặp confusion. Hãy phân biệt rõ:

Bảng so sánh API có sẵn ở từng môi trường:

Khi bạn copy code từ Stack Overflow, luôn tự hỏi: code này chạy ở đâu? Nếu nó dùng document.getElementById → browser only. Nếu nó dùng require('fs') → Node only. Không có nghĩa "JavaScript" universal.

3. Chạy JS trong browser — DevTools Console

Mở Chrome/Firefox/Safari. Bấm F12 (Windows) hoặc Cmd + Option + I (Mac). Tab Console là REPL (Read-Eval-Print Loop) của JS — gõ expression, Enter, xem kết quả.

Thử ngay:

> 1 + 1
2

> document.title
'Google'  // hoặc title của trang đang mở

> navigator.userAgent
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)...'

> [1, 2, 3].map(x => x * 2)
[2, 4, 6]

Console là chỗ tốt nhất để thí nghiệm JS — không cần cài gì, không cần file. Nhược điểm: chỉ chạy được ở browser context, không gọi được Node API.

4. Cài Node và chạy file .js

Node là "JavaScript ngoài trình duyệt". Cài Node là bước cần để chạy script JS từ terminal, viết server, dùng npm package.

Cách cài khuyên dùng: nvm (Node Version Manager) — quản lý nhiều phiên bản Node song song. Lý do: project khác nhau yêu cầu Node version khác nhau, nvm cho phép switch nhanh.

# Cài nvm (macOS / Linux)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Khởi động lại terminal, sau đó:
nvm install 20         # cài Node 20 LTS
nvm use 20             # dùng version vừa cài
nvm alias default 20   # mặc định Node 20 cho terminal mới

# Kiểm tra
node --version         # v20.x.x
npm --version          # 10.x.x

Windows: tải installer từ nodejs.org, hoặc dùng nvm-windows (fork riêng).

Sau khi có Node, có 2 cách chạy code:

4.1. Node REPL

Gõ node trong terminal. Sẽ vào REPL giống browser Console:

$ node
Welcome to Node.js v20.10.0.
Type ".help" for more information.
> 1 + 1
2
> process.version
'v20.10.0'
> .exit

Thoát: Ctrl + D hoặc gõ .exit.

4.2. Chạy file .js

Tạo file hello.js:

console.log('Xin chào JavaScript');

Chạy:

$ node hello.js
Xin chào JavaScript

Đọc command-line argument qua process.argv:

// process.argv[0] = node binary path
// process.argv[1] = file path
// process.argv[2+] = args do user pass
const name = process.argv[2] ?? 'bạn';
console.log(`Xin chào, ${name}`);

$ node greet.js
Xin chào, bạn

$ node greet.js Việt
Xin chào, Việt

?? (nullish coalescing) là toán tử ES2020 — trả về vế phải nếu vế trái null hoặc undefined. Chương 2 đào sâu.

5. package.json — manifest của project

Mỗi project JS "đàng hoàng" đều có file package.json ở gốc. Đây là tương đương pubspec.yaml của Dart nhưng format JSON.

Tạo package.json bằng npm init:

# tạo project mới
mkdir my-app && cd my-app

# `-y` = accept default cho mọi câu hỏi
npm init -y

File package.json sinh ra trông như sau (đã thêm một số field thường gặp):

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My first JS project",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {},
  "devDependencies": {}
}

Giải thích các field:

6. npm ecosystem — cài package

npm (Node Package Manager) là tool cài package + registry trên npmjs.com (lưu hơn 2 triệu package). Có 3 lệnh quan trọng nhất:

# Cài vào dependencies (cần khi run)
npm install lodash
npm i lodash              # shortcut

# Cài vào devDependencies (chỉ cần khi dev)
npm install -D prettier
npm i -D prettier         # shortcut

# Cài global (có thể chạy lệnh từ bất kỳ đâu, nhưng nên hạn chế)
npm install -g pnpm

# Cài lại từ package.json (vd: pull repo về, clone xong)
npm install               # đọc package.json + lock file, cài vào node_modules/

# Xoá package
npm uninstall lodash

Sau khi npm install lodash, có 3 thay đổi:

1. package.json thêm dòng "lodash": "^4.17.21" vào dependencies.
2. package-lock.json được tạo — lock chính xác version đã resolve, kèm hash kiểm tra integrity. Phải commit vào git.
3. node_modules/ mọc lên — chứa source code của lodash + các dependency của lodash. KHÔNG commit vào git (vào .gitignore).

6.1. npx — chạy package không cần install global

npx là tool đi kèm npm. Cho phép chạy package mà không cần install. Behind the scenes: nếu chưa có local, npx download tạm vào cache rồi chạy.

# Chạy create-vite một lần để init project (không install global)
npx create-vite@latest my-app

# Chạy package từ devDependencies (không cần ./node_modules/.bin/eslint)
npx eslint .

6.2. pnpm và yarn — alternative

npm là default + ai cũng có. Nhưng có 2 alternative phổ biến:

Tất cả đều đọc/ghi cùng package.json + node_modules/. Khác nhau ở thuật toán resolve và lock file. Chọn 1, đừng mix trong cùng 1 project.

7. Tooling baseline cho project mới

4 tool nên có cho mọi project JS hiện đại:

.gitignore mẫu cho JS project

# Dependencies
node_modules/

# Build output
dist/
build/
.next/
.nuxt/

# Logs
*.log
npm-debug.log*
yarn-debug.log*

# Env (chứa secret!)
.env
.env.local
.env.*.local

# Editor
.vscode/
.idea/
.DS_Store

# Cache
.cache/
.parcel-cache/

8. ESM vs CommonJS — intro

JavaScript có 2 module system. Chương 8 sẽ đào sâu, ở đây bạn cần biết để không bị confuse khi đọc code khác.

9. JS có "compile" không?

JavaScript là interpreted — không cần compile thành binary trước khi chạy. Tuy nhiên, modern engine (V8...) dùng JIT compilation (Just-In-Time): trong runtime, code nóng (hot path) được compile sang machine code để chạy nhanh.

Ngoài ra, ecosystem có 2 process biến đổi code phổ biến:

• Bundler (Vite/esbuild/Webpack/Rollup): gộp nhiều file .js + asset thành ít file .js output. Thường minify để giảm size. Dùng cho production build.
• Transpiler (Babel): convert code mới (ES2024) → cũ (ES5) để chạy trên trình duyệt cũ. Ngày nay ít cần — phần lớn browser support ES2020+. TypeScript compiler cũng là transpiler.

Sub-pillar này không đào sâu Babel (đã ít cần). Vite + tsc đủ cho 99% case. Chương 8 trình bày bundler chi tiết.

10. Cheat sheet chương 1

Bài tập

const name = process.argv[2] ?? 'bạn';
console.log(`Xin chào, ${name}`);

{
  "name": "my-greet",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "node greet.js"
  }
}

// today.js
import { format } from 'date-fns';

const today = format(new Date(), 'dd/MM/yyyy');
console.log(`Hôm nay là ${today}`);

Quiz

Tổng kết

Sau chương 1, bạn nên đã nắm:

• Phân lớp 3 tầng: JS ngôn ngữ (ECMAScript spec) ≠ engine (V8/SpiderMonkey) ≠ host environment (browser/Node).
• Chạy JS ở đâu: browser DevTools Console, Node REPL, node file.js.
• Manifest project: package.json với type, scripts, dependencies.
• Cài package: npm i, npm i -D, npx; commit lock file, ignore node_modules/.
• Tooling baseline: Prettier, ESLint, Vite — sẽ đào sâu chương 8.
• ESM vs CJS: ESM là tương lai, default cho project mới.

Kết nối tới các chương khác

Mọi chương sau giả định bạn chạy được node file.js. Cụ thể:

• Chương 2-8 — code example chạy bằng Node + ESM.
• Chương 8 (Modules) — đào sâu ESM/CJS đã touch ở section 8 chương này.
• Chương 12 (TS Tooling) — tsconfig.json ≈ extension của package.json cho TypeScript.
• Trụ cột CLI — terminal cơ bản đã là tiền đề. Nếu chưa quen, đọc trụ cột CLI trước.