Forem: Abdus Shohid Shakil

🚫 Stop Using array.length - 1. Here’s a Magical Alternative ✨

Abdus Shohid Shakil — Sun, 20 Apr 2025 18:00:57 +0000

Hey there, dev fam 👋

Have you ever found yourself accessing last element of an array again and again countless times like it is your full-time job like a typewriter.

Yeah... me too 😓😓! I always ask myself, "Why? why? I mean, why do I have to do this same task over and over again?"

Honestly, it started feeling like torture -- kinda like an ex (not that I have had any, or current one either 😂😂).

So, I went hunting for a cleaner way -- something built right into JavaScript that doesn't require any extra modification for day-to-day work.

And guess what? I found it it! the magical method that cleaner, more efficient and most importantly, readable. In one word -- handy.

First let's see the way of finding the last element of array.

We'll use this array for all our examples:

let arr = [1, 2, 3, 4, 5, 6, 7];

1. Using `length` (The Old School Way):

This is how we usually get the last element:

const lastElement = arr[arr.length - 1];
console.log(lastElement); // 7

It is fin but it's repetitive and not readable. Have to manually calculate the last index every time.

2. Using `.pop()` (Compromising and Mutating Data):

If we don't need an array afterward .pop() can be helpful.

const lastElement = arr.pop();
console.log(lastElement); // 7

Yeah, this is not ideal, but in some use case it became useful.

⚠️ However, it mutates original array and is not helpful when need to access second last element or nth last element, because it is not so easy in that case and to compromise data.

3. Using `slice()` (Readable, but costly):

It is cleaner, and best part of it is negative indexing.

const lastElement = arr.slice(-1)[0];
console.log(lastElement); // 7

But the downside is, it create a new array instance, which can be wasteful in terms of memory optimization.

4. Best way `.at()` and my love 🥰💖🔥:

Finally, the hero of the post: .at().
It is simple, clean, performant. It supports negative indexing, and I call it my dream method -- like dream wife of every man.

It is my favorite and I call it the magical method.

Here are some examples:

Positive Indexing:

console.log(arr.at(0)); // 1
console.log(arr.at(1)); // 2
console.log(arr.at(2)); // 3

Negative Indexing:

console.log(arr.at(-1)); // 7
console.log(arr.at(-2)); // 6
console.log(arr.at(-3)); // 5

Using negative index we are accessing last element or second last element just without any extra calculation like math calculation in mind arr.length - 1 or arr.length - n.

Let's see what if we use traditional way:

console.log(arr[arr.length - 1]); // 7
console.log(arr[arr.length - 2]); // 6
console.log(arr[arr.length - 3]); // 5

See the difference?

Yeah, from above comparison of code, you may feel why I was amused by that .at method -- because of its

simplicity,
clarity and
readability.

🤔 Why .at() Is Awesome

Supports negative indices
Doesn’t mutate the array
Works on strings too!
Makes your code cleaner and easier to read

It’s not that arr.length - 1 was terrible, but .at() feels more modern and clean.

I’ll be sharing more tricks in the future. ✨

Share your tricks or technique that make your like easier. Drop it in comments 👇👇.

Thanks for reading it.

Here's my LinkedIn profile

Here's my GitHub profile

Why Does Event Bubbling Happen by Default? (And Why It Makes Sense)

Abdus Shohid Shakil — Sun, 20 Apr 2025 03:00:43 +0000

Why Does Event Bubbling Happen by Default? (And Why It Makes Sense)

When studying event bubbling, you might wonder: Why does it happen by default? Why do we need to explicitly call stopPropagation() to prevent it?.
If you are not clear on what event bubbling is, check out my previous aritcle.

The short answer is: it’s intentional and very important.

Let’s break down the reasons why event bubbling is enabled by default in the browser.

Consistent Event Handling Behavior in Parent Elements

It is the core reason of event bubbling happen by default.

Take a look at the following example:

<body>
  <div class="card">
    <h3>Card Heading</h3>
    <div class="card-img">
      <img src="water-ripple.jpg" alt="" />
    </div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
      doloremque harum repellat nesciunt! Mollitia repellat accusamus,
      distinctio in dolor aperiam!
    </p>
    <button>Button</button>
  </div>

  <script>
    const card = document.querySelector(".card");

    card.addEventListener("click", (e) => {
      alert("Card clicked =========");
    });
  </script>
</body>

Without Bubbling?

In this example, we have a card component with children: a heading, paragraph, button, and an image inside a div.
What do we usually expect? That clicking anywhere on the card — whether on the text, image, or button
— will trigger the card’s click event, right?

Yes it is because of the bubbling. Because clicking of any of the children propagate into parent.

If bubbling didn’t happen by default, then clicking on the image, button, or heading wouldn’t trigger the card’s click event — and that would create a bad UX in many situations.

Let's simulate it.

const card = document.querySelector(".card");
const cardHeading = document.querySelector(".card h3");
const cardParagraph = document.querySelector(".card p");
const cardButton = document.querySelector(".card button");
const cardDiv = document.querySelector(".card div");

card.addEventListener("click", (e) => {
  alert("Card clicked =========");
});

/* these is for simulating for if even bubbling for click no happen by default*/
cardHeading.addEventListener("click", (e) => {
  e.stopPropagation();
});
cardDiv.addEventListener("click", (e) => {
  e.stopPropagation();
});
cardParagraph.addEventListener("click", (e) => {
  e.stopPropagation();
});
cardButton.addEventListener("click", (e) => {
  e.stopPropagation();
});

Here I simulated all children of card click event bubbling prevented. If it happen by default then it feels like:

So then to trigger children of card we explicitly have to target all children and one by one enable bubbling. And not in one place rather most of the place where we need that feature.

Imagine a card with 20 child elements. Without bubbling, you’d have to attach individual click handlers to each of them just to simulate a single action — sounds like a nightmare, right?

So, to allow a feature where clicking anywhere on the card triggers an action, you’d have to manually enable event propagation for each child — one by one.

Hypothetically assuming event have a method name event.enablePropagation() (that enable propagation or bubbling), then code will be look like following.

const card = document.querySelector(".card");
const cardHeading = document.querySelector(".card h3");
const cardParagraph = document.querySelector(".card p");
const cardButton = document.querySelector(".card button");
const cardDiv = document.querySelector(".card div");

card.addEventListener("click", (e) => {
  alert("Card clicked =========");
});


/* these is for simulating for if even bubbling for click no happen by default */

cardHeading.addEventListener("click", (e) => {
  event.enablePropagation(); // it doesn't exist in javascript, assuming hypothetically
});
cardDiv.addEventListener("click", (e) => {
  event.enablePropagation();
});
cardParagraph.addEventListener("click", (e) => {
  event.enablePropagation();
});
cardButton.addEventListener("click", (e) => {
  event.enablePropagation();
});

Or second way is we have to copy and past same event in every child if we want to find second possible way.

const card = document.querySelector(".card");
const cardHeading = document.querySelector(".card h3");
const cardParagraph = document.querySelector(".card p");
const cardButton = document.querySelector(".card button");
const cardDiv = document.querySelector(".card div");

card.addEventListener("click", (e) => {
  alert("Card clicked =========");
    /* 
    other code 
    ======
    */
});

/* these is for simulating for if even bubbling for click no happen by default */
cardHeading.addEventListener("click", (e) => {
    alert("Card clicked =========");
    /* 
    other code 
    ======
    */
});
cardDiv.addEventListener("click", (e) => {
    alert("Card clicked =========");
    /* 
    other code 
    ======
    */
});
cardParagraph.addEventListener("click", (e) => {
    alert("Card clicked =========");
    /* 
    other code 
    ======
    */
});
cardButton.addEventListener("click", (e) => {
  alert("Card clicked =========");
    /* 
    other code 
    ======
    */
});

And in world of web app we mostly need that feature frequently.
This would be a nightmare to manage — especially in large UIs — and would break intuitive behavior where clicking anywhere on a card should trigger the same action.

To solve that problem by default event bubbling enabled.

Conclusion:

Event bubbling not only solve this issue it powers many useful patterns in front-end development. I will writing more on that in future.

Enabling bubbling by default helps to optimize event handling.
Because naturally our brain assume that any child inside an element also will inherit or affect the parent's behavior just like human.
And then if you need something different there are way to modify.

But just like in real life, children don’t always behave exactly like their parents — and when needed, we can stop or customize propagation using stopPropagation().

Thanks for reading the article if it was helpful then please share it in X, LinkedIn.

Here's my LinkedIn profile
Here's my GitHub profile

What is bubbling in DOM. Why parents is triggering on the event of children? To know read the full blog.

Abdus Shohid Shakil — Sat, 19 Apr 2025 22:29:39 +0000

Abdus Shohid Shakil

Apr 19 '25

The DOM Bubble! What is event bubbling, and how to handle it?

#webdev #javascript #frontend #programming

Comments

3 min read

The DOM Bubble! What is event bubbling, and how to handle it?

Abdus Shohid Shakil — Sat, 19 Apr 2025 22:28:13 +0000

The conecpt:

Event bubbling is a concept in javascript dom where an event propagetes to its parents elements.

The concept of bubbling is similar to how a real bubble works.

How does a bubble works?

Think about a bubble -- it floats up in the air, right? But it doesn't stay up forever. Eventually, it props! It starts samll and grows bigger as it rises.

Still confused? No worries! Imagine throwing a stone into a pond. The water ripples out from where the stone hit, right? It keeps going until it fades away. In similar way when a click or any other bubbling event trigger it spreads out from the targeted element up-to parents and that's parents until it reaches the root element.

With real example:

Now let's understand by an real example.

<body>
  <div class="container">
    <div class="card">
      <button>Button</button>
    </div>
  </div>
</body>

For this html document dom tree will something like:

What happens when the button is clicked?

Clicking on the button first button will trigger the event and that bubble(event) upto its parent card element and then container and finally the body element and as body is the root so it will stop bubbling.

It will be more clear if we add event listener.

const body = document.querySelector("body");
const container = document.querySelector(".container");
const card = document.querySelector(".card");
const button = document.querySelector(".card button");

body.addEventListener("click", (e) => {
  alert("body click");
});
container.addEventListener("click", (e) => {
  alert("container click");
});
card.addEventListener("click", (e) => {
  alert("Card click");
});
button.addEventListener("click", (e) => {
  alert("button click");
});

If you click the button, the sequence will be:

- "button click"
- "Card click"
- "container click"
- "body click"

Here if user click on the button it will first tigger button listener and alert button click and then even will pass to its parent card element and alert Card click and then its parent container and alert container click and lastly body and alert body click as these all element have event listener for click event so all of it's parents will be trigger, which you may not want.

So now we understand what actaully event bubbling is. Now question is how to prevent it?

Before we stop bubbling, let’s understand that not all events bubble. You can check if an event bubbles like this:

button.addEventListener("click", (e) => {
  event.bubbles; // true if event is bubbling else false
});

Here is a list of bubbling and non-bubbling events

🫧 Bubbling Events:

click
dblclick
mousedown
keydown
change
select
...and many more

🚫 Non-Bubbling Events:

focus
blur
submit
reset
mouseenter
mouseleave
...and many more

How to prevent that propagation?

To stop the event from bubbling, simply call event.stopPropagation().

For example, if we use stop propagtion only in button:

body.addEventListener("click", (e) => {
  alert("body click");
});
container.addEventListener("click", (e) => {
  alert("container click");
});
card.addEventListener("click", (e) => {
  alert("Card click");
});
button.addEventListener("click", (e) => {
  e.stopPropagation();
  alert("button click");
});

it will solve the propagation of click event for button but when click in card it will still propagate to its parent container so if we also don't want that for all then just use stopPropagation

body.addEventListener("click", (e) => {
  e.stopPropagation();
  alert("body click");
});
container.addEventListener("click", (e) => {
  e.stopPropagation();
  alert("container click");
});
card.addEventListener("click", (e) => {
  e.stopPropagation();
  alert("Card click");
});
button.addEventListener("click", (e) => {
  e.stopPropagation();
  alert("button click");
});

Conclusion:

In summary, event bubbling is the default behavior in JavaScript where an event propagates from the targeted DOM element to the root element. This can be useful in many situations, but if you want to stop it, you can use event.stopPropagation().

If this helped you understand the concept, feel free to share, follow, or ask me about any topic you'd like me to cover next!

You can also read: Why Does Event Bubbling Happen by Default? (And Why It Makes Sense)

Here's my LinkedIn profile

Master Union And Intersection in Typescript

Abdus Shohid Shakil — Wed, 08 May 2024 10:07:57 +0000

In TypeScript, union and intersection types serve as powerful tools to enrich the flexibility and robustness of type definitions.

Table of content:

Union
Intersection

Union:

Union types allow us to define a variable that can hold values of multiple types. Previously, we could only specify a single type for a variable:

type value = string;

Union types are usefull when a variable needs to handle different types of values, which make type definitions more flexible

type value = string | number;

Consider the following example:

const logMessage = (value): void => {
  if (typeof value === "string")
    console.log(`string parameter = ${value}`);
  else if (typeof value === "number")
    console.log(`number parameter = ${value}`);
};

In logMessage function, the value parameter is accepted without any type definition, which lead an implicit assignment as any type, means it will accept anything.

For example, consider a scenario where we want that value will only accept number or string here in that case we can use union. syntax like value: string | number which mean that it will accept only string or number, if we define like value: string | number it only accept string, number or boolean. Let's apply it in previous example.

const logMessage = (value: string | number): void => {
  if (typeof value === "string")
    return console.log(`string parameter = ${value}`);

  console.log(`number parameter = ${value}`);
};

const logMessage = (value: string | number | boolean): void => {
  if (typeof value === "string")
    return console.log(`string parameter = ${value}`);
  else if (typeof value === "number")
    return console.log(`number parameter = ${value}`);

  console.log(`boolean parameter = ${value}`);
};

Also beside types we can define what value it can contain like for example gender. There are two gender "male" and "female", so if someone give anything else then we don't want to accept it.

type User = {
  id: string;
  name: string;
  age: number;
  gender: string;
};

const user1: User = {
  id: "1",
  name: "John Doe",
  age: 20,
  gender: "male",
};
const user2: User = {
  id: "2",
  name: "Alice Smith",
  age: 22,
  gender: "shorifa", // something else without "male" or female
};

In above example we only want to gender value as "male" or "female" not anything else like "shorif", "shorifa" so we also can mention that what gender can contain like below.

type User = {
  id: string;
  name: string;
  age: number;
  gender: "male" | "female";
};

const user1: User = {
  id: "1",
  name: "John Doe",
  age: 20,
  gender: "male",
};
const user2: User = {
  id: "2",
  name: "Alice Smith",
  age: 22,
  gender: "shorifa", // Error: Type "shorifa" is not assignable to type '"male" | "female"'
};

Now take a look at another example:

interface Developer {
  name: string;
  role: string;
  programmingLanguages: string[];
  experienceYears: number;
}
interface Designer {
  name: string;
  role: string;
  designTools: string[];
  experienceYears: number;
}
type Employee = Developer | Designer;

const employee1: Employee = {
  name: "Bob Johnson",
  role: "Front-end developer",
  programmingLanguages: ["JavaScript", "TypeScript"],
  experienceYears: 5,
};
const employee2: Employee = {
  name: "Alice Smith",
  role: "UI Designer",
  designTools: ["Photoshop", "Figma"],
  experienceYears: 5,
};

In this example, we have two interfaces: Developer and Designer. We want to create a new type called Employee that represents employees who can be either developers or designers. We achieve this using a union type.

Here employee1, employee2 are of type Employee and employee1 is developer and employee2 id designer.

This use of union types demonstrates how TypeScript empowers developer to create versatile and expressive type definitions so easily.

Intersection:

Intersection is denoted by &, I is used to combine multiple interface or types to create new type.

let's understand intersection through an example.

interface FrontendDeveloper {
  id: string;
  name: string;
  frontendSkills: string[];
}
interface BackendDeveloper {
  id: string;
  name: string;
  backendSkills: string[];
}

type FullstackDeveloper = FrontendDeveloper & BackendDeveloper;

const developer1: FullstackDeveloper = {
  id: "1",
  name: "Michael Johnson",
  frontendSkills: ["HTML", "CSS", "JavaScript", "React", "Redux"],
  backendSkills: ["Nodejs", "Express", "Mongodb", "PostgreSQL"],
};

Here in this example we have two interface named FrontendDeveloper, BackendDeveloper, we combined both to create type FullstackDeveloper and after comining them its type will look alike ---

type FullstackDeveloper = {
  id: string;
  name: string;
  frontendSkills: string[];
  backendSkills: string[];
};

where frontendSkills came from FrontendDeveloper and backendSkills came from BackendDeveloper.

Let's see one more example using type instead of interface :

type People = {
  name: string;
  age: number;
};

type Employee = {
  id: string;
  companyName: string;
  salary: number;
  designation: string;
};

type EmployeeFullDetails = People & Employee;

const employee1: EmployeeFullDetails = {
  name: "John Doe",
  age: 30,
  id: "123456",
  companyName: "TechCorp",
  salary: 80000,
  designation: "Senior Software Engineer",
};

Similarly, we define a new type EmployeeFullDetails by intersecting the People and Employee types. This allows EmployeeFullDetails to contain properties from both types, providing a comprehensive representation of an employee's details.

Union and intersection types are valuable features in TypeScript, offering developers powerful tools to create flexible and robust type definitions. By using these features, developers can write more expressive and error-resistant code, leading to improved software quality and developer productivity.

Check if a key exists in JavaScript object?

Abdus Shohid Shakil — Thu, 18 Apr 2024 18:56:54 +0000

In development, we often need to check whether a key exists in an object or not. You may know one or two way to do it, but there are some other methods worth exploring. If you're interested in learning more, keep reading.

In this blog, I will demonstrate four different ways to perform this check. Each method has its pros and cons, so it's essential to understand all of them. This way, when the need arises, we can choose the most suitable approach.

Using `in` operator.

In JavaScript in operation used to check a property exist in an object or not. It return true if exist else false.
Note: It also includes properties that come from inheritance or prototype chaining. So, when you need to check purely for properties of the object itself, it may not return the desired result.

Complexity is O(1).

const user  = {
    fullName: "Shakil Ahmed",
    age: 22,
    isStudent: true,
};

// structure "keyName" in object
console.log("fullName" in  user); // true
console.log("age" in  user); // true
console.log("institute" in  user); // false

Using `hasOwnProperty` method.

hasOwnProperty is an object method, it's purpose is same as in operator. But different is it checks only object own property excluding inheritance or prototype chaining property. So it return pure result.

Put the key name in method argument and it will return true if it contain key else false.

Complexity is O(1), so performance is also good.

const user  = {
    fullName: "Shakil Ahmed",
    age: 22,
    isStudent: true,
};

console.log(user.hasOwnProperty("fullName")); // true
console.log(user.hasOwnProperty("age"));// true
console.log(user.hasOwnProperty("institute")); // false

Using optional chaining

Optional chaining is an ES11 feature that helps access values without throwing Uncaught TypeError errors. When a key doesn't exist, it returns undefined; otherwise, it returns the value. To convert the result into a boolean value, prepend !! to the expression.

Complexity to check is O(1), so performance is good.

const user  = {
    fullName: "Shakil Ahmed",
    age: 22,
    isStudent: true,
};

console.log(user?.fullName); // Shakil Ahmed
console.log(!!user?.fullName); // true
console.log(user?.id); // undefined
console.log(!!user?.id); // false

However, it has a limitation: if the value is false, 0, undefined, or null any falsy value it will return false, even if the key exists in the object.

const user  = {
    fullName: "Shakil Ahmed",
    age: 22,
    isStudent: false,
    a: 0,
    b: undefined,
    c: null,
    d: NaN,
};

console.log(user?.isStudent); // false
console.log(!!user?.isStudent); // false

console.log(user?.a); // 0
console.log(!!user?.a); // false

console.log(user?.b); // undefined
console.log(!!user?.b); // false

console.log(user?.c); // null
console.log(!!user?.c); // false

console.log(user?.d); // NaN
console.log(!!user?.d); // false

in the above examples, isStudent, a, b, c, d variables exist in the object, but this technique returning false only due to falsy values.

Comparing all keys

This process involves manually traversing over all keys of the object to check if a specific key exists.

Complexity: Traversing the entire object results in a time complexity of O(n), where n is the number of keys in the object.

const user  = {
    fullName: "Shakil Ahmed",
    age: 22,
    isStudent: false,
    a: 0,
    b: undefined,
    c: null,
    d: NaN,
};

const  isKeyExistInObject  = (obj, key) => {
    // here '!!' is to convert result in boolean you also can use Boolean() constructor.
    return  !!Object.keys(obj).find((eachKey) =>  eachKey  ===  key);
};

In the above code, I've created a function to check the existence of a key. Here, I convert all keys of the object into an array using Object.keys(obj). Then, I traverse that array and check if it contains the specified key. If the key is found, find returns that eachKey; otherwise, it returns undefined. Using !! converts this result into a boolean. You can also use the Boolean(value) constructor.

The isKeyExistInObject function returns a boolean value.

console.log(isKeyExistInObject(user, "fullName")); // true
console.log(isKeyExistInObject(user, "first name")); // false
console.log(isKeyExistInObject(user, "age")); // true
console.log(isKeyExistInObject(user, "isStudent")); // true
console.log(isKeyExistInObject(user, "a")); // true
console.log(isKeyExistInObject(user, "b")); // true
console.log(isKeyExistInObject(user, "c")); // true
console.log(isKeyExistInObject(user, "d")); // true
console.log(isKeyExistInObject(user, "notExist")); // false

Note: Although this method is slightly more complex than other techniques, it works for any falsy values.

Example with nested objects

Here is a nested object and here we will use all of the above techniques

Example object:

const  user  = {
    name: "Shakil",
    age: 22,
    studentData: {
        id: "123",
        bachelor: "CSE",
        countryData: {
            country: "Bangladesh",
            capital: "Dhaka",
            language: "Bangla",
        },
    },
};

Using in:

// ========== is "name" exist
console.log("name"  in  user); // true

// ========== is "studentData" exist
console.log("studentData"  in  user); // true

// ========== is "id" exist
console.log(
    "studentData"  in  user  &&  "id"  in  user.studentData
); // true

// ========== is "language" exist
console.log(
    "studentData"  in  user  &&
    "countryData"  in  user.studentData  &&
    "language"  in  user.studentData.countryData
); // true

Using hasOwnProperty:

// ========== is "name" exist
console.log(user.hasOwnProperty("name")); // true

// ========== is "studentData" exist
console.log(user.hasOwnProperty("studentData")); // true

// ========== is "id" exist
console.log(
    user.hasOwnProperty("studentData") && 
    user.studentData.hasOwnProperty("id")
); // true

// ========== is "language" exist
console.log(
    user.hasOwnProperty("studentData") &&
    user.studentData.hasOwnProperty("countryData") &&
    user.studentData.countryData.hasOwnProperty("language")
); // true

Using optional chaining

// ========== is "name" exist
console.log(!!user?.name); // true

// ========== is "studentData" exist
console.log(!!user?.studentData); // true

// ========== is "id" exist
console.log(
    !!user?.studentData  &&  !!user.studentData?.id
); // true

// ========== is "language" exist
console.log(
    !!user?.studentData  &&
    !!user.studentData?.countryData  &&
    !!user.studentData.countryData?.language
); // true

Comparing all keys :

const  isKeyExistInObject  = (obj, key) => {
    return  !!Object.keys(obj).find(
        (eachKey) =>  eachKey  ===  key
    );
};

// ========== is "name" exist
console.log(isKeyExistInObject(user, "name")); // true

// ========== is "studentData" exist
console.log(isKeyExistInObject(user, "studentData")); // true

// ========== is "id" exist
console.log(
    isKeyExistInObject(user, "studentData") &&
    isKeyExistInObject(user.studentData, "id")
); // true

// ========== is "language" exist
console.log(
    isKeyExistInObject(user, "studentData") &&
    isKeyExistInObject(user.studentData, "countryData") &&
    isKeyExistInObject(user.studentData.countryData, "language")
); // true

In summary, knowing different ways to check for keys in JavaScript objects empowers developers to write more efficient and reliable code. Each method offers its own advantages, allowing flexibility in handling various scenarios. By familiarizing yourself with these techniques, you can enhance your JavaScript skills and tackle object-related challenges with ease. Keep exploring and experimenting to find the approach that best fits your needs. Happy coding!

Why shouldn't use Var in JavaScript.

Abdus Shohid Shakil — Tue, 26 Mar 2024 10:15:59 +0000

In JavaScript, we need to declare variables. There are three ways to declare variables using the keywords var, let, and const. However, what are the differences, and when should we use each one? Why shouldn't we recommend using var?

Let's discuss.

Var:

To understand var, it's important to know about a global object. In browsers, there is a global object named window. First, let's take a look at the window object.

Characteristics of `var`:

Variables declared using var work in both global and function scope.
var variables can be re-declared.
var variables can be reassigned.
var variables can hoisted.

Let's now declare a variable using the var keyword.

var a = 10;
var b = "hello";
function test1() {}
var test2 = () => {};

When we declare a variable using var, outside any function, it gets appended to the window object. So, after declaring a variable using var, if we log window, we can see that it contains the variable.

What we can understand from that example is that var works as a global variable declaration. When we declare a variable using var, it is set as a global scope variable, meaning it becomes a property of the global object (window in the case of browsers). This can lead to unintended consequences and potential issues with variable scoping and accidental variable reassignment.

What is scope?

Scope refers to the context in which variables are defined and can be accessed. It determines the visibility and lifetime of variables within a program.

`Var` problems with scope:

So declaring a variable with var, it works in global scope and function scope, but it has no effect on block scope.

var message = "First message";
if (true) {
  var message = "Second message";
}
console.log(message); // "Second message"

In the above example, when we declare the message variable within the if block, it actually overrides the global variable window.message.

Var problems with reassignment:

At times, when we want to keep certain values fixed, like the value of PI. But when using var, these values might accidentally get changed or overwritten, which can be risky.

var valueOfPI = 3.1416;
console.log(valueOfPI); // 3.1416
/* 
Other codes 
-- ---- - ----
----------------
--- 
---------
---------------------
*/
/* 
Other codes 
-- ---- - ----
-------
--- 
------
*/
valueOfPI = 99;
console.log(valueOfPI); // 99

Var problems with re-declaration :

Again when we use var we can redeclare a variable with the same name.

var message = "Message A";
console.log(message); //  "Message A"
var message = "Message B";
console.log(message); //  "Message B"
var message = "Message C";
console.log(message); //  "Message C"

This situation can make the code-base riskier because in a lengthy code-base, variable modifications like this may occur without throwing any errors, making debugging more complex.

Var problems with hoisting :

Hoisting is a term in JavaScript where all variable and function declarations within a scope are moved to the top of that scope. In the case of var, variables are declared with the value undefined.

console.log(message); // undefined
var message = "hello with var";

It works like:

var message = undefined;
console.log(message); // undefined
message = "hello with var";

Accessing a variable its before declaration indeed lead to confusing and weird behavior during the execution. And var don't have any Temporal Dead Zone (TDZ) like let or const.

Q: Is there any way to use var as block scope?

The direct answer is no, you can't directly achieve block-scoping with var. However, you can achieve it indirectly by using Immediately-Invoked Function Expressions (IIFE).

An IIFE is a type of function that is created and invoked immediately after its creation.

After wrapping var variables in an IIFE, they behave as if they are in block scope. If we try to access these variables outside the IIFE, it will throw a ReferenceError.

// IIFE using arrow function
(() => {
  var a = 10;
  console.log(a); // 10
})();
console.log(a); // ReferenceError: a is not defined

// IIFE using traditional function
(function () {
  var b = 10;
  console.log(b); // 10
})();
console.log(b); // ReferenceError: a is not defined

As we know, var is function-scoped. To achieve block scope functionality, we create a function and immediately invoke it. As a result, all variables and functions within that Immediately-Invoked Function Expression (IIFE) will only exist within its scope, and we can't access them outside of that function. This creates a block scope illusion.

Conclusion:

To solve all these problems, ES6 introduced two new ways to declare variables: let and const, which are safer than var.

Thanks for reading. If this information is helpful to you, please consider following me. If you have any questions or would like to discuss any other topic related to web development or JavaScript, feel free to comment below.

Compare two objects are same or not in JavaScript.

Abdus Shohid Shakil — Sun, 24 Mar 2024 20:34:37 +0000

Object is a hash data-structure in javascript used to store data in format of key-values.
In program sometime we need to compare two objects are equal or not. But wait here is a catch you can't compare two object directly like below code.

let person1 = {
  name: "shakil",
  age: 22,
};
let person2 = {
  name: "shakil",
  age: 22,
};

console.log(person1 == person2); // false
console.log(person1 === person2); // false

Why they return false? Because object compare by references by default instead of internal value. Then how to compare?

There are several way to compare

Way 1: JSON.stringify()
JSON.stringify() method convert any object into string format. After converting into string we can compare them.

const compareObjects = (obj1, obj2) => {
  return (
    JSON.stringify(Object.entries(obj1).sort()) ===
    JSON.stringify(Object.entries(obj2).sort())
  );
};

let person1 = {
  name: "shakil",
  age: 22,
};
let person2 = {
  name: "shakil",
  age: 22,
};

console.log(compareObjects(person1, person2)); // true

Explanation: I created an function that take two arguments and converted each of them into Object.entries which return array of [key, value] array. And sort them then it convert into JSON string and just comparing. Note that this method have some limitations.
Reason of sorting is object keys order are not fixed so if we don't sort them there have a risk to return wrong result.

Way 2: _lodash
Lodash modern JavaScript utility library it have a method named isEqual which performs deep comparison between two values that can be any data types.

import _ from "lodash";

let person1 = {
  name: "shakil",
  age: 22,
};
let person2 = {
  name: "shakil",
  age: 22,
};

console.log(_.isEqual(person1, person2)); // true

Way 3: Custom logic
In this way we can manually check two object by converting them in arrays and sort them. After sorting them we can manually compare each elements in objects. If all element match then they are same (by their properties and values, not by their references) else they are not same. Simple logic

const isObject = (obj) => {
  // confirm that it is an object or not
  return typeof obj === "object" && obj !== null;
};

const compareObjects = (obj1, obj2) => {
  /* Step - 1: */
  if (!isObject(obj1) || !isObject(obj2)) return false;

  /* Step - 2: */
  // converting them into array that contain keys of objects
  const obj1Keys = Object.keys(obj1),
    obj2Keys = Object.keys(obj2);

  /* Step - 3: */
  // if number of keys are not same then we can say they are not same
  if (obj1Keys.length !== obj2Keys.length) return false;

  /* Step - 4: */
  for (const key of obj1Keys) {
     if (obj1[key] !== obj2[key] && !isNaN(obj1[key]) && !isNaN(obj2[key])) {
      return false;
    }
  }
  return true;
};

let person1 = {
  name: "shakil",
  age: 22,
};
let person2 = {
  age: 22,
  name: "shakil",
};

compareObjects(person1, person2); // true

Explanation:

Step 1: First we are checking that are they object. If any of them are not an object then return false, they can't be same.

Step 2: Convert each of the object into array which contain their keys.

Step 3: Now if number of keys in both are not same then they are not same.

Step 4: Traverse through each key and compare its corresponding value. If any of the values are not the same, return false. However, when encountering NaN (Not a Number), remember that NaN === NaN evaluates to false, which is an exception. Therefore, if both values are NaN, consider them equal and continue traversal. After traversing all keys and values, if no inequality is found, return true, indicating that all values are the same.

Why NaN===NaN // false I will discuss in another blog.

Thanks for reading.

Forem: Abdus Shohid Shakil

🚫 Stop Using array.length - 1. Here’s a Magical Alternative ✨

1. Using length (The Old School Way):

2. Using .pop() (Compromising and Mutating Data):

3. Using slice() (Readable, but costly):

4. Best way .at() and my love 🥰💖🔥:

Positive Indexing:

Negative Indexing:

🤔 Why .at() Is Awesome

Why Does Event Bubbling Happen by Default? (And Why It Makes Sense)

Why Does Event Bubbling Happen by Default? (And Why It Makes Sense)

Consistent Event Handling Behavior in Parent Elements

Without Bubbling?

Conclusion:

What is bubbling in DOM. Why parents is triggering on the event of children? To know read the full blog.

The DOM Bubble! What is event bubbling, and how to handle it?

The DOM Bubble! What is event bubbling, and how to handle it?

The conecpt:

How does a bubble works?

With real example:

What happens when the button is clicked?

🫧 Bubbling Events:

🚫 Non-Bubbling Events:

How to prevent that propagation?

Conclusion:

Master Union And Intersection in Typescript

Table of content:

Union:

Intersection:

Check if a key exists in JavaScript object?

Using in operator.

Using hasOwnProperty method.

Using optional chaining

Comparing all keys

Example with nested objects

Why shouldn't use Var in JavaScript.

Var:

Characteristics of var:

What is scope?

Var problems with scope:

Var problems with reassignment:

Var problems with re-declaration :

Var problems with hoisting :

Q: Is there any way to use var as block scope?

Conclusion:

Compare two objects are same or not in JavaScript.

1. Using `length` (The Old School Way):

2. Using `.pop()` (Compromising and Mutating Data):

3. Using `slice()` (Readable, but costly):

4. Best way `.at()` and my love 🥰💖🔥:

Using `in` operator.

Using `hasOwnProperty` method.

Characteristics of `var`:

`Var` problems with scope: