Reference Guide

Introduction to JavaScript
Variables and Data Types
Operators
Control Structures
Functions
Arrays
Objects
DOM Manipulation
Events
Modern JavaScript (ES6+)
Asynchronous JavaScript
Best Practices

Introduction to JavaScript

What is JavaScript?

JavaScript is a high-level, interpreted programming language that enables interactive web pages. It's one of the core technologies of the web alongside HTML and CSS.

Key Characteristics

Client-side scripting: Runs in the browser
Dynamic typing: Variables can change types
Event-driven: Responds to user actions
Asynchronous: Handles operations without blocking

Adding JavaScript to HTML

External (BEST PRACTICE):

<!DOCTYPE html>
<html>
<body>
    <h1 id="heading">Hello</h1>
    <script src="script.js"></script>
</body>
</html>

Internal:

<script>
    document.getElementById('heading').textContent = 'Hello JavaScript!';
</script>

Console Output

console.log('Message');
console.error('Error');
console.warn('Warning');
console.table([{name: 'John', age: 30}]);

Variables and Data Types

Variable Declaration

// const - cannot be reassigned (use by default)
const PI = 3.14159;

// let - can be reassigned (use when needed)
let count = 0;
count = 1;

// var - old way (avoid)
var oldWay = 'deprecated';

Primitive Data Types

String

let name = 'John';
let greeting = `Hello, ${name}!`;  // Template literal

// Methods
'JavaScript'.length;              // 10
'JavaScript'.toLowerCase();       // 'javascript'
'JavaScript'.toUpperCase();       // 'JAVASCRIPT'
'JavaScript'.slice(0, 4);         // 'Java'
'JavaScript'.includes('Script');  // true
'apple,banana'.split(',');        // ['apple', 'banana']

Number

let integer = 42;
let float = 3.14;
let scientific = 2.5e6;  // 2500000

// Math object
Math.round(4.7);    // 5
Math.floor(4.7);    // 4
Math.ceil(4.3);     // 5
Math.random();      // 0 to 1
Math.max(1,5,3);    // 5
Math.pow(2, 3);     // 8

// Random integer function
function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Boolean

let isTrue = true;
let isFalse = false;

// Falsy values: false, 0, '', null, undefined, NaN
// Truthy values: everything else

Undefined and Null

let notAssigned;        // undefined
let emptyValue = null;  // null (intentional absence)

Type Conversion

// To String
String(42);     // '42'
(42).toString(); // '42'

// To Number
Number('42');   // 42
parseInt('42'); // 42
+'42';          // 42

// To Boolean
Boolean(1);     // true
Boolean(0);     // false

Operators

Arithmetic

10 + 3;   // 13 (addition)
10 - 3;   // 7  (subtraction)
10 * 3;   // 30 (multiplication)
10 / 3;   // 3.333... (division)
10 % 3;   // 1  (remainder)
10 ** 3;  // 1000 (exponentiation)

let x = 5;
x++;      // 6 (increment)
x--;      // 5 (decrement)
x += 3;   // 8 (x = x + 3)

Comparison

5 === 5;      // true  (strict equality)
5 === '5';    // false (different types)
5 == '5';     // true  (loose equality, avoid)
5 !== 5;      // false
5 > 3;        // true
5 <= 5;       // true

Logical

true && false;       // false (AND)
true || false;       // true  (OR)
!true;               // false (NOT)

// Short-circuit evaluation
let name = '' || 'Guest';  // 'Guest'

// Nullish coalescing (ES2020)
let value = null ?? 'default';  // 'default'
let zero = 0 ?? 'default';      // 0

Ternary

let age = 20;
let canVote = age >= 18 ? 'Yes' : 'No';

Control Structures

If-Else

let score = 85;

if (score >= 90) {
    console.log('A');
} else if (score >= 80) {
    console.log('B');
} else if (score >= 70) {
    console.log('C');
} else {
    console.log('F');
}

Switch

let day = 'Monday';

switch (day) {
    case 'Monday':
        console.log('Start of week');
        break;
    case 'Friday':
        console.log('End of week!');
        break;
    default:
        console.log('Midweek');
}

Loops

For Loop

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

// Loop through array
let fruits = ['apple', 'banana', 'orange'];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

While Loop

let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}

For...of (ES6)

let fruits = ['apple', 'banana', 'orange'];
for (let fruit of fruits) {
    console.log(fruit);
}

For...in

let person = {name: 'John', age: 30};
for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

Functions

Function Declaration

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

// Default parameters
function greetWithDefault(name = 'Guest') {
    return `Hello, ${name}!`;
}

Arrow Functions (ES6)

// Basic syntax
const add = (a, b) => a + b;

// Single parameter (parentheses optional)
const square = x => x * x;

// No parameters
const sayHi = () => 'Hi!';

// Multiple lines
const multiply = (a, b) => {
    const result = a * b;
    return result;
};

// Return object (wrap in parentheses)
const createPerson = (name, age) => ({name, age});

Rest Parameters

function sum(...numbers) {
    return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4, 5));  // 15

Closures

function createCounter() {
    let count = 0;  // Private variable
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter());  // 1
console.log(counter());  // 2

Higher-Order Functions

function multiplyBy(factor) {
    return function(number) {
        return number * factor;
    };
}

const double = multiplyBy(2);
console.log(double(5));  // 10

Arrays

Creating and Accessing

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]);           // 'apple'
console.log(fruits.length);       // 3
console.log(fruits.at(-1));       // 'orange' (last)

Modifying Arrays

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

Array Methods

splice() - Add/Remove

let arr = ['a', 'b', 'c', 'd'];
arr.splice(1, 2);         // Remove 2 from index 1: ['a','d']
arr.splice(1, 0, 'x');    // Insert at index 1: ['a','x','d']

slice() - Extract

let arr = [1, 2, 3, 4, 5];
arr.slice(1, 3);          // [2, 3]
arr.slice(-2);            // [4, 5]

map() - Transform

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(n => n * 2);
console.log(doubled);     // [2, 4, 6, 8, 10]

let users = [{name: 'John'}, {name: 'Jane'}];
let names = users.map(u => u.name);  // ['John', 'Jane']

filter() - Select

let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(n => n % 2 === 0);
console.log(evens);       // [2, 4]

reduce() - Accumulate

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((total, n) => total + n, 0);
console.log(sum);         // 15

// Count occurrences
let fruits = ['apple', 'banana', 'apple', 'orange'];
let count = fruits.reduce((acc, fruit) => {
    acc[fruit] = (acc[fruit] || 0) + 1;
    return acc;
}, {});  // {apple: 2, banana: 1, orange: 1}

find() and findIndex()

let numbers = [5, 12, 8, 130, 44];
let found = numbers.find(n => n > 10);      // 12
let index = numbers.findIndex(n => n > 100); // 3

some() and every()

let numbers = [1, 2, 3, 4, 5];
numbers.some(n => n > 4);      // true
numbers.every(n => n > 0);     // true

sort()

// Numbers (must provide compare function)
let nums = [10, 5, 40, 25];
nums.sort((a, b) => a - b);    // Ascending: [5,10,25,40]
nums.sort((a, b) => b - a);    // Descending: [40,25,10,5]

Spread Operator

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = [...arr1, ...arr2];  // [1,2,3,4,5,6]
let copy = [...arr1];               // Copy array

Destructuring

let [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first);     // 1
console.log(rest);      // [3, 4, 5]

Objects

Creating Objects

let person = {
    name: 'John',
    age: 30,
    city: 'New York'
};

Accessing Properties

console.log(person.name);           // Dot notation
console.log(person['age']);         // Bracket notation
let prop = 'city';
console.log(person[prop]);          // Dynamic access

Modifying Objects

person.age = 31;                    // Modify
person.country = 'USA';             // Add
delete person.city;                 // Delete

// Check if property exists
'name' in person;                   // true
person.hasOwnProperty('age');       // true

Object Methods

let calculator = {
    num1: 5,
    num2: 10,
    
    add() {
        return this.num1 + this.num2;
    },
    
    setNumbers(a, b) {
        this.num1 = a;
        this.num2 = b;
    }
};

calculator.setNumbers(20, 30);
console.log(calculator.add());      // 50

Object Iteration

let person = {name: 'John', age: 30};

// Object.keys()
Object.keys(person);                // ['name', 'age']

// Object.values()
Object.values(person);              // ['John', 30]

// Object.entries()
Object.entries(person);             // [['name','John'],['age',30]]

// For...in loop
for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

Spread Operator

let person = {name: 'John', age: 30};
let address = {city: 'NYC', country: 'USA'};
let merged = {...person, ...address};

Destructuring

let person = {name: 'John', age: 30, city: 'NYC'};
let {name, age} = person;
let {name: firstName} = person;     // Rename
let {name, age, country = 'USA'} = person;  // Default

JSON

let person = {name: 'John', age: 30};

// Object to JSON
let json = JSON.stringify(person);
console.log(json);  // '{"name":"John","age":30}'

// JSON to Object
let parsed = JSON.parse(json);
console.log(parsed);  // {name: 'John', age: 30}

DOM Manipulation

Selecting Elements

// Get single element
document.getElementById('header');
document.querySelector('.item');
document.querySelector('#nav a.active');

// Get multiple elements
document.getElementsByClassName('item');
document.getElementsByTagName('p');
document.querySelectorAll('.item');

// Convert to array
let items = [...document.querySelectorAll('.item')];

Modifying Content

let element = document.getElementById('demo');

element.textContent = 'New text';     // Text only (safe)
element.innerHTML = '<strong>Bold</strong>';  // HTML (XSS risk)

Modifying Attributes

let link = document.querySelector('a');

link.getAttribute('href');
link.setAttribute('href', 'https://example.com');
link.removeAttribute('target');

// Data attributes
let div = document.getElementById('user');
console.log(div.dataset.id);          // data-id
div.dataset.role = 'admin';           // Set data-role

Modifying Styles

let box = document.getElementById('box');

box.style.color = 'red';
box.style.backgroundColor = 'yellow';
box.style.fontSize = '20px';

// Multiple styles
box.style.cssText = 'color: blue; background: gray;';

CSS Classes

let element = document.getElementById('demo');

element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('highlight');
element.classList.contains('active');   // true/false
element.classList.replace('old', 'new');

Creating Elements

let newDiv = document.createElement('div');
newDiv.textContent = 'New element';
newDiv.className = 'box';
newDiv.id = 'newBox';

let container = document.getElementById('container');
container.appendChild(newDiv);
container.prepend(newDiv);            // Insert at beginning

// Remove element
newDiv.remove();

Traversing DOM

let element = document.getElementById('item');

element.parentElement;                // Parent
element.children;                     // Child elements
element.nextElementSibling;           // Next sibling
element.previousElementSibling;       // Previous sibling
element.closest('.container');        // Nearest ancestor

Events

Adding Event Listeners

let button = document.getElementById('btn');

// addEventListener (modern way)
button.addEventListener('click', function() {
    console.log('Clicked!');
});

// Arrow function
button.addEventListener('click', () => {
    console.log('Clicked!');
});

// Named function (can be removed)
function handleClick() {
    console.log('Clicked!');
}
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

// Options
button.addEventListener('click', handleClick, {
    once: true,      // Remove after first call
    capture: false,  // Bubble phase
    passive: true    // Won't call preventDefault()
});

Mouse Events

let box = document.getElementById('box');

box.addEventListener('click', (e) => {
    console.log('Clicked');
});

box.addEventListener('dblclick', (e) => {
    console.log('Double clicked');
});

box.addEventListener('mouseenter', (e) => {
    console.log('Mouse entered');
});

box.addEventListener('mouseleave', (e) => {
    console.log('Mouse left');
});

box.addEventListener('mousemove', (e) => {
    console.log(`Mouse at: ${e.clientX}, ${e.clientY}`);
});

Keyboard Events

let input = document.getElementById('input');

input.addEventListener('keydown', (e) => {
    console.log(`Key: ${e.key}`);
    console.log(`Code: ${e.code}`);
    
    if (e.key === 'Enter') {
        console.log('Enter pressed');
    }
    
    // Ctrl+S
    if (e.ctrlKey && e.key === 's') {
        e.preventDefault();
        console.log('Save shortcut');
    }
});

Form Events

let form = document.getElementById('myForm');
let input = document.getElementById('email');

form.addEventListener('submit', (e) => {
    e.preventDefault();  // Prevent form submission
    console.log('Form submitted');
});

input.addEventListener('input', (e) => {
    console.log(e.target.value);  // Every change
});

input.addEventListener('change', (e) => {
    console.log('Changed');  // On blur
});

input.addEventListener('focus', (e) => {
    console.log('Focused');
});

Event Object

element.addEventListener('click', (event) => {
    event.type;               // 'click'
    event.target;             // Element that triggered
    event.currentTarget;      // Element with listener
    event.clientX;            // X coordinate
    event.clientY;            // Y coordinate
    
    event.preventDefault();   // Prevent default action
    event.stopPropagation();  // Stop bubbling
});

Event Delegation

// Handle clicks on dynamically created list items
document.getElementById('list').addEventListener('click', (e) => {
    if (e.target.tagName === 'LI') {
        console.log(`Clicked: ${e.target.textContent}`);
    }
});

Modern JavaScript (ES6+)

Template Literals

let name = 'John';
let age = 30;
let greeting = `Hello, my name is ${name} and I'm ${age} years old`;

// Multi-line
let html = `
    <div>
        <h1>${name}</h1>
        <p>Age: ${age}</p>
    </div>
`;

Destructuring

// Arrays
let [a, b, c] = [1, 2, 3];
let [first, , third] = [1, 2, 3];
let [x, ...rest] = [1, 2, 3, 4, 5];

// Objects
let {name, age} = {name: 'John', age: 30};
let {name: firstName} = {name: 'John'};

// Function parameters
function greet({name, age}) {
    console.log(`${name}, ${age}`);
}

Spread and Rest

// Spread
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];

let obj1 = {a: 1, b: 2};
let obj2 = {...obj1, c: 3};

// Rest
function sum(...numbers) {
    return numbers.reduce((a, b) => a + b);
}

Enhanced Object Literals

let name = 'John';
let age = 30;

let person = {
    name,           // Shorthand
    age,
    greet() {       // Method shorthand
        console.log('Hi');
    },
    ['key' + 1]: 'value'  // Computed property
};

Classes

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

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

let john = new Person('John', 30);
let jane = new Student('Jane', 20, 'A');

Optional Chaining

let user = {
    name: 'John',
    address: {
        city: 'NYC'
    }
};

let zip = user.address?.zip;         // undefined (no error)
let street = user.address?.street?.name;

// With arrays
let arr = [1, 2, 3];
console.log(arr?.[0]);               // 1

// With functions
console.log(obj.method?.());         // undefined if not exists

Asynchronous JavaScript

setTimeout and setInterval

// Execute once after delay
setTimeout(() => {
    console.log('After 2 seconds');
}, 2000);

// Execute repeatedly
let count = 0;
let intervalId = setInterval(() => {
    count++;
    console.log(`Count: ${count}`);
    if (count >= 5) {
        clearInterval(intervalId);
    }
}, 1000);

Promises

// Creating a promise
let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Success!');
    }, 1000);
});

// Using a promise
promise
    .then(result => console.log(result))
    .catch(error => console.error(error))
    .finally(() => console.log('Done'));

// Promise.all - wait for all
Promise.all([promise1, promise2, promise3])
    .then(values => console.log(values));

Async/Await

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

// Parallel execution
async function parallel() {
    let [users, posts] = await Promise.all([
        fetchUsers(),
        fetchPosts()
    ]);
    return {users, posts};
}

Fetch API

// GET request
async function getUsers() {
    let response = await fetch('https://api.example.com/users');
    let users = await response.json();
    return users;
}

// POST request
async function createUser(user) {
    let response = await fetch('https://api.example.com/users', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(user)
    });
    return response.json();
}

// Error handling
async function fetchData() {
    let response = await fetch('https://api.example.com/data');
    
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    return response.json();
}

Best Practices

Code Organization

// Use strict mode
'use strict';

// Group related functionality
const userService = {
    getUser(id) { },
    createUser(data) { },
    updateUser(id, data) { },
    deleteUser(id) { }
};

Naming Conventions

// Variables and functions: camelCase
let userName = 'John';
function getUserById(id) { }

// Constants: SCREAMING_SNAKE_CASE
const MAX_SIZE = 100;
const API_URL = 'https://api.example.com';

// Classes: PascalCase
class UserAccount { }

// Boolean: is/has/can prefix
let isActive = true;
let hasPermission = false;

Code Quality

// DRY (Don't Repeat Yourself)
function calculateTotal(price, quantity, discount) {
    return price * quantity * (1 - discount);
}

// Single Responsibility
function validateUser(user) { }
function saveUser(user) { }
function sendWelcomeEmail(user) { }

// Use meaningful names
function calculateTotalPrice(quantity, unitPrice) {
    return quantity * unitPrice;
}

// Avoid magic numbers
const VOTING_AGE = 18;
if (age >= VOTING_AGE) { }

Performance

// Cache DOM queries
let button = document.getElementById('btn');
let output = document.getElementById('output');

// Use event delegation
document.getElementById('list').addEventListener('click', (e) => {
    if (e.target.tagName === 'LI') {
        handleClick(e);
    }
});

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

Security

// Use textContent for user input (prevents XSS)
element.textContent = userInput;  // Safe
// element.innerHTML = userInput;  // Dangerous

// Validate input
function validateEmail(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

// Use strict equality
if (value === 10) { }  // Good
// if (value == 10) { } // Avoid

PreviousPresentation NextReference Guide

Last updated 1 month ago

Good morning

hashtagTable of Contents

hashtagIntroduction to JavaScript

hashtagWhat is JavaScript?

hashtagKey Characteristics

hashtagAdding JavaScript to HTML

hashtagConsole Output

hashtagVariables and Data Types

hashtagVariable Declaration

hashtagPrimitive Data Types

hashtagType Conversion

hashtagOperators

hashtagArithmetic

hashtagComparison

hashtagLogical

hashtagTernary

hashtagControl Structures

hashtagIf-Else

hashtagSwitch

hashtagLoops

hashtagFunctions

hashtagFunction Declaration

hashtagArrow Functions (ES6)

hashtagRest Parameters

hashtagClosures

hashtagHigher-Order Functions

hashtagArrays

hashtagCreating and Accessing

hashtagModifying Arrays

hashtagArray Methods

hashtagSpread Operator

hashtagDestructuring

hashtagObjects

hashtagCreating Objects

hashtagAccessing Properties

hashtagModifying Objects

hashtagObject Methods

hashtagObject Iteration

hashtagSpread Operator

hashtagDestructuring

hashtagJSON

hashtagDOM Manipulation

hashtagSelecting Elements

hashtagModifying Content

hashtagModifying Attributes

hashtagModifying Styles

hashtagCSS Classes

hashtagCreating Elements

hashtagTraversing DOM

hashtagEvents

hashtagAdding Event Listeners

hashtagMouse Events

hashtagKeyboard Events

hashtagForm Events

hashtagEvent Object

hashtagEvent Delegation

hashtagModern JavaScript (ES6+)

hashtagTemplate Literals

hashtagDestructuring

hashtagSpread and Rest

hashtagEnhanced Object Literals

hashtagClasses

hashtagOptional Chaining

hashtagAsynchronous JavaScript

hashtagsetTimeout and setInterval

hashtagPromises

hashtagAsync/Await

hashtagFetch API

hashtagBest Practices

hashtagCode Organization

hashtagNaming Conventions

hashtagCode Quality

hashtagPerformance

hashtagSecurity

Table of Contents

Introduction to JavaScript

What is JavaScript?

Key Characteristics

Adding JavaScript to HTML

Console Output

Variables and Data Types

Variable Declaration

Primitive Data Types

Type Conversion

Operators

Arithmetic

Comparison

Logical

Ternary

Control Structures

If-Else

Switch

Loops

Functions

Function Declaration

Arrow Functions (ES6)

Rest Parameters

Closures

Higher-Order Functions

Arrays

Creating and Accessing

Modifying Arrays

Array Methods

Spread Operator

Destructuring

Objects

Creating Objects

Accessing Properties

Modifying Objects

Object Methods

Object Iteration

Spread Operator

Destructuring

JSON

DOM Manipulation

Selecting Elements

Modifying Content

Modifying Attributes

Modifying Styles

CSS Classes

Creating Elements

Traversing DOM

Events

Adding Event Listeners

Mouse Events

Keyboard Events

Form Events

Event Object

Event Delegation

Modern JavaScript (ES6+)

Template Literals

Destructuring

Spread and Rest

Enhanced Object Literals

Classes

Optional Chaining

Asynchronous JavaScript

setTimeout and setInterval

Promises

Async/Await

Fetch API

Best Practices

Code Organization

Naming Conventions

Code Quality

Performance

Security