Previous
Next
Get Started with JavaScript — Complete Guide

Get Started with JavaScript — Complete Guide

· 18분 읽기 · 수정 Beginner Tutorial
Get Started with JavaScript — Complete Guide

이 글의 핵심

JavaScript tutorial for beginners: ECMAScript and runtimes, core syntax, and var vs let vs const—with examples you can run in the browser or Node.js.

Introduction

JavaScript began as the only standard programming language that ran in web browsers. Today, with Node.js, you run the same language on servers, CLIs, and tools. This article gives you history and the ECMAScript standard, runtimes, core syntax, and var / let / const in one place so you can continue to variables and types.

History of JavaScript and ECMAScript

A short history

  • 1995: Netscape introduced a language to add behavior to web pages: Mocha → LiveScript → JavaScript. The “Java” in the name was marketing; the language is not Java.
  • 1997 onward: To align divergent browser implementations, ECMA published ECMAScript, a formal standard. Versions labeled ES (ES5, ES2015, etc.) refer to that standard.
  • 2015 (ES2015 / ES6): A major update that brought let/const, arrow functions, classes, and modules (import/export)—the backbone of modern JavaScript.
  • The spec is updated every year (ES2016, ES2017, …). Modern JavaScript usually means roughly ES2015 and later.

ECMAScript vs JavaScript

TermMeaning
ECMAScriptThe standard document that defines syntax, types, and built-in objects
JavaScriptA language that implements ECMAScript (e.g. V8 in Chrome/Node, SpiderMonkey in Firefox)
For developers, “which ECMAScript version is supported?” is the compatibility baseline—for example, “to use ES2020 BigInt, check your build target and browser versions.”

Runtimes: browser vs Node.js

The syntax is the same, but built-in APIs differ by environment.

Browser

  • Role: Renders HTML/CSS, manipulates the DOM, and reacts to events (clicks, input).
  • Typical APIs: document, window, fetch, localStorage—web-specific APIs.
  • Execution: Load via <script> or type="module" in HTML.
<script>
  console.log(document.title);
</script>

Node.js

  • Role: Servers, build scripts, CLI tools. Suited for OS-adjacent work: files, processes, HTTP servers.
  • Typical APIs: fs, path, http, process. There is no window/document like in the browser.
  • Execution: node file.js from the terminal, or npm scripts in package.json.
// Node.js (e.g. server.js)
const http = require("http");
// Or use import in projects with "type": "module"

At a glance

BrowserNode.js
Main focusUI and page interactionServers, tools, automation
DOMYesGenerally no
Modulesimport/export + bundlers is commonrequire (CJS) or import (ESM, per package.json)
Suggested learning path: Syntax is the same everywhere—console logs and conditionals work in DevTools or Node. If you care about web UI, pair JavaScript with HTML in the browser soon; for backend, add Node in parallel.

Core syntax: variables, types, operators

Variables (overview)

A variable is a name for a value. Keywords are var / let / const; differences are summarized under var vs let vs const.

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

Types (overview)

JavaScript is dynamically typed. You can reassign a variable from a number to a string (in real code, avoid that when possible). Common primitive types:

  • string, number, bigint, boolean, undefined, symbol
  • null explicitly means “no value.” Object types: Arrays, functions, plain objects { } are handled by reference.
typeof 42;           // "number"
typeof "hello";      // "string"
typeof true;         // "boolean"
typeof undefined;     // "undefined"
typeof { a: 1 };     // "object"
typeof (() => {});   // "function"

Operators (commonly used)

  • Arithmetic: +, -, *, /, %, ** (exponentiation)
  • Comparison: ===, !== (prefer strict equality), <, >, <=, >=
  • Logical: &&, ||, !
  • Nullish coalescing / optional chaining (ES2020+): ??, ?.
// == coerces types and is hard to predict. Prefer ===.
// 실행 예제
0 == false;   // true (avoid)
0 === false;  // false
const name = null;
const display = name ?? "guest";  // "guest"

For more on variables, types, and coercion, see JavaScript variables and data types.

var vs let vs const

Quick comparison

KeywordScopeRedeclarationReassignmentNotes
varFunctionAllowed (same scope)AllowedUnusual hoisting behavior
letBlockNot in same blockAllowedSafe in loops and if
constBlockNot allowedNo rebindingObject contents can still change

Prefer let and const

// ✅ Prefer: default to const; use let only when reassignment is needed
const apiBase = "https://api.example.com";
let retryCount = 0;
retryCount += 1;
// ❌ Avoid var in new code
var oldStyle = 1;

Typical var pitfalls (for understanding)

var is function-scoped, not block-scoped, and hoisting can surprise you.

// 실행 예제
if (true) {
  var x = 1;
}
console.log(x); // 1 — visible outside the block (with let: ReferenceError)
console.log(hoist);
var hoist = 2;  // may log undefined first (declaration hoisted, not assignment)

Practical rule: In new code use const first, then let if needed; keep var for reading legacy code.

First code example

A minimal example you can run in the browser console or Node.

function greet(name) {
  return `Hello, ${name}!`;
}
const user = "developer";
console.log(greet(user));

In HTML, place this before </script> or load app.js with script src="app.js".

Summary

  1. ECMAScript is the standard; JavaScript is the language/runtimes that implement it.
  2. Browsers provide DOM/UI APIs; Node.js targets servers and tools—same syntax, different APIs.
  3. Types are dynamic; use typeof and === habitually for safer code.
  4. Prefer const / let; treat var as legacy-only.

Next steps

자주 묻는 질문 (FAQ)

Q. 이 내용을 실무에서 언제 쓰나요?

A. JavaScript tutorial for beginners: ECMAScript and runtimes, core syntax, and var vs let vs const—with examples you can r… 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.

Q. 선행으로 읽으면 좋은 글은?

A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. JavaScript 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.

Q. 더 깊이 공부하려면?

A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.

같이 보면 좋은 글 (내부 링크)

이 주제와 연결되는 다른 글입니다.

이 글에서 다루는 키워드 (관련 검색어)

JavaScript, ECMAScript, Node.js, Browser, Beginner, let, const, var 등으로 검색하시면 이 글이 도움이 됩니다.