JavaScript Quick Reference

1. Variables and Data Types

Variables: Declare variables using let, const, or var.

let name = "John"; // Reassignable
const age = 25; // Not reassignable
var city = "New York"; // Function-scoped

Data Types:

String: "Hello"
Number: 25, 3.14
Boolean: true, false
Object: { key: "value" }
Array: [1, 2, 3]
Null: null
Undefined: undefined
Symbol: Symbol('id')
BigInt: 123n

2. Operators

Arithmetic Operators: +, -, *, /, %, ++, --

let x = 10;
let y = 5;
console.log(x + y); // 15
console.log(x * y); // 50

Comparison Operators: ==, ===, !=, !==, >, <, >=, <=

console.log(10 > 5); // true
console.log(10 == '10'); // true (loose equality)
console.log(10 === '10'); // false (strict equality)

Logical Operators: && (AND), || (OR), ! (NOT)

let a = true;
let b = false;
console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false

3. Control Flow

If/Else Statement

let age = 20;
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}

Switch Statement

let day = "Monday";
switch (day) {
case "Monday":
    console.log("Start of the week");
    break;
case "Friday":
    console.log("End of the week");
    break;
default:
    console.log("Mid-week");
}

4. Functions

Function Declaration

function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("John")); // Hello, John!

Arrow Functions

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

Function Expression

const add = function (a, b) {
return a + b;
};
console.log(add(5, 3)); // 8

5. Loops

For Loop

for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}

While Loop

let i = 0;
while (i < 5) {
console.log(i); // 0, 1, 2, 3, 4
i++;
}

For...of (Arrays)

let arr = [10, 20, 30];
for (let num of arr) {
console.log(num); // 10, 20, 30
}

For...in (Objects)

let person = { name: "John", age: 25 };
for (let key in person) {
console.log(key, person[key]); // name John, age 25
}

6. Arrays

Array Methods

let arr = [1, 2, 3, 4];
arr.push(5); // Add to end
arr.pop(); // Remove from end
arr.shift(); // Remove from beginning
arr.unshift(0); // Add to beginning

Map, Filter, Reduce

let doubled = arr.map(num => num * 2);
let even = arr.filter(num => num % 2 === 0);
let sum = arr.reduce((acc, num) => acc + num, 0);

7. Objects

Object Declaration

let person = {
name: "John",
age: 30,
greet: function() {
    console.log("Hello!");
}
};
console.log(person.name); // John
person.greet(); // Hello!

Destructuring

const { name, age } = person;
console.log(name); // John
console.log(age); // 30

8. Classes

class Car {
constructor(brand, model) {
    this.brand = brand;
    this.model = model;
}

drive() {
    console.log(`${this.brand} ${this.model} is driving.`);
}
}

let myCar = new Car("Tesla", "Model S");
myCar.drive(); // Tesla Model S is driving.

9. DOM Manipulation

Selecting Elements

let element = document.getElementById("myElement");
let elements = document.querySelectorAll(".myClass");

Event Handling

document.getElementById("btn").addEventListener("click", function() {
alert("Button clicked!");
});

Changing Content

let paragraph = document.getElementById("para");
paragraph.innerText = "Updated text!";

10. Asynchronous JavaScript

Callbacks

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

fetchData(function(data) {
console.log(data); // Data fetched
});

Promises

let promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
    resolve("Data fetched");
} else {
    reject("Error fetching data");
}
});

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

Async/Await

async function fetchData() {
let response = await fetch("https://api.example.com");
let data = await response.json();
console.log(data);
}
fetchData();

11. Error Handling

try {
let result = riskyFunction();
} catch (error) {
console.log("Error: ", error);
} finally {
console.log("This will always run");
}

12. ES6 Features

Template Literals

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

Rest and Spread Operators

// Rest (collecting arguments)
function sum(...args) {
return args.reduce((acc, num) => acc + num, 0);
}

// Spread (copying elements)
let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4];

13. Modules

Exporting

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

Importing

import { greet } from './module.js';
console.log(greet("John")); // Hello, John!

JavaScript