Skip to main content

Command Palette

Search for a command to run...

Understanding Variables and Data Types in JavaScript

Published
6 min read
Understanding Variables and Data Types in JavaScript

If you’re just starting with JavaScript, variables can feel confusing.
Let’s fix that in one short read (and a bit of friendly chaos ).

What is a Variable?

Imagine your room full of labeled boxes:

  • One box says "Name" and stores "Alex".

  • Another says "Age" and stores 20.

  • Another says **"IsStudent."and storestrue`.

In programming, a variable is just a box with a label where you store information so you can use it later.

In JavaScript, we use these keywords to create (declare) a variable:

  • var

  • let

  • const

You can think of it like:

let label = value;

Example:

let name = "Alex";
let age = 20;
let isStudent = true;

Primitive Data Types (The Basic Kinds of Values)

These are the most common primitive types you’ll use:

  • string: text inside quotes

  • number: any number (integer or decimal)

  • boolean: true or false

  • null: “nothing here on purpose.”

  • undefined: “nothing here (and we didn’t even set it yet).”

Simple Examples:

let name = "Alex";        // string
let age = 20;             // number
let isStudent = true;     // boolean
let middleName = null;    // null (we KNOW there is no middle name)
let address;              // undefined (we never assigned a value)

Notice: address is undefined because we didn’t give it a value at all.

How to Declare Variables: var, let, and const

In modern JavaScript, you’ll mostly use let and const.
var is older and has some weird behaviours (we’ll keep it super simple here).

var

  • Old way of declaring variables.

  • Has function scope (we’ll explain scope soon).

  • Can be re-declared and updated.

var city = "Delhi";
var city = "Mumbai";   // this is allowed with var
city = "Bangalore";    // also allowed

let

  • A modern way to declare variables that can change.

  • Has block scope (more on this in a bit).

  • Can be updated, but cannot be re-declared in the same block.

let score = 10;
score = 15;   // allowed

// let score = 20;    // Not allowed in the same block

const

  • Used for values that should not change.

  • Also has block scope.

  • Must be given a value immediately.

  • Cannot be updated or re-declared.

const pi = 3.14;
// pi = 3.14159;    // TypeError: Assignment to constant variable

Tiny human moment: I sometimes still typo const as cost and wonder why my code is broken.

Basic Difference Between var, let, and const

Here’s a quick comparison table :

Simple rule of thumb:

  • Use const by default.

  • If you know the value will change, use let.

  • Avoid var unless you’re reading old code or specifically learning it.


What is Scope? (Beginner-Friendly)

Scope answers the question:

“Where in my code can I access this variable?”

Think of scope like the walls of a room:

  • If a variable is declared inside a room, only people in that room can use it.

  • If it’s declared outside all rooms, everyone in the house can use it.

In JavaScript, the “rooms” are usually:

  • A function

  • A block: anything between { and } (like if {}, for {}, etc.)

Block Scope with let and const

if (true) {
  let message = "Hello!";
  console.log(message); // works
}

console.log(message);    // ReferenceError: message is not defined

message only exists inside the { ... }.

Function Scope with var

function testVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // works because var is function-scoped
}

testVar();
// console.log(x); // x is not defined outside the function

var ignores the block {} and only cares about the whole function.

Simple Scope Diagram (Mental Picture)

Imagine this little map:

Global Scope
  |
  |-- function myFunction() {           // function scope
  |      let a = 1;
  |      if (true) {                    // block scope
  |          let b = 2;
  |      }
  |  }
  • a is visible inside myFunction.

  • b is only visible inside the if block.

  • Outside of myFunction, neither a nor b exists.

Showing How Values Can Change

With let

let count = 0;
console.log(count); // 0

count = 1;
console.log(count); // 1

count = count + 5;
console.log(count); // 6

With const

const country = "India";
console.log(country); // "India"

// country = "USA";   // Error if you try this

One “gotcha”: const stops you from changing the binding, but for objects/arrays, their contents can still change.
That’s a bit advanced for this post, so we’ll leave that for another day.

Mini Assignment

Open your browser console (right-click → Inspect → Console tab)
or create a simple .js file and run it with Node if you know how.

1. Declare These Variables

  • name → your name (string)

  • age → your age (number)

  • isStudenttrue or false (boolean)

Try this:

let name = "Shivam";     // change this to your name
let age = 25;            // change to your age
let isStudent = true;    // or false

console.log(name);
console.log(age);
console.log(isStudent);

2. Try Changing let Values

age = 26;
isStudent = false;

console.log("Updated age:", age);
console.log("Updated isStudent:", isStudent);

3. Try With const and See What Happens

const city = "Delhi";
console.log(city);

// Now try this:
city = "Mumbai";  // This should throw an error

You should see something like:
TypeError: Assignment to constant variable.

This is good — it means JavaScript is protecting your constant from being changed.

Simple var, let, const Comparison Example

Run this and see what works and what doesn’t:

// var example
var language = "JavaScript";
var language = "TypeScript"; // allowed
console.log(language);       // "TypeScript"

// let example
let framework = "React";
// let framework = "Vue";    // Uncommenting this will cause an error
framework = "Next.js";       // allowed
console.log(framework);

// const example
const library = "Redux";
// const library = "Zustand"; // Not allowed
// library = "MobX";          // Not allowed
console.log(library);

Happy learning!