JavaScript Cheatsheet

Variables & Data Types

Variable Declarationslet name = "John";

const age = 25;

var city = "New York";

Data Types// Primitive

let str = "Hello";

let num = 42;

let bool = true;

let nothing = null;

let notDefined;

let sym = Symbol();

// Reference

let obj = {};

let arr = [];

Type Checkingtypeof variable;

Array.isArray(arr);

instanceof constructor;

Operators

Arithmetic+ (addition)

- (subtraction)

* (multiplication)

/ (division)

% (modulus)

** (exponentiation)

++ (increment)

-- (decrement)

Comparison== (equal)

=== (strict equal)

!= (not equal)

!== (strict not equal)

> (greater than)

< (less than)

>= (greater or equal)

<= (less or equal)

Logical&& (AND)

|| (OR)

! (NOT)

?? (nullish coalescing)

Functions

Function Declarationfunction greet(name) {

  return `Hello, ${name}!`;

}

Arrow Functionconst add = (a, b) => a + b;

// With block

const multiply = (a, b) => {

  return a * b;

};

Function Expressionconst sayHi = function() {

  console.log("Hi!");

};

Higher Order Functionsarr.map(item => item * 2);

arr.filter(item => item > 5);

arr.reduce((acc, item) => acc + item, 0);

Arrays

Creating Arrayslet arr = [1, 2, 3];

let arr2 = new Array(1, 2, 3);

let arr3 = Array.of(1, 2, 3);

Array Methodsarr.push(item);

arr.pop();

arr.shift();

arr.unshift(item);

arr.slice(start, end);

arr.splice(start, deleteCount, items);

Iterationarr.forEach(item => console.log(item));

arr.map(item => item * 2);

arr.filter(item => item > 5);

arr.find(item => item === 5);

arr.reduce((acc, item) => acc + item, 0);

Objects

Creating Objectslet obj = {

  name: "John",

  age: 25

};

const obj2 = new Object();

obj2.name = "Jane";

Object MethodsObject.keys(obj);

Object.values(obj);

Object.entries(obj);

Object.assign(target, source);

Object.freeze(obj);

Destructuringconst {name, age} = obj;

// With default

const {name = "Unknown"} = obj;

Control Flow

If Statementif (condition) {

  // code

} else if (anotherCondition) {

  // code

} else {

  // code

}

Switchswitch (expression) {

  case value1:

    // code

    break;

  case value2:

    // code

    break;

  default:

    // code

}

Ternary Operatorcondition ? valueIfTrue : valueIfFalse;

Loops

For Loopfor (let i = 0; i < 10; i++) {

  console.log(i);

}

While Loopwhile (condition) {

  // code

}

Do-Whiledo {

  // code

} while (condition);

For...In & For...Offor (let key in obj) {

  console.log(key);

}

for (let item of arr) {

  console.log(item);

}

DOM Manipulation

Selecting Elementsdocument.getElementById('id');

document.querySelector('.class');

document.querySelectorAll('div');

Modifying Elementselement.textContent = 'New text';

element.innerHTML = 'Bold';

element.style.color = 'red';

element.classList.add('active');

Creating Elementsconst div = document.createElement('div');

div.textContent = 'Hello';

document.body.appendChild(div);

Events

Event Listenerselement.addEventListener('click', function() {

  // handle click

});

// Arrow function

element.addEventListener('click', () => {

  // handle click

});

Common Eventsclick

dblclick

mousedown

mouseup

mouseover

mouseout

keydown

keyup

submit

load

resize

Event Objectelement.addEventListener('click', (e) => {

  console.log(e.target);

  console.log(e.type);

  e.preventDefault();

  e.stopPropagation();

});

ES6+ Features

Template Literalsconst name = "John";

const greeting = `Hello, ${name}!`;

Destructuring// Array

const [a, b] = [1, 2];

// Object

const {name, age} = person;

Spread Operatorconst arr1 = [1, 2];

const arr2 = [...arr1, 3, 4];

const obj = {...obj1, newProp: 'value'};

Modules// Export

export const PI = 3.14;
export default function() {}


// Import

import { PI } from './math';
import myFunc from './myFunc';

Async JavaScript

Callbacksfunction fetchData(callback) {

  setTimeout(() => {

    callback('Data received');

  }, 1000);

}

Promisesconst promise = new Promise((resolve, reject) => {

  if (success) {

    resolve('Success!');

  } else {

    reject('Error!');

  }

});

promise.then(data => console.log(data))

  .catch(error => console.log(error));

Async/Awaitasync function fetchData() {

  try {

    const response = await fetch('url');

    const data = await response.json();

    return data;

  } catch (error) {

    console.error(error);

  }

}

Error Handling

Try-Catchtry {

  // risky code

  throw new Error('Something went wrong');

} catch (error) {

  console.error(error.message);

} finally {

  // always runs

}

Custom Errorsclass CustomError extends Error {

  constructor(message) {

    super(message);

    this.name = 'CustomError';

  }

}

What is CodeSikhoWithAJ?

CodeSikhoWithAJ is a coding education platform dedicated to teaching programming skills to everyone who wants to learn. Our mission is to make coding accessible and help people start their journey in the tech industry.

Founded by Ajeet Yadav, CodeSikhoWithAJ provides comprehensive tutorials, practical examples, and hands-on projects to help you master web development and other programming skills.

Trusted by developers at:

Google

Microsoft

Facebook

Amazon

Netflix

Twitter

Variable Declarations

Data Types

Type Checking

Arithmetic

Comparison

Logical

Function Declaration

Arrow Function

Function Expression

Higher Order Functions

Creating Arrays

Array Methods

Iteration

Creating Objects

Object Methods

Destructuring

If Statement

Switch

Ternary Operator

For Loop

While Loop

Do-While

For...In & For...Of

Selecting Elements

Modifying Elements

Creating Elements

Event Listeners

Common Events

Event Object

Template Literals

Destructuring

Spread Operator

Modules

Callbacks

Promises

Async/Await

Try-Catch

Custom Errors

What is CodeSikhoWithAJ?

Trusted by developers at:

Subscribe to our newsletter