Recruitment Grow your team. Employer Branding Reach the talent.

LIVE COHORT PROGRAM Technology Schools Explore industry-focused tech schools. INTERACTIVE LEARNING PLATFORM Coderspace Pro: Software & Data Specialize in Python and data with hands-on courses.

Events

FOR TALENT

Blog Explore the trends. Codebrew Stay up to date. Interview Questions Get prepared. Coder Glossary Learn the concepts. Portfolio Showcase your projects. University Preferences Make the right choice. Roadmap Move forward step by step. Cheat Sheets Look up the shortcuts. Free Software Tools Get a hand. Podcast Listen on the go. Salaries Learn what the market pays. AI Tools Explore AI.

FOR COMPANIES

Blog HR trends. Codebrew Stay in the loop. HR Webinars Hear from the experts. Case Studies Get inspired. E-book Download the guides. HR Calculation Tools Calculate with ease.

Recruitment Grow your team. Employer Branding Reach the talent.

JavaScript Cheat Sheets

The most This cheat sheet covers the most common fundamentals of the JavaScript language. JavaScript reference card

Getting Started

// Hello World

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

Basic print statement

// 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 developer.mozilla.org W3Schools JavaScript w3schools.com JavaScript.info 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"

Casting between types

// Data Types Resources

JavaScript Data Types developer.mozilla.org W3Schools: JavaScript Data Types w3schools.com

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 developer.mozilla.org W3Schools: JavaScript Operators w3schools.com

Control Flow

// if-else Statement

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

Conditional branching

// switch Statement

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

Switch-case branching

// for Loop

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

Classic for loop

// for...of Loop

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

For-of loop

// while Loop

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

While loop

// do-while Loop

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

Do-while loop

// Loop Control Keywords

break

Exit the loop

continue

Skip to next iteration

// Control Flow Resources

JavaScript Control Flow developer.mozilla.org JavaScript Loops developer.mozilla.org

Functions

// Function Declaration

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

Defining a function

// Arrow Function

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

ES6 arrow function

// Closure

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

Function with closure

// Functions Resources

JavaScript Functions developer.mozilla.org W3Schools: JavaScript Functions w3schools.com

Objects and Arrays

// Object Creation

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

Creating an object

// Array Methods

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

Common array methods

// Prototype

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

Understanding prototypes

// Objects and Arrays Resources

JavaScript Objects developer.mozilla.org JavaScript Arrays developer.mozilla.org

ES6 Features

// let and const

let x = 10;
const y = 20;

Block-scoped variables

// Template Literals

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

String interpolation

// Destructuring

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

Extracting values from arrays or objects

// ES6 Features Resources

JavaScript ES6 Features developer.mozilla.org W3Schools: JavaScript ES6 w3schools.com

Asynchronous JavaScript

// Callbacks

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

Basic callback function

// Promises

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

Handling asynchronous operations

// Async/Await

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

Simplifying promise handling

// Asynchronous JavaScript Resources

JavaScript Promises developer.mozilla.org JavaScript Async/Await developer.mozilla.org

DOM Manipulation

// Selecting Elements

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

DOM element selection

// Event Handling

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

Adding event listeners

// DOM Manipulation Resources

JavaScript DOM developer.mozilla.org JavaScript Event Handling developer.mozilla.org

Error Handling

// try-catch

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

Basic error handling

// Custom Error

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

Creating custom error

// Error Handling Resources

JavaScript Error Handling developer.mozilla.org JavaScript Custom Errors developer.mozilla.org

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;
}

Functions that operate on other functions

// IIFE

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

Immediately Invoked Function Expression

// Advanced Functions Resources

JavaScript Higher-Order Functions developer.mozilla.org JavaScript IIFE developer.mozilla.org

Modules

// ES6 Modules

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

Import and export syntax

// Modules Resources

JavaScript Modules developer.mozilla.org JavaScript Import/Export developer.mozilla.org

Event Loop and Concurrency

// Event Loop

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

Understanding the event loop

// Event Loop Resources

JavaScript Event Loop developer.mozilla.org Concurrency Model developer.mozilla.org

Regular Expressions

// Regex Syntax

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

Basic regex patterns

// Regular Expressions Resources

JavaScript Regular Expressions developer.mozilla.org Regex Tutorial regular-expressions.info

Debugging

// Debugging Tools

console.log("Debugging");
debugger;

Using console and debugger

// Debugging Resources

JavaScript Debugging developer.mozilla.org Chrome DevTools developer.chrome.com

Security

// Common Security Concerns

XSS

Cross-Site Scripting

CSRF

Cross-Site Request Forgery

// Security Resources

JavaScript Security developer.mozilla.org OWASP Top Ten owasp.org

Performance Optimization

// Optimization Tips

Minimize DOM Access

Reduce the number of DOM manipulations

Use Efficient Selectors

Optimize CSS selectors

// Performance Resources

JavaScript Performance developer.mozilla.org Web Performance Optimization developers.google.com

Web APIs

// Fetch API

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

Making network requests

// WebSockets

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

Real-time communication

// Web APIs Resources

JavaScript Fetch API developer.mozilla.org JavaScript WebSockets developer.mozilla.org

TypeScript

// TypeScript Basics

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

Introduction to TypeScript

// TypeScript Resources

TypeScript Documentation typescriptlang.org TypeScript Handbook typescriptlang.org

Testing

// Jest Testing

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

Unit testing with Jest

// Testing Resources

Jest Documentation jestjs.io Mocha Documentation 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 developer.mozilla.org JavaScript Clean Code github.com

Tooling

// JavaScript Tools

Babel

JavaScript compiler

Webpack

Module bundler

ESLint

Linting utility

// Tooling Resources

Babel Documentation babeljs.io Webpack Documentation webpack.js.org ESLint Documentation eslint.org

Case Studies

// JavaScript in Action

Real-World JavaScript Applications smashingmagazine.com JavaScript Case Studies toptal.com

Land the career of your dreams!

Get inspired, learn, join competitions and grow in your job!