JavaScript Tutorial (Beginner to Advanced)

∙ Chapter 001

JS Tutorial

Start here: what JavaScript is, where it runs, and how to follow this tutorial step-by-step.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-tutorial.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`console.log('Welcome to JavaScript');`	Logs output (use DevTools console).
`console.log('Tip: edit the code and run again');`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript tutorial learn javascript js basics beginner javascript

∙ Chapter 002

JS Introduction

JavaScript adds logic and interactivity to web pages (and can also run on servers).

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-introduction.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`console.log('JavaScript = logic + interaction');`	Logs output (use DevTools console).
`console.log('It runs in the browser and beyond');`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

what is javascript javascript introduction js basics js for beginners

∙ Chapter 003

JS Where To

You can write JavaScript inside a <script> tag, or in an external .js file linked in HTML.

📝Syntax

<script src="app.js" defer></script>
<script>
  // inline JS
</script>

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-where-to.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`document.getElementById('btn').addEventListener('click', () => {`	Defines a function.
`document.getElementById('msg').textContent = 'Loaded JS (inline)';`	Finds an element in the DOM.
`});`	JavaScript statement.

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript where to script tag external javascript file defer

∙ Chapter 004

JS Output

JavaScript can output using console.log(), updating the DOM, alerts, and more.

📝Syntax

console.log('Hello');
document.querySelector('#out').textContent = 'Hello';

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-output.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`console.log('Console output');`	Logs output (use DevTools console).
`const sum = 7 + 5;`	Declares a variable.
`console.log('7 + 5 =', sum);`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript output console.log dom output alert

∙ Chapter 005

JS Syntax

JavaScript syntax includes statements, expressions, blocks {}, and semicolons (optional but recommended for beginners).

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-syntax.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const score = 86;`	Declares a variable.
`if (score >= 75) {`	Conditional branch.
`console.log('Pass');`	Logs output (use DevTools console).
`} else {`	JavaScript statement.
`console.log('Practice more');`	Logs output (use DevTools console).
`}`	Ends a block.

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript syntax statements expressions blocks

∙ Chapter 006

JS Syntax (Syntax)

JavaScript syntax includes statements, expressions, blocks {}, and semicolons (optional but recommended for beginners).

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-syntax.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const score = 86;`	Declares a variable.
`if (score >= 75) {`	Conditional branch.
`console.log('Pass');`	Logs output (use DevTools console).
`} else {`	JavaScript statement.
`console.log('Practice more');`	Logs output (use DevTools console).
`}`	Ends a block.

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript syntax statements expressions blocks

∙ Chapter 007

JS Statements

A statement is an instruction like variable declarations, if/else, loops, and function calls.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-statements.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`let x = 2;`	Declares a variable.
`x = x + 3;`	JavaScript statement.
`console.log('x =', x);`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript statements if statement for statement expression vs statement

∙ Chapter 008

JS Comments

Use // for single-line comments and /* */ for multi-line comments.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-comments.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const price = 100;`	Declares a variable.
`const tax = 0.18;`	Declares a variable.
`console.log(price + price * tax);`	Logs output (use DevTools console).
`/*`	Comment block.
`Tip: comments are for humans.`	JavaScript statement.
`*/`	JavaScript statement.

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript comments single line comment multi line comment

∙ Chapter 009

JS Variables

Variables store values. Use let/const in modern JavaScript (avoid var for beginners).

📝Syntax

let count = 0;
const appName = 'ManaCoding';

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-variables.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`let name = 'Mana';`	Declares a variable.
`let level = 1;`	Declares a variable.
`console.log(name, level);`	Logs output (use DevTools console).
`level++;`	JavaScript statement.
`console.log('Level up:', level);`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript variables let const var

∙ Chapter 010

JS Let

let creates a block-scoped variable that you can reassign.

📝Syntax

let count = 0;
const appName = 'ManaCoding';

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-let.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`let count = 0;`	Declares a variable.
`count = count + 1;`	JavaScript statement.
`console.log('count =', count);`	Logs output (use DevTools console).
`if (true) {`	Conditional branch.
`let inside = 'block';`	Declares a variable.
`console.log(inside);`	Logs output (use DevTools console).
`}`	Ends a block.

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript let block scope reassign

∙ Chapter 011

JS Const

const creates a variable binding that cannot be reassigned (objects can still be mutated).

📝Syntax

let count = 0;
const appName = 'ManaCoding';

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-const.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const app = { name: 'ManaCoding', visits: 0 };`	Declares a variable.
`app.visits++;`	JavaScript statement.
`console.log(app);`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript const immutable binding object mutation

∙ Chapter 012

JS Types

JavaScript has primitives (string, number, boolean, null, undefined, symbol, bigint) and objects.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-types.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const values = ['hi', 123, true, null, undefined, { a: 1 }, [1,2]];`	Declares a variable.
`for (const v of values) {`	Loop: repeats code.
`console.log(String(v), '->', typeof v);`	Logs output (use DevTools console).
`}`	Ends a block.

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript types typeof primitives objects

∙ Chapter 013

JS Operators

Operators let you do math, compare values, and combine boolean logic.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-operators.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const a = 7;`	Declares a variable.
`const b = 3;`	Declares a variable.
`console.log('a+b =', a + b);`	Logs output (use DevTools console).
`console.log('a>b =', a > b);`	Logs output (use DevTools console).
`console.log('a===7 && b>0 =', a === 7 && b > 0);`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript operators arithmetic comparison logical operators

∙ Chapter 014

JS Operators (Operators)

Operators let you do math, compare values, and combine boolean logic.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-operators.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const a = 7;`	Declares a variable.
`const b = 3;`	Declares a variable.
`console.log('a+b =', a + b);`	Logs output (use DevTools console).
`console.log('a>b =', a > b);`	Logs output (use DevTools console).
`console.log('a===7 && b>0 =', a === 7 && b > 0);`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript operators arithmetic comparison logical operators

∙ Chapter 015

JS If Else

if/else runs different code depending on a condition.

📝Syntax

if (condition) {
  // ...
} else {
  // ...
}

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-if-else.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const score = 72;`	Declares a variable.
`if (score >= 75) {`	Conditional branch.
`console.log('Pass');`	Logs output (use DevTools console).
`} else {`	JavaScript statement.
`console.log('Try again');`	Logs output (use DevTools console).
`}`	Ends a block.

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript if else conditions boolean logic

∙ Chapter 016

JS If Else (If Else)

if/else runs different code depending on a condition.

📝Syntax

if (condition) {
  // ...
} else {
  // ...
}

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-if-else.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const score = 72;`	Declares a variable.
`if (score >= 75) {`	Conditional branch.
`console.log('Pass');`	Logs output (use DevTools console).
`} else {`	JavaScript statement.
`console.log('Try again');`	Logs output (use DevTools console).
`}`	Ends a block.

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript if else conditions boolean logic

∙ Chapter 017

JS Loops

Loops repeat work: for, while, and for..of are the most common.

📝Syntax

for (let i = 0; i < 3; i++) {
  console.log(i);
}

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-loops.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`let sum = 0;`	Declares a variable.
`for (let i = 1; i <= 5; i++) {`	Loop: repeats code.
`sum += i;`	JavaScript statement.
`}`	Ends a block.
`console.log('sum =', sum);`	Logs output (use DevTools console).

🏢Real-world

1Model entities (User, Cart, Product) with methods.
2Organize large codebases cleanly.

⚠Common Mistakes

1Overusing classes for everything (simple objects/functions are fine).
2Confusing `this` inside callbacks.

✅Best Practices

1Start simple: plain objects first.
2Use arrow functions for callbacks to avoid binding issues.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript loops for loop while loop for of

∙ Chapter 018

JS Loops (Loops)

Loops repeat work: for, while, and for..of are the most common.

📝Syntax

for (let i = 0; i < 3; i++) {
  console.log(i);
}

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-loops.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`let sum = 0;`	Declares a variable.
`for (let i = 1; i <= 5; i++) {`	Loop: repeats code.
`sum += i;`	JavaScript statement.
`}`	Ends a block.
`console.log('sum =', sum);`	Logs output (use DevTools console).

🏢Real-world

1Model entities (User, Cart, Product) with methods.
2Organize large codebases cleanly.

⚠Common Mistakes

1Overusing classes for everything (simple objects/functions are fine).
2Confusing `this` inside callbacks.

✅Best Practices

1Start simple: plain objects first.
2Use arrow functions for callbacks to avoid binding issues.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript loops for loop while loop for of

∙ Chapter 019

JS Iterations

Iterate arrays/sets/maps using for..of, forEach, and iterators.

📝Syntax

for (let i = 0; i < 3; i++) {
  console.log(i);
}

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-iterations.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const arr = ['A', 'B', 'C'];`	Declares a variable.
`for (const x of arr) {`	Loop: repeats code.
`console.log(x);`	Logs output (use DevTools console).
`}`	Ends a block.

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript iteration for of foreach iterators

∙ Chapter 020

JS Loops (Loops)

Loops repeat work: for, while, and for..of are the most common.

📝Syntax

for (let i = 0; i < 3; i++) {
  console.log(i);
}

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-loops.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`let sum = 0;`	Declares a variable.
`for (let i = 1; i <= 5; i++) {`	Loop: repeats code.
`sum += i;`	JavaScript statement.
`}`	Ends a block.
`console.log('sum =', sum);`	Logs output (use DevTools console).

🏢Real-world

1Model entities (User, Cart, Product) with methods.
2Organize large codebases cleanly.

⚠Common Mistakes

1Overusing classes for everything (simple objects/functions are fine).
2Confusing `this` inside callbacks.

✅Best Practices

1Start simple: plain objects first.
2Use arrow functions for callbacks to avoid binding issues.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript loops for loop while loop for of

∙ Chapter 021

JS Strings

Strings are text. Use template literals (`...`) for easy formatting.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-strings.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const name = 'Mana';`	Declares a variable.
`const streak = 7;`	Declares a variable.
console.log(`${name} has a ${streak}-day streak`);	Logs output (use DevTools console).
`console.log('length =', name.length);`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript strings template literal string methods

∙ Chapter 022

JS Strings (Strings)

Strings are text. Use template literals (`...`) for easy formatting.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-strings.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const name = 'Mana';`	Declares a variable.
`const streak = 7;`	Declares a variable.
console.log(`${name} has a ${streak}-day streak`);	Logs output (use DevTools console).
`console.log('length =', name.length);`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript strings template literal string methods

∙ Chapter 023

JS Numbers

Numbers are used for math. Watch out for floating point rounding.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-numbers.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`console.log(0.1 + 0.2);`	Logs output (use DevTools console).
`console.log(Number('42'));`	Logs output (use DevTools console).
`console.log(parseInt('10px', 10));`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript numbers floating point parseint number

∙ Chapter 024

JS Numbers (Numbers)

Numbers are used for math. Watch out for floating point rounding.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-numbers.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`console.log(0.1 + 0.2);`	Logs output (use DevTools console).
`console.log(Number('42'));`	Logs output (use DevTools console).
`console.log(parseInt('10px', 10));`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript numbers floating point parseint number

∙ Chapter 025

JS Math

Math has helpful functions like max/min/round/random.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-math.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`console.log(Math.max(2, 9, 4));`	Logs output (use DevTools console).
`console.log(Math.round(4.6));`	Logs output (use DevTools console).
`console.log(Math.random());`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript math math.random math.round math.max

∙ Chapter 026

JS Math (Numbers)

Math has helpful functions like max/min/round/random.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-math.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`console.log(Math.max(2, 9, 4));`	Logs output (use DevTools console).
`console.log(Math.round(4.6));`	Logs output (use DevTools console).
`console.log(Math.random());`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript math math.random math.round math.max

∙ Chapter 027

JS Functions

Functions package reusable logic. You can define function declarations or arrow functions.

📝Syntax

function add(a, b) {
  return a + b;
}

const add2 = (a, b) => a + b;

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-functions.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`function greet(name) {`	Defines a function.
return `Hello, ${name}!`;	JavaScript statement.
`}`	Ends a block.
`const add = (a, b) => a + b;`	Declares a variable.
`console.log(greet('Developer'));`	Logs output (use DevTools console).
`console.log(add(7, 5));`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript functions arrow function parameters return

∙ Chapter 028

JS Functions (Functions)

Functions package reusable logic. You can define function declarations or arrow functions.

📝Syntax

function add(a, b) {
  return a + b;
}

const add2 = (a, b) => a + b;

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-functions.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`function greet(name) {`	Defines a function.
return `Hello, ${name}!`;	JavaScript statement.
`}`	Ends a block.
`const add = (a, b) => a + b;`	Declares a variable.
`console.log(greet('Developer'));`	Logs output (use DevTools console).
`console.log(add(7, 5));`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript functions arrow function parameters return

∙ Chapter 029

JS Objects

Objects group related data and behavior using key/value pairs.

📝Syntax

const user = { name: 'Mana', level: 1 };
user.level++;

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-objects.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const user = {`	Declares a variable.
`name: 'Mana',`	JavaScript statement.
`level: 2,`	JavaScript statement.
`greet() {`	JavaScript statement.
return `Hi, ${this.name}`;	JavaScript statement.
`},`	JavaScript statement.
`};`	JavaScript statement.
`console.log(user.greet());`	Logs output (use DevTools console).
`user.level++;`	JavaScript statement.
`console.log(user);`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript objects properties methods object literal

∙ Chapter 030

JS Objects (Objects)

Objects group related data and behavior using key/value pairs.

📝Syntax

const user = { name: 'Mana', level: 1 };
user.level++;

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-objects.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const user = {`	Declares a variable.
`name: 'Mana',`	JavaScript statement.
`level: 2,`	JavaScript statement.
`greet() {`	JavaScript statement.
return `Hi, ${this.name}`;	JavaScript statement.
`},`	JavaScript statement.
`};`	JavaScript statement.
`console.log(user.greet());`	Logs output (use DevTools console).
`user.level++;`	JavaScript statement.
`console.log(user);`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript objects properties methods object literal

∙ Chapter 031

JS Scope

Scope controls where variables are accessible (global, function, and block scope).

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-scope.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`let globalMsg = 'global';`	Declares a variable.
`function demo() {`	Defines a function.
`const local = 'local';`	Declares a variable.
`if (true) {`	Conditional branch.
`let block = 'block';`	Declares a variable.
`console.log(globalMsg, local, block);`	Logs output (use DevTools console).
`}`	Ends a block.
`}`	Ends a block.
`demo();`	JavaScript statement.

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript scope block scope global scope closure

∙ Chapter 032

JS Scope (Objects)

Scope controls where variables are accessible (global, function, and block scope).

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-scope.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`let globalMsg = 'global';`	Declares a variable.
`function demo() {`	Defines a function.
`const local = 'local';`	Declares a variable.
`if (true) {`	Conditional branch.
`let block = 'block';`	Declares a variable.
`console.log(globalMsg, local, block);`	Logs output (use DevTools console).
`}`	Ends a block.
`}`	Ends a block.
`demo();`	JavaScript statement.

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript scope block scope global scope closure

∙ Chapter 033

JS Dates

Use Date for basic date/time. For complex apps, use libraries or modern APIs when available.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-dates.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const now = new Date();`	Declares a variable.
`console.log(now.toISOString());`	Logs output (use DevTools console).
`console.log('Year:', now.getFullYear());`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript date new Date timestamp toISOString

∙ Chapter 034

JS Dates (Dates)

Use Date for basic date/time. For complex apps, use libraries or modern APIs when available.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-dates.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const now = new Date();`	Declares a variable.
`console.log(now.toISOString());`	Logs output (use DevTools console).
`console.log('Year:', now.getFullYear());`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript date new Date timestamp toISOString

∙ Chapter 035

JS Temporal (New)

Temporal is a newer date/time API proposal. If your environment doesn't support it yet, use Date or a library.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-temporal.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`if (typeof Temporal !== 'undefined') {`	Conditional branch.
`console.log('Temporal supported');`	Logs output (use DevTools console).
`console.log(Temporal.Now.plainDateISO().toString());`	Logs output (use DevTools console).
`} else {`	JavaScript statement.
`console.log('Temporal not available here. Using Date:');`	Logs output (use DevTools console).
`console.log(new Date().toISOString());`	Logs output (use DevTools console).
`}`	Ends a block.

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript temporal date time api timezone proposal

∙ Chapter 036

JS Temporal (New) (Dates)

Temporal is a newer date/time API proposal. If your environment doesn't support it yet, use Date or a library.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-temporal.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`if (typeof Temporal !== 'undefined') {`	Conditional branch.
`console.log('Temporal supported');`	Logs output (use DevTools console).
`console.log(Temporal.Now.plainDateISO().toString());`	Logs output (use DevTools console).
`} else {`	JavaScript statement.
`console.log('Temporal not available here. Using Date:');`	Logs output (use DevTools console).
`console.log(new Date().toISOString());`	Logs output (use DevTools console).
`}`	Ends a block.

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript temporal date time api timezone proposal

∙ Chapter 037

JS Arrays

Arrays store ordered lists. Use map/filter/reduce for clean transformations.

📝Syntax

const arr = [1, 2, 3];
arr.push(4);

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-arrays.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const nums = [1, 2, 3, 4, 5];`	Declares a variable.
`const evens = nums.filter(n => n % 2 === 0);`	Declares a variable.
`const doubled = nums.map(n => n * 2);`	Declares a variable.
`console.log('evens:', evens);`	Logs output (use DevTools console).
`console.log('doubled:', doubled);`	Logs output (use DevTools console).

🏢Real-world

1Store lists of items and transform them with map/filter/reduce.
2Avoid duplicates with Set; build key/value lookup with Map.

⚠Common Mistakes

1Mutating arrays unintentionally and causing hard-to-track bugs.
2Using objects as maps and hitting key collisions.

✅Best Practices

1Prefer `map/filter/reduce` for transformations.
2Use `Map` for non-string keys or guaranteed insertion order.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript arrays map filter reduce

∙ Chapter 038

JS Arrays (Arrays / Maps / Sets)

Arrays store ordered lists. Use map/filter/reduce for clean transformations.

📝Syntax

const arr = [1, 2, 3];
arr.push(4);

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-arrays.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const nums = [1, 2, 3, 4, 5];`	Declares a variable.
`const evens = nums.filter(n => n % 2 === 0);`	Declares a variable.
`const doubled = nums.map(n => n * 2);`	Declares a variable.
`console.log('evens:', evens);`	Logs output (use DevTools console).
`console.log('doubled:', doubled);`	Logs output (use DevTools console).

🏢Real-world

1Store lists of items and transform them with map/filter/reduce.
2Avoid duplicates with Set; build key/value lookup with Map.

⚠Common Mistakes

1Mutating arrays unintentionally and causing hard-to-track bugs.
2Using objects as maps and hitting key collisions.

✅Best Practices

1Prefer `map/filter/reduce` for transformations.
2Use `Map` for non-string keys or guaranteed insertion order.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript arrays map filter reduce

∙ Chapter 039

JS Sets

Set stores unique values (no duplicates). Great for fast membership checks.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-sets.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const list = ['a', 'a', 'b'];`	Declares a variable.
`const unique = new Set(list);`	Declares a variable.
`console.log([...unique]);`	Logs output (use DevTools console).
`console.log(unique.has('b'));`	Logs output (use DevTools console).

🏢Real-world

1Store lists of items and transform them with map/filter/reduce.
2Avoid duplicates with Set; build key/value lookup with Map.

⚠Common Mistakes

1Mutating arrays unintentionally and causing hard-to-track bugs.
2Using objects as maps and hitting key collisions.

✅Best Practices

1Prefer `map/filter/reduce` for transformations.
2Use `Map` for non-string keys or guaranteed insertion order.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript set unique values dedupe array

∙ Chapter 040

JS Sets (Arrays / Maps / Sets)

Set stores unique values (no duplicates). Great for fast membership checks.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-sets.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const list = ['a', 'a', 'b'];`	Declares a variable.
`const unique = new Set(list);`	Declares a variable.
`console.log([...unique]);`	Logs output (use DevTools console).
`console.log(unique.has('b'));`	Logs output (use DevTools console).

🏢Real-world

1Store lists of items and transform them with map/filter/reduce.
2Avoid duplicates with Set; build key/value lookup with Map.

⚠Common Mistakes

1Mutating arrays unintentionally and causing hard-to-track bugs.
2Using objects as maps and hitting key collisions.

✅Best Practices

1Prefer `map/filter/reduce` for transformations.
2Use `Map` for non-string keys or guaranteed insertion order.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript set unique values dedupe array

∙ Chapter 041

JS Maps

Map stores key/value pairs and supports non-string keys.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-maps.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const m = new Map();`	Declares a variable.
`m.set('JavaScript', 1);`	JavaScript statement.
`m.set('CSS', 2);`	JavaScript statement.
`console.log(m.get('CSS'));`	Logs output (use DevTools console).
`console.log(m.has('JavaScript'));`	Logs output (use DevTools console).

🏢Real-world

1Store lists of items and transform them with map/filter/reduce.
2Avoid duplicates with Set; build key/value lookup with Map.

⚠Common Mistakes

1Mutating arrays unintentionally and causing hard-to-track bugs.
2Using objects as maps and hitting key collisions.

✅Best Practices

1Prefer `map/filter/reduce` for transformations.
2Use `Map` for non-string keys or guaranteed insertion order.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript map key value dictionary

∙ Chapter 042

JS Maps (Arrays / Maps / Sets)

Map stores key/value pairs and supports non-string keys.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-maps.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const m = new Map();`	Declares a variable.
`m.set('JavaScript', 1);`	JavaScript statement.
`m.set('CSS', 2);`	JavaScript statement.
`console.log(m.get('CSS'));`	Logs output (use DevTools console).
`console.log(m.has('JavaScript'));`	Logs output (use DevTools console).

🏢Real-world

1Store lists of items and transform them with map/filter/reduce.
2Avoid duplicates with Set; build key/value lookup with Map.

⚠Common Mistakes

1Mutating arrays unintentionally and causing hard-to-track bugs.
2Using objects as maps and hitting key collisions.

✅Best Practices

1Prefer `map/filter/reduce` for transformations.
2Use `Map` for non-string keys or guaranteed insertion order.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript map key value dictionary

∙ Chapter 043

JS DataTypes

Know the difference between primitives and objects, and how equality works (== vs ===).

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-datatypes.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`console.log(2 == '2');`	Logs output (use DevTools console).
`console.log(2 === '2');`	Logs output (use DevTools console).
`console.log(typeof null, ' (quirk)');`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript datatypes === == primitives

∙ Chapter 044

JS Errors

Errors happen at runtime. Use try/catch for safe handling and good messages.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-errors.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`try {`	JavaScript statement.
`JSON.parse('{ bad json }');`	JavaScript statement.
`} catch (e) {`	JavaScript statement.
`console.log('Parse failed:', e.name);`	Logs output (use DevTools console).
`}`	Ends a block.

🏢Real-world

1Find bugs faster by reading stack traces and inspecting values.
2Use breakpoints to step through logic.

⚠Common Mistakes

1Ignoring the first error message (it’s usually the root cause).
2Debugging by guessing instead of inspecting.

✅Best Practices

1Use `console.log` strategically, then remove it.
2Reproduce bugs with the smallest example.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript errors try catch throw error handling

∙ Chapter 045

JS Debugging

Debug with console logs, breakpoints, and DevTools.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-debugging.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const data = [3, 1, 2];`	Declares a variable.
`console.log('before:', data);`	Logs output (use DevTools console).
`data.sort();`	JavaScript statement.
`console.log('after:', data);`	Logs output (use DevTools console).

🏢Real-world

1Find bugs faster by reading stack traces and inspecting values.
2Use breakpoints to step through logic.

⚠Common Mistakes

1Ignoring the first error message (it’s usually the root cause).
2Debugging by guessing instead of inspecting.

✅Best Practices

1Use `console.log` strategically, then remove it.
2Reproduce bugs with the smallest example.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript debugging devtools breakpoint console

∙ Chapter 046

JS Style Guide

Conventions (naming, formatting, small functions) keep code readable and maintainable.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-conventions.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`function formatUserName(firstName, lastName) {`	Defines a function.
return `${firstName} ${lastName}`;	JavaScript statement.
`}`	Ends a block.
`console.log(formatUserName('Mana', 'Coder'));`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript style guide naming best practices clean code

∙ Chapter 047

JS Reference

Quick reference for common syntax and patterns you use daily.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-reference.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`/* Quick reference */`	Comment block.

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript reference cheatsheet js syntax

∙ Chapter 048

JS Statements (Reference & Projects)

A statement is an instruction like variable declarations, if/else, loops, and function calls.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-statements.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`let x = 2;`	Declares a variable.
`x = x + 3;`	JavaScript statement.
`console.log('x =', x);`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript statements if statement for statement expression vs statement

∙ Chapter 049

JS Projects (New)

Projects make you job-ready: build small apps that use DOM, events, and async APIs.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-projects.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`console.log('Project ideas:');`	Logs output (use DevTools console).
`console.log('- Todo list');`	Logs output (use DevTools console).
`console.log('- Weather app (fetch API)');`	Logs output (use DevTools console).
`console.log('- Quiz app');`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript projects beginner projects dom projects api project

∙ Chapter 050

JS Projects (New) (Reference & Projects)

Projects make you job-ready: build small apps that use DOM, events, and async APIs.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-projects.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`console.log('Project ideas:');`	Logs output (use DevTools console).
`console.log('- Todo list');`	Logs output (use DevTools console).
`console.log('- Weather app (fetch API)');`	Logs output (use DevTools console).
`console.log('- Quiz app');`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript projects beginner projects dom projects api project

∙ Chapter 051

JS Versions

JavaScript evolves through ECMAScript (ES). Learn modern syntax and read browser support when needed.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-versions.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const features = ['let/const', 'arrow functions', 'classes', 'modules', 'async/await'];`	Declares a variable.
`console.log(features.join(', '));`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

ecmascript es6 javascript versions modern javascript

∙ Chapter 052

JS 2026

Focus on modern JavaScript fundamentals. New features appear yearly, but core concepts stay the same.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-2026.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`console.log('Modern JS = readable code + good fundamentals');`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript 2026 modern javascript latest javascript

∙ Chapter 053

JS HTML

JavaScript can read and change HTML (the DOM) to update the UI.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-html.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`document.getElementById('b').onclick = () => {`	Defines a function.
`document.getElementById('t').textContent = 'Updated by JS';`	Finds an element in the DOM.
`};`	JavaScript statement.

🏢Real-world

1Update text, attributes, and classes to reflect app state.
2Validate forms and show user-friendly messages.

⚠Common Mistakes

1Querying elements before they exist (run after DOM loads).
2Using too many inline onclick handlers.

✅Best Practices

1Use `addEventListener` instead of inline handlers.
2Prefer `textContent` for text (safer than `innerHTML`).

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript html dom document innertext innerhtml

∙ Chapter 054

JS HTML DOM

The DOM is the live object model of the page. You can query elements and update them.

📝Syntax

document.querySelector('.btn');
document.getElementById('out');

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-html-dom.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`let n = 0;`	Declares a variable.
`const x = document.querySelector('#x');`	Declares a variable.
`document.querySelector('#inc').addEventListener('click', () => {`	Defines a function.
`n++;`	JavaScript statement.
`x.textContent = String(n);`	JavaScript statement.
`});`	JavaScript statement.

🏢Real-world

1Update text, attributes, and classes to reflect app state.
2Validate forms and show user-friendly messages.

⚠Common Mistakes

1Querying elements before they exist (run after DOM loads).
2Using too many inline onclick handlers.

✅Best Practices

1Use `addEventListener` instead of inline handlers.
2Prefer `textContent` for text (safer than `innerHTML`).

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript dom queryselector dom manipulation

∙ Chapter 055

JS Events

Events connect user actions (click, input, submit) to your code.

📝Syntax

element.addEventListener('click', (e) => {
  // handle click
});

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-events.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const input = document.getElementById('name');`	Declares a variable.
`const echo = document.getElementById('echo');`	Declares a variable.
`input.addEventListener('input', (e) => {`	Defines a function.
echo.textContent = `Hello, ${e.target.value}`;	JavaScript statement.
`});`	JavaScript statement.

🏢Real-world

1Clicks, input changes, keyboard shortcuts, and gestures.
2Event delegation for dynamic lists.

⚠Common Mistakes

1Not calling `preventDefault()` for form submits/links when needed.
2Forgetting about event bubbling.

✅Best Practices

1Use `:focus-visible` and keyboard support.
2Use delegation: listen on a parent when many children exist.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript events addeventlistener click event input event

∙ Chapter 056

JS Functions (Advanced)

Functions package reusable logic. You can define function declarations or arrow functions.

📝Syntax

function add(a, b) {
  return a + b;
}

const add2 = (a, b) => a + b;

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-functions.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`function greet(name) {`	Defines a function.
return `Hello, ${name}!`;	JavaScript statement.
`}`	Ends a block.
`const add = (a, b) => a + b;`	Declares a variable.
`console.log(greet('Developer'));`	Logs output (use DevTools console).
`console.log(add(7, 5));`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript functions arrow function parameters return

∙ Chapter 057

JS Objects (Advanced)

Objects group related data and behavior using key/value pairs.

📝Syntax

const user = { name: 'Mana', level: 1 };
user.level++;

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-objects.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const user = {`	Declares a variable.
`name: 'Mana',`	JavaScript statement.
`level: 2,`	JavaScript statement.
`greet() {`	JavaScript statement.
return `Hi, ${this.name}`;	JavaScript statement.
`},`	JavaScript statement.
`};`	JavaScript statement.
`console.log(user.greet());`	Logs output (use DevTools console).
`user.level++;`	JavaScript statement.
`console.log(user);`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript objects properties methods object literal

∙ Chapter 058

JS Classes

Classes help structure code with constructors and methods (syntax over prototypes).

📝Syntax

class User {
  constructor(name) { this.name = name; }
  greet() { return `Hi, ${this.name}`; }
}

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-classes.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`class User {`	JavaScript statement.
`constructor(name) {`	JavaScript statement.
`this.name = name;`	JavaScript statement.
`}`	Ends a block.
`greet() {`	JavaScript statement.
return `Hi, I am ${this.name}`;	JavaScript statement.
`}`	Ends a block.
`}`	Ends a block.
`const u = new User('Mana');`	Declares a variable.
`console.log(u.greet());`	Logs output (use DevTools console).

🏢Real-world

1Model entities (User, Cart, Product) with methods.
2Organize large codebases cleanly.

⚠Common Mistakes

1Overusing classes for everything (simple objects/functions are fine).
2Confusing `this` inside callbacks.

✅Best Practices

1Start simple: plain objects first.
2Use arrow functions for callbacks to avoid binding issues.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript classes oop constructor this

∙ Chapter 059

JS Asynchronous

Async code lets you wait for tasks (network, timers) without freezing the UI.

📝Syntax

async function load() {
  const res = await fetch('/api');
  return res.json();
}

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-asynchronous.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const wait = (ms) => new Promise(r => setTimeout(r, ms));`	Declares a variable.
`(async () => {`	Defines a function.
`console.log('Start');`	Logs output (use DevTools console).
`await wait(200);`	Async code: waits for a promise.
`console.log('After 200ms');`	Logs output (use DevTools console).
`})();`	JavaScript statement.

🏢Real-world

1Load data from APIs and update the UI when it arrives.
2Handle loading/error states cleanly.

⚠Common Mistakes

1Not handling errors (network failures happen).
2Forgetting to `await` a promise and using the unresolved value.

✅Best Practices

1Wrap awaits in `try/catch`.
2Show loading and error messages in the UI.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript async promise async await event loop

∙ Chapter 060

JS Modules

Modules help organize code with import/export (works in modern browsers and bundlers).

📝Syntax

export function add(a, b) { return a + b; }
import { add } from './math.js';

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-modules.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`/* In real projects:`	Comment block.
`export function add(a,b){return a+b}`	JavaScript statement.
`import { add } from './math.js'`	JavaScript statement.
`*/`	JavaScript statement.
`console.log('Modules organize code');`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript modules import export esm

∙ Chapter 061

JS Meta & Proxy

Proxy and Reflect let you intercept operations on objects (advanced patterns).

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-meta-proxy.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const target = { x: 1 };`	Declares a variable.
`const p = new Proxy(target, {`	Declares a variable.
`get(obj, key) {`	JavaScript statement.
`console.log('get', key);`	Logs output (use DevTools console).
`return obj[key];`	JavaScript statement.
`},`	JavaScript statement.
`});`	JavaScript statement.
`console.log(p.x);`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript proxy reflect meta programming

∙ Chapter 062

JS Typed Arrays

Typed arrays store binary data efficiently (useful for audio, graphics, and Web APIs).

📝Syntax

const arr = [1, 2, 3];
arr.push(4);

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-typed-arrays.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const bytes = new Uint8Array([65, 66, 67]);`	Declares a variable.
`console.log(bytes[0]);`	Logs output (use DevTools console).
`console.log(bytes.length);`	Logs output (use DevTools console).

🏢Real-world

1Store lists of items and transform them with map/filter/reduce.
2Avoid duplicates with Set; build key/value lookup with Map.

⚠Common Mistakes

1Mutating arrays unintentionally and causing hard-to-track bugs.
2Using objects as maps and hitting key collisions.

✅Best Practices

1Prefer `map/filter/reduce` for transformations.
2Use `Map` for non-string keys or guaranteed insertion order.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

typed arrays uint8array arraybuffer binary

∙ Chapter 063

JS DOM Navigation

Navigate nodes using parent/children/siblings and querySelector/querySelectorAll.

📝Syntax

document.querySelector('.btn');
document.getElementById('out');

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-dom-navigation.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const items = document.querySelectorAll('#list li');`	Declares a variable.
`document.getElementById('out').textContent = Array.from(items).map(li => li.textContent).join(', ');`	Defines a function.

🏢Real-world

1Update text, attributes, and classes to reflect app state.
2Validate forms and show user-friendly messages.

⚠Common Mistakes

1Querying elements before they exist (run after DOM loads).
2Using too many inline onclick handlers.

✅Best Practices

1Use `addEventListener` instead of inline handlers.
2Prefer `textContent` for text (safer than `innerHTML`).

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

dom navigation parentnode children queryselectorall

∙ Chapter 064

JS Windows

The window object represents the browser tab and provides APIs like location and history.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-windows.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`console.log('URL:', typeof location !== 'undefined' ? location.href : '(no window)');`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

window object location history browser apis

∙ Chapter 065

JS Web APIs

Web APIs add features like fetch, storage, geolocation, and more (browser-provided).

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-web-apis.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`console.log('Web APIs live on window in browsers');`	Logs output (use DevTools console).
`console.log('fetch available?', typeof fetch !== 'undefined');`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

web apis fetch localstorage geolocation

∙ Chapter 066

JS AJAX

AJAX means making network requests in the background (today: usually fetch).

📝Syntax

fetch('/api/data')
  .then(r => r.json())
  .then(data => console.log(data));

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-ajax.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`console.log('Use fetch() for modern AJAX');`	Starts an HTTP request (fetch).

🏢Real-world

1Load data from APIs and update the UI when it arrives.
2Handle loading/error states cleanly.

⚠Common Mistakes

1Not handling errors (network failures happen).
2Forgetting to `await` a promise and using the unresolved value.

✅Best Practices

1Wrap awaits in `try/catch`.
2Show loading and error messages in the UI.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

ajax fetch api xhr http request

∙ Chapter 067

JS JSON

JSON is a text format for data. Use JSON.stringify and JSON.parse.

📝Syntax

const json = JSON.stringify({ ok: true });
const obj = JSON.parse(json);

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-json.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const obj = { a: 1, b: 'hi' };`	Declares a variable.
`const text = JSON.stringify(obj);`	Declares a variable.
`console.log(text);`	Logs output (use DevTools console).
`console.log(JSON.parse(text).b);`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

json json.parse json.stringify api data

∙ Chapter 068

JS jQuery

jQuery is a classic DOM library. Modern JS can replace most jQuery use-cases, but you may see it in old projects.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-jquery.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`console.log('Modern JS often replaces jQuery');`	Logs output (use DevTools console).
`console.log('But you may maintain jQuery code in legacy apps');`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

jquery legacy javascript dom library

∙ Chapter 069

JS Graphics

Graphics can be done with Canvas, SVG, and WebGL.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-graphics.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`const ctx = document.getElementById('c').getContext('2d');`	Declares a variable.
`ctx.fillStyle = '#00e5ff';`	JavaScript statement.
`ctx.fillRect(12, 18, 120, 50);`	JavaScript statement.
`ctx.fillStyle = '#7c4dff';`	JavaScript statement.
`ctx.fillRect(142, 18, 100, 50);`	JavaScript statement.

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

canvas svg webgl javascript graphics

∙ Chapter 070

JS Examples

Practice by remixing small examples: inputs, lists, and API calls.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-examples.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`console.log('Example: random quote');`	Logs output (use DevTools console).
`const quotes = ['Ship it', 'Keep it simple', 'Test it'];`	Declares a variable.
`console.log(quotes[Math.floor(Math.random() * quotes.length)]);`	Logs output (use DevTools console).

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript examples practice snippets

∙ Chapter 071

JS Reference (Advanced)

Quick reference for common syntax and patterns you use daily.

📝Syntax

statement;
functionCall();

⚡Example (Edit & Run)

Edit the example below and click Run. You can paste full HTML or just JavaScript.

js-reference.js

📝 Edit Code

👁 Live Preview

💡 Tip: keep changes small, run often, and read console errors carefully.

🔍Line-by-line

Line	Meaning
`/* Quick reference */`	Comment block.

🏢Real-world

1Build interactive UI: forms, buttons, and dynamic content updates.

⚠Common Mistakes

1Forgetting to open DevTools Console and missing errors.

✅Best Practices

1Keep functions small and name things clearly.

📖Summary & Practice

1Understand the concept, then practice it with a small UI example.
2Read errors carefully—JavaScript usually tells you what went wrong.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one line and predict the result before running.
2Make the example handle one more case (edge case).
3Explain why the output changed in 1 sentence.

📈SEO

Keywords (topic intent):

javascript reference cheatsheet js syntax

JavaScript — Complete Tutorial

JS Tutorial

JS Introduction

JS Where To

JS Output

JS Syntax

JS Syntax (Syntax)

JS Statements

JS Comments

JS Variables

JS Let

JS Const

JS Types

JS Operators

JS Operators (Operators)

JS If Else

JS If Else (If Else)

JS Loops

JS Loops (Loops)

JS Iterations

JS Loops (Loops)

JS Strings

JS Strings (Strings)

JS Numbers

JS Numbers (Numbers)

JS Math

JS Math (Numbers)

JS Functions

JS Functions (Functions)

JS Objects

JS Objects (Objects)

JS Scope

JS Scope (Objects)

JS Dates

JS Dates (Dates)

JS Temporal (New)

JS Temporal (New) (Dates)

JS Arrays

JS Arrays (Arrays / Maps / Sets)

JS Sets

JS Sets (Arrays / Maps / Sets)

JS Maps

JS Maps (Arrays / Maps / Sets)

JS DataTypes

JS Errors

JS Debugging

JS Style Guide

JS Reference

JS Statements (Reference & Projects)

JS Projects (New)

JS Projects (New) (Reference & Projects)

JS Versions

JS 2026

JS HTML

JS HTML DOM

JS Events

JS Functions (Advanced)

JS Objects (Advanced)

JS Classes

JS Asynchronous

JS Modules

JS Meta & Proxy

JS Typed Arrays

JS DOM Navigation

JS Windows

JS Web APIs

JS AJAX

JS JSON

JS jQuery

JS Graphics

JS Examples

JS Reference (Advanced)