Variables are like storage boxes!

Imagine variables as labeled storage boxes. You can put anything inside them, like a number, a word, or a list. When you need the item later, you just look at the label to retrieve it.

Every piece of data has a type, here are some visual aids and analogies to help you conceptualize.

PRIMITIVE DATA TYPES

String, A Necklace of Letters

A string is like a necklace made of letters, numbers, or symbols. You can wear it, rearrange it, or even break it apart.
Example: let text = "jewelry";
The string "jewelry" is like a necklace where each character is a bead.

Number, A Calculator’s Input

A number is like a value you input into a calculator. It could be a whole number (integer) or a decimal (floating-point).
Example: let age = 25; // Integer let price = 19.99; // Decimal
The calculator can handle both exact values like 25 or more precise ones like 19.99.

An integer is like a whole pizza without any slices missing or extra bits added.

Example: let slices = 8;

You have a complete, whole number of slices.

A floating-point number (float) is like a pizza where you’ve taken part of a slice or added extra toppings. It represents parts of a whole.

Example: let pizzaEaten = 1.5;

The 1.5 means you have eaten one whole slice and half of another slice.

Boolean, The Light Switch

A boolean is like a light switch: it’s either on (true) or off (false).
Example: let isRaining = true; let isSunny = false;
"Is it raining?" can only have one of two answers: true (yes) or false (no).

Null, An Empty Box

null is like a box that is intentionally left empty. You know it’s supposed to hold something, but it’s currently vacant.
Example: let favoriteFood = null; // Intentionally no value
It’s like saying, "I don’t have a favorite food right now."

Undefined, A Mystery Package

undefined is like receiving a package with no label or contents. You have no idea what it’s supposed to be.
Example: let myVar; console.log(myVar); // undefined
The variable exists but doesn’t have a value yet.

Symbol, A Unique Stamp

A symbol is like a custom-made stamp that is always unique, even if it looks similar to another stamp.
Example: let id = Symbol('uniqueId');
Even if you create two symbols with the same description, they are still completely unique.

NON-PRIMITIVE DATA TYPES

Object as a Car

An object is like a car. It has different parts (properties) and things it can do (methods).

Properties (Parts of the Car): The car has various features, like its color, model, and battery level. These are the object’s properties.

Methods (What the Car Can Do): The car can perform actions, like starting, honking, or driving. These are the object’s methods.

Example in Code:

let car = {
  color: 'red',
  model: 'Tesla Model 3',
  batteryLevel: 100,
  start: function() {
    console.log('The car has started.');
  },
  drive: function(distance) {
    this.batteryLevel -= distance * 0.5;
    console.log(`The car drove ${distance} miles. Battery left: ${this.batteryLevel}`);
  }
};

How It Works:

Accessing Properties (Parts of the Car):
- You can check the car’s details, like its color or model:

console.log(car.color); // Outputs: red
console.log(car.model); // Outputs: Tesla Model 3

Using Methods (Car Actions):
- The car can perform actions like starting or driving:

car.start(); // Outputs: The car has started.
car.drive(20); // Outputs: The car drove 20 miles. Battery left: 90

Properties: Think of the car’s features—color, model, battery level—as things that describe the car.
Methods: Think of the car’s abilities—starting, honking, driving—as actions it can perform.
The Object: The car itself is the object that combines these features and actions into one.

Array as a Filing Cabinet

An array is like a filing cabinet with numbered drawers or folders. Each drawer (or folder) can hold one item, and you can quickly find an item by its drawer number (index).

Explanation:

The Filing Cabinet:
- The array itself is the entire filing cabinet.
Drawers or Folders:
- Each drawer (or folder) is a slot in the array, and the slots are numbered starting from 0.
Contents of the Drawers:
- The items stored inside the drawers are the values in the array. These can be anything: documents (strings), numbers, or even other filing cabinets (nested arrays).

Example in Code: `let filingCabinet = ['Invoice', 'Contract', 'Blueprint', 'Report'];`

Drawer 0: Contains "Invoice"
Drawer 1: Contains "Contract"
Drawer 2: Contains "Blueprint"
Drawer 3: Contains "Report"

Function (as a Data Type), A Blueprint or Recipe

A function can also be considered a data type. A function is like a recipe. It has a name, a list of ingredients (parameters), and a set of instructions (code) that you follow to create a dish (output).

Function Name → Recipe Title:

The function’s name is the title of the recipe, like "Make Pancakes."

Parameters → Ingredients:

Parameters are the ingredients you need to make the recipe. These can vary depending on what you want to create.

Code → Instructions:

The body of the function is the step-by-step instructions you follow to turn the ingredients into the finished dish.

Return Value → Final Dish:

The function’s return value is the final dish you’ve prepared after following the recipe.

function makePancakes(eggs, milk, flour) { 

//step by step instructions         
  let batter = `Mix ${eggs} eggs, ${milk} cups of milk, and ${flour} cups of flour.`;
  return batter + ' Cook on a hot griddle to make pancakes.';
}
// Using the recipe
let result = makePancakes(2, 1, 2); 
console.log(result);
// Outputs: Mix 2 eggs, 1 cups of milk, and 2 cups of flour. Cook on a hot griddle to make pancakes.

Variable Scope as Rooms in a House

Think of variable scope like rooms in a house. Variables are objects in the house, and their visibility depends on where they’re placed (global, local, or block scope).

Breaking It Down:

Global Scope → The Front Yard

Variables in the global scope are like items in the front yard of the house. Everyone walking by, whether they’re inside or outside the house, can see and access them.

Example:

let tree = 'Oak Tree'; // Global scope

function describeYard() {
  console.log(tree); // Accessible from anywhere
}

The tree is in the front yard, visible to anyone inside or outside the house.

Local Scope → A Room in the House

Variables in local scope are like items inside a specific room of the house. Only people in that room can see and use them.

Example:

function kitchen() {
  let fridge = 'Milk and Eggs'; // Local scope
  console.log(fridge); // Accessible inside the kitchen
}
console.log(fridge); // Error: fridge is not defined

The fridge is in the kitchen. If you’re not in the kitchen (outside the function), you can’t see or use it.

Block Scope → A Drawer in the Room

Variables in block scope are like items inside a drawer in a specific room. Even if you’re in the room, you can only access them when the drawer is open (inside the block).

Example:

if (true) {
  let keys = 'Car Keys'; // Block scope
  console.log(keys); // Accessible when the drawer is "open"
}
console.log(keys); // Error: keys is not defined

The keys are in a drawer in the room. You can only see them when you’re actively interacting with that specific drawer (inside the block).

How It All Ties Together:

Global Scope (Front Yard): Accessible from anywhere, inside or outside the house.
Local Scope (Room): Accessible only to people in that specific room (function).
Block Scope (Drawer in the Room): Accessible only while interacting with the drawer (inside the block).

Day 2: Introduction to Variables and Data Types