The-ultimate-JavaScript-Cheatsheet

JavaScript Basics Cheatsheet

Variables and Constants

Variables: Used to store data that can be changed later.

// Declaring a variable using var
var x = 10;

// Declaring a variable using let
let y = 20;

// Variables can be reassigned
x = 15;
y = 25;

Constants: Used to store data that cannot be changed.

// Declaring a constant using const
const z = 30;

// Trying to reassign a constant will throw an error
// z = 35; // This will throw an error

Data Types

Primitive Data Types:

Number:
```
let num = 42;
let pi = 3.14;
```
String:
```
let str = "Hello, world!";
```
Boolean:
```
let isTrue = true;
let isFalse = false;
```
Undefined:
```
let undefinedVar;
```
Null:
```
let nullVar = null;
```
Symbol (ES6):
```
let sym = Symbol('description');
```

Reference Data Types:

Object:

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

Array:
```
let arr = [1, 2, 3, 4, 5];
```

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 a = 10;
a += 5;  // a = a + 5
a -= 5;  // a = a - 5
a *= 5;  // a = a * 5
a /= 5;  // a = a / 5
a %= 3;  // a = a % 3
a **= 2; // a = a ** 2

Comparison Operators:

let isEqual = (10 == "10");       // true (loose equality)
let isStrictEqual = (10 === 10);  // true (strict equality)
let isNotEqual = (10 != "10");    // false (loose inequality)
let isStrictNotEqual = (10 !== 10); // false (strict inequality)
let isGreater = (10 > 5);         // true
let isLess = (10 < 5);            // false
let isGreaterOrEqual = (10 >= 5); // true
let isLessOrEqual = (10 <= 5);    // false

Logical Operators:

let andOperator = (true && false); // false
let orOperator = (true || false);  // true
let notOperator = (!true);         // false

Ternary Operator:

let result = (10 > 5) ? "Greater" : "Lesser"; // "Greater"

Type Operators:

let typeOfString = typeof "Hello"; // "string"
let instanceOfObject = {} instanceof Object; // true

Control Structures

Conditionals

if-else:

let age = 18;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

if-else if-else:

let score = 85;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else if (score >= 70) {
  console.log("Grade: C");
} else {
  console.log("Grade: F");
}

switch:

let day = 3;

switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  case 4:
    console.log("Thursday");
    break;
  case 5:
    console.log("Friday");
    break;
  case 6:
    console.log("Saturday");
    break;
  case 7:
    console.log("Sunday");
    break;
  default:
    console.log("Invalid day");
}

Loops

for loop:

for (let i = 0; i < 5; i++) {
  console.log("Iteration:", i);
}

while loop:

let i = 0;

while (i < 5) {
  console.log("Iteration:", i);
  i++;
}

do-while loop:

let i = 0;

do {
  console.log("Iteration:", i);
  i++;
} while (i < 5);

JavaScript Functions Cheatsheet

Functions

Function Declarations

Description: Defines a named function that can be called later.

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

console.log(greet("Alice")); // Output: Hello, Alice!

Function Expressions

Description: Defines a function as part of a larger expression, typically assigned to a variable.

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

console.log(greet("Bob")); // Output: Hello, Bob!

Arrow Functions

Description: A shorter syntax for function expressions, does not have its own this, arguments, or super.

const greet = (name) => `Hello, ${name}!`;

console.log(greet("Charlie")); // Output: Hello, Charlie!

Higher-Order Functions

Description: Functions that take other functions as arguments or return functions.

const greet = (name) => `Hello, ${name}!`;

const sayHello = (func, name) => func(name);

console.log(sayHello(greet, "Dana")); // Output: Hello, Dana!

Closures

Description: Functions that remember the environment in which they were created.

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();

console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

IIFE (Immediately Invoked Function Expressions)

Description: Functions that are executed immediately after they are defined.

(function() {
  console.log("This is an IIFE");
})(); // Output: This is an IIFE

(function(name) {
  console.log(`Hello, ${name}!`);
})("Eve"); // Output: Hello, Eve!

JavaScript Objects Cheatsheet

Objects

Creating Objects

Description: Objects in JavaScript are collections of key-value pairs.

// Object literal
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  greet: function() {
    return `Hello, my name is ${this.firstName} ${this.lastName}.`;
  }
};

console.log(person.firstName); // Output: John
console.log(person.greet());   // Output: Hello, my name is John Doe.

Object Methods

Description: Functions stored as object properties.

const person = {
  firstName: "Jane",
  lastName: "Smith",
  greet: function() {
    return `Hello, my name is ${this.firstName} ${this.lastName}.`;
  }
};

console.log(person.greet()); // Output: Hello, my name is Jane Smith.

this Keyword

Description: Refers to the current object in a method or constructor.

const person = {
  firstName: "Alice",
  lastName: "Johnson",
  greet: function() {
    return `Hello, my name is ${this.firstName} ${this.lastName}.`;
  }
};

console.log(person.greet()); // Output: Hello, my name is Alice Johnson.

Prototypes and Inheritance

Description: Allows objects to inherit properties and methods from other objects.

// Constructor function
function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

// Adding a method using prototype
Person.prototype.greet = function() {
  return `Hello, my name is ${this.firstName} ${this.lastName}.`;
};

const john = new Person("John", "Doe");
console.log(john.greet()); // Output: Hello, my name is John Doe.

ES6 Classes

Description: Syntactical sugar over JavaScript's prototype-based inheritance.

// ES6 Class
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  greet() {
    return `Hello, my name is ${this.firstName} ${this.lastName}.`;
  }
}

const jane = new Person("Jane", "Smith");
console.log(jane.greet()); // Output: Hello, my name is Jane Smith.

JavaScript Arrays Cheatsheet

Arrays

Creating Arrays

Description: Arrays in JavaScript store multiple values in a single variable.

// Array literal
const fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits[0]); // Output: Apple

Array Methods

Description: Methods to manipulate arrays: forEach, map, filter, reduce, etc.

    // forEach: Executes a provided function once for each array element
    fruits.forEach((fruit) => {
      console.log(fruit);
    });

    // map: Creates a new array populated with the results of calling a provided function on every element
    const fruitLengths = fruits.map((fruit) => fruit.length);
    console.log(fruitLengths); // Output: [5, 6, 6]

    // filter: Creates a new array with elements that pass a test
    const filteredFruits = fruits.filter((fruit) => fruit.startsWith("A"));
    console.log(filteredFruits); // Output: ["Apple"]

    // reduce: Applies a function to reduce the array to a single value
    const totalLength = fruits.reduce((total, fruit) => total + fruit.length, 0);
    console.log(totalLength); // Output: 17

Advanced Topics

Promises

Description: An object representing the eventual completion or failure of an asynchronous operation.

// Creating a promise
const myPromise = new Promise((resolve, reject) => {
  let success = true;
  if (success) {
    resolve("Promise fulfilled!");
  } else {
    reject("Promise rejected.");
  }
});

// Using a promise
myPromise
  .then((message) => {
    console.log(message); // Output: "Promise fulfilled!"
  })
  .catch((error) => {
    console.error(error);
  });

Async/Await

Description: A syntactic sugar built on promises that allows writing asynchronous code in a synchronous manner.

// Using 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 fetching data:', error);
  }
}

fetchData();

Error Handling (try, catch, finally)

Description: Structures for handling errors and executing cleanup code.

// Using try, catch, and finally
try {
  let result = riskyOperation();
  console.log('Operation successful:', result);
} catch (error) {
  console.error('Operation failed:', error);
} finally {
  console.log('Cleanup code executed.');
}

function riskyOperation() {
  if (Math.random() > 0.5) {
    return 'Success!';
  } else {
    throw new Error('Failure!');
  }
}

Modules (import, export)

Description: A way to split code into reusable, independent files and load them as needed.

// Exporting a function from a module (export.js)
export function greet(name) {
  return `Hello, ${name}!`;
}

// Importing and using a function in another file (import.js)
import { greet } from './export.js';

console.log(greet('Alice')); // Output: "Hello, Alice!"

DOM Manipulation

Selecting Elements

Description: Methods to select elements from the DOM.

// Selecting an element by ID
const elementById = document.getElementById('myElement');

// Selecting elements by class name
const elementsByClassName = document.getElementsByClassName('myClass');

// Selecting elements by tag name
const elementsByTagName = document.getElementsByTagName('div');

// Selecting the first matching element
const firstElement = document.querySelector('.myClass');

// Selecting all matching elements
const allElements = document.querySelectorAll('.myClass');

Modifying Elements

Description: Methods to change content and attributes of DOM elements.

// Changing innerHTML
elementById.innerHTML = '<p>New Content</p>';

// Changing textContent
elementById.textContent = 'New Text Content';

// Changing style
elementById.style.color = 'blue';

// Adding a class
elementById.classList.add('newClass');

// Removing a class
elementById.classList.remove('oldClass');

// Setting an attribute
elementById.setAttribute('data-custom', 'value');

// Removing an attribute
elementById.removeAttribute('data-custom');

Event Handling

Description: Methods to handle user interactions and other events.

// Adding an event listener
elementById.addEventListener('click', function() {
  console.log('Element clicked!');
});

// Removing an event listener
function handleClick() {
  console.log('Element clicked!');
}
elementById.addEventListener('click', handleClick);
elementById.removeEventListener('click', handleClick);

// Event delegation
document.body.addEventListener('click', function(event) {
  if (event.target.matches('.myClass')) {
    console.log('Delegated click event on', event.target);
  }
});

Browser APIs

Fetch API

Description: A modern way to make network requests similar to XMLHttpRequest.

// Using Fetch API to get data
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

// Using Fetch API with async/await
async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
  }
}

fetchData();

LocalStorage

Description: A way to store data on the client side that persists even after the browser is closed.

// Setting an item in LocalStorage
localStorage.setItem('username', 'Alice');

// Getting an item from LocalStorage
const username = localStorage.getItem('username');
console.log(username); // Output: "Alice"

// Removing an item from LocalStorage
localStorage.removeItem('username');

// Clearing all items from LocalStorage
localStorage.clear();

SessionStorage

Description: A way to store data on the client side that persists only for the duration of the page session.

// Setting an item in SessionStorage
sessionStorage.setItem('sessionID', '123456');

// Getting an item from SessionStorage
const sessionID = sessionStorage.getItem('sessionID');
console.log(sessionID); // Output: "123456"

// Removing an item from SessionStorage
sessionStorage.removeItem('sessionID');

// Clearing all items from SessionStorage
sessionStorage.clear();

ES6+ Features

Template Literals

Description: Allows embedding expressions inside string literals.

const name = 'Alice';
const greeting = `Hello, ${name}!`; // Output: "Hello, Alice!"
console.log(greeting);

Destructuring

Description: Extracts values from arrays or properties from objects into distinct variables.

// Array destructuring
const [a, b] = [1, 2];
console.log(a); // Output: 1
console.log(b); // Output: 2

// Object destructuring
const {name, age} = {name: 'Alice', age: 25};
console.log(name); // Output: Alice
console.log(age); // Output: 25

Spread and Rest Operators

Description: The spread operator (...) expands an array into its elements, while the rest operator collects multiple elements into an array.

// Spread operator
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // Output: [1, 2, 3, 4]

// Rest operator
function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3)); // Output: 6

Default Parameters

Description: Allows setting default values for function parameters.

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}
console.log(greet()); // Output: "Hello, Guest!"
console.log(greet('Alice')); // Output: "Hello, Alice!"

Arrow Functions

Description: Provides a shorter syntax for writing functions and does not bind its own this.

const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5

const greet = name => `Hello, ${name}!`;
console.log(greet('Alice')); // Output: "Hello, Alice!"

Let and Const

Description: let allows block-scoped variable declarations. const is used to declare constants that cannot be reassigned.

// Using let
let count = 1;
if (true) {
  let count = 2;
  console.log(count); // Output: 2
}
console.log(count); // Output: 1

// Using const
const PI = 3.14;
console.log(PI); // Output: 3.14
// PI = 3.1415; // This will cause an error

TypeScript Basics

Types

Description: TypeScript provides static typing to JavaScript.

let isDone: boolean = false;
let count: number = 10;
let username: string = 'Alice';
let numbers: number[] = [1, 2, 3, 4];
let tuple: [string, number] = ['Alice', 25];

Interfaces

Description: Defines the structure of an object.

interface User {
  name: string;
  age: number;
  isAdmin?: boolean; // Optional property
}

const user: User = {
  name: 'Alice',
  age: 25
};

Classes and Inheritance

Description: Supports object-oriented programming with classes and inheritance.

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

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

class Employee extends Person {
  position: string;

  constructor(name: string, age: number, position: string) {
    super(name, age);
    this.position = position;
  }

  describe() {
    return `${this.greet()} and I am a ${this.position}`;
  }
}

const employee = new Employee('Alice', 25, 'Developer');
console.log(employee.describe()); // Output: "Hello, my name is Alice and I am a Developer"

Modules

Description: Organizes code into reusable pieces.

// module1.ts
export const PI = 3.14;

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

// module2.ts
import { PI, add } from './module1';

console.log(add(2, 3)); // Output: 5
console.log(PI); // Output: 3.14

Miscellaneous

Regular Expressions

Description: Provides a way to match patterns within strings.

const regex = /hello/i;
console.log(regex.test('Hello world')); // Output: true

const match = 'Hello world'.match(regex);
console.log(match[0]); // Output: "Hello"

Date and Time

Description: Provides functionality to work with dates and times.

const now = new Date();
console.log(now); // Output: current date and time

const specificDate = new Date('2024-01-01');
console.log(specificDate); // Output: Mon Jan 01 2024...

Math Object

Description: Provides properties and methods for mathematical constants and functions.

console.log(Math.PI); // Output: 3.141592653589793
console.log(Math.round(4.7)); // Output: 5
console.log(Math.sqrt(16)); // Output: 4

Name		Name	Last commit message	Last commit date
MERN		MERN
README.md		README.md

Latest commit

History

Folders and files

Repository files navigation

The-ultimate-JavaScript-Cheatsheet

JavaScript Basics Cheatsheet

Variables and Constants

Data Types

Operators

Control Structures

Conditionals

Loops

JavaScript Functions Cheatsheet

Functions

Function Declarations

Function Expressions

Arrow Functions

Higher-Order Functions

Closures

IIFE (Immediately Invoked Function Expressions)

JavaScript Objects Cheatsheet

Objects

Creating Objects

Object Methods

this Keyword

Prototypes and Inheritance

ES6 Classes

JavaScript Arrays Cheatsheet

Arrays

Creating Arrays

Array Methods

Advanced Topics

Promises

Async/Await

Error Handling (try, catch, finally)

Modules (import, export)

DOM Manipulation

Selecting Elements

Modifying Elements

Event Handling

Browser APIs

Fetch API

LocalStorage

SessionStorage

ES6+ Features

Template Literals

Destructuring

Spread and Rest Operators

Default Parameters

Arrow Functions

Let and Const

TypeScript Basics

Types

Interfaces

Classes and Inheritance

Modules

Miscellaneous

Regular Expressions

Date and Time

Math Object

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors