Principles of JavaScriptPrinciples of JavaScript

What will this article teach you?What will this article teach you?

Each chapter starts from "being able to recognize code" — you don't need to write it by hand. Whenever you encounter code you don't understand, come back and use this as a reference.Each chapter starts from "being able to recognize code" — you don't need to write it by hand. Whenever you encounter code you don't understand, come back and use this as a reference.

------

1. What Is JavaScript1. What Is JavaScript

1.1 From "Static Pages" to "Dynamic Applications"1.1 From "Static Pages" to "Dynamic Applications"

Understanding the relationship between the three in one sentence:Understanding the relationship between the three in one sentence:

1.2 Motivation for Vibecodinging Also Require Understanding JavaScript1.2 Motivation for Vibecodinging Also Require Understanding JavaScript

1.3 A Sneak Peek: Real AI-Generated Code1.3 A Sneak Peek: Real AI-Generated Code

Before diving deep, let's look at a real piece of AI-generated code. Don't worry about understanding it all — just get a general impression. We'll explain each part later.Before diving deep, let's look at a real piece of AI-generated code. Don't worry about understanding it all — just get a general impression. We'll explain each part later.

Scenario: Build a "click a button to switch background color" featureScenario: Build a "click a button to switch background color" feature

// Define a set of colors const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4'] let currentIndex = 0 // Find the button on the page const button = document.querySelector('#changeBtn') // Add a click event to the button button.addEventListener('click', () => { currentIndex = (currentIndex + 1) % colors.length document.body.style.backgroundColor = colors[currentIndex] })

What does this code do?What does this code do?

------

2. Data: Variables and Data Types2. Data: Variables and Data Types

2.1 Variables: Giving Data a Name2.1 Variables: Giving Data a Name

A variable is like a labeled box — you can put data inside it and later retrieve it by the label.A variable is like a labeled box — you can put data inside it and later retrieve it by the label.

const name = "Zhang San" // This name won't change, use const let age = 25 // Age might change, use let

Why distinguish between const and let?Why distinguish between const and let?

Think of it this way: your ID number (const) will never change in your lifetime, but your age (let) changes every year. JavaScript lets you use different keywords to express this intent of "changeable vs. unchangeable."Think of it this way: your ID number (const) will never change in your lifetime, but your age (let) changes every year. JavaScript lets you use different keywords to express this intent of "changeable vs. unchangeable."

👇 Try it yourself: Modify the code below to see the difference between const and let👇 Try it yourself: Modify the code below to see the difference between const and let

2.2 Data Types: The Kinds of "Things" in JavaScript2.2 Data Types: The Kinds of "Things" in JavaScript

JavaScript categorizes data into several types. The three most commonly used are:JavaScript categorizes data into several types. The three most commonly used are:

Two special values worth knowing:Two special values worth knowing:

• undefined → A variable has been declared but not yet assigned a valueundefined → A variable has been declared but not yet assigned a value
• null → Intentionally set to empty (meaning "there is no value here")null → Intentionally set to empty (meaning "there is no value here")

2.3 Objects and Arrays: Organizing Data2.3 Objects and Arrays: Organizing Data

Object = a set of named properties (like a personal information card)Object = a set of named properties (like a personal information card)

const user = { name: "Zhang San", age: 25, isVIP: true } // Use dot notation to access properties console.log(user.name) // "Zhang San" console.log(user.age) // 25

Array = an ordered collection of data (like a list)Array = an ordered collection of data (like a list)

const colors = ['Red', 'Green', 'Blue'] // Access by index (starting from 0) console.log(colors[0]) // "Red" console.log(colors[1]) // "Green"

Nested structures: objects inside arrays, arrays inside objectsNested structures: objects inside arrays, arrays inside objects

This is the most common data structure in AI-generated code:This is the most common data structure in AI-generated code:

const todos = [ { id: 1, text: "Learn JavaScript", done: false }, { id: 2, text: "Build a project", done: true }, { id: 3, text: "Write documentation", done: false } ] // Access: first take item 0 of the array, then its text property console.log(todos[0].text) // "Learn JavaScript"

2.4 Value vs. Reference: A Common Pitfall2.4 Value vs. Reference: A Common Pitfall

This is one of the most common issues beginners run into!This is one of the most common issues beginners run into!

Primitive types (string, number, boolean) assignment = copying a brand new piece of data:Primitive types (string, number, boolean) assignment = copying a brand new piece of data:

let a = 10 let b = a // b gets a copy of a b = 20 console.log(a) // 10 (a is unaffected)

Object and array assignment = copying the "address" (both point to the same thing):Object and array assignment = copying the "address" (both point to the same thing):

let user1 = { name: "Zhang San" } let user2 = user1 // user2 points to the same object user2.name = "Li Si" // modifying user2 affects user1 console.log(user1.name) // "Li Si" (user1 changed too!)

Why create copies?Why create copies?

In React/Vue, directly mutating data prevents the UI from updating. That's why you often see [...array] or {...obj} in AI code — it's creating a copy to avoid mutual interference.In React/Vue, directly mutating data prevents the UI from updating. That's why you often see [...array] or {...obj} in AI code — it's creating a copy to avoid mutual interference.

// Create a copy using the spread operator const arr1 = [1, 2, 3] const arr2 = [...arr1] // Create a new array arr2.push(4) console.log(arr1) // [1, 2, 3] (unaffected) console.log(arr2) // [1, 2, 3, 4]

👇 Try it yourself: Observe how the original data changes when you modify a copy👇 Try it yourself: Observe how the original data changes when you modify a copy

2.5 Destructuring and Spread: Modern JavaScript Shortcuts2.5 Destructuring and Spread: Modern JavaScript Shortcuts

These two syntax patterns are everywhere in AI code — if you don't recognize them, you can't read the code.These two syntax patterns are everywhere in AI code — if you don't recognize them, you can't read the code.

Destructuring assignment: quickly extract data from objects or arraysDestructuring assignment: quickly extract data from objects or arrays

const user = { name: "Zhang San", age: 25, city: "Beijing" } // Traditional approach (cumbersome) const name = user.name const age = user.age // Destructuring (concise) const { name, age } = user // Same result, but done in one line

Spread operator: copy and extend dataSpread operator: copy and extend data

// Copy an array and add new elements const arr1 = [1, 2, 3] const arr2 = [...arr1, 4, 5] // [1, 2, 3, 4, 5] // Copy an object and add new properties const user1 = { name: "Zhang San", age: 25 } const user2 = { ...user1, city: "Beijing" } // { name: "Zhang San", age: 25, city: "Beijing" }

------

3. Logic: Functions and Flow Control3. Logic: Functions and Flow Control

3.1 Conditionals: If... Then... Otherwise...3.1 Conditionals: If... Then... Otherwise...

if/else: the most basic conditionalif/else: the most basic conditional

const age = 18 if (age >= 18) { console.log("Adult") } else { console.log("Minor") }

Ternary operator: shorthand if/elseTernary operator: shorthand if/else

// Full form (4 lines) let message if (age >= 18) { message = "Adult" } else { message = "Minor" } // Ternary operator (1 line) const message = age >= 18 ? "Adult" : "Minor" // Format: condition ? value_if_true : value_if_false

&& short-circuit: common in React code&& short-circuit: common in React code

// Only show the user panel when isLoggedIn is true isLoggedIn && <UserPanel /> // Equivalent to if (isLoggedIn) { return <UserPanel /> }

3.2 Functions: Packaging Operations3.2 Functions: Packaging Operations

Function = a recipe for a dishFunction = a recipe for a dish

• Defining a function = writing down the recipeDefining a function = writing down the recipe
• Calling a function = cooking according to the recipeCalling a function = cooking according to the recipe
• Parameters = ingredientsParameters = ingredients
• Return value = the finished dishReturn value = the finished dish

// Define a function (write down the recipe) function greet(name) { return "Hello " + name } // Call the function (cook according to the recipe) console.log(greet("Zhang San")) // "Hello Zhang San" console.log(greet("Li Si")) // "Hello Li Si"

Three forms, recognizable at a glance:Three forms, recognizable at a glance:

// 1. function declaration (traditional) function greet(name) { return "Hello " + name } // 2. Arrow function (most common in AI code) const greet = (name) => { return "Hello " + name } // 3. Arrow function shorthand (when there's only one line) const greet = (name) => "Hello " + name

👇 Try it yourself: Enter different names and see how the function works👇 Try it yourself: Enter different names and see how the function works

3.3 Array Methods: Power Tools for Processing Lists3.3 Array Methods: Power Tools for Processing Lists

In React/Vue, almost every list rendering uses these methods.In React/Vue, almost every list rendering uses these methods.

const todos = [ { id: 1, text: "Study", done: false }, { id: 2, text: "Work", done: true } ] // .map(): transform each item in the array into something else const texts = todos.map(todo => todo.text) // ["Study", "Work"] // .filter(): filter out items that match a condition const unfinished = todos.filter(todo => !todo.done) // [{ id: 1, text: "Study", done: false }] // .find(): find the first item that matches a condition const found = todos.find(todo => todo.id === 1) // { id: 1, text: "Study", done: false }

3.4 Scope: The "Visibility Range" of Variables3.4 Scope: The "Visibility Range" of Variables

Use the "room" analogy:Use the "room" analogy:

• Variables inside a function are like things in a room — invisible from outsideVariables inside a function are like things in a room — invisible from outside
• But people inside the room can see things in the hallway (outer scope)But people inside the room can see things in the hallway (outer scope)

const global = "Global variable" // Something in the hallway function room() { const local = "Something in the room" // Something in the room console.log(global) // ✅ Can see the hallway } console.log(local) // ❌ Error! Can't see into the room from outside

Core intuition: Where code is written determines what variables it can see.Core intuition: Where code is written determines what variables it can see.

👇 Try it yourself: Click on different scopes to see which variables are accessible👇 Try it yourself: Click on different scopes to see which variables are accessible

3.5 Closures: Functions "Remember" the Environment They Were Born In3.5 Closures: Functions "Remember" the Environment They Were Born In

Don't treat this as an isolated concept — understand it from a concrete scenario:Don't treat this as an isolated concept — understand it from a concrete scenario:

function setupCounter() { let count = 0 // This variable is inside the function return { add: () => { count++; return count }, getCount: () => count } } const counter = setupCounter() console.log(counter.add()) // 1 console.log(counter.add()) // 2 console.log(counter.getCount()) // 2

Core intuition: When a function is created, it "remembers" the variables around it, even after the outer function has finished executing.Core intuition: When a function is created, it "remembers" the variables around it, even after the outer function has finished executing.

👇 Try it yourself: Observe how closures let functions "remember" state👇 Try it yourself: Observe how closures let functions "remember" state

3.6 this: Whoever Calls the Function3.6 this: Whoever Calls the Function

No complex binding rules — just the most common scenarios:No complex binding rules — just the most common scenarios:

Scenario 1: In an object's method, this points to that objectScenario 1: In an object's method, this points to that object

const user = { name: "Zhang San", sayHi() { console.log("Hello, I'm " + this.name) // this points to user } } user.sayHi() // "Hello, I'm Zhang San"

Scenario 2: In event listeners, this points to the element that fired the eventScenario 2: In event listeners, this points to the element that fired the event

button.addEventListener('click', function() { console.log(this) // this points to the button element }) // But arrow functions don't change this button.addEventListener('click', () => { console.log(this) // this points to the outer this })

------

4. Interaction: DOM, Events, and Asynchrony4. Interaction: DOM, Events, and Asynchrony

4.1 DOM: How JavaScript Sees a Web Page4.1 DOM: How JavaScript Sees a Web Page

In JavaScript's view, a web page is a "tree," and every HTML tag is a "node" on that tree.In JavaScript's view, a web page is a "tree," and every HTML tag is a "node" on that tree.

<html> <body> <h1>Title</h1> <p>Paragraph</p> <ul> <li>Item 1</li> <li>Item 2</li> </ul> </body> </html>

JS controlling the page = finding nodes + modifying nodes + creating/deleting nodesJS controlling the page = finding nodes + modifying nodes + creating/deleting nodes

👇 Try it yourself: Click on nodes to see how the DOM tree is organized👇 Try it yourself: Click on nodes to see how the DOM tree is organized

4.2 Finding and Modifying Elements4.2 Finding and Modifying Elements

Finding elements:Finding elements:

// Find by CSS selector (most common) const title = document.querySelector('h1') // Find the first h1 const button = document.querySelector('#btn') // Find the element with id="btn" const items = document.querySelectorAll('.item') // Find all elements with class="item"

Modifying elements:Modifying elements:

// Change text title.textContent = "New Title" // Change styles element.style.color = "red" element.style.fontSize = "20px" // Change CSS classes element.classList.add('active') // Add a class element.classList.remove('hidden') // Remove a class element.classList.toggle('open') // Toggle a class (add if absent, remove if present)

4.3 Events: When the User Does Something...4.3 Events: When the User Does Something...

addEventListener: add an event listener to an elementaddEventListener: add an event listener to an element

button.addEventListener('click', () => { console.log("Button was clicked") })

Common events:Common events:

Event object: getting more informationEvent object: getting more information

input.addEventListener('input', (e) => { console.log(e.target.value) // Get the input field's value e.preventDefault() // Prevent default behavior (e.g., page refresh on form submit) })

4.4 Asynchrony: Why Some Operations Don't Complete Immediately4.4 Asynchrony: Why Some Operations Don't Complete Immediately

Restaurant analogy:Restaurant analogy:

After ordering, you don't have to stand at the kitchen door waiting — you can do other things, and the server will bring the food when it's ready.After ordering, you don't have to stand at the kitchen door waiting — you can do other things, and the server will bring the food when it's ready.

Most common scenario: fetching data from a serverMost common scenario: fetching data from a server

// Synchronous approach (blocks the page — don't use) const data = fetch('/api/data') // ❌ Writing it this way will block // Asynchronous approach (correct) async function loadData() { try { const response = await fetch('/api/data') const data = await response.json() console.log(data) } catch (error) { console.error('Error:', error) } }

async/await syntax:async/await syntax:

• async → Marks this function as containing asynchronous operationsasync → Marks this function as containing asynchronous operations
• await → Wait for this operation to complete (without blocking the page)await → Wait for this operation to complete (without blocking the page)
• try/catch → Handle potential errorstry/catch → Handle potential errors

👇 Try it yourself: Observe the execution order of asynchronous operations👇 Try it yourself: Observe the execution order of asynchronous operations

4.5 Event Loop: How JavaScript Actually Works4.5 Event Loop: How JavaScript Actually Works

No jargon like "microtasks/macrotasks" — understand it with a simple model:No jargon like "microtasks/macrotasks" — understand it with a simple model:

JS is a "single-person workstation" — it can only do one thing at a time, but it has a "sticky note board" (task queue).JS is a "single-person workstation" — it can only do one thing at a time, but it has a "sticky note board" (task queue).

When it encounters an operation that requires waiting (network requests, timers), JS doesn't just wait idly — instead, it sticks a note about "what to do when this is ready" onto the board and continues executing. Only when the current work is done does it check the board.When it encounters an operation that requires waiting (network requests, timers), JS doesn't just wait idly — instead, it sticks a note about "what to do when this is ready" onto the board and continues executing. Only when the current work is done does it check the board.

console.log("1") setTimeout(() => console.log("2"), 0) // Even with 0ms delay, it gets deferred console.log("3") // Output: 1, 3, 2 (not 1, 2, 3!)

Why?Why?

1. Execute console.log("1") → outputs 1Execute console.log("1") → outputs 1
2. Encounter setTimeout → stick the callback on the board, continueEncounter setTimeout → stick the callback on the board, continue
3. Execute console.log("3") → outputs 3Execute console.log("3") → outputs 3
4. Current code is done, check the boardCurrent code is done, check the board
5. Execute the setTimeout callback → outputs 2Execute the setTimeout callback → outputs 2

👇 Try it yourself: Observe the execution order of code👇 Try it yourself: Observe the execution order of code

📖 Konsep Penting📖 Core Concept

If the page renders before data is fetched in AI code, tell the AI: "The data hasn't finished loading but the page is already rendering — add a loading state and only render once the data arrives."If the page renders before data is fetched in AI code, tell the AI: "The data hasn't finished loading but the page is already rendering — add a loading state and only render once the data arrives."

4.6 Modules: import and export4.6 Modules: import and export

The first line of AI-generated React/Vue code is almost always import.The first line of AI-generated React/Vue code is almost always import.

import = bring in functionality from another fileimport = bring in functionality from another file

javascript 📋 Salin📋 Copy

// Import a function from a utility file import { formatDate } from './utils' // Import from a third-party package import React from 'react' import { useState } from 'react'

export = expose functionality for others to useexport = expose functionality for others to use

javascript 📋 Salin📋 Copy

// utils.js export function formatDate(date) { // ... } // Or default export export default function formatDate(date) { // ... }

npm packages = pre-built tools by others, use them after installingnpm packages = pre-built tools by others, use them after installing

javascript 📋 Salin📋 Copy

// Install package: npm install lodash // Use the package import _ from 'lodash'

📖 Konsep Penting📖 Core Concept

- See import → Bringing in functionality from another file - See export → Exposing functionality for others to use - See from 'react' → Importing from the React package - See from './utils' → Importing from a local file- See import → Bringing in functionality from another file - See export → Exposing functionality for others to use - See from 'react' → Importing from the React package - See from './utils' → Importing from a local file

------

5. Practical Skills: Reading Code, Understanding Errors, Describing Precisely5. Practical Skills: Reading Code, Understanding Errors, Describing Precisely

💡 Tips Praktis💡 Pro Tip

You've learned all this syntax — now how do you actually use it when you get AI-generated code? How do you quickly read through code? What do you do when you encounter errors? How do you get AI to accurately fix your code?You've learned all this syntax — now how do you actually use it when you get AI-generated code? How do you quickly read through code? What do you do when you encounter errors? How do you get AI to accurately fix your code?

5.1 How to Read AI-Generated Code5.1 How to Read AI-Generated Code

The four-step method:The four-step method:

Step	What to Look At	Example
Step 1: Overall structure	How many functions? What does each do?	loadData() loads data, renderList() renders the list
Step 2: Find the entry point	Where does the program start executing?	addEventListener('click', ...) starts on click
Step 3: Trace the data flow	Where does data come from? Where does it go?	Fetch from API → parse → render to page
Step 4: Examine the logic	How does each function handle things?	Loops, conditionals, calculations

A complete "reading demo" using the code example from Chapter 1:A complete "reading demo" using the code example from Chapter 1:

javascript 📋 Salin📋 Copy

// Step 1: Overall structure // - An array of colors // - A variable tracking the current index // - A click event on a button // Step 2: Entry point // button.addEventListener('click', ...) → executes when the button is clicked // Step 3: Data flow // colors (color array) → currentIndex (current index) → backgroundColor (background color) // Step 4: Detailed logic // currentIndex = (currentIndex + 1) % colors.length // This formula means: increment by 1 each time, but cycle back when reaching the array length

5.2 Common Error Quick Reference5.2 Common Error Quick Reference

Error	Plain English Explanation	How to Tell AI
TypeError: Cannot read properties of undefined	You're trying to access a property on something that doesn't exist	"Line X has an error — a certain variable is undefined, check its assignment logic"
ReferenceError: xxx is not defined	You used a variable name that hasn't been declared	"Variable xxx is not defined — check for typos or missing imports"
TypeError: xxx is not a function	You're calling something as a function that isn't one	"xxx is not a function — check its type and where it comes from"
SyntaxError: Unexpected token	Syntax error (mismatched brackets, missing comma, etc.)	"Line X has a syntax error — check brackets and punctuation"
CORS error	The browser blocked a cross-origin request	"Encountered a CORS error — need to configure cross-origin resource sharing"
404 Not Found	The requested resource doesn't exist	"The API returned 404 — check if the endpoint URL is correct"

5.3 How to Describe Problems Precisely5.3 How to Describe Problems Precisely

The gap between beginners and experienced developers often comes down to the precision of problem descriptions.The gap between beginners and experienced developers often comes down to the precision of problem descriptions.

❌ Poor Description	✅ Good Description
"The code has a bug"	"When clicking the delete button, it deletes the last item instead of the current one"
"The styling is wrong"	"The title should be centered but it's currently left-aligned"
"The data won't display"	"The fetch request returns data (visible in the console), but the page isn't re-rendering"
"Add a feature"	"Add a search box to the user list page that filters the list in real-time as the user types, fuzzy-matching against the name field"
"Clicking does nothing"	"Clicking the button throws 'Cannot read property of undefined' in the console, error on line X"

A practical exercise:A practical exercise:

javascript 📋 Salin📋 Copy

// Buggy code function deleteTodo(index) { todos.splice(index, 1) // Always deletes the last item } // Observed behavior: no matter which delete button you click, it always deletes the last item

❌ Poor description: "The delete function has a bug"❌ Poor description: "The delete function has a bug"

✅ Good description: "When clicking the delete button, it deletes the last item instead of the current one. The code uses splice(index, 1), but the index might be incorrect. It should be changed to match deletion by each item's unique id."✅ Good description: "When clicking the delete button, it deletes the last item instead of the current one. The code uses splice(index, 1), but the index might be incorrect. It should be changed to match deletion by each item's unique id."

5.4 What You Should Now Be Able to Recognize5.4 What You Should Now Be Able to Recognize

• See const/let → Know whether a variable can be reassignedSee const/let → Know whether a variable can be reassigned
• See {} → Object / See [] → ArraySee {} → Object / See [] → Array
• See {...obj} or [...arr] → Creating a copySee {...obj} or [...arr] → Creating a copy
• See function or => → Defining a reusable block of operationsSee function or => → Defining a reusable block of operations
• See if/else or ? : → Code is making a decisionSee if/else or ? : → Code is making a decision
• See .map() / .filter() → Transforming or filtering an arraySee .map() / .filter() → Transforming or filtering an array
• See document.querySelector → Looking up a page elementSee document.querySelector → Looking up a page element
• See addEventListener → Listening for user actionsSee addEventListener → Listening for user actions
• See async/await → Waiting for a time-consuming operationSee async/await → Waiting for a time-consuming operation
• See import/export → Importing or exporting modulesSee import/export → Importing or exporting modules
• Encounter an error → Can understand the gist and describe it precisely to AIEncounter an error → Can understand the gist and describe it precisely to AI

If you carefully read the "deep dive" sections of each chapter, you've also grasped these core concepts:If you carefully read the "deep dive" sections of each chapter, you've also grasped these core concepts:

• Value vs. Reference: Primitives copy values, objects/arrays copy addressesValue vs. Reference: Primitives copy values, objects/arrays copy addresses
• Scope and Closures: Functions can "remember" the variables from where they were bornScope and Closures: Functions can "remember" the variables from where they were born
• The Essence of this: Depends on who calls the function, not where it's writtenThe Essence of this: Depends on who calls the function, not where it's written
• Event Loop: JS is single-threaded and uses a task queue to stay "non-blocking"Event Loop: JS is single-threaded and uses a task queue to stay "non-blocking"

These concepts will help you locate problems faster.These concepts will help you locate problems faster.

📖 Konsep Penting📖 Core Concept

- "Line X throws error XXX — help me figure out what's wrong" - "This function's logic is XXX, but the result is wrong — it should be XXX" - "I want to modify the XXX feature — the specific requirements are XXX"- "Line X throws error XXX — help me figure out what's wrong" - "This function's logic is XXX, but the result is wrong — it should be XXX" - "I want to modify the XXX feature — the specific requirements are XXX"

← SebelumnyaPrevious3-browser-and-frontend/html-css-layout3-browser-and-frontend/html-css-layout SelanjutnyaNext →3-browser-and-frontend/javascript-runtime3-browser-and-frontend/javascript-runtime