cheatsheets

JavaScript Cheatsheet

Table of Contents

Variables

var

var name = 'John';

let

let age = 30;

const

const PI = 3.14;

Data Types

Primitive Types

Operators

Arithmetic Operators

let sum = 10 + 5; // Addition
let difference = 10 - 5; // Subtraction
let product = 10 * 5; // Multiplication
let quotient = 10 / 5; // Division
let remainder = 10 % 3; // Modulus
let exponent = 2 ** 3; // Exponentiation

Assignment Operators

let x = 10;
x += 5; // Equivalent to x = x + 5
x -= 5; // Equivalent to x = x - 5
x *= 5; // Equivalent to x = x * 5
x /= 5; // Equivalent to x = x / 5
x %= 5; // Equivalent to x = x % 5
x **= 5; // Equivalent to x = x ** 5

Comparison Operators

let a = 10;
let b = 5;

a == b; // Equal to
a === b; // Strict equal to
a != b; // Not equal to
a !== b; // Strict not equal to
a > b; // Greater than
a >= b; // Greater than or equal to
a < b; // Less than
a <= b; // Less than or equal to

Logical Operators

let a = true;
let b = false;

a && b; // Logical AND
a || b; // Logical OR
!a; // Logical NOT

Conditionals

if Statement

if (condition) {
  // code to be executed if condition is true
}

if…else Statement

if (condition) {
  // code to be executed if condition is true
} else {
  // code to be executed if condition is false
}

else if Statement

if (condition1) {
  // code to be executed if condition1 is true
} else if (condition2) {
  // code to be executed if condition2 is true
} else {
  // code to be executed if both condition1 and condition2 are false
}

switch Statement

switch (expression) {
  case value1:
    // code to be executed if expression equals value1
    break;
  case value2:
    // code to be executed if expression equals value2
    break;
  default:
    // code to be executed if expression doesn't match any case
}

Loops

for Loop

for (let i = 0; i < 5; i++) {
  // code to be executed
}

while Loop

let i = 0;
while (i < 5) {
  // code to be executed
  i++;
}

do…while Loop

let i = 0;
do {
  // code to be executed
  i++;
} while (i < 5);

for…in Loop

let obj = {a: 1, b: 2, c: 3};
for (let key in obj) {
  // code to be executed
}

for…of Loop

let arr = [1, 2, 3];
for (let value of arr) {
  // code to be executed
}

Functions

Function Declaration

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

Function Expression

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

Arrow Function

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

Objects

Object Literal

let person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log('Hello');
  }
};

Accessing Properties

person.job = 'Developer'; // Adding a property
person.age = 31; // Modifying a property

Adding/Modifying Properties

person.job = 'Developer'; // Adding a property
person.age = 31; // Modifying a property

Deleting Properties

delete person.age;

Arrays

Array Literal

let numbers = [1, 2, 3, 4, 5];

Accessing Elements

console.log(numbers[0]);

Adding Elements

numbers.push(6); // Adds to the end
numbers.unshift(0); // Adds to the beginning

Removing Elements

numbers.pop(); // Removes from the end
numbers.shift(); // Removes from the beginning

Iterating Over Arrays

numbers.forEach(function(number) {
  console.log(number);
});

numbers.forEach(number => console.log(number)); // Using arrow function

ES6 Features

let and const

let name = 'John';
const PI = 3.14;

Arrow Functions

const greet = () => console.log('Hello');

Template Literals

let name = 'John';
let message = `Hello, ${name}!`;

Destructuring Assignment

let person = {name: 'John', age: 30};
let {name, age} = person;

let arr = [1, 2, 3];
let [a, b, c] = arr;

Default Parameters

function greet(name = 'Guest') {
  console.log(`Hello, ${name}`);
}

Spread Operator

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];

Rest Parameters

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

Classes

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

let john = new Person('John', 30);
john.greet();

DOM Manipulation

Selecting Elements

document.getElementById('id');
document.getElementsByClassName('class');
document.getElementsByTagName('tag');
document.querySelector('selector');
document.querySelectorAll('selector');

Modifying Elements

let element = document.getElementById('id');
element.innerHTML = 'New Content';
element.style.color = 'blue';
element.classList.add('new-class');

Creating Elements

let newElement = document.createElement('div');
newElement.innerHTML = 'Hello, World!';
document.body.appendChild(newElement);

Removing Elements

let element = document.getElementById('id');
element.remove();

Events

Adding Event Listeners

let button = document.getElementById('button');
button.addEventListener('click', function() {
  console.log('Button clicked');
});

Removing Event Listeners

function handleClick() {
  console.log('Button clicked');
}

button.removeEventListener('click', handleClick);

Async Programming

Callbacks

function fetchData(callback) {
  setTimeout(() => {
    callback('Data fetched');
  }, 1000);
}

fetchData(data => {
  console.log(data);
});

Promises

let promise = new Promise((resolve, reject) => {
  let success = true;
  if (success) {
    resolve('Success');
  } else {
    reject('Error');
  }
});

promise.then(result => {
  console.log(result);
}).catch(error => {
  console.log(error);
});

Async/Await

async function fetchData() {
  let response = await fetch('url');
  let data = await response.json();
  console.log(data);
}

fetchData();

Tutorials

Official Documentation

Tutorials

Books and Articles