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 의 정적 타입까지 더하면 큰 코드베이스의 마찰이 크게 줄어듭니다.

http-rest
url-anatomy

ECMAScript 명세 (TC39) · TC39 proposals · MDN JavaScript · javascript.info · Node.js · Deno · Bun · Brendan Eich JavaScript at Ten Years 를 참고합니다.

JavaScript 기초 — 브라우저의 동적 언어

1. JavaScript 에 대한 이야기

브라우저 엔진 — 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. 이벤트 루프

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) 가 있어 선언 전 접근 시 에러.

하고픈 말

http-rest
url-anatomy

ECMAScript 명세 (TC39) · TC39 proposals · MDN JavaScript · javascript.info · Node.js · Deno · Bun · Brendan Eich JavaScript at Ten Years 를 참고합니다.

JavaScript 기초 — 브라우저의 동적 언어

JavaScript 기초 — 브라우저의 동적 언어

1. JavaScript 에 대한 이야기

2. 변수

3. 자료형

4. 함수

5. 배열 · 객체 메서드

6. 비동기 — Promise · async / await · fetch

7. 이벤트 루프

8. ES 모듈

9. 다른 길

10. 자주 쓰는 모양

11. 자주 걸리는 자리

하고픈 말

Next

web-fundamentals 카테고리의 다른 글

JavaScript 기초 — 브라우저의 동적 언어

JavaScript 기초 — 브라우저의 동적 언어

1. JavaScript 에 대한 이야기

2. 변수

3. 자료형

4. 함수

5. 배열 · 객체 메서드

6. 비동기 — Promise · async / await · fetch

7. 이벤트 루프

8. ES 모듈

9. 다른 길

10. 자주 쓰는 모양

11. 자주 걸리는 자리

하고픈 말

Next

web-fundamentals 카테고리의 다른 글