Nothing beats Fundamentals - Javascript fundamentals

Hi, lately i've been using AI Coding assitant intensively, i always worry that i might lost my edge relying too much on AI

Hence i decided, to release Javascript fundamentals that Beginner and Senior can read through on daily basis, to enhance more knowledge on javascript fundamentals.

Content below are based on:
Click to open: Javascript By example

I build Javascript collections of fundamental concepts and syntax, presented as concise as possible using examples.

Pages developed to provide you on-the-go experience, so you can pickup and resume honing your fundamental anwhere with your phone.

Extra, I provided "In production" section, where you can get production-grade tips on the specific syntax's caveats based on my experience or industry best practice,

Here is Fundamental of Javascripts for your refresher:

1. Hello, World

The simplest JavaScript program: printing something to the console.

console.log("Hello, World!");

Good for understanding how JavaScript code starts running.

⸻

1. Values

Values are the actual data JavaScript works with, such as strings, numbers, booleans, objects, null, and undefined.

"hello";      // string
42;           // number
true;         // boolean
null;         // empty value
undefined;    // missing value

JavaScript has primitive values and object values, and knowing the difference helps avoid weird bugs.

⸻

1. Variables

Variables store values so they can be reused later.

let name = "Rick";
const language = "JavaScript";
var oldStyle = "avoid when possible";

In modern JavaScript, let and const are usually preferred over var.

Var is function scope.
let and const are block scope.

⸻

1. Constants

const prevents reassignment, but it does not make objects or arrays immutable.

const user = {
  name: "Rick"
};
user.name = "Aldi"; // allowed
// user = {}; // not allowed

This is important because const protects the variable binding, not the internal value.

⸻

1. Numbers

JavaScript numbers are floating-point numbers by default.

const price = 0.1 + 0.2;
console.log(price); // 0.30000000000000004

This is why money calculation should be handled carefully in production. Use BigInt for large number, for fraction please use the number as the smallest unit of whatever you dealing with (e.g storing value of 1 dollar as 100 cent instead)

⸻

1. Strings

Strings represent text.

const name = "Rick";
console.log(`Hello, ${name}`);

Template literals make string interpolation much cleaner than manual concatenation.

⸻

1. Booleans

Booleans represent true or false.

const isLoggedIn = true;
if (isLoggedIn) {
  console.log("Welcome back!");
}

JavaScript also has truthy and falsy values, which affect how conditions behave.

⸻

1. Conditionals

Conditionals let your program make decisions.

const score = 80;
if (score >= 90) {
  console.log("Excellent");
} else if (score >= 70) {
  console.log("Good");
} else {
  console.log("Keep practicing");
}

You use conditionals almost everywhere: validation, rendering, permissions, and business logic.

⸻

1. Loops

Loops repeat work.

const items = ["apple", "banana", "orange"];
for (const item of items) {
  console.log(item);
}

Different loops solve different problems: for, for...of, for...in, and forEach.

⸻

1. Functions

Functions group reusable logic.

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

They help you avoid repeating the same logic everywhere.

⸻

1. Arrow Functions

Arrow functions provide shorter syntax and lexical this.

const add = (a, b) => {
  return a + b;
};
console.log(add(2, 3));

They are great for callbacks, but not always ideal for object methods that need their own this.

⸻

1. Closures

A closure happens when a function remembers variables from its outer scope.

function createCounter() {
  let count = 0;
  return function increment() {
    count++;
    return count;
  };
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Closures are useful for private state, factories, and memoization.

⸻

1. Arrays

Arrays store ordered lists of values.

const numbers = [1, 2, 3];
const doubled = numbers.map((number) => number * 2);
console.log(doubled); // [2, 4, 6]

Common array methods include map, filter, reduce, find, and some.

⸻

1. Higher-Order Functions and Callbacks

A higher-order function accepts another function or returns one.

function runTwice(callback) {
  callback();
  callback();
}
runTwice(() => {
  console.log("Running");
});

This pattern powers array methods, event listeners, middleware, and async workflows.

⸻

1. Objects

Objects store key-value pairs.

const user = {
  name: "Rick",
  role: "Developer"
};
console.log(user.name);

Objects are one of the most important structures in JavaScript because most real-world data is object-shaped.

⸻

1. Maps and Sets

Map stores key-value pairs, while Set stores unique values.

const uniqueIds = new Set([1, 2, 2, 3]);
console.log(uniqueIds); // Set(3) { 1, 2, 3 }

Use Set when you need deduplication, and Map when object keys are not flexible enough.

⸻

1. Modules

Modules let you split code across files.

// math.js
export function add(a, b) {
  return a + b;
}
// app.js
import { add } from "./math.js";
console.log(add(1, 2));

Modules make code easier to organize, reuse, and test.

⸻

1. Promises and Async/Await

Promises represent work that finishes later.

async function fetchUser() {
  const response = await fetch("/api/user");
  const user = await response.json();
  return user;
}

async/await makes asynchronous code easier to read, but you still need to understand concurrency and error handling.

⸻

1. Classes and this

Classes are syntax for creating objects with shared behavior.

class User {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}`;
  }
}
const user = new User("Rick");
console.log(user.greet()); // Logs: "Hello, rick"

const variableGreet = user.greet()
console.log(variableGreet()) // Logs: "Hello, undefined"

The tricky part is often not the class itself, but how this behaves when methods are passed around.

⸻

1. Recursion

Recursion is when a function calls itself.

function countdown(number) {
  if (number === 0) {
    return "done";
  }
  return countdown(number - 1);
}
console.log(countdown(3));

Recursion is useful for trees, nested data, and repeated problems that can be broken into smaller versions of themselves.

⸻

1. Dates

Dates represent time in JavaScript.

const now = new Date();
console.log(now.toISOString());

In production, dates can become tricky because of time zones, formatting, and storage formats.

⸻

1. DOM Manipulation

DOM manipulation means reading or changing the HTML document with JavaScript.

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

This is how JavaScript changes what users see in the browser.

⸻

1. Events

Events let JavaScript respond to user actions.

const button = document.querySelector("button");
button.addEventListener("click", () => {
  console.log("Button clicked");
});

Clicks, typing, scrolling, and form submissions are all handled through events.

⸻

1. Form Validation

Form validation checks user input before submitting it.

const email = "";
if (!email) {
  console.log("Email is required");
}

Client-side validation improves user experience, but the server must always validate again.

⸻

1. Debounce

Debounce delays a function until rapid calls stop.

function debounce(callback, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      callback(...args);
    }, delay);
  };
}
const search = debounce((keyword) => {
  console.log("Searching:", keyword);
}, 500);

Useful for search inputs, resize handlers, and expensive operations triggered too often.

⸻

1. Accessibility Basics

Accessibility means making interfaces usable by more people, including keyboard and screen reader users.

<button aria-label="Close modal">
  ×
</button>

Good accessibility often starts with semantic HTML before reaching for ARIA.

⸻

1. localStorage and sessionStorage

Browser storage lets you save simple data on the client.

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
console.log(theme);

Useful for preferences, but not safe for sensitive data like auth tokens or personal information.

⸻

1. CRUD with localStorage

CRUD means Create, Read, Update, and Delete.

const todos = JSON.parse(localStorage.getItem("todos") || "[]");
todos.push({
  id: Date.now(),
  text: "Learn JavaScript"
});
localStorage.setItem("todos", JSON.stringify(todos));

This is a good beginner-friendly way to practice app-like data operations.

⸻

1. Regular Expressions

Regular expressions match text patterns.

const email = "[e-mail]";
const isEmail = /\S+@\S+\.\S+/.test(email);
console.log(isEmail); // true

Regex is useful for validation, searching, replacing, and parsing text.

⸻

1. Stacks and Queues

A stack is Last In, First Out. A queue is First In, First Out.

const stack = [];
stack.push("first");
stack.push("second");
console.log(stack.pop()); // second

These structures are useful for undo features, task processing, traversal, and scheduling logic.

⸻

1. Linked Lists

A linked list is made of nodes pointing to the next node.

const node1 = {
  value: "A",
  next: null
};
const node2 = {
  value: "B",
  next: null
};
node1.next = node2;

Linked lists are useful for understanding pointers and data structures, even if arrays are more common in daily JavaScript.

⸻

1. Trees

A tree is a hierarchical structure with parent and child nodes.

const tree = {
  value: "root",
  children: [
    {
      value: "child",
      children: []
    }
  ]
};

Trees appear in DOM nodes, file systems, comments, menus, and organization charts.

⸻

1. Graphs

A graph contains nodes connected by edges.

const graph = {
  A: ["B", "C"],
  B: ["A", "D"],
  C: ["A"],
  D: ["B"]
};

Graphs are useful for relationships, networks, routes, dependencies, and recommendation systems.

⸻

1. Throttle

Throttle limits how often a function can run.

function throttle(callback, delay) {
  let waiting = false;
  return function (...args) {
    if (waiting) return;
    callback(...args);
    waiting = true;
    setTimeout(() => {
      waiting = false;
    }, delay);
  };
}

Useful for scroll, resize, pointer movement, and other high-frequency events.

⸻

You can read the full collection here:
https://www.softwarejutsu.com/jsbyexample