JavaScript Syntax Explained: Complete Beginner’s Guide

// Expression — produces a value
const total = 10 + 5;        // 15

// Statement — performs an action
if (total > 10) {
    console.log('big');
}

// Tricky: a function declaration is a statement
function greet() { return 'hi'; }

// An arrow function assigned to a variable is an expression
const greet2 = () => 'hi';

// This is why you cannot write:
// function() { }    ← syntax error on its own

// But you can write:
const fn = function() { };

// This works — ASI adds the semicolon
const a = 1
const b = 2

// This does not — ASI joins the lines instead
const c = 1
const d = 2
[1, 2, 3].forEach(n => console.log(n))

// The parser sees:
const d = 2[1, 2, 3].forEach(...)
// Because a line starting with [ continues the previous one.

// With an explicit semicolon:
const e = 2;
[1, 2, 3].forEach(n => console.log(n));   // works

// Parsed as a block, containing a label and an expression
{
    name: 'Ada'
}

// Parsed as an object literal, because of the parentheses
({ name: 'Ada' });

// This is why arrow functions returning an object need parens:
const makeUser = () => ({ name: 'Ada' });

// A single-line comment

/* A block comment
   that spans
   several lines */

/**
 * A documentation comment.
 * Tools can read these and generate docs.
 * @param {string} name
 * @returns {string}
 */
function greet(name) {
    return 'Hello, ' + name;
}

const name = 'Ada';       // cannot be reassigned
let count = 0;            // can be reassigned

count = count + 1;        // fine
// name = 'Grace';        // TypeError: Assignment to constant variable

// const does not mean the value is frozen —
// only that the binding cannot be reassigned
const list = [1, 2];
list.push(3);             // fine — the array is modified, not replaced
// list = [1, 2, 3];      // TypeError — reassigning the variable

// Declaring without a value
let pending;              // value is undefined
pending = 'ready';        // assign later

// The convention: camelCase for variables and functions
const userName = 'Ada';
const isLoggedIn = true;
let itemCount = 0;

// PascalCase for classes and constructors
class UserAccount { }
function ShoppingCart() { }

// SCREAMING_SNAKE_CASE for true constants
const MAX_RETRIES = 3;
const API_BASE_URL = 'https://api.example.com';

// A leading underscore signals "internal"
const _cache = new Map();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data Types</title>
    <style>
        body { font-family: system-ui, sans-serif; padding: 24px; background: #f8fafc; font-size: 14px; margin: 0; }
        .row {
            background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
            padding: 10px 14px; margin-bottom: 6px;
            display: flex; justify-content: space-between; gap: 12px;
            font-family: ui-monospace, monospace; font-size: 13px;
        }
        .val { color: #0f172a; }
        .type { color: #0891b2; font-weight: 700; }
        .note { color: #64748b; font-size: 12px; margin-top: 14px; line-height: 1.6; }
    </style>
</head>
<body>

    <div id="output"></div>
    <p class="note">Notice that <code>typeof null</code> returns "object" — a bug from 1995 that was never fixed.</p>

    <script>
        const samples = [
            { v: 'hello',       label: "'hello'" },
            { v: 42,            label: '42' },
            { v: 3.14,          label: '3.14' },
            { v: true,          label: 'true' },
            { v: null,          label: 'null' },
            { v: undefined,     label: 'undefined' },
            { v: [1, 2, 3],     label: '[1, 2, 3]' },
            { v: { a: 1 },      label: '{ a: 1 }' },
            { v: function (){}, label: 'function(){}' }
        ];

        const out = document.getElementById('output');
        samples.forEach(function (s) {
            const div = document.createElement('div');
            div.className = 'row';
            div.innerHTML =
                '<span class="val">' + s.label + '</span>' +
                '<span class="type">' + typeof s.v + '</span>';
            out.appendChild(div);
        });
    </script>

</body>
</html>

const a = 'single quotes';
const b = "double quotes";
const c = `backticks — a template literal`;

// Single and double quotes are interchangeable.
// Use whichever avoids escaping:
const d = "It's fine";
const e = 'She said "hello"';

// Backticks are special:
const name = 'Ada';
const greeting = `Hello, ${name}!`;   // interpolation

const multi = `Line one
Line two
Line three`;                          // multi-line without \n

const price = 19.99;
const qty = 3;

const total = `Total: $${(price * qty).toFixed(2)}`;
// "Total: $59.97"

const user = { first: 'Ada', last: 'Lovelace' };
const full = `${user.first} ${user.last}`;
// "Ada Lovelace"

1 + 2           // 3       — number addition
'1' + '2'       // '12'    — string concatenation
1 + '2'         // '12'    — number converted to string
'3' + 4         // '34'    — same
1 + 2 + '3'     // '33'    — (1+2)=3, then 3+'3'='33'
'1' + 2 + 3     // '123'   — left to right, all concatenation

// The fix: convert to numbers explicitly
Number('1') + 2 + 3         // 6
parseInt('1', 10) + 2 + 3   // 6

true && true      // true  — AND: both must be true
true && false     // false
true || false     // true  — OR: at least one must be true
false || false    // false
!true             // false — NOT: flips the value

// Short-circuiting — the right side may not run at all
const user = null;
user && user.name;        // null — does not throw
user?.name;                // undefined — optional chaining

// || returns the first truthy value
const port = process.env.PORT || 3000;

// ?? returns the right side only if the left is null or undefined
const count = 0;
count || 10;               // 10  — because 0 is falsy
count ?? 10;               // 0   — because 0 is not nullish

// condition ? valueIfTrue : valueIfFalse
const label = isLoggedIn ? 'Log out' : 'Log in';

// Nesting works but hurts readability
const grade = score >= 90 ? 'A'
            : score >= 80 ? 'B'
            : score >= 70 ? 'C'
            : 'F';

// For anything more complex, use if/else
let grade2;
if (score >= 90) grade2 = 'A';
else if (score >= 80) grade2 = 'B';
else grade2 = 'F';

let x = 5;

x += 3;    // x = x + 3  → 8
x -= 2;    // x = x - 2  → 6
x *= 2;    // x = x * 2  → 12
x /= 4;    // x = x / 4  → 3
x %= 2;    // x = x % 2  → 1
x **= 3;   // x = x ** 3 → 1

// 1. if — run the block, or skip it
if (score > 90) {
    console.log('Excellent');
}

// 2. if / else — choose one of two
if (isLoggedIn) {
    showDashboard();
} else {
    showLoginForm();
}

// 3. if / else if / else — choose one of several
if (score >= 90) {
    grade = 'A';
} else if (score >= 80) {
    grade = 'B';
} else if (score >= 70) {
    grade = 'C';
} else {
    grade = 'F';
}

// The complete list of falsy values
false
0
-0
0n            // BigInt zero
''            // empty string
null
undefined
NaN

// Everything else is truthy — including these surprises:
'0'           // true  — non-empty string
'false'       // true  — non-empty string
[]            // true  — empty array is still an object
{}            // true  — empty object
function(){}  // true

switch (status) {
    case 'pending':
        console.log('Waiting');
        break;

    case 'shipped':
        console.log('On the way');
        break;

    case 'delivered':
        console.log('Arrived');
        break;

    default:
        console.log('Unknown status');
}

// Omitting break falls through to the next case:
switch (level) {
    case 1:
    case 2:
        console.log('Beginner');   // runs for both 1 and 2
        break;
    case 3:
        console.log('Intermediate');
        break;
}

// 1. for — when you need a counter
for (let i = 0; i < 5; i++) {
    console.log(i);            // 0 1 2 3 4
}

// 2. for...of — iterate over values in an iterable
const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits) {
    console.log(fruit);
}

// 3. for...in — iterate over the keys of an object
const user = { name: 'Ada', age: 36 };

for (const key in user) {
    console.log(key, user[key]);
}

// 4. while — repeat while a condition holds
let count = 0;
while (count < 3) {
    count++;
}

// 5. do...while — always runs at least once
let input;
do {
    input = getInput();
} while (!isValid(input));

for (const n of [1, 2, 3, 4, 5]) {
    if (n === 3) {
        break;       // stop the loop entirely
    }
    console.log(n);  // 1, 2
}

for (const n of [1, 2, 3, 4, 5]) {
    if (n % 2 === 0) {
        continue;    // skip this iteration
    }
    console.log(n);  // 1, 3, 5
}

const nums = [1, 2, 3, 4, 5];

nums.map(n => n * 2);           // [2, 4, 6, 8, 10]  — transform
nums.filter(n => n > 2);        // [3, 4, 5]         — keep some
nums.reduce((sum, n) => sum + n, 0);  // 15          — collapse
nums.find(n => n > 3);          // 4                 — first match
nums.some(n => n > 4);          // true              — any match?
nums.every(n => n > 0);         // true              — all match?
nums.includes(3);               // true

// 1. Function declaration — hoisted, callable before its line
function add(a, b) {
    return a + b;
}

// 2. Function expression — assigned to a variable
const subtract = function (a, b) {
    return a - b;
};

// 3. Arrow function — shorter, no own `this`
const multiply = (a, b) => {
    return a * b;
};

// 4. Arrow with implicit return — one expression, no braces
const divide = (a, b) => a / b;

// 5. Arrow with a single parameter — parens optional
const square = n => n * n;

// All of these are called the same way
add(2, 3);        // 5
square(4);        // 16

// Default parameter values
function greet(name = 'friend') {
    return `Hello, ${name}!`;
}
greet();          // "Hello, friend!"
greet('Ada');     // "Hello, Ada!"

// Rest parameters — collect the rest into an array
function sum(...nums) {
    return nums.reduce((total, n) => total + n, 0);
}
sum(1, 2, 3);     // 6

// Destructured parameters
function display({ name, age }) {
    return `${name} is ${age}`;
}
display({ name: 'Ada', age: 36 });

// Arguments are passed by value for primitives
function change(x) {
    x = 100;
}
let value = 5;
change(value);
console.log(value);   // 5 — unchanged

// But objects are passed by reference
function mutate(obj) {
    obj.name = 'changed';
}
const user = { name: 'Ada' };
mutate(user);
console.log(user.name);  // "changed"

// A function with no return gives back undefined
function log(msg) {
    console.log(msg);
}
log('hi');        // undefined

// return ends the function immediately
function findFirst(list, target) {
    for (const item of list) {
        if (item === target) {
            return item;      // stops here
        }
    }
    return null;              // reached only if not found
}

// return with nothing gives undefined
function stop() {
    return;
}

// A function can return a function
function makeCounter() {
    let count = 0;
    return function () {
        count++;
        return count;
    };
}

const counter = makeCounter();
counter();   // 1
counter();   // 2

// An IIFE runs as soon as it is defined
(function () {
    const secret = 'only visible here';
    console.log(secret);
})();

// The parentheses around the function are required —
// without them, the parser treats `function` as a
// declaration and expects a name.

// Arrow version
(() => {
    console.log('also runs immediately');
})();

// IIFEs are rarely needed now that modules
// provide their own scope.

const fruits = ['apple', 'banana', 'cherry'];

// Access by index — counting starts at 0
fruits[0];              // 'apple'
fruits[fruits.length - 1];  // 'cherry' — the last item
fruits.at(-1);          // 'cherry' — modern shorthand

// Length
fruits.length;          // 3

// Add and remove
fruits.push('date');       // add to the end
fruits.pop();              // remove from the end
fruits.unshift('avocado'); // add to the start
fruits.shift();            // remove from the start

// Find
fruits.indexOf('banana');  // 1
fruits.includes('apple');  // true
fruits.find(f => f.length > 5);  // 'banana'

// Combine and copy
const more = ['elderberry'];
const all = [...fruits, ...more];    // a new combined array
const copy = [...fruits];            // a shallow copy
const joined = fruits.join(', ');    // 'apple, banana, cherry'

// Nested arrays
const grid = [
    [1, 2, 3],
    [4, 5, 6]
];
grid[1][2];             // 6

const user = {
    name: 'Ada',
    age: 36,
    email: 'ada@example.com',
    isAdmin: true
};

// Access with dot notation
user.name;              // 'Ada'

// Or with brackets — required when the key is dynamic
const key = 'age';
user[key];              // 36
user['email'];          // 'ada@example.com'

// Add and remove
user.country = 'UK';
delete user.isAdmin;

// Check if a key exists
'name' in user;                    // true
Object.hasOwn(user, 'name');       // true — modern
user.phone === undefined;          // true — but unreliable

// Keys and values
Object.keys(user);      // ['name', 'age', 'email', 'country']
Object.values(user);    // ['Ada', 36, 'ada@example.com', 'UK']
Object.entries(user);   // [['name','Ada'], ['age',36], ...]

// Nested objects
const order = {
    id: 101,
    customer: {
        name: 'Ada',
        address: { city: 'London' }
    }
};

order.customer.address.city;   // 'London'
order.customer?.phone;         // undefined, no error

const name = 'Ada';
const age = 36;

// Old way
const user1 = { name: name, age: age };

// Shorthand — the key and the variable have the same name
const user2 = { name, age };

// Methods can be shortened too
const calculator = {
    // Old
    add: function (a, b) { return a + b; },

    // New
    subtract(a, b) { return a - b; }
};

// Computed keys — the key is an expression
const field = 'email';
const record = {
    [field]: 'ada@example.com'
};
// { email: 'ada@example.com' }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Arrays of Objects</title>
    <style>
        body { font-family: system-ui, sans-serif; padding: 24px; background: #f8fafc; font-size: 14px; margin: 0; }
        .card {
            background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
            padding: 14px 16px; margin-bottom: 10px;
        }
        .name { font-weight: 700; color: #0f172a; margin-bottom: 4px; }
        .meta { color: #0891b2; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
        .email { color: #64748b; font-size: 13px; margin-top: 4px; font-family: ui-monospace, monospace; }
    </style>
</head>
<body>

    <div id="list"></div>

    <script>
        const team = [
            { name: 'Ada Lovelace',  role: 'Engineer',   email: 'ada@example.com' },
            { name: 'Grace Hopper',  role: 'Admiral',    email: 'grace@example.com' },
            { name: 'Alan Turing',   role: 'Researcher', email: 'alan@example.com' }
        ];

        const container = document.getElementById('list');

        team.forEach(function (person) {
            const card = document.createElement('div');
            card.className = 'card';
            card.innerHTML =
                '<div class="name">' + person.name + '</div>' +
                '<div class="meta">' + person.role + '</div>' +
                '<div class="email">' + person.email + '</div>';
            container.appendChild(card);
        });
    </script>

</body>
</html>

// Object destructuring — extract by key name
const user = { name: 'Ada', age: 36, email: 'ada@example.com' };

const { name, age } = user;
// name = 'Ada', age = 36

// Rename while destructuring
const { name: fullName, email: contact } = user;
// fullName = 'Ada', contact = 'ada@example.com'

// Default values
const { phone = 'none on file' } = user;

// Array destructuring — extract by position
const coords = [10, 20, 30];
const [x, y] = coords;
// x = 10, y = 20

// Skip positions with a comma
const [, , z] = coords;
// z = 30

// Rest in destructuring
const [first, ...others] = coords;
// first = 10, others = [20, 30]

const { name: n, ...rest } = user;
// n = 'Ada', rest = { age: 36, email: '...' }

// In function parameters
function display({ name, role = 'member' }) {
    return `${name} (${role})`;
}
display({ name: 'Ada' });   // "Ada (member)"

// Swapping variables without a temp
let a = 1, b = 2;
[a, b] = [b, a];
// a = 2, b = 1

// Spread — expand
const a = [1, 2, 3];
const b = [4, 5, 6];

const combined = [...a, ...b];       // [1, 2, 3, 4, 5, 6]
const copyOfA  = [...a];             // a shallow copy
const max      = Math.max(...a);     // 3 — spreads into arguments

// Spread in objects — a shallow merge
const defaults = { theme: 'light', lang: 'en' };
const prefs    = { theme: 'dark' };

const settings = { ...defaults, ...prefs };
// { theme: 'dark', lang: 'en' } — later keys win

// Adding a property without mutating the original
const updated = { ...user, age: 37 };

// Rest — collect
function sum(...nums) {
    return nums.reduce((t, n) => t + n, 0);
}
sum(1, 2, 3, 4);      // 10

const { id, ...withoutId } = user;

const order = {
    id: 101,
    customer: {
        name: 'Ada'
    }
};

// Without optional chaining
const city1 = order && order.customer && order.customer.address
    && order.customer.address.city;

// With optional chaining
const city2 = order?.customer?.address?.city;   // undefined, no error

// On method calls
obj.method?.();       // calls only if the method exists

// On array indexes
arr?.[0];

// Combined with nullish coalescing
const city = order?.customer?.address?.city ?? 'Unknown';

class User {
    // Runs when you call `new User(...)`
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // A method — available on every instance
    greet() {
        return `Hello, I'm ${this.name}`;
    }

    // A getter — accessed like a property
    get description() {
        return `${this.name}, ${this.age}`;
    }

    // A setter
    set nickname(value) {
        this.name = value;
    }

    // A static method — belongs to the class, not instances
    static create(data) {
        return new User(data.name, data.age);
    }
}

const ada = new User('Ada', 36);

ada.greet();          // "Hello, I'm Ada"
ada.description;      // "Ada, 36"
ada.name = 'Grace';
User.create({ name: 'Alan', age: 41 });

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        return `${this.name} makes a sound`;
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);          // call the parent constructor
        this.breed = breed;
    }

    speak() {
        return `${this.name} barks`;   // override
    }

    describe() {
        return `${super.speak()} — a ${this.breed}`;  // call the parent
    }
}

const rex = new Dog('Rex', 'Labrador');
rex.speak();        // "Rex barks"
rex.describe();     // "Rex makes a sound — a Labrador"
rex instanceof Dog;      // true
rex instanceof Animal;   // true

class Counter {
    // A private field — the # prefix makes it inaccessible outside
    #count = 0;

    increment() {
        this.#count++;
        return this.#count;
    }

    get value() {
        return this.#count;
    }
}

const c = new Counter();
c.increment();      // 1
c.increment();      // 2
c.value;            // 2
// c.#count;        // SyntaxError — private

// utils.js — exporting

export const TAX_RATE = 0.2;

export function formatPrice(value) {
    return '$' + value.toFixed(2);
}

// Default export — one per module
export default function calculateTotal(items) {
    return items.reduce((sum, item) => sum + item.price, 0);
}

// app.js — importing

// Named imports — must match the exported names
import { TAX_RATE, formatPrice } from './utils.js';

// Default import — any name works
import calculateTotal from './utils.js';

// Both together
import calculateTotal, { TAX_RATE } from './utils.js';

// Renaming
import { formatPrice as fmt } from './utils.js';

// Import everything as a namespace
import * as utils from './utils.js';
utils.formatPrice(9.99);

<script type="module" src="app.js"></script>

try {
    const data = JSON.parse(malformedString);
    console.log(data);
} catch (error) {
    // Runs only if something in the try block throws
    console.error('Could not parse:', error.message);
} finally {
    // Always runs — with or without an error
    console.log('Done');
}

function divide(a, b) {
    if (b === 0) {
        throw new Error('Cannot divide by zero');
    }
    return a / b;
}

try {
    divide(10, 0);
} catch (error) {
    console.log(error.name);      // "Error"
    console.log(error.message);   // "Cannot divide by zero"
}

// Custom error classes
class ValidationError extends Error {
    constructor(field) {
        super(`Invalid value for ${field}`);
        this.name = 'ValidationError';
        this.field = field;
    }
}

throw new ValidationError('email');

// Add this at the top of a file or function
'use strict';

// Now these all throw:
x = 10;                    // ReferenceError — undeclared variable

function f(a, a) { }       // SyntaxError — duplicate parameter

const obj = {};
Object.defineProperty(obj, 'x', { value: 1 });
delete obj.x;              // TypeError — cannot delete non-configurable

// And `this` inside a plain function call is undefined
// instead of the global object

function whoAmI() {
    return this;
}
whoAmI();                  // undefined in strict mode
                           // the global object otherwise