JavaScript Basics

Duration: 35 min

JavaScript is the programming language of the web. It runs in browsers and adds interactivity to websites. From form validation to animations, JavaScript powers dynamic web experiences.

Variables and Data Types

Variables store data. JavaScript has several data types:

// Variables
let name = "Alice";           // String
const age = 28;               // Number (const cannot be reassigned)
var city = "New York";        // Older syntax (avoid)

// Data types
let string = "Hello";
let number = 42;
let decimal = 3.14;
let boolean = true;
let nothing = null;
let undefined_var;            // undefined
let obj = { key: "value" };   // Object
let arr = [1, 2, 3];          // Array

Operators

Operators perform operations on values:

// Arithmetic
let sum = 10 + 5;             // 15
let difference = 10 - 5;      // 5
let product = 10 * 5;         // 50
let quotient = 10 / 5;        // 2
let remainder = 10 % 3;       // 1

// Comparison
10 > 5;                       // true
10 < 5;                       // false
10 === 10;                    // true (strict equality)
10 == "10";                   // true (loose equality)
10 !== 5;                     // true

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

// Assignment
let x = 5;
x += 3;                       // x = 8
x -= 2;                       // x = 6
x *= 2;                       // x = 12

Conditionals

Control program flow with if/else statements:

let age = 18;

if (age >= 18) {
  console.log("You are an adult");
} else if (age >= 13) {
  console.log("You are a teenager");
} else {
  console.log("You are a child");
}

// Ternary operator
let status = age >= 18 ? "adult" : "minor";

// Switch statement
let day = "Monday";
switch (day) {
  case "Monday":
    console.log("Start of week");
    break;
  case "Friday":
    console.log("Almost weekend");
    break;
  default:
    console.log("Regular day");
}

Loops

Repeat code multiple times:

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

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

// For...of loop (iterate over values)
let fruits = ["apple", "banana", "orange"];
for (let fruit of fruits) {
  console.log(fruit);
}

// For...in loop (iterate over keys)
let person = { name: "Alice", age: 28 };
for (let key in person) {
  console.log(key, person[key]);
}

// Array methods
fruits.forEach(fruit => console.log(fruit));
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(n => n * 2);    // [2, 4, 6, 8, 10]
let evens = numbers.filter(n => n % 2 === 0);  // [2, 4]

Functions

Functions are reusable blocks of code:

// Function declaration
function greet(name) {
  return "Hello, " + name;
}

console.log(greet("Alice"));  // "Hello, Alice"

// Function expression
const add = function(a, b) {
  return a + b;
};

// Arrow function (modern syntax)
const multiply = (a, b) => a * b;

// Function with default parameter
const introduce = (name = "Guest") => {
  return "Welcome, " + name;
};

// Function with multiple parameters
const calculateTotal = (price, tax = 0.1) => {
  return price + (price * tax);
};

Arrays and Objects

Store and organize data:

// Arrays
let colors = ["red", "green", "blue"];
console.log(colors[0]);       // "red"
colors.push("yellow");        // Add to end
colors.pop();                 // Remove from end
colors.length;                // 3

// Array methods
colors.includes("red");       // true
colors.indexOf("green");      // 1
colors.join(", ");            // "red, green, blue"
colors.reverse();             // Reverse array

// Objects
let user = {
  name: "Alice",
  age: 28,
  email: "alice@example.com",
  greet: function() {
    return "Hi, I'm " + this.name;
  }
};

console.log(user.name);       // "Alice"
console.log(user["age"]);     // 28
user.city = "New York";       // Add property
delete user.email;            // Remove property

Scope and Closures

Variables have scope - where they can be accessed:

// Global scope
let global = "I'm global";

function outer() {
  // Function scope
  let local = "I'm local";
  
  function inner() {
    // Inner function scope
    let innerVar = "I'm inner";
    console.log(global);      // Can access global
    console.log(local);       // Can access outer's local
  }
  
  inner();
  // console.log(innerVar);   // Error: not accessible
}

// Closure: inner function remembers outer scope
function makeCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

let counter = makeCounter();
console.log(counter());       // 1
console.log(counter());       // 2