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

Frequently Asked Questions (FAQ)

Q. When would I use this in practice?

A. JavaScript tutorial for beginners: ECMAScript and runtimes, core syntax, and var vs let vs const—with examples you can.

Q. What should I read before this?

A. Follow the previous article or related articles links at the bottom of each post to learn in sequence. See the JavaScript series index for the full picture.

Q. Where can I study this more deeply?

A. Check cppreference and the relevant library’s official documentation. The reference links at the end of the article are also worth using.

Other articles related to this topic.

Keywords Covered in This Article (Related Search Terms)

This article covers JavaScript, ECMAScript, Node.js, Browser, Beginner, let, const, var.