Get Started with JavaScript | The Essential Web Language — A Complete Introduction
이 글의 핵심
A practical JavaScript introduction covering ECMAScript, where code runs, basic syntax, and how to choose var, let, and const.
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
| Term | Meaning |
|---|---|
| ECMAScript | The standard document that defines syntax, types, and built-in objects |
| JavaScript | A 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>ortype="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 nowindow/documentlike in the browser. - Execution:
node file.jsfrom the terminal, or npm scripts inpackage.json.
// Node.js (e.g. server.js)
const http = require("http");
// Or use import in projects with "type": "module"
At a glance
| Browser | Node.js | |
|---|---|---|
| Main focus | UI and page interaction | Servers, tools, automation |
| DOM | Yes | Generally no |
| Modules | import/export + bundlers is common | require (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,symbolnullexplicitly 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
| Keyword | Scope | Redeclaration | Reassignment | Notes |
|---|---|---|---|---|
var | Function | Allowed (same scope) | Allowed | Unusual hoisting behavior |
let | Block | Not in same block | Allowed | Safe in loops and if |
const | Block | Not allowed | No rebinding | Object 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
- ECMAScript is the standard; JavaScript is the language/runtimes that implement it.
- Browsers provide DOM/UI APIs; Node.js targets servers and tools—same syntax, different APIs.
- Types are dynamic; use
typeofand===habitually for safer code. - Prefer
const/let; treatvaras legacy-only.
Next steps
- JavaScript variables and data types | let, const, and var
- JavaScript functions | declarations, expressions, arrows, closures
- JavaScript DOM manipulation | controlling pages dynamically
Related posts
- HTML & CSS getting started | your first steps in web development
- TypeScript getting started | install, config, and core syntax