Home Cheat Sheets JavaScript

JavaScript Cheat Sheets

JavaScript comprehensive cheat sheet

Getting Started

Hello World

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

Basic Commands

Single-line Comment
// This is a comment
Multi-line Comment
/* This is a multi-line comment */
Variable Declaration
let x = 5;
Output
console.log(x);
Input
let input = prompt("Enter something:");

Getting Started Resources

JavaScript Guide https://developer.mozilla.org/en-US/doc…
W3Schools JavaScript https://www.w3schools.com/js/
JavaScript.info https://javascript.info/

Data Types

Primitive Data Types

Number
Numeric data type
String
Sequence of characters
Boolean
true or false
Undefined
Variable not assigned a value
Null
Intentional absence of any value
Symbol
Unique and immutable data type
BigInt
Arbitrary-precision integers

Type Conversion

let num = Number("123"); // 123
let str = String(123); // "123"

Data Types Resources

JavaScript Data Types https://developer.mozilla.org/en-US/doc…
W3Schools: JavaScript Data Types https://www.w3schools.com/js/js_datatyp…

Operators

Arithmetic Operators

+
Addition
-
Subtraction
*
Multiplication
/
Division
%
Modulus

Comparison Operators

==
Equal to
!=
Not equal to
===
Strict equal to
!==
Strict not equal to
>
Greater than
<
Less than
>=
Greater than or equal to
<=
Less than or equal to

Logical Operators

&&
Logical AND
||
Logical OR
!
Logical NOT

Operators Resources

JavaScript Operators https://developer.mozilla.org/en-US/doc…
W3Schools: JavaScript Operators https://www.w3schools.com/js/js_operato…

Control Flow

if-else Statement

let x = 10;
if (x > 5) {
    console.log("Greater");
} else {
    console.log("Smaller or equal");
}

switch Statement

let day = 2;
switch (day) {
    case 1:
        console.log("Monday");
        break;
    case 2:
        console.log("Tuesday");
        break;
    default:
        console.log("Other");
}

for Loop

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

for...of Loop

let arr = [1,2,3];
for (let n of arr) {
    console.log(n);
}

while Loop

let i = 0;
while (i < 3) {
    console.log(i);
    i++;
}

do-while Loop

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 3);

Loop Control Keywords

break
Exit the loop
continue
Skip to next iteration

Control Flow Resources

JavaScript Control Flow https://developer.mozilla.org/en-US/doc…
JavaScript Loops https://developer.mozilla.org/en-US/doc…

Functions

Function Declaration

function greet(name) {
    return "Hello, " + name;
}

Arrow Function

const greet = (name) => "Hello, " + name;

Closure

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

Functions Resources

JavaScript Functions https://developer.mozilla.org/en-US/doc…
W3Schools: JavaScript Functions https://www.w3schools.com/js/js_functio…

Objects and Arrays

Object Creation

let car = {
    brand: "Toyota",
    start: function() {
        console.log(this.brand + " is starting");
    }
};

Array Methods

let arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
arr.pop(); // [1, 2, 3]

Prototype

function Person(name) {
    this.name = name;
}
Person.prototype.greet = function() {
    console.log("Hello, " + this.name);
};

Objects and Arrays Resources

JavaScript Objects https://developer.mozilla.org/en-US/doc…
JavaScript Arrays https://developer.mozilla.org/en-US/doc…

ES6 Features

let and const

let x = 10;
const y = 20;

Template Literals

let name = "World";
console.log(`Hello, ${name}!`);

Destructuring

let [a, b] = [1, 2];
let {name, age} = {name: "Alice", age: 25};

ES6 Features Resources

JavaScript ES6 Features https://developer.mozilla.org/en-US/doc…
W3Schools: JavaScript ES6 https://www.w3schools.com/js/js_es6.asp

Asynchronous JavaScript

Callbacks

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

Promises

let promise = new Promise((resolve, reject) => {
    resolve("Success");
});
promise.then(result => console.log(result));

Async/Await

async function fetchData() {
    let data = await fetch("/api/data");
    console.log(data);
}

Asynchronous JavaScript Resources

JavaScript Promises https://developer.mozilla.org/en-US/doc…
JavaScript Async/Await https://developer.mozilla.org/en-US/doc…

DOM Manipulation

Selecting Elements

let element = document.querySelector("#myElement");

Event Handling

element.addEventListener("click", function() {
    console.log("Element clicked");
});

DOM Manipulation Resources

JavaScript DOM https://developer.mozilla.org/en-US/doc…
JavaScript Event Handling https://developer.mozilla.org/en-US/doc…

Error Handling

try-catch

try {
    let x = 1 / 0;
} catch (e) {
    console.log("Error: " + e.message);
}

Custom Error

class MyError extends Error {
    constructor(message) {
        super(message);
        this.name = "MyError";
    }
}

Error Handling Resources

JavaScript Error Handling https://developer.mozilla.org/en-US/doc…
JavaScript Custom Errors https://developer.mozilla.org/en-US/doc…

Advanced Functions

Higher-Order Functions

function map(arr, func) {
    let result = [];
    for (let i = 0; i < arr.length; i++) {
        result.push(func(arr[i]));
    }
    return result;
}

IIFE

(function() {
    console.log("IIFE");
})();

Advanced Functions Resources

JavaScript Higher-Order Functions https://developer.mozilla.org/en-US/doc…
JavaScript IIFE https://developer.mozilla.org/en-US/doc…

Modules

ES6 Modules

export function greet() {
    console.log("Hello");
}
import { greet } from "./module.js";

Modules Resources

JavaScript Modules https://developer.mozilla.org/en-US/doc…
JavaScript Import/Export https://developer.mozilla.org/en-US/doc…

Event Loop and Concurrency

Event Loop

console.log("Start");
setTimeout(() => {
    console.log("Timeout");
}, 0);
console.log("End");

Event Loop Resources

JavaScript Event Loop https://developer.mozilla.org/en-US/doc…
Concurrency Model https://developer.mozilla.org/en-US/doc…

Regular Expressions

Regex Syntax

let regex = /\d+/;
console.log(regex.test("123"));

Regular Expressions Resources

JavaScript Regular Expressions https://developer.mozilla.org/en-US/doc…
Regex Tutorial https://www.regular-expressions.info/ja…

Debugging

Debugging Tools

console.log("Debugging");
debugger;

Debugging Resources

JavaScript Debugging https://developer.mozilla.org/en-US/doc…
Chrome DevTools https://developer.chrome.com/docs/devto…

Security

Common Security Concerns

XSS
Cross-Site Scripting
CSRF
Cross-Site Request Forgery

Security Resources

JavaScript Security https://developer.mozilla.org/en-US/doc…
OWASP Top Ten https://owasp.org/www-project-top-ten/

Performance Optimization

Optimization Tips

Minimize DOM Access
Reduce the number of DOM manipulations
Use Efficient Selectors
Optimize CSS selectors

Performance Resources

JavaScript Performance https://developer.mozilla.org/en-US/doc…
Web Performance Optimization https://developers.google.com/web/funda…

Web APIs

Fetch API

fetch("/api/data")
    .then(response => response.json())
    .then(data => console.log(data));

WebSockets

let socket = new WebSocket("ws://example.com/socket");
socket.onmessage = function(event) {
    console.log("Data received: " + event.data);
};

Web APIs Resources

JavaScript Fetch API https://developer.mozilla.org/en-US/doc…
JavaScript WebSockets https://developer.mozilla.org/en-US/doc…

TypeScript

TypeScript Basics

let message: string = "Hello, TypeScript!";

TypeScript Resources

TypeScript Documentation https://www.typescriptlang.org/docs/
TypeScript Handbook https://www.typescriptlang.org/docs/han…

Testing

Jest Testing

test("adds 1 + 2 to equal 3", () => {
    expect(1 + 2).toBe(3);
});

Testing Resources

Jest Documentation https://jestjs.io/docs/en/getting-start…
Mocha Documentation https://mochajs.org/

Best Practices

JavaScript Best Practices

Code Organization
Use modules and namespaces
Error Handling
Use try-catch for error management

Best Practices Resources

JavaScript Best Practices https://developer.mozilla.org/en-US/doc…
JavaScript Clean Code https://github.com/ryanmcdermott/clean-…

Tooling

JavaScript Tools

Babel
JavaScript compiler
Webpack
Module bundler
ESLint
Linting utility

Tooling Resources

Babel Documentation https://babeljs.io/docs/en/
Webpack Documentation https://webpack.js.org/concepts/
ESLint Documentation https://eslint.org/docs/user-guide/gett…

Case Studies

JavaScript in Action

Real-World JavaScript Applications https://www.smashingmagazine.com/2020/0…
JavaScript Case Studies https://www.toptal.com/javascript/10-mo…