function fetchUser() {
  fetch("https://api.example.com/user")
    .then(response => response.json())
    .then(data => {
      console.log("User:", data);
      return fetch(`https://api.example.com/posts/${data.id}`);
    })
    .then(response => response.json())
    .then(posts => {
      console.log("Posts:", posts);
    })
    .catch(err => {
      console.log("Error:", err);
    });
}

At first glance, this might look fine. But as the logic grows:

• Multiple .then() chains make it harder to follow

• Error handling becomes less intuitive

• Code readability decreases

This is exactly why async/await was introduced

Why Async/Await Was Introduced

Async/await is syntactic sugar over Promises.

It doesn’t replace Promises — it simply provides a cleaner and more readable way to write asynchronous code.

Problems it solves:

• Deep .then() chaining

• Callback-like nesting

• Difficult debugging in complex flows

How Async Functions Work

An async function always returns a Promise.

async function greet() {
  return "Hello";
}

This is equivalent to:

function greet() {
  return Promise.resolve("Hello");
}

Even if you return a normal value, JavaScript wraps it inside a Promise.

Await Keyword Concept

The await keyword can only be used inside an async function.

It pauses execution until a Promise is resolved.

async function fetchUser() {
  let response = await fetch("https://api.example.com/user");
  let data = await response.json();

  console.log("User:", data);

  let postResponse = await     fetch(`https://api.example.com/posts/${data.id}`);
  let posts = await postResponse.json();

  console.log("Posts:", posts);
}

What changed?

• No .then() chaining

• Step-by-step execution

• Much easier to read and understand

It looks like synchronous code, but it’s still asynchronous under the hood.

Error Handling with Async Code

Instead of .catch(), async/await uses try...catch.

async function fetchUser() {
  try {
    let response = await fetch("https://api.example.com/user");
    let data = await response.json();

    let postResponse = await fetch(`https://api.example.com/posts/${data.id}`);
    let posts = await postResponse.json();

    console.log(posts);
  } catch (error) {
    console.log("Error:", error.message);
  }
}

Why this is better:

• Cleaner structure

• Centralized error handling

• Similar to synchronous programming

Comparison with Promises

Using Promises:

fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.log(err));

Using Async/Await:

async function getData() {
  try {
    let res = await fetch("https://api.example.com/data");
    let data = await res.json();
    console.log(data);
  } catch (err) {
    console.log(err);
  }
}

Key Differences:

Why Async/Await Improves Readability

• Code flows top-to-bottom

• Less nesting

• Easier to debug

• More intuitive for beginners

You write async code the same way you think about it.

Final Thoughts

Async/await is one of the most important features in modern JavaScript.

• It is built on top of Promises

• Makes asynchronous code cleaner

• Reduces complexity in real-world applications

Quick Summary

• async → makes a function return a Promise

• await → pauses execution until Promise resolves

• Works only inside async functions

• Uses try...catch for error handling

• Improves readability significantly

Once you start using async/await, going back to .then() chains will feel unnecessarily complicated

.

What errors are in JavaScript

Errors in JavaScript are situations where something goes wrong while executing code. It could be due to wrong syntax, accessing something that doesn’t exist, or unexpected values.

In simple words, error are unexpected situations and outputs.

Example:

console.log(x); // ReferenceError: x is not defined

There are different types of errors like:

• Syntax Error (wrong code structure)

• Reference Error (variable not defined)

• Type Error (wrong data usage)

Using try and catch blocks

The try block lets you write code that might cause an error, and the catch block handles that error without breaking the program.

try {
  let result = JSON.parse("invalid json");
} catch (error) {
  console.log("Something went wrong:", error.message);
}

So instead of crashing, your program safely handles the issue.

The finally block

The finally block always runs, no matter what happens — whether an error occurs or not.

try {
  console.log("Trying...");
} catch (err) {
  console.log("Error occurred");
} finally {
  console.log("This always runs");
}

This is useful for cleanup tasks like closing connections or stopping loaders.

Throwing custom errors

You can also create your own errors using throw. This helps when you want to manually stop execution based on conditions.

function withdraw(amount) {
  if (amount > 1000) {
    throw new Error("Limit exceeded");
  }
  return "Success";
}

This gives you control over when and why errors should happen.

Why error handling matters

Error handling is important because:

• It prevents your app from crashing

• Helps in debugging issues

• Improves user experience

• Makes code more reliable and predictable

Without it, even a small issue can break the entire flow of your application.

At the end, error handling is not just about fixing errors, it’s about managing them smartly. Using try, catch, and finally properly can make your code much more stable and professional.

Summary

In this article we understood how error handling works in JavaScript using try, catch, and finally. Errors are common but handling them properly makes your application stronger. Try is used to write risky code, catch handles the error, and finally runs no matter what. We also saw how to throw custom errors when needed. Once you start using these concepts, your code will become safer and easier to manage.

What spread operator does

The spread operator is used to "expand" values. It takes something like an array or object and spreads out its elements one by one.

Think of it like opening a packed box and laying everything out.

Example with array:

const arr = [1, 2, 3];
const newArr = [...arr];

console.log(newArr); // [1, 2, 3]

Example with function:

const nums = [5, 10, 15];

function sum(a, b, c) {
  return a + b + c;
}

console.log(sum(...nums)); // 30

Here spread takes the array and passes values individually.

What rest operator does

The rest operator does the opposite. Instead of expanding, it collects values into a single structure.

Think of it like packing multiple items into one box.

Example:

function collect(...args) {
  console.log(args);
}

collect(1, 2, 3, 4); // [1, 2, 3, 4]

Here all arguments are collected into one array called args.

Another example:

const [first, ...rest] = [10, 20, 30, 40];

console.log(first); // 10
console.log(rest);  // [20, 30, 40]

Differences between spread and rest

Even though both use ..., their behaviour depends on where they are used.

Spread:

• Expands values

• Used when passing or copying data

• Mostly seen on right side

Rest:

• Collects values

• Used in function parameters or destructuring

• Mostly seen on left side

Simple way to remember:
Spread = open things
Rest = gather things

Using spread with arrays and objects

Spread with arrays:

const a = [1, 2];
const b = [3, 4];

const combined = [...a, ...b];
console.log(combined); // [1, 2, 3, 4]

Copy array:

const original = [1, 2, 3];
const copy = [...original];

Spread with objects:

const user = { name: "Alex", age: 20 };

const updatedUser = { ...user, age: 21 };

console.log(updatedUser);

// output:
// { name: "Alex", age: 21 };

Merge objects:

const a = { x: 1 };
const b = { y: 2 };

const merged = { ...a, ...b };
console.log(merged)

//output:
// {x:1,y:2}

Practical use cases

1. Copying data without mutation

[ note: Spread operator is not recommended with nested array and objects, as they copy only first layer. ]

const arr = [1, 2, 3];
const newArr = [...arr];

1. Merging arrays

const all = [...arr1, ...arr2];

1. Passing dynamic arguments

Math.max(...numbers);

1. Removing properties using rest

const user = { id: 1, name: "Sam", password: "1234" };

const { password, ...safeUser } = user;
console.log(safeUser);

1. Handling unknown number of function arguments

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}

At the end, both spread and rest are simple once you understand their intention. Same syntax, different behaviour. Just remember one expands and the other collects, and you will never mix them up again.

In this blog, we’ll break down what string methods really are, why developers write polyfills, how to implement common string utilities on your own, and the types of string problems you’ll often face in interviews. The goal is simple: move from just using JavaScript to actually understanding it.

What string methods are

String methods are built-in functions that JavaScript gives us to work with text. Instead of manually looping through characters or writing complex logic, we can directly use methods like toUpperCase(), slice(), includes(), trim(), etc.

For example:

const name = "hello world";
console.log(name.toUpperCase()); // HELLO WORLD

These methods are already optimized and tested, so in real-world development we mostly rely on them instead of reinventing the wheel.

But interviews are different. There, you are often asked to implement these methods yourself to check your understanding.

Why developers write polyfills

A polyfill is basically your own implementation of a built-in method.

Why would someone do that?

First, older browsers may not support newer methods. For example, includes() was not supported in very old browsers, so developers wrote polyfills to make it work everywhere.

Second, interviews. Interviewers want to see if you actually understand how things work behind the scenes instead of just using them.

Third, learning. Writing a polyfill forces you to think deeply about edge cases, loops, indexing, and behavior.

So instead of this:

"hello".includes("ell");

You might be asked to implement your own version.

Implementing simple string utilities

Let’s look at how we can build some basic string methods ourself.

1. Custom includes()

function myIncludes(str, search) { 
for (let i = 0; i <= str.length - search.length; i++) { 
let found = true;
for (let j = 0; j < search.length; j++) {
  if (str[i + j] !== search[j]) {
    found = false;
    break;
  }
}

if (found) return true;
}

return false; 
}

1. Custom reverse string

   function reverseString(str) {
    let result = "";
   
   for (let i = str.length - 1; i >= 0; i--) {
    result += str[i]; 
   }
   
   return result; }
   

3. Custom trim()

function myTrim(str) { 
let start = 0;
let end = str.length - 1;

while (str[start] === " ") start++; 
while (str[end] === " ") end--;

return str.slice(start, end + 1); 
}

When you write these, you start understanding how strings are just sequences of characters and how indexing works internally.

Common interview string problems

String questions are extremely common in interviews because they test logic, edge cases, and problem-solving.

Some popular ones:

1. Check palindrome

function isPalindrome(str) { 
let left = 0; 
let right = str.length - 1;

while (left < right) {
 if (str[left] !== str[right]) return false;
 left++;
 right--; 
}

return true; 
}

1. Count characters

   function charCount(str) {
     const map = {};
   
     for (let char of str) {
       map[char] = (map[char] || 0) + 1;
     }
   
     return map;
   }
   

2. Find first non-repeating character

   function firstUnique(str) { 
   const map = {};
   
   for (let char of str) { 
   map[char] = (map[char] || 0) + 1; 
   }
   
   for (let char of str) {
   if (map[char] === 1) return char; 
   }
   
   return null; }
   

3. Anagram check

function isAnagram(a, b) { 
if (a.length !== b.length) return false;

const count = {};

for (let char of a) { 
count[char] = (count[char] || 0) + 1; 
}

for (let char of b) { 
if (!count[char]) return false; count[char]--; 
}

return true; }

These problems are not about memorizing solutions, but understanding patterns like frequency maps, two pointers, and traversal.

Importance of understanding built-in behavior

Most developers use built-in methods daily, but very few understand how they actually behave.

For example:

• slice() does not modify the original string

• substring() handles negative values differently

• trim() removes only whitespace, not all characters

• Strings are immutable in JavaScript

If you don’t know these details, you can easily make mistakes.

Understanding internals helps you:

• Debug faster

• Write optimized code

• Handle edge cases better

• Perform well in interviews

It also builds strong fundamentals, which is what companies actually look for.

Final thought

Using string methods is easy. Understanding them is what makes you strong. If you can both use a method and implement it yourself, you are no longer just a user of JavaScript, you actually understand how it works.

What this represents

this refers to the object that is currently executing the function. It is determined at runtime, so the same function can have different values of this depending on how it is called.

this in global context

In the global scope:

console.log(this);

In the browser, this will refer to the window object. In Node.js, it typically refers to an empty object or the global object depending on the environment. The idea is that when there is no specific caller, this defaults to the global context.

this inside objects

When a function is called as a method of an object, this refers to that object.

const user = {
  name: "Alexa",
  greet: function () {
    console.log(this.name);
  }
};

user.greet();

In this case, this refers to user, so the output is "Alexa". The object before the dot decides what this is.

this inside functions

When a normal function is called on its own, it does not have an owner object.

function greet() {
  console.log(this);
}

greet();

In the browser, this will refer to the global object. In strict mode, it will be undefined. This happens because the function is not being called by any object. And in node.js we'll get reference to global object, similarly undefined in strict mode.

Arrow function behaviour

Arrow functions behave differently because they do not have their own this. Instead, they inherit this from the surrounding scope.

const user = {
  name: "Alexa",
  greet: () => {
    console.log(this.name);
  }
};

user.greet();

Here, this does not refer to user. It refers to whatever the surrounding context is, which is usually the global scope, so the result is undefined.

How calling context changes this

The most important thing to understand is that this changes based on how a function is called.

const user1 = {
  name: "Alexa",
  greet() {
    console.log(this.name);
  }
};

const user2 = {
  name: "Sam"
};

user2.greet = user1.greet;

user2.greet();

Even though the function was originally defined in user1, when it is called using user2, this refers to user2, so the output is "Sam".

Another example:

const user = {
  name: "Alexa",
  greet() {
    console.log(this.name);
  }
};

const fn = user.greet;
fn();

Here, the function is called without an object, so this becomes undefined (or global in non-strict mode), and the result is not what you might expect.

Final understanding

The value of this is not fixed. It is determined by how a function is called. In the global context, it refers to the global object. Inside object methods, it refers to the object calling the method. Inside normal functions, it defaults to global or undefined depending on strict mode. Arrow functions do not have their own this and instead inherit it from their surrounding scope. Once you focus on how a function is invoked, understanding this becomes much clearer.

At a high level, when you use new, JavaScript does a few things behind the scenes:

• creates a brand new empty object

• links that object to a prototype

• runs the constructor function with this pointing to that new object

• returns the object

This is why new is so powerful — it bundles multiple steps into one simple line.

Constructor functions

A constructor function is just a normal function, but by convention it starts with a capital letter and is meant to be used with new.

Example:

function User(name, age) {
  this.name = name;
  this.age = age;
}

This function doesn’t return anything explicitly, but when used with new, it will create and return an object.

Object creation process

Let’s say we do this:

const user1 = new User("Alex", 25);

Here’s what actually happens step by step:

1. JavaScript creates an empty object:

{}

1. It sets the prototype of this object to User.prototype

2. It calls the constructor:

User.call(newObject, "Alex", 25);

So inside the function:

this.name = "Alex";
this.age = 25;

1. Finally, it returns the object

So user1 becomes:

{
  name: "Alex",
  age: 25
}

How new links prototypes

This is where things get interesting.

Every function in JavaScript has a prototype property. When you use new, the created object is internally linked to that prototype.

User.prototype.greet = function () {
  console.log("Hello " + this.name);
};

Now:

const user1 = new User("Alex", 25);
user1.greet();

Even though greet is not inside the object itself, JavaScript looks up the prototype chain and finds it.

So the link looks like this:

user1 -> User.prototype -> Object.prototype

This is called the prototype chain.

Instances created from constructors

Each time we use new, we create a new instance.

const user1 = new User("Alexa", 25);
const user2 = new User("Sam", 30);

Both are separate objects:

user1 !== user2

But they share the same prototype:

user1.__proto__ === user2.__proto__

This is efficient because methods are not duplicated for every object -- they live in one place (the prototype).

Final understanding

The new keyword is basically a shortcut for creating objects in a structured way. It handles object creation, sets up the prototype chain, binds this, and returns the object automatically. Constructor functions define the blueprint, and each call with new creates a new instance that follows that blueprint while sharing common behaviour through prototypes.

A callback function is a function that is passed into another function as an argument and then executed later inside that function. In JavaScript, functions are treated like normal values. This means we can store them in variables, pass them to other functions, and even return them from functions. Because of this feature, one function can receive another function and decide when to execute it. The function that gets passed is called a callback function.

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

function sayBye() {
  console.log("Bye!");
}

greet("Sam", sayBye);

In this example, sayBye is passed into the greet function and executed inside it. Since it is called back by another function, it is known as a callback.

Why Callbacks Are Used in Asynchronous Programming

Callbacks are heavily used in asynchronous programming. JavaScript runs on a single thread, which means it can only perform one operation at a time. However, many tasks in web development take time, such as fetching data from an API, reading files, or waiting for timers.

If JavaScript waited for each of these tasks to finish before moving forward, the application would freeze. Instead, JavaScript starts the task and continues executing other code. Once the task finishes, a callback function is executed. This allows the program to remain responsive.

A simple example is using setTimeout.

console.log("Start");

setTimeout(function () {
  console.log("Timer finished");
}, 2000);

console.log("End");

The function passed to setTimeout is the callback. JavaScript schedules it to run after 2 seconds while continuing to execute the rest of the code. That is why the output becomes:

Start
End
Timer finished

Passing Functions as Arguments

One powerful concept in JavaScript is that functions can be passed as arguments. Since functions are values, they can be sent into other functions to control how those functions behave.

function processNumber(num, operation) {
  operation(num);
}

function double(n) {
  console.log(n * 2);
}

function square(n) {
  console.log(n * n);
}

processNumber(5, double);
processNumber(5, square);

In this example, the processNumber function remains the same, but its behavior changes depending on the callback that is passed. This makes code more flexible and reusable.

Callback Usage in Common Scenarios

Callbacks appear in many real-world JavaScript situations. One of the most common examples is event handling. When a user clicks a button, types in an input field, or scrolls a page, a callback function runs in response to that event.

button.addEventListener("click", function () {
  console.log("Button clicked");
});

The function passed to addEventListener is a callback that runs whenever the click event happens.

Callbacks are also used in:

• Timers like setTimeout and setInterval

• API requests

• File operations in Node.js

• Handling user interactions in the browser

Because asynchronous tasks are everywhere in web development, callbacks became a fundamental part of JavaScript programming.

Basic Problem of Callback Nesting

Although callbacks are useful, they can sometimes lead to messy code when multiple asynchronous operations depend on each other. This situation is known as callback nesting, often referred to as callback hell.

loginUser(function () {
  getUserProfile(function () {
    getPosts(function () {
      console.log("All data loaded");
    });
  });
});

Here each step waits for the previous one to complete, which forces the code into deeper levels of nesting. As the number of operations increases, the code becomes harder to read, maintain, and debug.

Because of this problem, modern JavaScript introduced Promises and later async/await, which allow developers to handle asynchronous operations in a cleaner and more structured way.

And saved our eyes and brain!

In this article we will understand the problems with traditional string concatenation, learn the syntax of template literals, see how variables can be embedded inside strings, explore multi-line strings, and understand some practical use cases.

Problems with Traditional String Concatenation

Before template literals were introduced, JavaScript developers commonly used the + operator to combine strings and variables.

Example:

const name = "Ravi"; 
const age = 25;

const message = "My name is " + name + " and I am " + age + " years old."; console.log(message);

While this works, the code becomes harder to read when many variables are involved.

Example:

const product = "Laptop";
const price = 60000;

const text = "The price of " + product + " is " + price + " rupees.";

As the string grows longer, the concatenation operators make the code cluttered. This approach also becomes inconvenient when creating multi-line strings because developers had to manually include newline characters like \n.

Template Literal Syntax

Template literals were introduced in modern JavaScript to make string creation simpler and cleaner. Instead of using single quotes or double quotes, template literals use backticks.

Example:

const message = `Hello World`;
console.log(message);

The backtick character allows us to create dynamic strings more easily.

Template literals support additional features such as embedding variables and writing multi-line strings without special characters.

Embedding Variables in Strings

One of the most useful features of template literals is the ability to insert variables directly inside a string. This is done using the ${} syntax.

Example:

const name = "Ravi";
const age = 25;
const message = `My name is \({name} and I am \){age} years old.`; console.log(message);

This approach is easier to read compared to string concatenation because the variables appear directly within the sentence structure.

We can also include expressions inside the curly braces.

Example:

const a = 5;
const b = 10;

const result = The sum of \({a} and \){b} is ${a + b}.; 
console.log(result);

JavaScript evaluates the expression inside ${} and inserts the result into the string.

Multi-line Strings

Creating multi-line strings used to require newline characters or concatenation.

Example using older syntax:

const text = `"This is line one.\n" + "This is line two.\n" + "This is line three."`;

Template literals allow us to write multi-line strings naturally.

Example:

const text = `This is line one.
 This is line two.
 This is line three.`;

console.log(text)

This makes the code much cleaner and easier to maintain.

Use Cases in Modern JavaScript

Template literals are widely used in modern JavaScript development.

They are commonly used when generating dynamic messages that include variables or expressions.

Example:

const user = "Ankit";
const greeting = `Welcome back, ${user}!`;

Template literals are also frequently used when creating HTML structures dynamically.

Example:

const title = "JavaScript Basics";

const html = `${title} Learning JavaScript is fun.`; 

They are also useful when formatting logs or debugging messages.

Example:

const item = "Book"; 
const price = 300;

console.log(`The \({item} costs \){price} rupees.`);

Template literals improve readability and reduce errors when building complex strings.

Conclusion

Template literals provide a modern and powerful way to work with strings in JavaScript. They solve many problems associated with traditional string concatenation and make code easier to read and maintain. By using backticks, developers can embed variables, write expressions inside strings, and create multi-line text without extra syntax. Understanding template literals is an essential step toward writing cleaner and more expressive JavaScript code.

What Nested Arrays Are

A nested array simply means an array that contains another array inside it.

Example:

const arr = [1, 2, [3, 4], 5];

Here the main array contains another array [3, 4]. That makes it a nested array.

Nested arrays can go even deeper.

const arr = [1, [2, [3, 4]], 5];

Here we have arrays inside arrays multiple levels deep. This structure is common when working with data from APIs or complex data structures.

Why Flattening Arrays Is Useful

Flattening an array means converting a nested array into a single-level array.

For example:

const arr = [1, 2, [3, 4], 5];

Flattened version:

[1, 2, 3, 4, 5]

Flattening becomes useful in many situations.

Sometimes APIs return nested arrays that are hard to process. Flattening them makes the data easier to loop through or manipulate. Many array methods like map, filter, and reduce work more smoothly when the array is a single level. Flattening simplifies data processing. It is also useful when combining results from multiple arrays or working with grouped data.

Concept of Flattening Arrays

The basic idea of flattening is simple.

We look at each item of the array. If the item is a normal value, we add it to the result array. If the item is another array, we go inside it and add its elements instead.

Example input:

[1, [2, 3], 4]

Process:

1 → add to result
[2,3] → open it and add 2 and 3
4 → add to result

Result:

[1, 2, 3, 4]

Different Approaches to Flatten Arrays

There are several ways to flatten arrays in JavaScript.

Using flat()

JavaScript provides a built-in method called flat.

const arr = [1, 2, [3, 4]];
const result = arr.flat();

console.log(result);

Output:

[1, 2, 3, 4]

If the array has deeper nesting, we can specify the depth.

arr.flat(2);

If we want to flatten everything regardless of depth:

arr.flat(Infinity);

Using reduce()

Another common approach is using reduce.

const arr = [1, [2, 3], 4];

const result = arr.reduce((acc, curr) => {
  return acc.concat(curr);
}, []);

console.log(result);

This works well for one-level nested arrays.

Using recursion

Recursion is often used to flatten arrays of any depth.

function flatten(arr) {
  let result = [];

  for (let item of arr) {
    if (Array.isArray(item)) {
      result = result.concat(flatten(item));
    } else {
      result.push(item);
    }
  }

  return result;
}

const arr = [1, [2, [3, 4]], 5];
console.log(flatten(arr));

Output:

[1, 2, 3, 4, 5]

This method checks if an element is an array. If it is, it recursively flattens it.

Common Interview Scenarios

Flattening arrays is a common topic in JavaScript interviews. One common question is to flatten an array without using the built-in flat method. Interviewers usually expect a recursive solution.

Another scenario is flattening an array only one level deep.

Flattening arrays is a common topic in JavaScript interviews.

One common question is to flatten an array without using the built-in flat method. Interviewers usually expect a recursive solution.

Another scenario is flattening an array only one level deep.

Summary

JavaScript provides different ways to flatten arrays, such as using the built-in flat() method, using reduce(), or writing a recursive function to handle arrays of any depth.

Flattening arrays is also a common topic in coding interviews because it tests a developer’s understanding of arrays, recursion, and problem-solving. Learning how to flatten arrays helps developers work more effectively with structured data in JavaScript.

Why Modules Are Needed

Imagine writing everything in one file. Small code files seems handleable but what if it becomes 5000+ or 10000+ . That is where the nightmare of developer's begin. Your code becomes hard to find, maintain, naming conflicts arises and reusing code becomes hard to impossible.

That is where Module comes to rescue you from the mess we just discussed.

What is module?

Think of module as splitting code into separate files, where each file handles one responsibility.

We can see here:

project --

        -- math.js 
        -- greeting.js 
        -- app.js

Each becomes a module as each file has single responsibility. This makes code clean, organized and reusable. Saving us from a lot of headache.

Exporting functions or values

Remember that a module only exposes things you export. Anything not exported stays private to the file.

for example:

export function add(a, b) { 
return a + b; 
}
export function multiply(a, b) {
 return a * b;
 }

Here we are exporting add and multiply function so we can use them in other files.

We can export not only functions but other things as well, let's see them.

Exporting Variables:

export const PI = 3.14;

Exporting Objects:

export const user = {
  name: "Sam",
  age: 25
};

What we can understand from this is that whatever you export becomes available for other files as well.

Importing Modules

Above we learnt that to make one file available we have to export it but that was only 50% of the module story, there is something call importing the modules which complete the entire story. We import the needed files to use them after making them available by exporting them. And this completes the 100% of module story.

for example:

import { add } from "./index.js";

console.log(add(2, 3));

Import Multiple Things

import { add, multiply } from "./math.js";

Import Everything

import * as math from "./math.js";

console.log(math.add(2,3));
console.log(math.multiply(2,3));

When we write this, we are importing everything that is exported from math.js and grouping it into a single object called math and internally it behaves like this:

math = { 
add: function,
multiply: function,
}

Default vs Named Exports

This is one of the most confusing topics , so let’s break it clearly.

Named Export

You export multiple things by name.

math.js

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

Import

import { add, subtract } from "./math.js";

Notice the curly braces {}

Because we are importing by name.

Default Export

A module can have only one default export.

greeting.js

export default function greet(name) {
  return "Hello " + name;
}

Import

import greet from "./greeting.js";

No {} needed.

For default export we can do something like this:

Example

export default function greet() {}

You can import it like:

import hello from "./greet.js"

or

import anything from "./greet.js"

In conclusion the name does not matter. (Yup! it does not matter, I find it quite interesting)

Benefits of modular code

Modules provide several advantages when building JavaScript applications.

Better organization
Breaking code into modules makes large projects easier to navigate and understand.

Code reusability
Functions and utilities written in one module can be reused across different parts of the project.

Easier maintenance
If something breaks, developers can quickly locate the module responsible for the issue and fix it.

Team collaboration
Different developers can work on different modules at the same time without interfering with each other’s work.

Encapsulation
Modules allow developers to hide internal implementation details and only expose the necessary parts of the code.

Summary

As JavaScript applications grow in size, modules become an essential tool for keeping projects organized, scalable, and maintainable. It save us a lot of time and headache!

this keyword in JavaScript

When learning JavaScript, one thing that confuses many beginners is the this keyword. At first it looks mysterious. But once you understand the idea, it becomes much easier. Let’s break it down step by step.

Always remember that thisalways refers to the current context. By context I mean who is calling "this".

Let's take simple a non-tech example

If Alice says:

I am a developer

“I” refers to Alice.

If Bob says:

I am a developer

“I” refers to Bob.

JavaScript works in the same way.

this inside a normal function

In a normal function, this usually refers to the global object. In browsers, the global object is window. And in nodejs the global object is different.

Example:

function showThis() {
  console.log(this);
}

showThis();

Output (in browser):

Window {...}

Why?

Because no object called the function, so JavaScript defaults to the global object. Here it is very important to note that where your are running the code. Because the environment decides the current context and as I mentioned earlier that this points to the current context.

this inside an object

When a function is inside an object, this refers to that object.

Example:

const person = {
  name: "Alex",
  greet: function () {
    console.log("Hi, my name is " + this.name);
  }
};

person.greet();

Output:

Hi, my name is Alex

Why?

Because person called the function.

So:

this = person

What does call() do?

call() lets you borrow a function and choose what this should be.

Imagine your friend has a car, and you say:

“Can I use your car for a minute?”

That’s what call() does.

Example:

function introduce() {
  console.log("Hello, I am " + this.name);
}

const user = {
  name: "Shreya"
};

introduce.call(user);

Output:

Hello, I am Shreya

Here we manually set this to user. It is a really cool concept.

What does apply() do?

apply() is almost the same as call(). The only difference is how arguments are passed. apply() takes array as its arguments .

Example:

function introduce(city, country) {
  console.log(this.name + " lives in " + city + ", " + country);
}

const user = {
  name: "Ram"
};

introduce.apply(user, ["Delhi", "India"]);

Output:

Ram lives in Delhi, India

What does bind() do?

bind() creates a new function with a fixed this value.

Think of it like permanently assigning ownership.

Example:

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

const user = {
  name: "Amany"
};

const newFunction = greet.bind(user);

newFunction();

Output:

Hello Amany

bind() does not run immediately. It returns a new function.

Easy way to remember

Think of them like borrowing tools.

call() :

Use the tool right now

apply() :

Use the tool right now but give items in a box (array)

bind() :

Take the tool home and use later

Final Thoughts

Understanding this, call(), apply(), and bind() is very important in JavaScript because they control how functions behave with different objects.

At first it may look confusing, but remember this simple rule: this depends on who is calling the function.

If we understand OOP in simple explanation then they are a simply a programming style of storing data in "objects" that represent real world things.

So instead of writing random functions and variables to store data, we group related things together. This give clean structure to code and data.

Real world objects like:

• A Car

• A User

• A Student

• A Bank Account

Each object has:

• properties (data - information)

• methods (actions - which does something)

For example a Car can has colour, speed and model as it's properties and it can perform actions such as start(), moveAhead(), moveBack() and break().

Understanding class with Real-world analogy: Blueprint → Objects

Think about building a house.

First, you create a blueprint.

Then many houses can be built using that blueprint.

Blueprint → House 1
          → House 2
          → House 3

In programming:

Class → Object 1
      → Object 2
      → Object 3

So Class is the blueprint and object are real instance created from the blueprint.

Class

Understanding Class in JavaScript

A class is a template used to create objects (think of class as blueprint - which help to build many similar things).

Example:

class User {
}

This class currently does nothing.

But it will define how a user object should look.

Creating Objects Using Classes

To create an object from a class we use the new **'**keyword'.

Example:

class User {}

const user1 = new User()

Here:

User → class
user1 → object

You can create many objects:

const user1 = new User()
const user2 = new User()
const user3 = new User()

Constructor Method

A constructor is a special method used to initialize objects when they are created.

Example:

class User {

  constructor(name, age) {
    this.name = name
    this.age = age
  }

}

Now to create an object:

const user1 = new User("Sam", 25)

console.log(user1)

Output:

{ name: "Sam", age: 25 }

Explanation:

this.name = name
this.age = age

this refers to the current object being created.

Methods Inside a Class

Methods are functions inside a class.

They describe actions an object can perform.

Example:

class User {

  constructor(name, age) {
    this.name = name
    this.age = age
  }

  greet() {
    console.log("Hello, my name is " + this.name)
  }

}

Create an object:

const user1 = new User("Sam", 25)

user1.greet()

Output:

Hello, my name is Sam

Here:

greet() → method

Let's understand it with full example:

class Car {

  constructor(brand, speed) {
    this.brand = brand
    this.speed = speed
  }

  drive() {
    console.log(this.brand + " is driving at " + this.speed + " km/h")
  }

}

const car1 = new Car("Toyota", 120)
const car2 = new Car("BMW", 150)

car1.drive()
car2.drive()

Output:

Toyota is driving at 120 km/h
BMW is driving at 150 km/h

Basic Idea of Encapsulation

Encapsulation means hiding internal details and controlling access to data.

Example:

class BankAccount {

  constructor(balance) {
    this.balance = balance
  }

  deposit(amount) {
    this.balance += amount
  }

  getBalance() {
    return this.balance
  }

}

Here the user interacts through methods instead of changing data directly.

deposit()
getBalance()

This protects the data.

In TypeScript we often use:

private
public

for better encapsulation.

Summary

So in sort we can say that OOP = data + behaviour grouped together inside objects. OOP is an important concept which help us understand and write good code.

If we understand OOP in simple explanation then they are a simply a programming style of storing data in "objects" that represent real world things.

So instead of writing random functions and variables to store data, we group related things together. This give clean structure to code and data.

Real world objects like:

• A Car

• A User

• A Student

• A Bank Account

Each object has:

• properties (data - information)

• methods (actions - which does something)

For example a Car can has colour, speed and model as it's properties and it can perform actions such as start(), moveAhead(), moveBack() and break().

Understanding class with Real-world analogy: Blueprint → Objects

Think about building a house.

First, you create a blueprint.

Then many houses can be built using that blueprint.

Blueprint → House 1
          → House 2
          → House 3

In programming:

Class → Object 1
      → Object 2
      → Object 3

So Class is the blueprint and object are real instance created from the blueprint.

Class

Understanding Class in JavaScript

A class is a template used to create objects (think of class as blueprint - which help to build many similar things).

Example:

class User {
}

This class currently does nothing.

But it will define how a user object should look.

Creating Objects Using Classes

To create an object from a class we use the new **'**keyword'.

Example:

class User {}

const user1 = new User()

Here:

User → class
user1 → object

You can create many objects:

const user1 = new User()
const user2 = new User()
const user3 = new User()

Constructor Method

A constructor is a special method used to initialize objects when they are created.

Example:

class User {

  constructor(name, age) {
    this.name = name
    this.age = age
  }

}

Now to create an object:

const user1 = new User("Sam", 25)

console.log(user1)

Output:

{ name: "Sam", age: 25 }

Explanation:

this.name = name
this.age = age

this refers to the current object being created.

Methods Inside a Class

Methods are functions inside a class.

They describe actions an object can perform.

Example:

class User {

  constructor(name, age) {
    this.name = name
    this.age = age
  }

  greet() {
    console.log("Hello, my name is " + this.name)
  }

}

Create an object:

const user1 = new User("Sam", 25)

user1.greet()

Output:

Hello, my name is Sam

Here:

greet() → method

Let's understand it with full example:

class Car {

  constructor(brand, speed) {
    this.brand = brand
    this.speed = speed
  }

  drive() {
    console.log(this.brand + " is driving at " + this.speed + " km/h")
  }

}

const car1 = new Car("Toyota", 120)
const car2 = new Car("BMW", 150)

car1.drive()
car2.drive()

Output:

Toyota is driving at 120 km/h
BMW is driving at 150 km/h

Basic Idea of Encapsulation

Encapsulation means hiding internal details and controlling access to data.

Example:

class BankAccount {

  constructor(balance) {
    this.balance = balance
  }

  deposit(amount) {
    this.balance += amount
  }

  getBalance() {
    return this.balance
  }

}

Here the user interacts through methods instead of changing data directly.

deposit()
getBalance()

This protects the data.

In TypeScript we often use:

private
public

for better encapsulation.

Summary

So in sort we can say that OOP = data + behaviuor grouped together inside objects. OOP is an important concept which help us understand and write good code.

If you want to add two numbers, you will probably write it like this:

let sum1 = 5 + 3;
console.log(sum1);

let sum2 = 10 + 7;
console.log(sum2);

But if you have to get multiple sum of 2 numbers then the code become redundant and messy which becomes hard to manage.

That is where we write function:

function add(a, b) {
  return a + b;
}

console.log(add(5, 3));
console.log(add(10, 7));

Now we can reuse the same function whenever we need to add two numbers.

Function Declaration

One common way to create a function is using a function declaration.

Example:

function greet() {
  console.log("Hello, welcome to JavaScript!");
}

To run the function, we simply call it:

greet();

Output:

Hello, welcome to JavaScript!

Functions can also accept parameters.

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

greet("Sam");

Output:

Hello Sam

Function Expression

Another way to create a function is using a function expression.

Here, the function is stored inside a variable. If you still have doubt about what is a variable then I would recommend you read this blog first to get the hang of things here.

Example:

const greet = function () {
  console.log("Hello from function expression");
};

greet();

Output:

Hello from function expression

We can also pass parameters here:

const multiply = function (a, b) {
  return a * b;
};

console.log(multiply(4, 5));

Output:

20

Important difference between function declaration and expression

• Syntax difference

  • Function declaration is defined directly using the function keyword.

  • Function expression stores the function inside a variable.

• Hoisting

  • Function declarations are hoisted, so they can be called before they are defined.

  • Function expressions are not hoisted in the same way, so they must be defined before they are called.

• Usage

  • Function declarations are commonly used for reusable functions in a program.

  • Function expressions are often used when functions need to be assigned to variables or used as callbacks.

• Readability

  • Function declarations are usually easier to read in larger programs.

  • Function expressions provide more flexibility in certain situations.

Basic Idea of Hoisting

Hoisting is the behaviour where all the function declaration are moved to the top of their scope.

This means we can call a function declaration before it appears in the code.

Example:

sayHello();

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

This works because JavaScript internally treats it like:

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

sayHello();

However, function expressions are not hoisted in the same way, so they must be defined before being used.

Summary

Functions are one of the most important concepts in JavaScript. They allow us to group reusable logic into a single block of code and call it whenever needed.

By understanding function declarations, function expressions, and the basic idea of hoisting, we can write cleaner, more organized, and maintainable JavaScript programs.

To perform these tasks, JavaScript provides operators. An operator is a symbol that performs an operation on one or more values (called operands).

For example:

let sum = 5 + 3;

Here:

+   → operator
5,3 → operands

The operator performs an action on the values.

Arithmetic Operators

Arithmetic operators are used to perform mathematical calculations. These are the most basic operators you will encounter in programming.

Example:

let a = 10;
let b = 5;

console.log(a + b); 
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);

Output:

15
5
50
2
0

The modulus operator % returns the remainder after division.

Example:

console.log(7 % 3);

Output:

1

Comparison Operators

Comparison operators are used to compare two values. They usually return a boolean value (true or false).

Difference between == and ===

This is an important concept in JavaScript.

== compares values only.

console.log(10 == "10");

Output:

true

Because JavaScript converts "10" to a number before comparison.

But === compares both value and type.

console.log(10 === "10");

Output:

false

Here:

10   → number
"10" → string

Since the types are different, the result is false.

For this reason, most developers usually prefer === over ==.

Logical Operators

Logical operators are used to combine multiple conditions.

Example:

let age = 20;
let hasID = true;

console.log(age > 18 && hasID);

Output:

true

Here both conditions must be true.

Example of OR operator:

console.log(age > 18 || age > 60);

Output:

true

The OR operator returns true if at least one condition is true.

Example of NOT operator:

console.log(!true);

Output:

false

The NOT operator simply reverses the boolean value.

Assignment Operators

Assignment operators are used to assign values to variables.

The most common assignment operator is:

=

Example:

let x = 10;

JavaScript also provides shorter assignment operators.

Example:

let x = 10;

x += 5;
console.log(x);

Output:

15

This is equivalent to writing:

x = x + 5;

Another example:

let y = 20;

y -= 5;

console.log(y);

Output:

15

Summary

Operators are an essential part of JavaScript programming. They allow us to perform mathematical calculations, compare values, combine conditions, and assign values to variables.

Understanding different types of operators such as arithmetic operators, comparison operators, logical operators, and assignment operators helps us write more powerful and expressive programs. As you continue learning JavaScript, you will use operators frequently in conditions, loops, and many other programming scenarios.

Why Do We Need Arrays?

It is hard and inefficient to store large amounts of related data in different variables.

For example:

let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";

This approach becomes difficult to manage when the number of items increases.

Instead, we can use an array:

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

Now all related data is stored inside one variable, which makes the code cleaner and easier to work with.

Creating an Array

Arrays are created using square brackets [].

Example:

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

In this array:

• "Apple" is the first element

• "Banana" is the second element

• "Mango" is the third element

Arrays can store different types of values as well.

Example:

let data = ["Sam", 25, true];

Accessing Elements Using Index

Each value inside an array has a position called an index.

Important thing to remember:

Array indexing starts from 0 in JavaScript.

Example:

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

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

Output:

Apple
Banana
Mango

Updating Elements in an Array

We can update an element by assigning a new value to its index.

Example:

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

fruits[1] = "Orange";

console.log(fruits);

Output:

["Apple", "Orange", "Mango"]

Here we changed "Banana" to "Orange".

Array Length Property

JavaScript arrays have a built-in property called length. It tells us how many elements are inside the array.

Example:

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

console.log(fruits.length);

Output:

3

This means the array contains 3 elements.

Looping Through an Array

Very often we need to access all elements of an array. Instead of writing multiple console statements, we can use a loop.

One common way is using a for loop.

Example:

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

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Output:

Apple
Banana
Mango

The loop starts from index 0 and continues until it reaches the end of the array.

Real-World Example

Imagine storing marks of a student.

let marks = [75, 80, 92, 68];

console.log(marks[0]); 
console.log(marks[2]);

Output:

75
92

Summary

Arrays are one of the most commonly used data structures in JavaScript. They allow us to store multiple values in a single variable and access them using indexes. By understanding how to create arrays, access elements, update values, check their length, and loop through them, we can handle collections of data much more efficiently in our programs.

What Are Objects and Why Are They Needed?

An object in JavaScript is a data structure used to store multiple related values in a single variable. These values are stored as key–value pairs.

Think of an object like a real-world entity that has different properties.

For example, if we want to represent a person in our program, we might want to store information like their name, age, and city. Instead of creating multiple variables, we can group them together using an object.

const person = {
  name: "Sam",
  age: 29,
  city: "Haryana"
};

In this example:

• name, age, and city are keys (properties)

• "Sam", 29, and "Haryana" are their values

Objects help us organize related data together, making our code easier to manage and understand.

Creating Objects

Objects are created using curly braces {}.

const person = {
  name: "Sam",
  age: 29,
  city: "Haryana"
};

Each property inside the object is written as:

key: value

Multiple properties are separated using commas.

Accessing Object Properties

We can access object properties in two ways.

1. Dot Notation

The most common way to access object properties is using dot notation.

console.log(person.name); 
console.log(person.age);

Output:

sam
29

2. Bracket Notation

Another way to access properties is bracket notation.

console.log(person["city"]);

Output:

Haryana

Bracket notation is useful when the property name is dynamic or stored in a variable.

Updating Object Properties

We can update an object's property by assigning a new value.

person.age = 23;

console.log(person.age);

Output:

23

Objects allow their properties to be updated easily.

Adding New Properties

We can also add new properties to an object.

person.country = "India";

console.log(person);

Now the object becomes:

{
  name: "Sam",
  age: 23,
  city: "Haryana",
  country: "India"
}

Deleting Object Properties

If we want to remove a property from an object, we can use the delete keyword.

delete person.city;

console.log(person);

Now the city property will be removed.

Looping Through Object Keys

Sometimes we want to access all properties of an object. We can use a for...in loop to iterate through the keys.

for (let key in person) {
  console.log(key, person[key]);
}

Output:

name Sam
age 29
country India

Here:

• key represents the property name

• person[key] gives the value of that property

Difference Between Arrays and Objects

Example of an array:

const fruits = ["apple", "banana", "mango"];

Example of an object:

const person = {
  name: "Sam",
  age: 29
};

Arrays are used for lists of data, while objects are used for structured data with properties.

As a beginner you should start by making object on your own like this:

Create an object representing a student.

1. Create an object called student.

2. Add properties:

   • name

   • age

   • course

3. Update one property.

4. Print all keys and values using a loop.

Example starter code:

const student = {
  name: "Rahul",
  age: 20,
  course: "Computer Science"
};

student.age = 21;

for (let key in student) {
  console.log(key, student[key]);
}

Summary

Objects are one of the most important data structures in JavaScript. They allow us to store and organize related data using key–value pairs. By learning how to create objects, access properties, update them, and loop through them, we can represent real-world data more effectively in our programs.

Understanding objects is an essential step toward writing more structured and maintainable JavaScript code.

Before jumping into variables themselves, let's understand what does variable mean and why it is needed. Variables are used for storing data. And when you mature as a developer, you will realize that variables are nothing but getting a space in the memory. Primitives data are stored by value whereas non-primitive data are stored as reference (we'll learn more on data types in this article).

Var: It has functional scope. The important thing to note about var is that the values assigned can be re-assigned and same variable can be redeclared which results in lack of control over our code , resulting in bugs and other problems. Therefore in modern projects/products we rarely see the use of var. It is advisable to never use var unless dealing with legacy code.

// declaration
var a;       
// redeclaration allowed
var a = 50;
console.log(a)  // 50
// reassignment is also allowed 
a = 60;
console.log(a)  // 60

let: It is of block-scope. Variable declared with let keyword can be reassign but can not be redeclared. let be like “ let this variable change its value but don’t let it redeclared).

// declaration
let b;
// redeclaration not allowed
let b = 10;          // SyntaxError: Identifier 'b' has already been declared
// assignment allowed
b = 20;       // ✔️
// reassignment allowed
b = 30 ;        // ✔️

const: Now if we talk about const it is just like its name (const = constant) . It can neither be re-assigned AND redeclared once it is declared. When we declare a variable with const keyword it is mandatory to initialize it at the time of declaration.

// Initialization at the time of declaration.
const c = 10
// Only declaration of const variable  is not allowed
const d;                         // ❌
// Reassignement is not allowed
c = 20                           // ❌

Important Notes About var, const and let

1. Aways use let and const not just over ‘var’ but never use it in the first place.

   • Prefer to use const over let unless it is must that value will change.

   • Using const and let gives you more control over your code.

2. It is important to understand the concept of hoisting.

   Hoisting is the default behaviour of javascript where variable declaration are hoisted on the top.

   To understand it more clearly we can use an example to our cause :-

// In case of var 
console.log(x)                  // undefined
var x = 10

This code is seen by javaScript in this format :

var x; 
console.log(x)
x = 10;

So here we are accessing variable x before it is initialized resulting in undefined which is the default value for var.

Now before we jump to the let and const examples which gives us our 3rd important point, let’s discuss TDZ in 3 point.

1. TDZ stands for Temporal Dead Zone , in this concept although let and const do get hoisted they stays in TDZ resulting in reference error.

console.log(y)       // ReferenceError: Cannot access 'y' before initialization
let y = 10;    

console.log(z)       // ReferenceError: Cannot access 'z' before initialization 
const z = 20;

1. Scope matters a lot when we deal with these 3 keyword( though not var , it won’t hurt to know more.)

{
var a = 10;
let b = 20;
let c = 30;
}
console.log(a);       // 10
console.log(b);       // ReferenceError: b is not defined
console.log(c);       // ReferenceError: c is not defined

1. const does not mean frozen value its just constant binding. In other words if we declare objects and arrays using const variable it does not mean that we can not change the values inside of objects and arrays. It simply means that we cannot redeclare the same variable.

// array
const arr = [1,2,3,4,5]
arr.push(6)
console.log(arr) // 1,2,3,4,5,6

// object
const obj = { a:1, b:2, c:3 }
obj.c = 300
console.log(obj)  // { a:1, b:2, c:300 }

const stop us to reassigning the variable not from mutating the object or array.

Primitive Data Types in JavaScript

In JavaScript, data stored in variables can belong to different data types. The simplest types of data are called primitive data types. These values are stored directly in memory and represent a single value.

JavaScript has several primitive data types, but the most common ones beginners should know are string, number, boolean, null, and undefined.

1. String

A string represents text. Strings are written inside quotes.

let name = "Alex";
let language = 'JavaScript';

console.log(name);       // Alex
console.log(language);   // JavaScript

Strings are commonly used to store things like names, messages, or any textual data.

2. Number

A number represents numeric values. In JavaScript, both integers and decimal numbers are considered numbers.

let age = 25;
let price = 99.99;

console.log(age);     // 25
console.log(price);   // 99.99

Numbers are used for calculations, counts, prices, and other numerical values.

3. Boolean

A boolean represents a logical value that can be either true or false.

let isLoggedIn = true;
let hasPermission = false;

console.log(isLoggedIn);      // true
console.log(hasPermission);   // false

Booleans are commonly used in conditions and decision-making in programs.

4. Undefined

When a variable is declared but not assigned a value, JavaScript automatically assigns it the value undefined.

let score;

console.log(score);   // undefined

This simply means that the variable exists, but no value has been given to it yet.

5. Null

The null value represents an intentional absence of value. It is used when we want to explicitly indicate that a variable should contain no value.

let user = null;

console.log(user);   // null

Developers often use null when they want to clear a variable or indicate that data is not available yet.

Summary

Writing code requires a lots of effort and knowledge therefore resulting in the need of polished knowledge. To know where and which keyword to use to store values inside variables and what will that result in gives us hold on our code. It improves code readability and maintenance.

What control flow means in programming?

Control flow means the order in which a program executes instructions. By default, JavaScript runs code line by line from top to bottom.

console.log("Start");
console.log("Learning JavaScript");
console.log("End");

order:

Start
Learning JavaScript
End

But in real programs we need decision making. For example if you are making a weather app and you want to give instructions to take umbrella when it rains or wear sunscreen if temperature is too hot, that's where control flow comes handy.

Simply put in real life:

• If it rains → take umbrella

• Else → go outside normally

Programming works the same way.

Control flow lets us decide:

• run some code

• skip some code

• choose between multiple paths

So control flow = decision making in code.

The if Statement

if runs a block of code only when a condition is true.

Syntax:

if (condition) {
  // code runs if condition is true
}

Example:

let age = 18;

if (age >= 18) {
  console.log("You can vote");
}

How it runs step by step:

1. Check condition → age >= 18

2. Is it true?

3. Yes → run the code

Output:

You can vote

If condition is false, the code is skipped.

The if-else Statement

Sometimes we want two possibilities.

Example:

• If age ≥ 18 → allow voting

• Else → not allowed

Syntax:

if (condition) {
  // if true
} else {
  // if false
}

Example:

let age = 16;

if (age >= 18) {
  console.log("You can vote");
} else {
  console.log("You cannot vote");
}

Step by step:

1. Check condition

2. If true → run if

3. If false → run else

Output:

You cannot vote

The else if Ladder

Sometimes there are many conditions, not just two.

Example:

Marks grading system.

90+ → Grade A
75+ → Grade B
50+ → Grade C
below → Fail

Syntax:

if (condition1) {
}
else if (condition2) {
}
else if (condition3) {
}
else {
}

Example:

let marks = 82;

if (marks >= 90) {
  console.log("Grade A");
}
else if (marks >= 75) {
  console.log("Grade B");
}
else if (marks >= 50) {
  console.log("Grade C");
}
else {
  console.log("Fail");
}

Output:

Grade B

Important rule:

Only one block runs — the first true condition.

The switch Statement

switch is another way to handle multiple conditions.

It works well when checking one value against many options.

Syntax:

switch(value) {
  case option1:
    code
    break;

  case option2:
    code
    break;

  default:
    code
}

Example: Day of week

let day = 2;

switch(day) {
  case 1:
    console.log("Monday");
    break;

  case 2:
    console.log("Tuesday");
    break;

  case 3:
    console.log("Wednesday");
    break;

  default:
    console.log("Invalid day");
}

Output:

Tuesday

Why break is Important

Without break, JavaScript keeps running the next cases.

Example:

let day = 1;

switch(day) {
  case 1:
    console.log("Monday");

  case 2:
    console.log("Tuesday");
}

Output:

Monday
Tuesday

This is called fall-through behavior.

So normally we use:

break;

to stop execution.

When to Use switch vs if-else

Use if-else when:

conditions involve ranges
complex logic

Example:

if (marks > 90)

Use switch when:

comparing one variable

checking fixed values

Example:

day = 1,2,3,4
menu options
user roles

Example:

switch(role)

Summary

Control flow in JavaScript determines how a program decides which code to execute. By default, JavaScript runs code from top to bottom, but real programs require decision-making. Control structures like if, if-else, else if, and switch allow developers to control the flow of execution based on conditions.

The if statement runs code when a condition is true, while if-else handles two possible outcomes. The else if ladder is useful when checking multiple conditions in sequence. The switch statement provides a cleaner way to compare one value against multiple fixed options. When using switch, the break statement is important to prevent unintended execution of other cases.

Understanding when to use if-else or switch helps write clearer and more efficient decision-making logic in JavaScript programs.

Let's first understand what is arrow functions and why were they introduced at all.

What is an arrow function and why use it?

Arrow function was introduced in ES6 as alternative to normal traditional function with some variations. Simply put together arrow functions are mostly like your normal function, with just simplification in syntax. But it does not mean that they behave exactly same. In other words they are similar but not same, we will discuss more about it in this article later. We use arrow functions for the sake of simplicity in syntax.

Writing arrow function

We make a normal function like this:

function sum(a,b){
return a + b
}

Arrow function of the above traditional functions:

const sum = (a,b) => a + b 

Understanding simplicity of arrow function syntax

Below given all syntax are valid

// traditional anonymous function
(function (a) {
return a * 2
});

// making arrow function from above function
// remove function keyword, add arrow after param
(a) => { 
return a * 2
}

// making it more simpler 
// remove return keyword (implicit return here)
(a) => a * 2

// if there is only one param, we can remove the parentheses
a => a * 2

As you can see how simpler the syntax of arrow function is compare to traditional function.

Understanding implicit and explicit return

In arrow function there is this implicit and explicit return concept understanding this will make you write good arrow functions. Implicit return is where the function automatically return output. Whereas explicit return where you specifically write return keyword.

// explicit return 
// {} curly braces require return keyword
a => { return a * 2 }

// implicit return 
// absence of {} curly braces automatically return output 
a => a * 2  

Required parentheses

Rest parameters, default parameters, and destructuring within params are supported, and always require parentheses:

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression

Syntax

Now look at these syntax, they are most common arrow function syntax you will come across with:

() => expression

param => expression

(param) => expression

(param1, paramN) => expression

() => {
  statements
}

param => {
  statements
}

(param1, paramN) => {
  statements
} 

Also understanding statements and expression in arrow function context

An expression evaluate to a single value whereas statement perform an action and does not as a whole, return a value.

Arrow functions have two forms:

1. Expression body

2. Statement body

Function with Expression:

const add = (a, b) => a + b;

Here:

a + b → expression

Arrow functions automatically return it.

Equivalent to:

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

Arrow Function with Statements:

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

Inside {} you can write multiple statements.

Special Case (Very Important)

Returning objects.

Wrong:

const user = () => {name: "Alex"}

JS thinks {} is statement block.

Correct:

const user = () => ({name: "Alex"})

Parentheses force expression.

Difference between arrow function and normal function

Now we'll understand the difference between arrow function and normal function. These differences exist because arrow function were introduced with deliberate limitations in usage. These are:

• Arrow functions don't have their own bindings to this, arguments, or super, and should not be used as methods.

• Arrow functions cannot be used as constructors. Calling them with new throws a TypeError. They also don't have access to the new.target keyword.

• Arrow functions cannot use yield within their body and cannot be created as generator functions.

Before getting confused over their limitations let's slowing learn each one with simple understanding.

Between normal function and arrow function the most important difference is of 'this' keyword.

1. Arrow functions DO NOT HAVE THEIR OWN this. They inherit this from surrounding scope.

This is called:

Lexical this

Normal function and 'this' keyword:

const obj = {
  name: "Alexa",
  show: function() {
    console.log(this.name);
  }
};

obj.show();
// output: "Alexa"

Arrow function and 'this' keyword:

const obj = {
  name: "Alexa",
  show: () => {
    console.log(this.name);
  }
};

obj.show();
// output: undefined

Because arrow function does not bind this. It takes this from outer scope.

2. Arrow Functions do not have their arguments they inherit it from their parent.

Normal function and argument:

function test(){
  console.log(arguments)
}
// works

Arrow function and argument:

const test = () => {
  console.log(arguments);
}
// does not work
//only works if a parent function has arguments.

3. Arrow Functions Cannot Be Constructors

Normal function:

function Person(name){
  this.name = name;
}

const p = new Person("Alex");

Works.

Arrow function:

const Person = (name) => {
  this.name = name;
}

new Person("Alex");

Error

Person is not a constructor

4. Arrow Functions Do NOT Have prototype

Normal function:

function test(){}

console.log(test.prototype);

Exists.

Arrow function:

const test = () => {};

console.log(test.prototype);

undefined

5. Arrow Functions Cannot Use super or new.target

Arrow functions still create an execution context but they do not create their own this, arguments, super, or new.target. Remember that : 4 No's of Arrow Functions

Arrow functions do not have their own:
this
arguments
prototype
super
new.target

They borrow from parent scope.

6. Arrow functions also cannot be generators:

const test = *() => {} // invalid

Generators require normal functions.

Conclusion

Arrow functions were introduced in ES6 as a shorter way to write functions in JavaScript. They allow cleaner syntax and support both implicit and explicit return. Unlike normal functions, arrow functions do not create their own this or arguments; instead they inherit them from the surrounding scope (lexical binding). They also cannot be used as constructors and do not have a prototype. Arrow functions are best used for short functions and callbacks, but normal functions are usually better for object methods and constructors.