01 - JavaScript Basics

📋 Jump to Takeaways

🎁 Why does "5" + 5 give you "55" but "5" - 5 gives you 0? Same values, one character different, totally different result. What's going on?

What is JavaScript?

JavaScript is a programming language that runs in your browser. It lets you add interactivity to websites, from simple button clicks to complex web applications.

// This is a comment, ignored by JavaScript
console.log("Hello, World!");  // Prints to the browser console

Variables

Variables store data that you can use and change later:

// let, can be reassigned
let name = "Alice";
name = "Bob";  // ✅ works

// const, cannot be reassigned
const age = 25;
age = 26;  // ❌ error, cannot reassign a constant

// var, old way (avoid using it)
var city = "NYC";

Rule of thumb: Use const by default. Use let only when you need to reassign the variable. Don't use var.

Data Types

JavaScript has several primitive types:

// String, text
let greeting = "Hello";
let message = 'Single quotes work too';
let template = `Template literals can include ${greeting}`;

// Number, integers and decimals
let count = 42;
let price = 19.99;
let negative = -10;

// Boolean, true or false
let isActive = true;
let isComplete = false;

// Undefined, variable declared but not assigned
let notSet;
console.log(notSet);  // undefined

// Null, intentionally empty
let empty = null;

// BigInt, integers larger than Number can safely hold
let big = 9007199254740993n;

// Symbol, a unique, unguessable identifier
let id = Symbol("id");

// Check the type
console.log(typeof greeting);  // "string"
console.log(typeof count);     // "number"
console.log(typeof isActive);  // "boolean"
console.log(typeof null);      // "object", this is a known JS bug, null is NOT an object

Operators

Arithmetic Operators

let a = 10;
let b = 3;

console.log(a + b);  // 13, addition
console.log(a - b);  // 7 , subtraction
console.log(a * b);  // 30, multiplication
console.log(a / b);  // 3.333..., division
console.log(a % b);  // 1 , remainder (modulo)
console.log(a ** b); // 1000, exponentiation (10^3)

// Increment and decrement
let x = 5;
x++;  // x is now 6
x--;  // x is now 5 again

Comparison Operators

console.log(5 == "5");   // true, loose equality (converts types)
console.log(5 === "5");  // false, strict equality (checks type too)

console.log(5 != "5");   // false, loose inequality
console.log(5 !== "5");  // true, strict inequality

console.log(10 > 5);   // true
console.log(10 < 5);   // false
console.log(10 >= 10); // true
console.log(5 <= 4);   // false

Always use === and !==, they're safer because they check both value and type.

Logical Operators

let isLoggedIn = true;
let isAdmin = false;

console.log(isLoggedIn && isAdmin);  // false, AND: both must be true
console.log(isLoggedIn || isAdmin);  // true, OR: at least one must be true
console.log(!isLoggedIn);            // false, NOT: inverts the value

String Operations

let first = "Hello";
let last = "World";

// Concatenation
let message = first + " " + last;  // "Hello World"

// Template literals (preferred)
let greeting = `${first} ${last}!`;  // "Hello World!"

// String methods
console.log(message.length);        // 11
console.log(message.toLowerCase()); // "hello world"
console.log(message.toUpperCase()); // "HELLO WORLD"
console.log(message.includes("World"));  // true
console.log(message.startsWith("Hello")); // true
console.log(message.replace("World", "There")); // "Hello There"

Type Coercion

JavaScript tries to convert types automatically (sometimes unexpectedly):

console.log("5" + 5);    // "55", string concatenation
console.log("5" - 5);    // 0, number subtraction
console.log("5" * "2");  // 10, both converted to numbers
console.log(true + 1);   // 2, true becomes 1
console.log(false + 1);  // 1, false becomes 0

To avoid surprises, explicitly convert types:

// String to number
let str = "42";
let num = Number(str);      // 42
let parsed = parseInt(str); // 42

// Number to string
let count = 100;
let text = String(count);   // "100"
let concat = count + "";    // "100" (quick trick)

// To boolean
console.log(Boolean(1));        // true
console.log(Boolean(0));        // false
console.log(Boolean("hello"));  // true
console.log(Boolean(""));       // false

Conditionals

Make decisions in your code:

let age = 18;

if (age >= 18) {
  console.log("Adult");
} else if (age >= 13) {
  console.log("Teenager");
} else {
  console.log("Child");
}

// Ternary operator, shorthand for simple if/else
let status = age >= 18 ? "Adult" : "Minor";

Key Takeaways

Use const by default, let when you need to reassign
JavaScript has 7 primitive types: string, number, bigint, boolean, undefined, null, symbol
Always use === for comparisons (strict equality)
Template literals (`) are the modern way to build strings
Be aware of type coercion, explicitly convert when needed

🎁 You can store one value in a variable. But what if you want to run the same block of logic on ten different values without copying it ten times?