JavaScript 기초 — 브라우저의 동적 언어
목차
JavaScript 기초 — 브라우저의 동적 언어
HTML 이 뼈대, CSS 가 모양이라면 JavaScript 는 동작. 버튼을 누르면 모달이 뜨고, 입력값을 검사하고, 서버에서 데이터를 받아 화면에 그리는 일이 모두 JS 의 영역. 이 글은 변수 · 자료형 · 함수 · 배열 / 객체 메서드 · 비동기 · 모듈 같은 입문에 자주 등장하는 항목.
1. JavaScript 에 대한 이야기
1995 년 Netscape 의 Brendan Eich 가 10 일 만에 첫 프로토타입을 만든 것이 시작. 처음 이름은 Mocha, 곧 LiveScript 가 됐고, 같은 해 12 월 Java 의 인기를 빌리려 JavaScript 로 개명. 이름이 비슷하다는 것 외에 Java 와는 직접 연관이 없습니다.
표준화는 1996 년 ECMA International 에 제출되어 1997 년 ECMA-262 (ECMAScript 1) 가 공개. 오늘 우리가 "ES2015" 또는 "ES6" 라 부르는 큰 도약이 2015 년에, 이후 매년 작은 갱신. JavaScript 는 언어 이름, ECMAScript 는 명세 이름.
브라우저 엔진 — V8 (Chrome · Node.js) · SpiderMonkey (Firefox) · JavaScriptCore (Safari). 같은 명세를 따르되 구현 디테일과 성능 특성이 다릅니다.
2. 변수
var a = 1; // 함수 스코프, 호이스팅. 신규 코드에서는 거의 안 씀
let b = 2; // 블록 스코프, 재할당 가능
const c = 3; // 블록 스코프, 재할당 불가 (참조는 고정, 객체 내부는 변경 가능)
const 를 기본값으로 하고, 재할당이 필요한 곳에서만 let 을 쓰는 관습.
3. 자료형
원시 (primitive) 7 가지와 객체 타입:
| 종류 | 예시 |
|---|---|
string |
"hello" · 'a' · `template ${x}` |
number |
42 · 3.14 · NaN · Infinity |
boolean |
true · false |
null |
null (의도적인 빈 값) |
undefined |
undefined (할당된 적 없음) |
bigint |
9007199254740993n |
symbol |
Symbol("id") |
object |
{} · [] · function() {} |
typeof null 은 "object". 언어 초기 버그가 그대로 굳어진 자리.
4. 함수
function add(a, b) { return a + b; } // 선언식
const sub = function(a, b) { return a - b; }; // 표현식
const mul = (a, b) => a * b; // 화살표 함수
const greet = name => `안녕 ${name}`; // 단일 매개변수는 괄호 생략 가능
화살표 함수는 자체 this 를 가지지 않고 둘러싼 스코프의 this 를 그대로 씀. 그 차이가 콜백 · 메서드 정의에서 자주 문제.
5. 배열 · 객체 메서드
배열은 다음 메서드들이 거의 표준:
const xs = [1, 2, 3, 4, 5];
xs.map(x => x * 2); // [2, 4, 6, 8, 10]
xs.filter(x => x % 2 === 0); // [2, 4]
xs.reduce((acc, x) => acc + x, 0); // 15
xs.find(x => x > 3); // 4
xs.some(x => x > 4); // true
xs.every(x => x > 0); // true
xs.includes(3); // true
[...xs, 6]; // [1, 2, 3, 4, 5, 6]
객체는 키-값 모음:
const user = { name: "lee", age: 30 };
Object.keys(user); // ["name", "age"]
Object.values(user); // ["lee", 30]
Object.entries(user); // [["name", "lee"], ["age", 30]]
const { name, age } = user; // 구조 분해
const updated = { ...user, age: 31 }; // 스프레드로 불변 갱신
6. 비동기 — Promise · async / await · fetch
// Promise (2015 도입)
fetch("/api/users")
.then(r => r.json())
.then(users => console.log(users))
.catch(err => console.error(err));
// async/await (2017 도입) — 같은 동작을 동기처럼 작성
async function load() {
try {
const r = await fetch("/api/users");
const users = await r.json();
return users;
} catch (err) {
console.error(err);
}
}
fetch 는 네트워크 오류일 때만 reject. 4xx / 5xx 는 reject 하지 않으므로 r.ok 를 직접 확인해야 함.
7. 이벤트 루프
JS 엔진은 단일 스레드. 함수 호출은 콜 스택에 쌓이고, 비동기 작업이 끝나면 콜백이 큐에 들어감. 스택이 비면 큐에서 꺼내 실행. 큐는 두 종류로 갈라지는데, Promise.then 같은 마이크로태스크가 setTimeout 같은 매크로태스크보다 우선:
console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");
// 출력: A, D, C, B
8. ES 모듈
// math.js
export function add(a, b) { return a + b; }
export const pi = 3.14;
export default function multiply(a, b) { return a * b; }
// app.js
import multiply, { add, pi } from "./math.js";
브라우저에서는 <script type="module" src="app.js"></script> 로 실행. 모듈은 자동으로 strict 모드이고, defer 처럼 동작.
9. 다른 길
- TypeScript (Microsoft, 2012) — 정적 타입을 더한 상위호환. 빌드 후에는 JS 로 변환.
- JSX — React 가 도입한 HTML 비슷한 문법. 빌드 도구가 JS 로 변환.
- CoffeeScript (2009) — 간결한 문법. ES6 가 비슷한 기능을 흡수해 사용 빈도 감소.
- Dart (Google) · PureScript · Elm — JS 로 컴파일되는 다른 언어들.
10. 자주 쓰는 모양
# Node.js 가 깔려 있다면
node --version
node script.js # JS 파일 실행
# 브라우저에서 시도
# 1) 콘솔 (DevTools 의 Console 패널)
# 2) HTML 파일에 <script> 로 포함
Windows 와 macOS 모두 명령은 같음. 설치는 nodejs.org 또는 버전 매니저 (nvm · fnm · Volta).
11. 자주 걸리는 자리
== 와 === 의 차이 — == 는 형 변환을 하므로 0 == "0" 이 true. 신규 코드는 === 를 기본.
this 의 가리키는 대상이 호출 방식에 따라 변함 — 화살표 함수 또는 bind 로 고정.
비동기 결과를 동기처럼 다루려다 발생하는 race — Promise.all · Promise.allSettled 가 대안.
부동소수 정밀도 — 0.1 + 0.2 !== 0.3. 금액 · 소수점 연산은 정수로 환산하거나 BigInt / Decimal 라이브러리.
호이스팅 — var 와 함수 선언은 끌어 올려짐. let · const 는 TDZ (Temporal Dead Zone) 가 있어 선언 전 접근 시 에러.
하고픈 말
JavaScript 는 30 년의 역사 동안 매년 갱신되는 살아 있는 언어. var · == · 호이스팅 같은 초기의 이상한 자리가 남아 있지만, ES2015 이후의 const / let · === · 화살표 함수 · async / await · ES 모듈 · 구조 분해의 결합이 현대 JS 의 기본 토대. TypeScript 의 정적 타입까지 더하면 큰 코드베이스의 마찰이 크게 줄어듭니다.
Next
- http-rest
- url-anatomy
ECMAScript 명세 (TC39) · TC39 proposals · MDN JavaScript · javascript.info · Node.js · Deno · Bun · Brendan Eich JavaScript at Ten Years 를 참고합니다.