Sections
Data Types
| Type | Example | typeof |
|---|---|---|
| Number | const n = 42; | "number" |
| String | const s = "hi"; | "string" |
| Boolean | const b = true; | "boolean" |
| Array | const a = [1,2,3]; | "object" |
| Object | const o = {x:1}; | "object" |
| undefined | a variable is declared but has no value | "undefined" |
| null | const x = null; | "object" |
Variables: let, const, var
| Keyword | Can be reassigned | When to use |
|---|---|---|
| const | No | Default choice — for anything that won't change |
| let | Yes | When the variable's value will definitely change |
| var | Yes | Outdated, not used in new code |
Comparison Operators
| Operator | Meaning |
|---|---|
=== | Strict equality (compares both value and type) |
!== | Strict inequality |
== | Loose equality (with type coercion, best avoided) |
> >= < <= | Greater than, greater than or equal, less than, less than or equal |
&& | Logical AND (both conditions true) |
|| | Logical OR (at least one condition true) |
! | Logical NOT (inverts the value) |
Array Methods
| Method | What it does | Example |
|---|---|---|
| push() | Adds an element to the end | arr.push(5) |
| pop() | Removes and returns the last element | arr.pop() |
| shift() | Removes and returns the first element | arr.shift() |
| unshift() | Adds an element to the start | arr.unshift(0) |
| map() | Creates a new array by applying a function to each element | arr.map(x => x * 2) |
| filter() | Creates a new array with only the matching elements | arr.filter(x => x > 5) |
| forEach() | Loops over every element, returns nothing | arr.forEach(x => console.log(x)) |
| find() | Returns the first matching element | arr.find(x => x > 5) |
| includes() | Checks whether a value exists in the array | arr.includes(5) |
| slice() | Returns part of an array without changing the original | arr.slice(1, 3) |
| splice() | Removes/adds elements, changing the original | arr.splice(1, 2) |
| join() | Joins an array into a string with a separator | arr.join(", ") |
| reduce() | Reduces an array to a single value (like a sum) | arr.reduce((s,x)=>s+x, 0) |
String Methods
| Method / property | What it does | Example |
|---|---|---|
| length | String length | "hello".length → 5 |
| toUpperCase() | Converts to uppercase | "hi".toUpperCase() → "HI" |
| toLowerCase() | Converts to lowercase | "HI".toLowerCase() → "hi" |
| slice() | Returns part of a string | "hello".slice(0,2) → "he" |
| split() | Splits a string into an array by a separator | "a,b".split(",") → ["a","b"] |
| includes() | Checks if a string contains a substring | "hello".includes("ell") → true |
| trim() | Removes whitespace from both ends of a string | " hi ".trim() → "hi" |
| replace() | Replaces part of a string | "hi".replace("h","H") → "Hi" |
Conditionals & Loops
| Construct | Syntax |
|---|---|
| if / else | if (x > 5) { ... } else { ... } |
| if / else if / else | if (x>90){...} else if (x>70){...} else {...} |
| switch | switch (x) { case 1: ...; break; default: ...; } |
| for | for (let i = 0; i < 10; i++) { ... } |
| while | while (condition) { ... } |
Functions
| Kind | Syntax |
|---|---|
| Regular function | function sum(a, b) { return a + b; } |
| Function expression | const sum = function(a, b) { return a + b; }; |
| Arrow function | const sum = (a, b) => a + b; |
| Calling a function | sum(2, 3); // 5 |
DOM Basics
| Method / property | What it does |
|---|---|
| document.querySelector() | Finds the first element matching a CSS selector |
| document.querySelectorAll() | Finds all elements matching a CSS selector |
| element.innerHTML | Reads or sets an element's HTML content |
| element.textContent | Reads or sets the text inside an element |
| element.addEventListener() | Attaches an event handler (click, input, etc.) |
| element.classList.add() / remove() / toggle() | Manages an element's CSS classes |
| element.value | The value of an input field (input, select) |
| element.style | Direct control over an element's CSS styles |
What's next
Want to go deeper?
All of these topics are covered in detail in the free JavaScript course — with practical exercises after every lesson.