JavaScript Cheatsheet

---

Setup & Environment

• Install Node.js (macOS)

brew install node

• Install Node.js (Linux)

# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

# CentOS/RHEL
curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash -
sudo yum install -y nodejs

• Install Node.js (Windows)

1. Download from nodejs.org
2. Run installer and follow prompts
3. Or use package manager like Chocolatey

• Check versions

node --version
npm --version

• Initialize new project

npm init -y

---

Running JavaScript

• Run JavaScript file with Node.js

node script.js

• Run JavaScript in browser

<script src="script.js"></script>
<script>
    console.log("Hello, World!");
</script>

• Node.js REPL

node

---

Variables and Data Types

• Variable declarations

var oldWay = "avoid this";
let mutableVar = "can change";
const immutableVar = "cannot change";

• Numbers

let integer = 42;
let float = 3.14;
let scientific = 1e6;
let infinity = Infinity;
let notANumber = NaN;

• Strings

let single = 'Hello';
let double = "World";
let template = `Hello ${name}`;
let multiline = `This is a
multiline string`;

• Booleans

let isTrue = true;
let isFalse = false;

• Arrays

let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "hello", true, null];
let empty = [];

• Objects

let person = {
    name: "Alice",
    age: 30,
    greet: function() {
        return `Hello, I'm ${this.name}`;
    }
};

• Null and Undefined

let nothing = null;
let notDefined = undefined;

---

Functions

• Function declaration

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

• Function expression

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

• Arrow functions

const greet = (name) => `Hello, ${name}!`;
const add = (a, b) => a + b;
const square = x => x * x;

• Default parameters

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

• Rest parameters

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

• Destructuring parameters

function greet({name, age}) {
    return `Hello, ${name}! You are ${age} years old.`;
}

---

Control Flow

• If/else statement

if (x > 0) {
    console.log("Positive");
} else if (x < 0) {
    console.log("Negative");
} else {
    console.log("Zero");
}

• Ternary operator

const message = x > 0 ? "Positive" : "Not positive";

• Switch statement

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

• For loop

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

• For...of loop

const array = [1, 2, 3, 4, 5];
for (const item of array) {
    console.log(item);
}

• For...in loop

const obj = {a: 1, b: 2, c: 3};
for (const key in obj) {
    console.log(key, obj[key]);
}

• While loop

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

---

Arrays

• Array methods

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

// Add/remove elements
numbers.push(6);           // Add to end
numbers.pop();             // Remove from end
numbers.unshift(0);        // Add to beginning
numbers.shift();           // Remove from beginning

// Transform arrays
const doubled = numbers.map(x => x * 2);
const evens = numbers.filter(x => x % 2 === 0);
const sum = numbers.reduce((acc, x) => acc + x, 0);

// Find elements
const found = numbers.find(x => x > 3);
const index = numbers.findIndex(x => x > 3);
const includes = numbers.includes(3);

// Sort and reverse
numbers.sort((a, b) => a - b);
numbers.reverse();

// Join and slice
const joined = numbers.join(", ");
const sliced = numbers.slice(1, 3);

• Array destructuring

const [first, second, ...rest] = [1, 2, 3, 4, 5];

---

Objects

• Object methods

const person = {name: "Alice", age: 30};

// Get keys, values, entries
Object.keys(person);       // ["name", "age"]
Object.values(person);     // ["Alice", 30]
Object.entries(person);    // [["name", "Alice"], ["age", 30]]

// Assign and merge
Object.assign(person, {city: "New York"});
const merged = {...person, country: "USA"};

// Check properties
person.hasOwnProperty("name");  // true
"name" in person;               // true

• Object destructuring

const {name, age} = person;
const {name: userName, age: userAge} = person;

• Object shorthand

const name = "Alice";
const age = 30;
const person = {name, age};  // Same as {name: name, age: age}

---

Classes

• Class declaration

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    greet() {
        return `Hello, I'm ${this.name}`;
    }
    
    static species() {
        return "Homo sapiens";
    }
}

• Class inheritance

class Student extends Person {
    constructor(name, age, studentId) {
        super(name, age);
        this.studentId = studentId;
    }
    
    study() {
        return `${this.name} is studying`;
    }
}

• Getters and setters

class Circle {
    constructor(radius) {
        this._radius = radius;
    }
    
    get radius() {
        return this._radius;
    }
    
    set radius(value) {
        if (value < 0) {
            throw new Error("Radius cannot be negative");
        }
        this._radius = value;
    }
    
    get area() {
        return Math.PI * this._radius ** 2;
    }
}

---

Promises and Async/Await

• Creating promises

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Success!");
    }, 1000);
});

• Using promises

promise
    .then(result => console.log(result))
    .catch(error => console.error(error))
    .finally(() => console.log("Done"));

• Async/await

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error:', error);
    }
}

• Promise utilities

Promise.all([promise1, promise2, promise3])
    .then(results => console.log(results));

Promise.race([promise1, promise2, promise3])
    .then(result => console.log(result));

Promise.allSettled([promise1, promise2, promise3])
    .then(results => console.log(results));

---

Error Handling

• Try/catch/finally

try {
    const result = riskyOperation();
    console.log(result);
} catch (error) {
    console.error('Error:', error.message);
} finally {
    console.log('Cleanup');
}

• Throwing errors

function divide(a, b) {
    if (b === 0) {
        throw new Error("Division by zero");
    }
    return a / b;
}

• Custom errors

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

throw new ValidationError("Invalid input");

---

Modules (ES6)

• Export

// utils.js
export function add(a, b) {
    return a + b;
}

export const PI = 3.14159;

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

• Import

// main.js
import greet, {add, PI} from './utils.js';
import * as utils from './utils.js';

• CommonJS (Node.js)

// Export
module.exports = {
    add: (a, b) => a + b,
    PI: 3.14159
};

// Import
const {add, PI} = require('./utils');

---

DOM Manipulation

• Selecting elements

const element = document.getElementById('myId');
const elements = document.getElementsByClassName('myClass');
const element = document.querySelector('.myClass');
const elements = document.querySelectorAll('div');

• Modifying elements

element.textContent = 'New text';
element.innerHTML = '<strong>Bold text</strong>';
element.setAttribute('class', 'newClass');
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('visible');

• Creating elements

const newDiv = document.createElement('div');
newDiv.textContent = 'Hello';
document.body.appendChild(newDiv);

• Event handling

button.addEventListener('click', function(event) {
    console.log('Button clicked!');
});

button.addEventListener('click', (event) => {
    event.preventDefault();
    console.log('Default prevented');
});

---

Local Storage

• Store data

localStorage.setItem('username', 'Alice');
localStorage.setItem('user', JSON.stringify({name: 'Alice', age: 30}));

• Retrieve data

const username = localStorage.getItem('username');
const user = JSON.parse(localStorage.getItem('user'));

• Remove data

localStorage.removeItem('username');
localStorage.clear(); // Remove all

---

Fetch API

• GET request

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

• POST request

fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({name: 'Alice', age: 30})
})
.then(response => response.json())
.then(data => console.log(data));

• With async/await

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error:', error);
    }
}

---

Common Built-in Objects

• String methods

const str = "Hello World";
str.length;                    // 11
str.toUpperCase();             // "HELLO WORLD"
str.toLowerCase();             // "hello world"
str.charAt(0);                 // "H"
str.indexOf("World");          // 6
str.slice(0, 5);              // "Hello"
str.split(" ");               // ["Hello", "World"]
str.replace("World", "JS");    // "Hello JS"
str.includes("World");         // true
str.startsWith("Hello");       // true
str.endsWith("World");         // true

• Math object

Math.PI;                      // 3.141592653589793
Math.round(4.7);              // 5
Math.floor(4.7);              // 4
Math.ceil(4.3);               // 5
Math.max(1, 2, 3);            // 3
Math.min(1, 2, 3);            // 1
Math.random();                // 0-1
Math.sqrt(16);                // 4
Math.pow(2, 3);               // 8

• Date object

const now = new Date();
const specific = new Date('2023-01-01');
now.getFullYear();            // 2023
now.getMonth();               // 0-11
now.getDate();                // 1-31
now.getHours();               // 0-23
now.toISOString();            // "2023-01-01T00:00:00.000Z"
now.toLocaleDateString();     // "1/1/2023"

---

Regular Expressions

• Creating regex

const regex = /pattern/flags;
const regex = new RegExp('pattern', 'flags');

• Common methods

const str = "Hello World";
const regex = /world/i;

regex.test(str);              // true
str.match(regex);             // ["World"]
str.replace(regex, "JS");     // "Hello JS"
str.split(/\s+/);             // ["Hello", "World"]

• Common patterns

const email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const phone = /^\d{3}-\d{3}-\d{4}$/;
const url = /^https?:\/\/.+/;

---

Package Management (npm)

• Install package

npm install package-name
npm install -g package-name     # Global
npm install --save-dev package-name  # Dev dependency

• Common commands

npm init                        # Initialize project
npm install                     # Install dependencies
npm start                       # Run start script
npm test                        # Run tests
npm run build                   # Run build script
npm update                      # Update packages
npm outdated                    # Check outdated packages

• package.json scripts

{
  "scripts": {
    "start": "node server.js",
    "test": "jest",
    "build": "webpack",
    "dev": "nodemon server.js"
  }
}

---

Common Patterns

• Immediately Invoked Function Expression (IIFE)

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

• Module pattern

const MyModule = (function() {
    let privateVar = 0;
    
    return {
        increment: function() {
            privateVar++;
        },
        getCount: function() {
            return privateVar;
        }
    };
})();

• Debouncing

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

• Throttling

function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

---

Testing

• Jest example

// sum.js
function sum(a, b) {
    return a + b;
}
module.exports = sum;

// sum.test.js
const sum = require('./sum');

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

• Basic assertions

expect(value).toBe(expected);
expect(value).toEqual(expected);
expect(value).toBeNull();
expect(value).toBeUndefined();
expect(value).toBeTruthy();
expect(value).toBeFalsy();
expect(array).toContain(item);

---

Useful Libraries

• Lodash — Utility library

const _ = require('lodash');
_.uniq([1, 2, 2, 3]); // [1, 2, 3]

• Moment.js — Date manipulation

const moment = require('moment');
moment().format('YYYY-MM-DD');

• Axios — HTTP client

const axios = require('axios');
axios.get('https://api.example.com/data')
    .then(response => console.log(response.data));

---

Resources

• MDN Web Docs
• JavaScript.info
• Node.js Documentation
• npm Registry
• ES6 Features