JavaScript Quick Reference Guide (Beginner to Advanced) | MaxonCodes

If you work with JavaScript regularly, you already know the problem. You don’t forget JavaScript completely, but you forget the exact syntax, the method name, or the best way to do something. That’s where a solid javascript quick reference guide becomes invaluable.

This post is built to be a long-term reference. Not a tutorial you read once, but a guide you come back to again and again. It starts from the smallest building blocks and moves all the way to advanced, production-level JavaScript concepts with real, practical examples.

JavaScript Fundamentals

JavaScript is a single-threaded, dynamically typed language that runs in browsers and server environments like Node.js. Understanding its fundamentals clearly will save you from subtle bugs later.

Variable Declarations

Modern JavaScript provides three ways to declare variables, each with different behavior.

var count = 10;        // function scoped, hoisted
let price = 99;        // block scoped
const SITE = "maxoncodes.com"; // block scoped, immutable reference

Info!
Use const by default. Switch to let only when reassignment is required. Avoid var in modern codebases.

Primitive vs Reference Types

One of the most important JavaScript concepts is how values are stored and copied.

let a = 5;
let b = a;
b = 10;     // a remains 5

let obj1 = { name: "Maxon" };
let obj2 = obj1;
obj2.name = "Codes";  // obj1.name also changes

Primitive values are copied by value, while objects and arrays are copied by reference.

JavaScript Data Types Reference

Type	Description	Example
String	Textual data	"Hello"
Number	Integers & decimals	42, 3.14
Boolean	true or false	true
Undefined	Declared but not assigned	let x;
Null	Intentional empty value	null
Object	Key-value pairs	{}
Array	Ordered list	[]
Symbol	Unique identifiers	Symbol()

Operators and Expressions

Operators allow you to manipulate values and perform logic.

let total = 100 + 50;
let discount = total > 100 ? 10 : 0;
let isValid = total > 0 && discount >= 0;

Prefer strict comparison operators to avoid type coercion bugs.

5 === "5"; // false
5 == "5";  // true (avoid)

Control Flow and Logic

Conditional Statements

if (user.isAdmin) {
  access = "full";
} else if (user.isLoggedIn) {
  access = "limited";
} else {
  access = "guest";
}

Switch Statement

switch (role) {
  case "admin":
    console.log("Admin access");
    break;
  case "editor":
    console.log("Editor access");
    break;
  default:
    console.log("Viewer access");
}

Functions Deep Dive

Functions are first-class citizens in JavaScript, meaning they can be passed, returned, and assigned.

function calculateTax(amount, rate = 0.18) {
  return amount * rate;
}

Arrow Functions

const double = n => n * 2;

Arrow functions inherit this from their surrounding scope.

Arrays – Practical Reference

Arrays are used constantly in real applications.

const users = [
  { name: "A", age: 20 },
  { name: "B", age: 30 }
];

const names = users.map(u => u.name);
const adults = users.filter(u => u.age >= 18);
const totalAge = users.reduce((sum, u) => sum + u.age, 0);

Info!
Avoid mutating arrays directly. Prefer methods like map, filter, and reduce.

Objects and Destructuring

const user = {
  name: "Maxon",
  role: "Developer",
  skills: ["JS", "HTML", "CSS"]
};

const { name, role } = user;

Spread Operator

const updatedUser = {
  ...user,
  role: "Senior Developer"
};

DOM Manipulation Reference

JavaScript controls the browser through the DOM.

const title = document.querySelector("h1");
title.textContent = "Updated Title";

document
  .querySelector("#btn")
  .addEventListener("click", () => {
    console.log("Clicked");
  });

Warning!
Minimize direct DOM manipulation inside loops to avoid performance issues.

Asynchronous JavaScript

Promises

fetch("/api/posts")
  .then(res => res.json())
  .then(posts => console.log(posts))
  .catch(err => console.error(err));

Async / Await

async function fetchPosts() {
  const res = await fetch("/api/posts");
  return await res.json();
}

async/await makes asynchronous code easier to read and debug.

Advanced JavaScript Concepts

Closures

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

Event Loop (Simplified)

console.log("Start");

setTimeout(() => console.log("Timeout"), 0);

Promise.resolve().then(() => console.log("Promise"));

console.log("End");

This explains why promises execute before timeouts.

JavaScript Best Practices

1. Use strict equality
2. Keep functions small
3. Avoid global state
4. Handle errors properly
5. Write readable code

Success! You now have a complete, real-world JavaScript quick reference guide built for daily use.

Who is this JavaScript quick reference guide for?

This guide is ideal for beginners, intermediate developers, and professionals who want a reliable daily reference.

Is this guide suitable for interviews?

Yes. It covers core concepts commonly asked in JavaScript interviews with practical examples.

Will this guide stay relevant?

Yes. It focuses on fundamentals and modern JavaScript practices that evolve slowly.