JavaScript fundamentals: variables to async

JavaScript is the language that powers interactive web pages. We'll cover the parts you really need to build everyday features: values and types, functions and scope, arrays and objects, and handling asynchronous tasks using Promises and async/await.

Primitives vs references

Primitives are copied by value (numbers, strings, booleans). Objects and arrays are copied by reference — changes to a referenced object affect all references.

const x = 5;
let y = x; // copy by value
const a = {name:'A'};
const b = a; // reference, b and a point to same object

Let, const, var

Prefer const for bindings that don't reassign, use let for variables that will change. Avoid var due to function scoping quirks.

Functions and arrow syntax

function sum(a,b){return a+b;}
const sum2 = (a,b) => a+b;

Promises and async/await

Asynchronous code used to rely on callbacks which became hard to read. Promises provide a cleaner API:

fetch('/data.json')
  .then(r=>r.json())
  .then(data=>console.log(data))
  .catch(err=>console.error(err));

With async/await the same logic becomes linear and easier to follow:

async function load(){ 
  try{
    const r = await fetch('/data.json');
    const data = await r.json();
    console.log(data);
  }catch(e){
    console.error(e);
  }
}

Practical tips

• Always handle promise rejections (catch or try/catch).
• Limit DOM queries — cache nodes when used often.
• Use small, pure functions where possible for testability.

Next: apply these fundamentals by building an interactive component — the todo app in the next tutorial is a perfect follow-up.