JavaScript Day 3: Data Types and Operators

Niotechone Marketing Team
December 5, 2025
2:30 pm

Introduction

We will be focusing on the most basic building blocks of programming: data types and operators. You can think of data types as different types of containers for information, and you can think of operators as the tools used to act upon that information.

Understanding data types and operators is similar to learning the vocabulary and grammar of a new language. While in order to write a good sentence, you need to know your nouns, verbs, and adjectives, you will need to understand data types and operators to write good code. By the end of this lesson, you will be able to store different types of information, perform calculations, make comparisons and logically combine conditions!

Step-by-Step Tutorial

Step 1: Setting Up Your Development Environment

We’ll start by creating a very basic HTML file that links to our JavaScript file:

🌐




    
    <title>JavaScript Day 3 - Data Types & Operators</title>


    <h2>Open the browser console to see the output</h2>

What this code does:

Provides the basic structure for an HTML page (with a header)
Links to our JavaScript file
Displays a browser message about using the console to see results

Why do we use the console:

The console is a great tool for both learning and debugging your code
It provides an output without modifying the HTML page
You can quickly test code and directly see the results of your work

Pro Tip: Open developer tools by pressing F12 (or right click and choose – Inspect), and you will find the Console Tab!

Step 2: Exploring JavaScript Data Types

Let’s examine the different types of data JavaScript can handle:

📄

// JS DATA TYPES
let name = "Yashvi"; // String
let age = 21; // Number
let isStudent = true; // Boolean
let height = null; // Null
let weight; // Undefined
let bigNumber = 12345678901234567890n; // BigInt
let id = Symbol("id"); // Symbol

console.log("Data Types:");
console.log("name:", typeof name); // string
console.log("age:", typeof age); // number
console.log("isStudent:", typeof isStudent); // boolean
console.log("height:", typeof height); // object (known quirk)
console.log("weight:", typeof weight); // undefined
console.log("bigNumber:", typeof bigNumber); // bigint
console.log("id:", typeof id); // symbol

What the code does:

It helps declare variables of various data types
It utilises the syntax of the typeof operator to examine the variables
Outputs the findings from the console

Why is it important to know the data types:

Different data types produce different results when using them in operations
Some operations only apply to specific data types
Understanding data types can help avoid bugs

Common Mistake: confusing null (a value we intentionally left blank) with undefined (a variable defined but with no assigned value). Null is like saying “I meant not to put anything here”, and undefined basically means “I just haven’t gotten around to assigning this variable a value.”

Step 3: Working with Objects

Objects allow you to store information that is similarly related together:

🎨

// JS OBJECT
const student = {
    name: "Niotechone",
    age: 21,
    course: "Computer Science",
    isEnrolled: true
};
console.log("Object:");
console.log(student);
console.log("Student name:", student.name);

What this code does:

It creates an object called student with a few properties
It stores the somewhat related data through key/value pairs
Then it accesses the properties of an object using dot notation (i.e student.name)

Why Objects are helpful:

You can group related data to create the object, as mentioned previously
It gives a method to organise data and make code more readable
It is closest to statistically showing how real-world entities work, and we interpret them

Note: Objects are using {} curly braces, and the data is separated by comma values. Think of objects as containers of multiple related data properties.

Step 4: Understanding Arrays

Arrays allow you to deal with lists of items:

📄

// JS ARRAY
const courses = ["HTML", "CSS", "JavaScript", "Bootstrap"];
console.log("Array:");
console.log(courses);
console.log("First course:", courses[0]);

What this code does:

It created an array of programming courses.
Arrays make use of ([]) square brackets, as well as having their own index of selection that begins at zero.
It accesses the first element found by using courses[0].

Why arrays are important:

Store multiple values as a single variable
Order of items is preserved
Easy to loop through or manipulate

Pro Tip: Arrays start indexing at 0 instead of 1! Which means courses[0] points to the first item, courses[1] points to the second item, and so on.

Step 5: Assignment and Arithmetic Operators

Let’s do some mathematical operations:

📄

// JS ASSIGNMENT & ARITHMETIC
let x = 10;
let y = 3;

console.log("Assignment & Arithmetic:");
console.log("x = ", x, ", y = ", y);
x += 5; // x = x + 5
console.log("After x += 5, x = ", x);

console.log("Addition:", x + y);
console.log("Subtraction:", x - y);
console.log("Multiplication:", x * y);
console.log("Division:", x / y);
console.log("Modulus:", x % y);
console.log("Exponent:", x ** y);

What this code does:

Demonstrates assignment operators (x += 5)
Shows basic arithmetic operations
Includes modulus (remainder) and exponentiation

Why operators are essential:

Perform calculations and manipulate data
Make necessary updates and reassignment of variables
Provides for complex mathematical logic

Note: The modulus operator % produces a remainder from division. For example, 10 % 3 equals 1 since 10 divided by 3 gets a quotient of 3 and a remainder of 1.

Step 6: Comparison Operators

Comparison operators allow you to compare values:

📄

// JS COMPARISON
console.log("Comparison:");
console.log("Is x > y?", x > y);
console.log("Is x < y?", x < y);
console.log("Is x == '15'?", x == "15"); // true (loose equality)
console.log("Is x === '15'?", x === "15"); // false (strict equality)
console.log("Is x != y?", x != y);

What this code does:

Evaluate values by greater than, less than criteria
Demonstrate the distinction between == and ===
Demonstrate inequity checks

Why comparison is important:

Make decisions in your code
Validate data
Manage program flow

Important distinction! == only checks for value (loose equality), while === checks value AND type (strict equality). It is always best practice to check for strict equality with === to avoid unanticipated outcomes.

Step 7: Logical Operators

Logical operators compound premises:

📄

// JS LOGICAL OPERATORS
console.log("Logical Operators:");
let hasID = true;
let passedExam = false;

console.log("hasID && passedExam:", hasID && passedExam); // false
console.log("hasID || passedExam:", hasID || passedExam); // true
console.log("!hasID:", !hasID); // false

// Combining multiple conditions
if (student.age >= 18 && student.isEnrolled) {
    console.log("Student is eligible for college");
} else {
    console.log("Student is NOT eligible");
}

What does this code:

Showcases AND (&&), OR (||), and NOT (!) operators
Displays how to combine multiple conditions
Employs an if-else statement for making decisions

Logical operators power:

Build compound conditions
Make your code smarter and more flexible
Control over what happens based on multiple aspects

Don’t forget:

&& (A and B) – ALL conditions must be true
|| (A or B) – At least one condition must be true
! (NOT) – reverts condition

Code Explanation Sections

Understanding typeof Operator

📄

console.log("name:", typeof name); // string
console.log("age:", typeof age); // number

How typeof works:

typeof is an operator that returns a string indicating the type
It’s the best practice for debugging and type checking
It helps you understand what type of data you’re dealing with.

Why it’s useful: When you’re unsure what the type of data a variable in your code contains, typeof will tell you exactly what it is.

Object Dot Notation vs Bracket Notation

📄

console.log("Student name:", student.name); // Dot notation
// Alternative: console.log("Student name:", student["name"]); // Bracket notation

How these work:

The dot notation (object.property) is the cleanest and most common
The bracket notation (object[“property”]) is useful in cases where your property names are dynamic.
Both labelled notations access the same data; they just look different

When to use each: Use dot notation when you know your property names; use bracket notation when your property name is stored in a variable.

The Importance of Strict Equality

📄

console.log("Is x == '15'?", x == "15"); // true (loose equality)
console.log("Is x === '15'?", x === "15"); // false (strict equality)

How they differ:

== performs the type coercion (converts,1,2, and strings).
=== requires that both the value and the type match.
15 == “15” is true because the string becomes the number.
15 === “15” is false because there are different types.

Best Practice: Always use === / !== to avoid unexpected type conversions and bugs!

Tables of Key Concepts

1. Components / Keywords Used

Name	Description
typeof	Operator that returns the data type of a value
Object	Collection of key-value pairs for storing related data
Array	Ordered list of values accessible by index
Symbol	Unique and immutable primitive value
BigInt	Numeric type for very large integers
if/else	Conditional statement for decision making

2. Key Properties / Parameters / Features

Name	Description
Data Types	Classification of data (string, number, boolean, etc.)
Arithmetic Operators	Perform mathematical operations (+, -, *, /, %)
Comparison Operators	Compare values (>, <, ===, !==, etc.)
Logical Operators	Combine boolean values (&&, \|\|, !)
Assignment Operators	Assign values to variables (=, +=, -=, etc.)
Zero-based Indexing	Array elements start counting from 0

Useful References

Source code:
https://github.com/niotechoneSoftware/dotnet-developer-roadmap/tree/main/Interactive-JS-Tutorials/Day%203%20-%20JS%20-%20Data%20Types%20and%20Operators

Summary – What You Learned

On day three of this course we will dive into two primary and crucial ideas; data types and operators. The first topic covered will be the many different types of values that can be assigned with the JavaScript programming language. You will see examples of (strings, numbers, booleans, arrays & objects) and see how to send (null & undefined) values to the JavaScript environment. The second topic example covered will be showing how you can apply certain “Operators” to do things like (add numbers, compare values, join Boolean statements, and modify our Variables). By the conclusion of this day, you should have a basic understanding of Data Types in JavaScript as well as how to properly implement the different types of Operators.

Output

Let's Work Together

Software Development Services

+91 9925 66 8383

Related Tags

Frequently Asked Questions FAQs

What are data types in JavaScript?

Data types define the type of value a variable holds. JS has primitive types (string, number, boolean, null, undefined, bigint, symbol) and non-primitive types (objects, arrays, functions).

What is the difference between primitive and non-primitive data types?