🎙️ Introduction
Hey readers — welcome back to the series 👋
Recently, I’ve been writing a lot of JavaScript code. And the more I understand it, the more fascinated I become.
Trust me when I say this — JavaScript isn’t just an ordinary programming language. It feels like a side character in a TV show who got one unexpected chance to shine… and ended up becoming the hero.
It’s not a perfect language. It has quirks. But the audacity of developers constantly improving it makes it powerful.
Before we dive into JavaScript variables and data types, let’s take a quick look at how it all started.
Let’s get going 🚀
🧐 JavaScript and Its origins
In its early days, JavaScript was created to serve browsers. It worked alongside HTML and CSS to make web pages interactive.
Back then, it wasn’t designed for large applications. Many quick decisions were made — and some of those decisions caused strange behaviors. Later, these became known as JavaScript quirks.
Everything changed in 2009 with the release of Node.js. JavaScript moved beyond the browser and into backend development.
Now developers could build full-fledged server-side applications using JavaScript.
Today, JavaScript powers:
- Frontend applications
- Backend systems
- Mobile apps
- Desktop applications
- Even smart devices
The language is standardized under ECMAScript by ECMA International.
Despite its quirks, JavaScript keeps evolving — and it remains the language of the web.
Now that you know the story, let’s have our first proper handshake with JavaScript by learning its key concepts:
👉 Variables and Data Types in JavaScript
📦 1. Variables — The “Boxes” That Store Information
Most of the time, a JavaScript application needs to work on the information.
For example:
- 💬 Chat Application — storing user info, messages, chat history
- 🎮 Game — storing username, score, enemies defeated, power-ups collected
To work on such applications we use, variables.
Generic definition:
A variable is a named container used to store data values that can be referenced and manipulated in a program.
Simple analogy
A variable is like a box of with a name tag. We put something inside (a value), and whenever we need it, we look inside the box.
Why we need variables?
- Reuse data without rewriting it
- Track changes (e.g., user’s score)
- Make code readable and dynamic
Example:
let name = "Hayat"; // stores text
let age = 5; // stores a number
age = 10; // updates the value (now age = 10)
🛠️ 2. Declaring Variables — var, let, and const
So far, we’ve understood what variables are and how they are used.
Now, let’s look at the three ways to declare variables in JavaScript.
var
- Can be redeclared — We can declare the same variable again.
- Can be updated — Values can be changed
- Function scoped — Works inside a function, not block ({}) scoped.
- Old way — Used before ES6 (not used now)
```jsx
var x = 10;
var x = 20; // allowed
x = 30; // allowed
```
let
- Cannot be redeclared — In the same scope
- Can be updated — Value can be changed
- Blocked scoped — Works only inside {} block
- Modern way — Introduced in ES6 (recommended)
```jsx
let y = 10;
y = 20; // allowed
// let y = 30; => not allowed
```
const
- Cannot be redeclared — In same scope
- Cannot be updated — Value cannot changed
- Block scoped — Same as let.
- Best for fixed values — Use when value should not change.
```jsx
const z = 10;
// z = 20; => not allowed
```
⭐ Pro Tips:
- Default to
const- Always start by declaring variables with
const - It prevents accidental reassignment
- Makes the code safer and predictable
- Always start by declaring variables with
- Use
letonly when you know the value will change- If a variable need to be updated later
- Common in loops or counters
- Avoid using
var-
varis scoped, can cause unexpected behavior. - Modern JavaScript prefers
letandconst
-
🔤 3. Primitive Data Types — The Type of Data Inside the Box
After declaring variables, the next step is understanding what kind of data they store.
A wise line from my mentor:
Writing code becomes easy when you know what datatype you are operating on. ~ Hitesh Choudhary
There are more data types in JavaScript, but we’ll focus on the essential ones.
Number
let n = 123;
n = 12.345;
const bigInt = 1234567890123456789012345678901234567890n; // bigInt (+ve|-ve)
The number type represents both integer and floating-point numbers.
There are many operations for numbers, e.g. *, division /, addition +, subtraction -, and so on.
String
let str = "Hello"; // double quotes
let str2 = 'Single quotes are ok too'; // single quotes
let phrase = `can embed another ${str}`; // Backticks (embed)
A string in JavaScript is a sequence of characters used to represent text. Anything written inside quotes ("", '') is considered a string.
Boolean
let isHuman = true; // yes is Human
let isAlien = false; // no, not an alien
A Boolean has only two values: true or false. It is mainly used for decision making. {Explicitly no value}
Boolean are used in:
- Conditional
- Comparison
- Logical
Null
let yourPrivacy = null // you don't have any privacy, sorry!
The null is special datatype which represents “nothing”, “empty” or “value unknown”.
The above code states that yourPrivacy is unknown.
Undefined
let replyFromCrush; // which is hard for me personally
The undefined is also a special value and stands apart. It makes a type of its own just like null.
Undefined means it has been declared but value has not been assigned.
The above code states that replyFromCrush exists but has no value.
I have many other things today, but this is a blog, not a book so keeping things concise hehe.
🌍 4. Understanding Scope — Where Your Variables Live
This is one concept that quietly causes bugs if ignored.
Generic definition:
Scope determines where variables are accessible in your code.
Simple Definition:
Scope decides in which "room" a variable life and who can access it.
The house Analogy:
Your program is a house .
Each room is a scope.
- The living room = Global Scope
- The bedroom = Function Scope
- The cupboard inside the bedroom = Block Scope
-
🏠 The Living Room (Global Scope)
If you keep a TV in a living room:
let tv = "Sony"; // variable in Global ScopeEveryone in the house can access it.
✔️ Bedroom can access it
✔️ Kitchen can access it
✔️ Balcony can access it
Because it's a global scope.
-
🛏️ The Bedroom (Function Scope)
Now inside the bedroom you keep a laptop.
function bedroom() { let laptop = "MacBook" // variable inside a function scope }Only people inside the bedroom can use this laptop.
If someone in living room asks for laptop → Error because the laptop is inside that room only
// console.log(laptop) => ❌ Gives Error✔️ Bedroom can access laptop
❌ Kitchen can’t access it
❌ Balcony can’t access it
3. 🗄️ The Cupboard (Block Scope)
Inside the room, there’s a cupboard.
function bedroom() {
if (true) {
let secretMoney = 1000; // variable in block scope
}
}
The money stays inside the cupboard.
✔ Accessible inside the cupboard
❌ Not accessible in the bedroom
❌ Not accessible in the living room
The Rule
- Things in the big room (global) → everyone can access
- Things in the smaller room (function) → only inside the room
- Things in the cupboard (block) → only inside that block
🫧 Ending Thought
That’s its folks —
🗝️ Key Takeaways
- JavaScript is an amazing language, despite of being quirky.
- Variables are labelled boxes or say it as containers for data.
- Different versions for creating based on various purposes
- Primitive types define what kind of data you’re storing.
- Scope determines where a variable is accessible.
🚀 What to Do Next?
- Create your own variables.
- Experiment with
var,let, andconst. - Try different data types.
- Print results using
console.log().
Practice is where understanding becomes mastery.
Till then,
Stay Productive, Stay Curious!! Peach Out ✌️
Top comments (0)