JavaScritp Quick Reference Guide

This is a reference guide for basc JavaScript code snippets.

Event Listeners

addEventListener()

const element = document.querySelector("selector");
element.addEventListener("eventType", () => {
    // code
});

querySelectorAll() with Loop

const elements = document.querySelectorAll("selector");
elements.forEach((element) => {
    element.addEventListener("eventType", functionName);
});

Array Access

Access Element by Index

arrayName[index]

Last Element

arrayName[arrayName.length - 1]

Array Length

arrayName.length

Array Methods

push()

arrayName.push(value);

pop()

arrayName.pop();

indexOf()

arrayName.indexOf(searchValue);

join()

arrayName.join(separator);

slice()

arrayName.slice(startIndex, endIndex);

splice()

// Remove elements
arrayName.splice(startIndex, deleteCount);

// Add elements
arrayName.splice(startIndex, 0, newItem1, newItem2);

// Replace elements
arrayName.splice(startIndex, deleteCount, newItem);

find()

arrayName.find(element => element == value);

// With objects
arrayName.find(element => element.property == value);

findIndex()

arrayName.findIndex(element => element == value);

// With objects
arrayName.findIndex(element => element.property == value);

Control Flow

If Statement

if (condition) {
    // code
} else if (anotherCondition) {
    // code
} else {
    // code
}

Switch Statement

switch (variable) {
    case value1:
        // code
        break;
    case value2:
        // code
        break;
    default:
        // code
}

Loops

For Loop

for (let i = 0; i < array.length; i++) {
    // code
}

forEach

arrayName.forEach((element) => {
    // code
});

Flags

Basic Flag Pattern

let flagName = false;

for (let i = 0; i < array.length; i++) {
    if (array[i] == targetValue) {
        flagName = true;
    }
}

if (flagName == true) {
    // found
} else {
    // not found
}

Flag with Early Exit

let flagName = false;

for (let i = 0; i < array.length; i++) {
    if (array[i] == targetValue) {
        flagName = true;
        break;
    }
}

if (flagName) {
    // found
} else {
    // not found
}

Finding Maximum Values

Store the Index

let maxIndex = 0;

for (let i = 1; i < array.length; i++) {
    if (array[i] > array[maxIndex]) {
        maxIndex = i;
    }
}

console.log(array[maxIndex]);

Store the Value

let maxValue = 0;

for (let i = 0; i < array.length; i++) {
    if (array[i] > maxValue) {
        maxValue = array[i];
    }
}

console.log(maxValue);

Maximum in Array of Objects

let maxIndex = 0;

for (let i = 1; i < array.length; i++) {
    if (array[i].property > array[maxIndex].property) {
        maxIndex = i;
    }
}

console.log(array[maxIndex]);

Counting

Count Occurrences

let count = 0;

for (let i = 0; i < array.length; i++) {
    if (array[i] == targetValue) {
        count++;
    }
}

console.log(count);

Count with Condition (Objects)

let count = 0;

for (let i = 0; i < array.length; i++) {
    if (array[i].property == value) {
        count++;
    }
}

console.log(count);

Calculating Averages

Sum and Average

let sum = 0;

for (let i = 0; i < array.length; i++) {
    sum += array[i];
}

let average = sum / array.length;
console.log(average);

Arrow Functions

Basic Syntax

(parameter) => {
    return value;
}

Shortened (Single Expression)

(parameter) => value

With Array Methods

array.find(element => element > 5)
array.findIndex(element => element.property == value)
array.forEach(element => console.log(element))

String Operations

Concatenation with +

"text " + variable + " more text"

Template Literals

`text ${variable} more text`

User Input

prompt()

let userInput = prompt("Question?");

Store and Compare

let answer = prompt("Enter value:");
if (answer == "target") {
    // code
}

Common Patterns

Search Array for Value

let found = false;

for (let i = 0; i < array.length; i++) {
    if (array[i] == searchValue) {
        found = true;
        break;
    }
}

Find All Matching Elements

let matches = [];

for (let i = 0; i < array.length; i++) {
    if (array[i] > targetValue) {
        matches.push(array[i]);
    }
}

Process Array of Objects

for (let i = 0; i < objects.length; i++) {
    console.log(objects[i].property);
}

Object Access

Dot Notation

objectName.propertyName

Bracket Notation (with variable)

objectName[variableName]

Array of Objects

arrayName[index].propertyName

Comparison Operators

==   // equal to
===  // strict equal to
!=   // not equal to
!==  // strict not equal to
>    // greater than
<    // less than
>=   // greater than or equal to
<=   // less than or equal to

Logical Operators

&&   // AND
||   // OR
!    // NOT

Examples

if (condition1 && condition2) { }
if (condition1 || condition2) { }
if (!condition) { }

Increment/Decrement

variable++    // increment by 1
variable--    // decrement by 1
variable += 5 // add 5
variable -= 3 // subtract 3