Understanding Variables and Data Types in JavaScript

Hey! Welcome to the very first post of our JS Exploration series.

You know how it is, whenever you look up JavaScript variables online, you usually find the same boring examples like let x = 10 or let apple = "fruit". But come on, we aren't here to build a fruit basket. We are here to build actual, complex applications.

So, put on your developer armor. Today, we are managing pirate ships, RPG hero stats, and magical inventories to really understand Variables and Data Types in JavaScript. Grab your chai, and let's get into it. ☕

1. Storage Containers: var, let, and const

Think of variables like those treasure chests we keep hoarding in RPG games. You label the chest and stash something inside so you can easily find it later. In JavaScript, we have three ways to label our chests: var, let, and const.

The Modern Standard: let and const

Honestly, 99% of the time, you will only use these two.

let is used for values that you know will change (mutate) over time. Honestly, let is like your ex, can change at any time without warning! 😂

let crewCount = 12;
console.log("crew count: ", crewCount); // 12

// We recruited more sailors!
crewCount = 14; 
console.log("crew count: ", crewCount); // 14

const is used for values that should never be reassigned. It literally stands for "constant". Think of const like your brothers and your daily cutting chai, they never leave you and they absolutely cannot be changed! ☕🤝

const captainName = "Jack Sparrow";
console.log("Captain Name: ", captainName);

// This will crash the ship (throw an error)! Don't even try it.
// captainName = "Dipesh"; 

The Ghost of the Past: var

Before 2015, JavaScript only had var. It does the same job, but bro, it has a massive flaw: It doesn't respect block scope. Imagine hiding your treasure inside a secure room (like an if statement block). With let or const, the treasure stays locked in that room. With var, it magically leaks out through the walls.

if (true) {
  var leakyTreasure = "Gold coins";
}

// var ignores the {} walls! How did this get out?!
console.log(leakyTreasure); // Output: "Gold coins"

My advice? Always use let and const. Leave var at the bottom of the ocean. (Speaking of the ocean, have you explored our "From Wire to Web" series yet? 😉🌊)

2. Primitive Data Types

A "Data Type" just tells the JavaScript engine what kind of data is inside your chest. Is it text? A number? A simple Yes/No?

Here are the absolute basics (Primitives) you'll use every day:

• String (Text wrapped in quotes):

  const weaponName = "Flame Sword";
  console.log("Weapon: ", weaponName, "| type: ", typeof weaponName);
  

• Number (Integers or decimals):

  const attackPower = 75;
  const attackUpgrade = 1.5;
  

• BigInt (For massive numbers that normal Numbers just can't handle):

  console.log(typeof 42n); // Notice the 'n' at the end!
  

• Boolean (true or false):

  const isLoggedIn = true;
  

• Undefined (A chest you created, but forgot to put anything inside):

  let bonusEffect;
  console.log(typeof bonusEffect); // Output: undefined
  

• Null (An intentional empty chest. You explicitly told JS, "there is nothing here"):

  let curseStatus = null;
  let weatherApiResponse = null;
  

• Symbol (Creates a unique, hidden identifier—even if the names look identical):

  const uniqueRuneId = Symbol("rune_of_fire");
  const uniqueRuneId2 = Symbol("rune_of_fire");
  // These two are NOT the same!
  

3. Non-Primitive Data Types

Primitive types hold just one piece of value. But what if you need to store an entire character's profile, or a whole list of items? That's where we use Non-Primitives (also known as Reference Types).

Objects (Key-Value pairs)

Objects let us group related data together using labels (keys). Super useful.

const heroStats = {
  name: "Deepak",
  level: 12,
  class: "Ranger",
};
console.log("Hero: ", heroStats, " | type: ", typeof heroStats);

Arrays (Ordered Lists)

Arrays are perfect for your lists. Under the hood, they are technically just objects, but they use numbered indexes (starting at 0) instead of named keys.

const inventory = ["Flame Sword", "Health Potion", "Shield"];
console.log("Inventory: ", inventory, " | type: ", typeof inventory);

Functions (Reusable Code)

Yep, in JavaScript, functions are technically a data type (an object) too!

function castSpell() {
  return "Fireball";
}
console.log("Spell Type ", typeof castSpell); // Output: "function"

4. Value vs. Reference (Listen closely to this one!)

Bro, if there is one thing you take away from this blog, let it be this. This is where 90% of beginners mess up. Pay close attention to how JavaScript copies data.

Copying Primitives (Pass by Value) When you copy a primitive (like a Number), JS makes a completely independent, safe clone.

let originalHP = 100;
let cloneHP = originalHP;

cloneHP = 80; // Only the clone took damage!

console.log("Original HP: ", originalHP); // 100 (Safe and sound)
console.log("Cloned HP: ", cloneHP);      // 80

Copying Non-Primitives (Pass by Reference) When you copy an Object or Array, JS does not copy the data. It literally just copies the address pointing to the original chest.

const originalSword = { name: "Flame Sword", damage: 75 };
const cloneSword = originalSword; 

cloneSword.damage = 100; // We upgrade the clone...

// WAIT, WHAT?!
console.log("Original Sword: ", originalSword.damage); // Output: 100

Because both variables point to the exact same object in memory, changing one secretly changes the other!

How to actually clone an Object without breaking things:

1. Shallow Copy (The Spread Operator ...): Perfect for simple objects.

   const armorOriginal = { name: "Iron Plate", defence: 80 };
   const armorCopy = { ...armorOriginal }; 
   

2. Deep Copy (structuredClone): Use this if your object has other objects hidden inside of it (nested).

   const potionOriginal = { name: "Health", effects: { heal: 40, mana: 30 } };
   const potionCopy = structuredClone(potionOriginal);
   

5. JavaScript's Weird Historical Quirks

We can use the typeof operator to check what's inside a variable. But JS has a few historical bugs that are just too ingrained in the web to fix now. You just have to memorize them and laugh:

console.log(typeof "chaicode"); // "string"
console.log(typeof 42);         // "number"
console.log(typeof undefined);  // "undefined"

// 🚨 THE WEIRD ONES 🚨
console.log(typeof null);       // "object" -> (Wait, what? Yep, famous JS bug!)
console.log(typeof []);         // "object" -> (Arrays are technically objects)

Pro-tip: Since typeof [] just tells you it's an "object", the actual right way to check if something is an array is using Array.isArray(inventory)!

What's Next?

Alright, that's enough for today. You now know how to build your storage chests (Variables), what kind of loot to stash inside them (Data Types), and how to avoid that deadly "Pass by Reference" trap.

But right now, our code doesn't really do much. In the next post of our JS Exploration series, we are going to look at JavaScript Operators—how to add, subtract, and compare all this data to make actual things happen.

Catch you in the next one!