Understanding Variables, Scope & Data Types in JavaScript (JavaScript from Scratch Part 1)

4 min readFeb 17, 2026

Variables, Scope, Data Types & Operators

In my JavaScript learning journey, I experienced and understood the real meaning of core fundamentals. In this first article, I will cover:

JavaScript Versions
Variables
Scope
Data Types
Operators

These are the foundation of JavaScript. If you understand these well, learning advanced concepts becomes much easier.

JavaScript Versions — ES5 vs ES6

Before learning variables and other fundamentals, it’s important to understand JavaScript versions.

JavaScript evolves over time, and each update is called ECMAScript (ES).

ES5 (ECMAScript 5) → Released in 2009
ES6 / ES2015 (ECMAScript 6) → Released in 2015 (major update)

ES6 introduced many modern features that made JavaScript easier, cleaner, and more powerful.

ES5 (Old JavaScript)

ES5 is the older version of JavaScript. Most legacy systems still use ES5.

Common ES5 features:

var for variable declaration
Function-based scope
Traditional function syntax
No arrow functions
No let or const

Example (ES5):

var name = "John";

function greet() {
  console.log("Hello " + name);
}
greet();

ES6 (Modern JavaScript)

ES6 introduced modern features used in today’s development.

Key ES6 features:

let and const
Arrow functions
Template literals
Block scope
Classes
Modules
Destructuring
Spread & Rest operators
Promises

Example (ES6):

const name = "John";


//arrow functions
const greet = () => { 
  console.log(`Hello ${name}`);
};
greet();

Why ES6 is Important

Most modern JavaScript (React, Node.js, frontend frameworks) uses ES6+ features because:

Code becomes cleaner and shorter
Better variable control (let, const)
Easier function writing (arrow functions)
Improved readability
Modern browser support

Let’s begin the learning journey

Variables

Variables are used to store data in a program.

In JavaScript, there are 3 ways to declare variables:

var
let
const

var

var is the old way of declaring variables.

Can be redeclared
Can be updated
Accessible almost anywhere (not block scoped)

var name = "John";
var name = "Mike";   // allowed
name = "David";      // allowed

let

let is block-scoped, meaning it only works inside the block {} where it is declared.

Cannot be redeclared in the same scope
Can be updated

let age = 20;
age = 25;   // allowed

if (true) {
  let x = 10;
}
// x is not accessible here

const

const is also block-scoped but cannot be reassigned after declaration.

Must be initialized when declared
Cannot be reassigned
Used for fixed values

const pi = 3.14;
// pi = 3.141; ❌ Error

Note: Objects and arrays declared with const can still be modified but cannot be reassigned.

Scope

Scope defines where variables and functions are accessible in a program.

Get Hasani Madhumali’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

There are 4 types of scope:

Global Scope

Variables declared outside any function or block.

let name = "John"; // Global scope

Accessible anywhere in the program.

Function Scope

Variables declared inside a function are only accessible within that function.

function greet() {
  let message = "Hello";
  console.log(message);
}

console.log(message); ❌ Error

Block Scope

Variables declared inside {} (like if, for, etc.) using let or const.

if (true) {
  let x = 10;
}
// x is not accessible here

4. Module Scope (Modern JavaScript)

When you use ES Modules (import / export), variables are scoped only inside that file/module, not global.

// file: math.js
const pi = 3.14;
export default pi;

// file: app.js
import pi from "./math.js";
console.log(pi);

Here, pi is not global — it belongs only to math.js.
This is called Module Scope.

Module scope helps avoid global variable pollution and makes code more maintainable in large applications.

Data Types

JavaScript has two main categories of data types:

Primitive Data Types
Object Data Types

You can check the type using:

let num = 10;
console.log(typeof num); // number

Primitive Data Types (7 types)

1. String

Text data.

let name = "John";

2. Number

Integer or floating point.

let a = 10;
let b = 3.5;

3. Boolean

True or False.

let isOpen = true;

4. Null

Represents empty or unknown value.

let data = null;
console.log(typeof data); // object (JavaScript bug)

5. Undefined

Variable declared but value not assigned.

let age;
console.log(typeof age); // undefined

6. BigInt

Used for very large numbers.

let big = 12345678901234567890n;

7. Symbol

Used for unique identifiers.

let id = Symbol("id");

Object Data Types

Objects store collections of data.

Array

Collection of values.

let numbers = [1, 2, 3, 4];
console.log(typeof numbers); // object

Object

Collection of key-value pairs.

let person = {};
let user = { 
  name: "John",
  age: 25 
};

Function

Functions are also objects and used to execute code.

function greet() {
  console.log("Hello");
}
greet();

Function with parameters

function sum(a, b) { // a and b are parameters
  return a + b;
}
console.log(sum(1, 4)); // here passing arguments

Template Strings

You can use backticks ` to print variables easily.

let name = "John";
console.log(`Hello ${name}`);

Arrow Function

Modern way to write functions (no function keyword).

const sum = (a, b) => {
  return a + b;
};

Operators

Operators perform operations on values.

Arithmetic Operators

+  -  *  /  %

Exponential:

2 ** 3 // 8

Assignment Operators

=  +=  -=  *=  /=  %=  **=

Increment & Decrement

let a = 10;
a++; // Postfix → use then increase

++a; // Prefix → increase then use

Comparison Operators

>  <  >=  <=  ==  !=  ===  !==

=== checks value + type

let a = "10";
let b = 10;

a == b   // true
a === b  // false (different types)

Logical Operators

&&   ||   !

String Operator (Concatenation)

let age = 20;
console.log("Age is " + age);

Operator Precedence

Determines which operator runs first.

Example:

2 + 3 * 4   // 14 (* runs first)

Operator Associativity

When operators have the same precedence, JavaScript decides direction of evaluation.

Most operators → Left to Right
Exponential → Right to Left

2 ** 3 ** 2
// = 2 ** 9
// = 512

These concepts are used everywhere in real-world coding, from simple scripts to large applications.

Next -: JavaScript from Scratch — Article 2

Hasani Madhumali