Understanding Variables and Data Types in JavaScript

How kind of you to engage with my imagination:

Imagine a room of victorian design, and in the centre of it, lies a massive iron chest. The metallic chest, with letters engraved in it "Data-Types." The chest has the attention of many individuals in the room, such as Alan Turing, Charles Babbage, Ada Lovelace, Linus Torvalds, Dennis Ritchie, Notches and many more, all eager for the chest to be opened for this is where the game begins.

You, a little fazed by the presence of such luminaries, inches towards the chest with a key in hand and open the chest.

You find a number of envelopes, some with a red seal const on them, some scratched var and some with their flap open let. The letters all contain some data inside them, of varying nature.

The chest is the memory, while the envelopes are variables.

Variables

• We, the human society, takes pride in our ability to extract and process information, and this ability to use the natural information and to give it a shape has benefitted us quite well. And, in order to increase the efficiency of data usage, we needed a way to store it. The coins in roman times carried a value and it was dynamic in correspondence to the economy of the times.

• Similarly in our programming world, we use variables to store value. The value might be a number, or wordstring, or simple true or false boolean. The variables allow us an efficient way to store and access various data entities for future use and building purposes.

• Variables are essential because they allow us to store, update, and reuse data throughout our code without having to remember the exact values every single time.

• Imagine a phonebook with all the names of the phone users, their names are the variable that stores the value of phone numbers.

Unboxing JavaScript: Variables, Data Types, and Scope

• Building on the idea of envelopes storing letters, you can also think of variables as labeled boxes. You write a name on the outside of the box, put some information inside, and whenever you need that information later, you just ask for the box by its label.

How to Declare Variables: let, const, and var

To create a variable in JavaScript, we have to "declare" it. Historically, JavaScript only had one way to do this, but modern JavaScript gives us three keywords: let, const, and var.

1. let (The Open letter)

Use let when you know the value inside the box will probably change later.

JavaScript

let currentScore = 0;
console.log(currentScore); // Output: 0

// The player scores! We can easily change the value.
currentScore = 10;
console.log(currentScore); // Output: 10

2. const (The Sealed letter)

Short for "constant," const is used for values that should never change once they are set. If you try to change a const, JavaScript will throw an error.

Also, we must assign the value to variable if it is declared with const at the time of its declaration.

JavaScript

const birthYear = 1995;

// If we try to change it:
birthYear = 1996; // Error: You cannot reassign a const.

3. var (The Scratched Letter)

Before modern JavaScript, var was the only way to declare variables. You will see it in older codebases, but it behaves a bit unpredictably compared to let and const. As a modern developer, you should stick to let and const and generally avoid var.

function func(){
    var insideVariable = "This shall not pass";    
}

console.log(insideVariable);//Output:This shall not pass
//The var is not block scoped. Hence it proposes a problem to our access of data values. 

A Beginner's Guide to Scope

You can think of scope as the "visibility" of your variables. Not every part of your code can see every variable.

Imagine your code is a house.

• If you leave a letter in the main hallway (Global Scope), anyone in any room can see and use it.

• If you put a letter inside a specific bedroom with the door closed (Block Scope), only the people inside that bedroom can see it.

When you create a variable inside a set of curly braces {} (like inside an if statement or a loop) using let or const, it is trapped inside that "room."

JavaScript

let outsideVariable = "I am in the hallway!";

if (true) {
    let insideVariable = "I am in the bedroom!";
    console.log(outsideVariable); // Works! The hallway is visible.
    console.log(insideVariable); // Works! We are in the bedroom.
}

// console.log(insideVariable); // Error: We are back in the hallway and can't see into the closed bedroom.

The 7 Primitive Data Types

Now that we have our envelopes, what exactly can we put inside them? In JavaScript, the most basic forms of data are called primitives. Here are the seven we will use every day:

1. String: Text wrapped in quotes (single, double, or backticks).

   E.g. let firstName = "Alok";

2. Number: Numeric values (both whole numbers and decimals). No quotes!
   let age = 28;

   let price = 9.99;

3. Boolean: A simple true or false switch. Perfect for yes/no conditions.

   let isLoggedOn = true;

4. Undefined: The default state of a box that has been created but has nothing inside it yet.

   let emptyBox;

   console.log(emptyBox); // Output: undefined

5. Null: An intentional absence of value. You are specifically saying, "This box is meant to be completely empty right now."

   let currentWinner = null;

6. BigInt: Introduced in ES2020, this type is used to represent whole numbers larger than the maximum safe integer for the standard Number type (which is 2⁵³ - 1). We assign 'n' after the value to denote the bigInt datatype.

   let bigNumber = 98765432101234567890n;

7. Symbol: Introduced in ES6, symbols are unique and immutable values, primarily used as property keys within objects to avoid naming conflicts.

   Example: let id = Symbol("id");

Time to get your hands dirty in the console!

1. Declare Your Variables: Create three variables using the appropriate keywords (let or const):

   • Name (Store your name as a string)

   • Age (Store your age as a number)

   • IsStudent (Store a boolean representing if you are currently a student)

let name = "Alok Raj";
const age = 21;
let IsStudent = true;

console.log("Hello, I'm", name, "aged", age, "and I'm", IsStudent?"a student": "Not a student");//We see multiple data types being used here.

name = "Alok";//Works perfectly with let keyword
age = 22;//TypeError as reassigning is not allowed with variables initialized with const.

Hope you've learnt something valuable here, hope you get a good sleep tonight.