After finishing this lesson, you will be able to confidently do the following 3 things.

• ▸✅ var · let · const differences + hoisting behavior
• ▸✅ 7 types + the typeof trap (typeof null === 'object')
• ▸✅ Script loading differences (defer · async · module)

Keep the learning objectives as a checklist and close the lesson once you can answer all of them.

Core in one line

JavaScript = a programming language that makes web pages dynamic. Created by Brendan Eich in just 10 days in 1995. Now one of the most widely used languages in the world.

Why is it called JavaScript

Despite the name, it has almost nothing to do with Java. When Java was hot in 1995, a similar name was attached for marketing reasons. In reality it is a functional language closer to Lisp and Scheme than to Java.

> 💡 Java and JavaScript = as unrelated as "ham and hamster".

The 3 faces of JavaScript

It originally ran only inside the browser. Now:

1. Browser — dynamic behavior: clicks, input, animations, etc.
2. Server (Node.js, 2009~) — back-end development, just like Java or Python
3. Mobile & Desktop — app development with React Native and Electron

Front-end, back-end, and mobile, all with the same language. That is JavaScript's overwhelming strength.

Variables — let · const · var

const PI = 3.14;        // 🔒 Cannot be changed once set (immutable)
let count = 0;          // 🔓 Can be changed
count = 10;             // OK — reassigned because it's let

var oldStyle = "Old style";   // ⚠️ Old keyword, do not use

console.log(PI, count, oldStyle);   // 3.14 10 "Old style"

// Error if you try:
// PI = 3.15;   // ❌ TypeError: Assignment to constant variable.

Rule: Always reach for const first. Use let when reassignment is needed. var is only for pre-2015 code.

Primitive types

const n = 42;                // number  — integer·float
const s = "hello";           // string  — string
const b = true;              // boolean — true/false
const u = undefined;         // no value (declared only)
const x = null;              // intentionally empty
const arr = [1, 2, 3];       // array   — array (a type of object)
const obj = { name: "Hong" };  // object  — object

// 🔍 Use typeof to check what type each is
console.log(typeof n);     // "number"
console.log(typeof s);     // "string"
console.log(typeof b);     // "boolean"
console.log(typeof u);     // "undefined"
console.log(typeof x);     // "object"   ← null's famous bug
console.log(typeof arr);   // "object"   ← arrays are also objects
console.log(typeof obj);   // "object"

Functions are values too — store them in variables and pass them as arguments:

const greet = (name) => `Hi, ${name}!`;
console.log(greet("Hong Gil-dong"));   // "Hi, Hong Gil-dong!"

The most confusing part — == vs ===

console.log("5" == 5);    // true   ← == automatically matches types ("5" → 5)
console.log("5" === 5);   // false  ← === requires types to be the same (string ≠ number)
console.log(0 == false);  // true   ← false is converted to 0

console.log(0 === false); // false ← types are different (number vs boolean)

`==` compares *after coercing types automatically* — often produces *unexpected* results. `===` requires *both value and type* to match. **Always use `===`**.

## Asynchronous — JavaScript's true strength

JS is *single-threaded* yet fast. The secret is the *event loop* + *async*:

console.log("1"); // ① Execute immediately

setTimeout(() => console.log("2"), 0); // ⏳ To the queue — even 0 seconds means "later"

console.log("3"); // ② Execute immediately

// 📤 Output order: 1, 3, 2

// → Synchronous code (1, 3) finishes first, then the setTimeout callback (2) executes

`setTimeout` goes into the *queue*, and only executes after the current code finishes. In between, other work is handled *without blocking*.

**async/await** makes asynchronous code look synchronous:

async function fetchUser(id) {

const res = await fetch(/api/users/${id});

const data = await res.json();

return data;

}

``

While await` is waiting, JS does other work. Even 10,000 concurrent requests are no problem.

Summary

• ▸Dynamic typing: any value in any variable
• ▸Async-first: async/await is the standard
• ▸Functions as first-class citizens: treated like values
• ▸=== instead of == — always

JS evolved from a ridiculed language into one that rules the world. You simply cannot do modern web development without it.

Knowing the concepts from this lesson lets you give AI specific, precise instructions. Instead of a vague 'fix this,' you make vocabulary-backed requests — and that is the starting point for saving tokens.

• ▸'Refactor this JavaScript code by applying Introduction to JavaScript concepts'
• ▸'Give me 3 points about Introduction to JavaScript that come up frequently in interviews'
• ▸'Check this code for anti-patterns related to Introduction to JavaScript'

Why does this save tokens

When you don't know the concepts, you have to ask 'What does that mean?' again after receiving an AI answer. That follow-up question is what eats up tokens. Learn the concepts once and the conversation ends in a single exchange.