JavaScript Basics — The Browser's Dynamic Language

If HTML is the skeleton and CSS is the look, JavaScript is the behavior. Pressing a button to open a modal, validating input, fetching data from the server and rendering it — all of these belong to JS. This article covers items that show up often for beginners: variables, types, functions, array / object methods, async, and modules.

1. About JavaScript

It started in 1995 when Brendan Eich at Netscape produced a first prototype in 10 days. The initial name was Mocha, soon LiveScript, and that December it was renamed JavaScript to ride on Java's popularity. Aside from the name resemblance, it has no direct relation to Java.

It was submitted to ECMA International for standardization in 1996, and ECMA-262 (ECMAScript 1) was published in 1997. The big leap we call "ES2015" or "ES6" came in 2015, with smaller annual revisions ever since. JavaScript is the language name; ECMAScript is the spec name.

Browser engines — V8 (Chrome, Node.js), SpiderMonkey (Firefox), JavaScriptCore (Safari). They follow the same spec but differ in implementation details and performance characteristics.

2. Variables

var a = 1;   // 함수 스코프, 호이스팅. 신규 코드에서는 거의 안 씀
let b = 2;   // 블록 스코프, 재할당 가능
const c = 3; // 블록 스코프, 재할당 불가 (참조는 고정, 객체 내부는 변경 가능)

The convention is to use const by default and reach for let only where reassignment is needed.

3. Types

Seven primitives plus the object type:

Kind	Example
string	"hello" · 'a' · `template ${x}`
number	42 · 3.14 · NaN · Infinity
boolean	true · false
null	null (intentional empty value)
undefined	undefined (never assigned)
bigint	9007199254740993n
symbol	Symbol("id")
object	{} · [] · function() {}

typeof null is "object". An early-language bug that has stuck around.

4. Functions

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}`;        // 단일 매개변수는 괄호 생략 가능

Arrow functions don't have their own this and use the surrounding scope's this directly. That difference often causes issues in callbacks and method definitions.

5. Array · Object Methods

These methods are practically standard on arrays:

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]

Objects are key-value collections:

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. Async — 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 only rejects on network errors. 4xx / 5xx do not reject, so we have to check r.ok ourselves.

7. Event Loop

The JS engine is single-threaded. Function calls pile onto the call stack, and when an async task finishes its callback enters a queue. When the stack empties, items run from the queue. The queue splits into two kinds, where microtasks like Promise.then take priority over macrotasks like setTimeout:

console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");
// 출력: A, D, C, B

8. ES Modules

// 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";

In the browser, run them via <script type="module" src="app.js"></script>. Modules are automatically in strict mode and behave like defer.

9. Other Paths

• TypeScript (Microsoft, 2012) — a superset adding static types. Compiles to JS at build time.
• JSX — HTML-like syntax introduced by React. Build tools convert it to JS.
• CoffeeScript (2009) — concise syntax. As ES6 absorbed similar features, usage dropped.
• Dart (Google), PureScript, Elm — other languages that compile to JS.

10. Common Shape

# Node.js 가 깔려 있다면
node --version
node script.js          # JS 파일 실행

# 브라우저에서 시도
# 1) 콘솔 (DevTools 의 Console 패널)
# 2) HTML 파일에 <script> 로 포함

Same commands on Windows and macOS. Install from nodejs.org or via a version manager (nvm, fnm, Volta).

11. Common Pitfalls

The difference between == and === — == performs type coercion, so 0 == "0" is true. New code should default to ===.

this changing target depending on call style — pin it with arrow functions or bind.

Race conditions from trying to handle async results synchronously — Promise.all and Promise.allSettled are alternatives.

Floating-point precision — 0.1 + 0.2 !== 0.3. For money or decimal arithmetic, scale to integers or use BigInt / Decimal libraries.

Hoisting — var and function declarations are hoisted. let and const have a TDZ (Temporal Dead Zone) and throw if accessed before declaration.

Closing thoughts

JavaScript is a living language that has been updated yearly across 30 years of history. Awkward early spots like var, ==, and hoisting linger, but the combination of post-ES2015 const / let, ===, arrow functions, async / await, ES modules, and destructuring forms the modern foundation. Adding TypeScript's static types on top significantly reduces friction in large codebases.

Next

• http-rest
• url-anatomy

ECMAScript Spec (TC39) · TC39 proposals · MDN JavaScript · javascript.info · Node.js · Deno · Bun · Brendan Eich JavaScript at Ten Years for reference.