참고: 이웅모 《모던 자바스크립트 Deep Dive》 03장 · MDN What is JavaScript

브라우저 콘솔에 1+1을 치며 “여기가 실행 환경이구나”를 처음 느꼈다. 이 장은 거창한 문법 전에 어디서 돌릴지 — 브라우저, Node, 에디터 — 를 손으로 익히는 장이다.

flowchart LR
  CODE[JS 코드] --> BR[브라우저 엔진]
  CODE --> ND[Node.js]
  BR --> DEV[DevTools 콘솔/디버거]
  ND --> REPL[REPL / 파일 실행]
  VS[VS Code] --> BOTH[둘 다 연결]

3.1 자바스크립트 실행 환경

JS는 호스트 환경이 제공한다. 브라우저(렌더링+DOM+이벤트), Node(파일·네트워크·서버). 같은 언어, 다른 API.

3.2 웹 브라우저

개발자 도구

Elements / Console / Sources / Network. 콘솔은 REPL이자 로그 창.

콘솔

console.log / warn / error / table. 표현식 평가 가능.

브라우저에서 실행

<script>, type="module", 인라인 vs 외부. defer/async는 로딩 장(나중)과 연결.

디버깅

Sources에서 브레이크포인트, step over/into, 스코프 창. debugger; 문.

function add(a, b) {
  // debugger;
  return a + b;
}
console.log(add(1, 2));

3.3 Node.js

npm과 함께

패키지 생태계의 입구. node -v, npm -v.

설치

LTS 권장. nvm/fnm으로 버전 관리.