Introduction

JavaScript is the language of the web. This site is a concise reference for the fundamentals you need to build interactive pages and apps.

• Read the concept
• See a quick example
• Try it in your own code

Values & Types

Every JavaScript expression produces a value. Values have types: primitives like string, number, and boolean, plus objects, arrays, and functions.

const name = 'Ava';
const score = 98;
const isActive = true;
const values = [name, score, isActive];
console.log(typeof values); // "object"

Variables

Use const for values that should not be reassigned, and let for values that can change. Avoid var for modern code.

const pi = 3.14;
let count = 0;
count += 1;
// var oldStyle = 'not recommended';

Operators

JavaScript supports arithmetic, comparisons, logical operators, and more.

const result = 5 + 3 * 2;
const isSame = 2 === '2';
const value = result > 10 && isSame === false;
console.log(value); // true

Control Flow

Use conditional statements and loops to direct program flow.

const score = 72;
if (score >= 90) {
  console.log('A');
} else if (score >= 75) {
  console.log('B');
} else {
  console.log('C or lower');
}

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

Functions

Functions group logic into reusable blocks. Arrow functions are concise and common in modern JavaScript.

function greet(name) {
  return `Hello, ${name}!`;
}

const greetArrow = name => `Hello, ${name}!`;
console.log(greet('Ava'));
console.log(greetArrow('Ava'));

Objects & Arrays

Objects store named properties. Arrays store ordered lists of values.

const user = {
  id: 1,
  name: 'Ava',
  active: true
};

const items = ['apple', 'banana', 'cherry'];
console.log(user.name);
console.log(items[1]);

DOM Basics

The Document Object Model (DOM) lets JavaScript read and change the page structure and content.

const title = document.querySelector('h1');
title.textContent = 'JavaScript Fundamentals';

const newItem = document.createElement('p');
newItem.textContent = 'This content was added by JavaScript.';
document.body.appendChild(newItem);

Events

Events let your code respond to user actions like clicks, input, and page load.

const button = document.querySelector('#demo-button');
button.addEventListener('click', () => {
  alert('Button clicked!');
});

Async JavaScript

Asynchronous code lets JavaScript wait for operations like network requests without freezing the page.

async function loadData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await response.json();
  console.log(data);
}
loadData();

ES6+ Features

Modern JavaScript includes template literals, destructuring, spread syntax, and modules.

const point = { x: 10, y: 20 };
const { x, y } = point;
const nums = [1, 2, 3];
const all = [...nums, 4, 5];
console.log(x, y, all);