JavaScript Zero to Advanced (Part 1): Cracking the Core Fundamentals & Basics

Introduction & Roadmap

No matter which IT sector or domain we belong to, having a solid grasp of programming languages is essential for every developer. Whether you are stepping into Software Engineering, AI/ML, or DevOps, programming is the core foundation.

That is why I am starting a complete “JavaScript Zero to Hero” series to share my own learning journey, boost my knowledge, and help everyone who is looking to master this powerful language. This comprehensive guide and roadmap will definitely be useful for all aspiring developers and interns!

Here is the complete roadmap we are going to cover throughout this series:

• Module 1: Fundamentals (JS Basics) — Variables, Data Types, Operators, Control Flow, Functions, and Basic Objects/Arrays. (We are starting with this today!)
• Module 2: OOP Concepts — Understanding Classes, Objects, and Object-Oriented programming principles in JavaScript.
• Module 3: Data Structures — Deep diving into Arrays, Linked Lists, Stacks, and Queues.
• Module 4: Algorithms — Mastering Sorting, Searching, and understanding Big-O notation for performance.
• Module 5: DOM Manipulation & Web Basics — Interacting with web pages, handling user events, and dynamic UI updates.
• Module 6: ES6+ Modern Features — Destructuring, Spread/Rest operators, Template literals, and modern syntax.
• Module 7: Asynchronous JavaScript — Handling asynchronous operations with Promises, Async/Await, and fetching APIs.
• Module 8: Advanced Concepts — Exploring the core inner workings like Scope, Closures, Prototypes, and the Event Loop.

Module 1: Fundamentals (JS Basics)

JavaScript is the heart of modern web development. Whether you are starting your coding journey or refreshing your core concepts, understanding the fundamentals is essential.

Let’s break down Module 1:

Variables , Data Type ( Functions, Arrays, and Objects ) , Operators and Control Flow in simple terms!

Module 1: Fundamentals (JS Basics)

1.Variables & Data Types

Variables are containers for storing data values. In modern JavaScript, we use let and const.

+----------+---------------+-----------------+-----------------+--------------------------------------+---------------------------------------+
| Keyword  | Scope         | Re-declaration  | Re-assignment   | Hoisting                             | Best Use Case                         |
+----------+---------------+-----------------+-----------------+--------------------------------------+---------------------------------------+
| var      | Function      | Allowed         | Allowed         | Yes (initialized as undefined)       | Avoid in modern code                  |
| let      | Block ({})    | Not allowed     | Allowed         | Yes (uninitialized / Temporal Zone)  | Variables that need to change         |
| const    | Block ({})    | Not allowed     | Not allowed     | Yes (uninitialized / Temporal Zone)  | Constants and values that won't change|
+----------+---------------+----------------+-----------------+--------------------------------------+---------------------------------------+

• **var (Old Way):** Function-scoped. Can be re-declared and re-assigned. (Avoid using this in modern code).
• **let (Modern): Block-scoped ({}). Can be re-assigned, but cannot** be re-declared in the same scope.
• **const (Modern): Block-scoped. Cannot** be re-assigned or re-declared. Use this for constants.

let age = 22;
age = 23; // ✅ Allowed (Re-assigned)

const country = "Sri Lanka";
// country = "India"; // ❌ Error! (Cannot change const)

JavaScript data types are divided into two main categories based on how they are stored in computer memory:

JS Data Types

A. Primitive Types (Single Values — Immutable)

Stored directly in memory (Value-based). When you copy a primitive variable, you copy the actual value. Changing one doesn’t affect the other.

• String: Text data (e.g., "Hello")
• Number: Integers and decimals (e.g., 25, 10.5)
• Boolean: True or false values (true, false)
• Undefined: A variable declared with no assigned value yet.
• Null: An intentional empty value.

let x = 10;
let y = x; // y gets a copy of x's value (10)
x = 20;    

console.log(x); // 20
console.log(y); // 10 (y remains unchanged!)

B. Reference Types (Complex Structures — Mutable)

Stored as a Memory Address (Reference) rather than the direct value. When you copy a reference variable, you copy the address. Changing one affects both!

• Objects: Key-value pairs representing real-world entities.
• Arrays: Ordered lists of data.
• Functions: Reusable blocks of code (First-class objects in JS).

let person1 = { name: "Kasun" };
let person2 = person1; // Copies the memory reference, not the value!

person2.name = "Nimal"; 

console.log(person1.name); // "Nimal" (person1 also changed!)
console.log(person2.name); // "Nimal"

1.Objects

Objects

Objects are used to store keyed collections of data and more complex entities. Instead of indexing items by numbers (like arrays), objects use keys (or properties) to access values.

How to define an Object: You use curly brackets {} containing key-value pairs separated by commas.

name: "Kawindu",
  age: 23,
  skills: ["React", "Node"],
  isEnrolled: true,

  // Objects can even hold functions (methods)
  greet: function() {
    return `Hello, my name is ${this.name}`;
  }
};

Accessing Object Properties:

• Dot Notation (.): Clean and most common way.

console.log(student.name); // Output: "Kawindu"

• Bracket Notation ([]): Useful when keys have spaces or are stored inside variables.

console.log(student["age"]); // Output: 23

2.Arrays

Arrays

Arrays are used to store multiple items under a single variable name in a specific, sequential order. Each item in an array has a numeric index starting at 0.

How to define an Array: You use square brackets []. Arrays can hold strings, numbers, booleans, objects, or even other arrays.

const languages = ["JavaScript", "Python", "Java"];

Common Array Methods & Operations: JavaScript comes with built-in methods to easily manipulate data:

• push(): Adds one or more elements to the end of an array.

languages.push("C++");    
console.log(languages); // ["JavaScript", "Python", "Java", "C++"]

• pop(): Removes the last element from an array.

languages.pop();          
console.log(languages); // ["JavaScript", "Python", "Java"]

• unshift(): Adds an element to the beginning of an array.

languages.unshift("TypeScript");
console.log(languages); // ["TypeScript", "JavaScript", "Python", "Java"]

• shift(): Removes the first element from an array.

languages.shift();
console.log(languages); // ["JavaScript", "Python", "Java"]

Summary: When to Use Which?

• Use Objects when you need to represent a specific item with distinct descriptive properties (e.g., a user profile, a product item, a settings configuration).
• Use Arrays when you have a list of similar items where order matters (e.g., a list of search results, a collection of tasks, an array of user permissions).

3 . Functions

Functions

Functions help you write reusable blocks of code. In JavaScript , there are three primary ways to define them:

• Function Declaration (Normal)
• Function Expression
• Arrow Function (ES6 — Most Popular)

Function Declaration (Normal)

• This is the traditional way of writing a named function.
• Hoisting: The special thing about this is that you can call (invoke) this function anywhere in your code, even before it is created. JavaScript automatically hoists it.

sayHello(); // It works even if you talk about it above the code.

function sayHello() {
  console.log("Hello!");
}

Function Expression

• What happens here is that an anonymous function is assigned to a variable (stored).
• No hoisting: You can only call the function after the line where it was created. If you call it before that, an error will occur.

// sayHi(); // An error occurs here (because hoist is not happening)

const sayHi = function() {
console.log("Hi!");
};

sayHi(); // Now working

Arrow Function (ES6 — Most Popular)

• This is a modern and very concise method introduced with ES6. This is the most commonly used method these days.
• Features -: Very easy to write (It does not have its own keyword this bound (Lexical this).

const sayHey = () => {
  console.log("Hey!");
};

sayHey();

3.Operators & Control Flow

Control flow is the backbone of any programming language. It allows your application to make smart decisions, evaluate conditions, and automate repetitive tasks.

Let’s dive into Conditional Statements and Loops with complete examples!

1. Conditional Statements (Making Decisions)

Conditions let your code execute different blocks of code based on whether a specific expression is true or false.

**if / else if / else** Statements The standard way to handle multiple conditional paths in your application.

let score = 75;

if (score >= 75) {
  console.log("Grade: Distinction");
} else if (score >= 50) {
  console.log("Grade: Pass");
} else {
  console.log("Grade: Fail");
}

The Ternary Operator (? :) A clean, shorthand way to write simple if/else statements in a single line. Perfect for assigning values conditionally.

let score = 75;
let status = score >= 50 ? "Pass" : "Fail"; 
console.log(status); // Output: "Pass"

**switch** Statement Ideal when you are comparing a single variable against many different fixed options (cleaner than writing multiple else if blocks).

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("Start of the work week!");
    break;
  case "Friday":
    console.log("Almost weekend!");
    break;
  default:
    console.log("Just another regular day.");
}

2 Loops (Automating Repetitive Tasks)

Instead of writing the same code over and over, loops help you iterate through data structures or repeat actions efficiently.

**for **Loop The classic loop used when you know exactly how many times you want to repeat a block of code.

for (let i = 1; i <= 3; i++) {
  console.log(`Count number: ${i}`);
}

**while* Loop Repeats a block of code while* a specified condition evaluates to true. Great when the number of iterations isn't known beforehand.

let countdown = 3;

while (countdown > 0) {
  console.log(`Countdown: ${countdown}`);
  countdown--;
}

**forEach** Method (Array Iteration) A modern, highly readable array method used to execute a function once for each element in an array.

const fruits = ["Apple", "Banana", "Mango"];

fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});

💡 Pro Tip: Choosing the right control flow tool makes your code cleaner, more readable, and easier to debug!

We have successfully covered the core fundamentals of JavaScript in Module 1! Let’s do a quick recap of what we learned today:

• Variables & Data Types: We explored let, const, and the difference between Primitive types (immutable, stored by value) and Reference types (mutable, stored by reference).
• Objects & Arrays: We learned how to store structured data using objects and handle sequential lists using powerful array methods like push(), pop(), unshift(), and shift().
• Functions: We looked at the three main ways to write functions — Function Declarations, Function Expressions, and modern Arrow Functions.
• Operators & Control Flow: We mastered decision-making using if/else, ternary operators, and switch statements, as well as automating tasks using for, while, and forEach loops.

What to Do Next?

The best way to master these concepts is through hands-on practice. Open up your code editor or browser console, try writing your own functions, manipulate some arrays, and experiment with loops!

Stay tuned for Part 2, where we will dive into Module 2: OOP Concepts (Classes, Objects, and Object-Oriented Programming principles in JavaScript).

Happy coding, and let’s keep growing together!