JavaScript Cheat Sheet

Return to TOC

Basic Syntax

console.log("Hello, World!");

Variables and Data Types

Data Type Description Example
var Declares a variable var x = 5;
let Declares a block-scoped variable let y = 3.14;
const Declares a block-scoped, read-only constant const name = "Alice";
string Represents a sequence of characters let message = "Hello";
number Represents both integer and floating-point numbers let count = 42;
boolean Represents either true or false let isActive = true;
array Represents a list of values let colors = ["red", "green", "blue"];
object Represents an instance of a class let person = {name: "Alice", age: 25};

Control Flow

Statement Description Example
if Conditional statement if (x > 0) {
    console.log("Positive");
}
else if Else if statement else if (x == 0) {
    console.log("Zero");
}
else Else statement else {
    console.log("Negative");
}
for For loop for (let i = 0; i < 5; i++) {
    console.log(i);
}
while While loop while (x > 0) {
    x--;
}
break Break out of a loop break;
continue Continue to the next iteration of a loop continue;

Functions

Function Description Example
function Define a function function greet(name) {
    console.log(`Hello, ${name}!`);
}
return Return a value from a function return x + y;

Events

Event Description Example
onclick Occurs when an element is clicked element.onclick = function() {
    console.log("Clicked!");
};
onmouseover Occurs when the pointer is moved onto an element element.onmouseover = function() {
    console.log("Mouse over!");
};
onmouseout Occurs when the pointer is moved out of an element element.onmouseout = function() {
    console.log("Mouse out!");
};

DOM Manipulation

Method Description Example
getElementById Find an element by ID document.getElementById("myElement");
querySelector Returns the first element that matches a CSS selector document.querySelector(".myClass");
querySelectorAll Returns all elements that match a CSS selector document.querySelectorAll("p");
createElement Create a new HTML element document.createElement("div");
appendChild Add a new child element parent.appendChild(child);
removeChild Remove a child element parent.removeChild(child);

ES6 Features

Feature Description Example
let Declares a block-scoped variable let x = 10;
const Declares a block-scoped, read-only constant const y = 20;
arrow function Shorter syntax for function expressions const add = (a, b) => a + b;
template literals String literals allowing embedded expressions const message = `Hello, ${name}!`;
default parameters Allows setting default values for function parameters function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}

Promises

const myPromise = new Promise((resolve, reject) => {
    let success = true;
    if (success) {
        resolve("Promise resolved!");
    } else {
        reject("Promise rejected!");
    }
});

myPromise.then((message) => {
    console.log(message);
}).catch((message) => {
    console.log(message);
});

Async/Await

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

fetchData();