JavaScript Basics: Variables, Data Types, and Operators

Introduction

JavaScript is one of the most widely used programming languages in the world. It powers interactive and dynamic features on web pages and is used by global companies such as Google, Facebook, and Amazon. With JavaScript, you can perform operations like conditional statements, control flow, and add interactivity to websites.

If you are a beginner-level developer, it’s essential to learn these basic concepts. They include variables, data types, and operators. These concepts help you declare variables, manage data, and perform operations in JavaScript.

In this article, we’ll discuss JavaScript Basics: Variables, Data Types, and Operators for beginner to advanced-level developers.

Variables in JavaScript

In JavaScript, variables act as storage locations where you can store data in your program. They allow us to manipulate and label data.

Variables can be declared in three ways:

1) var

It is the oldest way to declare a variable in JavaScript. Before the ES6 version, variables were declared using the var keyword. Variables declared with var are function-scoped or globally scoped and allow re-declaration and re-assignment.

Syntax:

var variable_name;

Example Code:

var data = "tech";  
console.log(data);  

// Re-declaring with var 
var data = "Tpoint";  
console.log(data);  

// Update value
data = "Tpoint tech";  
console.log(data);

Output:

tech
Tpoint
Tpoint tech

2) let

Introduced in ES6, let is the modern way to declare variables. Variables declared with let are block-scoped, do not allow re-declaration, and are not hoisted.

Syntax:

let variable_name;

Example Code:

let name = "Moto";  
console.log(name);  

// Re-assign value
name = "G85";  
console.log(name);  

// Update value
name = "Moto G85 5G";  
console.log(name);

Output:

Moto
G85
Moto G85 5G

3) const

Also introduced in ES6, const is used to declare variables that cannot be re-assigned or re-declared. They are block-scoped and do not allow hoisting. However, objects and arrays declared with const can still be modified internally.

Syntax:

const variable_name;

Example Code:

const phone = { brand: "Moto", model: "G96" };
console.log(phone);
phone.model = "Moto G96 5G"; 
console.log(phone);

Output:

{ brand: 'Moto', model: 'G96' }
{ brand: 'Moto', model: 'Moto G96 5G' }

Example (Re-assigning a const variable):

const name = "Moto";
// re-assign value
name = "Moto G85";  
console.log(name);

Output:

TypeError: Assignment to constant variable

Data Types in JavaScript

JavaScript is a dynamically typed language, meaning you don’t need to specify the data type explicitly. Data types in JavaScript are divided into two categories:

1) Primitive Data Types

Primitive types store a single value and are immutable. They include:

• Number: Stores integers and floating-point values.

let age = 22;         
let price = 199.99;   
let temp = -5;        
console.log(age);
console.log(price);
console.log(temp);

Output:

22
199.99
-5

• String: Stores text in single quotes, double quotes, or template literals.

let name = "Tpoint Tech";
let greeting = 'Welcome to the Tech';
let msg = `Welcome ${name}!`; 
console.log(name); 
console.log(greeting);
console.log(msg);

Output:

Tpoint Tech
Welcome to the Tech
Welcome Tpoint Tech!

• Boolean: Stores logical values (true or false).

let b = true;
let data = false;
console.log(b);
console.log(data);

Output:

true
false

• BigInt: Stores very large integers.

const big = 123456789012345678901234567890n;
console.log(big);

Output:

123456789012345678901234567890n

• Symbol: Introduced in ES6, it represents unique identifiers.

const s1 = Symbol("test");
const s2 = Symbol("test");
console.log(s1 === s2);

Output:

false

• Undefined: A variable declared but not assigned a value.

let res;
console.log(res);

Output:

undefined

2) Non-Primitive Data Types

Also called reference types, these include objects, arrays, and functions.

• Array: Stores multiple values in one variable.

const numbers = [1, 2, 3, 5.05, "Alice"];
console.log(numbers);    
console.log(numbers[1]);  
console.log(numbers.length);

Output:

[ 1, 2, 3, 5.05, 'Alice' ]
2
5

• Object: Stores data in key-value pairs.

let mobile = {
  brand: "Motorola",
  model: "G96",
  design: "5G"
};

console.log(mobile);          
console.log(mobile.brand);    
console.log(mobile.model);   
console.log(mobile.design);

Output:

{ brand: 'Motorola', model: 'G96', design: '5G' }
Motorola
G96
5G

• Function: Encapsulates reusable blocks of code.

function find(a, b) {
    if (a > b) {
        return a + " is larger";
    } else if (b > a) {
        return b + " is larger";
    } else {
        return "Both are equal";
    }
}

console.log(find(15, 10));
console.log(find(7, 20));
console.log(find(5, 5));

Output:

15 is larger
20 is larger
Both are equal

Operators in JavaScript

Operators perform operations on operands.

Arithmetic Operators

let num1 = 12;
let num2 = 4;
console.log("Addition:", num1 + num2);
console.log("Subtraction:", num1 - num2);
console.log("Multiplication:", num1 * num2);
console.log("Division:", num1 / num2);
console.log("Modulus:", num1 % num2);
console.log("Exponentiation:", num2 ** 3);

(Outputs calculations as expected)

Comparison Operators

let x = 10;
let y = 5;
let z = "10";
console.log("Equal to:", x == y);
console.log("Strict Equal to:", x === 10);
console.log("Not Equal to:", x != y);
console.log("Strict Not Equal to:", x !== z);
console.log("Greater Than:", x > y);
console.log("Less Than:", x < y);
console.log("Greater Than or Equal to:", x >= 10);
console.log("Less Than or Equal to:", y <= 5);

Assignment Operators

let a = 20;
let b = 7;
a += b;
a -= b;
a *= b;
a /= b;
a %= b;
a **= 2;

Logical Operators

let mathMark = 45;
let sciMark = 60;
let enghMark = 30;

if (mathMark >= 40 && sciMark >= 40) {
    console.log("Passed in Math and Science.");
}

if (enghMark >= 40 || sciMark >= 40) {
    console.log("Cleared at least one subject.");
}

let Back = true;
if (!Back) {
    console.log("No backlog, eligible for promotion.");
}

Bitwise Operators

let ip = 192;     
let mask = 255;
console.log("IP & MASK =", ip & mask); 
console.log("IP | MASK =", ip | mask); 
console.log("IP ^ MASK =", ip ^ mask); 
console.log("~IP =", ~ip);             
console.log("IP << 2 =", ip << 2);     
console.log("IP >> 2 =", ip >> 2);

Conclusion

In this article, JavaScript Basics: Variables, Data Types, and Operators, we explored the core concepts every developer should know. Variables help store and manage data, data types define the kind of values we handle, and operators allow us to perform meaningful operations.

If you’re beginning your journey, mastering these fundamentals is a strong first step. For deeper learning, we recommend exploring JavaScript tutorials on the Tpoint Tech website, where you’ll find structured guides, interview questions, and practice compilers explained in simple language.