DEV Community: Chiranjit Dey

Flattening a Deeply Nested Object: A Step-by-Step Guide

Chiranjit Dey — Tue, 13 Aug 2024 06:37:37 +0000

Understanding the Problem
Often, we encounter complex data structures in JavaScript applications. These structures can be deeply nested objects, making it challenging to manipulate or process them directly. One common operation is to flatten these objects, transforming them into a simpler structure where all properties are at the top level.

In this blog, we'll delve into a JavaScript code snippet that effectively flattens a deeply nested object. We'll break down the code line by line, explaining its logic and functionality.

The Code Breakdown

let user = {
  name : 'Chiranjit',
  address : {
    personal : {
      city: 'Kolkata',
      state: 'West Bengal'
    },
    office : {
      city: 'Bengaluru',
      state: 'Karnataka',
      area: {
        landmark:'Waterside',
        post: 433101
      }
    }
  }
}
var finalObj = {} 

const flatObjFn = (obj, parent) => {
  for(let key in obj){
    if(typeof obj[key] === 'object'){
      flatObjFn(obj[key], parent+'_'+key)
    }else{
      finalObj[parent + '_' + key] = obj[key]
    }
  }
}

flatObjFn(user, 'user');
console.log(finalObj);

Line-by-Line Explanation

Creating the Nested Object:
- We begin by creating a deeply nested object named user. It contains properties like name, address, and further nested objects within address.
Initializing the Output Object:
- An empty object finalObj is created to store the flattened result.
Defining the Flattening Function:
- A function named flatObjFn is defined, accepting two parameters: a) obj: The object to be flattened. b) parent: A string to prefix property names for clarity.
Iterating Through Object Properties:
- A for...in loop iterates over each property of the input object obj.
Handling Nested Objects:
- If the value of a property is an object, the flatObjFn function is recursively called on that object. The parent parameter is concatenated with the current property name to create a new prefix for the nested properties.
Handling Primitive Values:
- If the value of a property is not an object (i.e., a primitive value like a string or number), it's added to the finalObj with a key formed by concatenating the parent and the current property name.
Calling the Flattening Function:
- The flatObjFn is called with the user object as input and 'user' as the initial parent prefix.
Logging the Flattened Object:
- The final flattened object is printed to the console using console.log(finalObj).

How It Works?
The flatObjFn function recursively traverses the object, breaking down nested structures into a flat object. The parent parameter keeps track of the object hierarchy, allowing the function to create meaningful property names in the output object.

Let's connect on Twitter or LinkedIn

Polyfill for Bind()

Chiranjit Dey — Sun, 11 Aug 2024 06:02:44 +0000

In the dynamic world of JavaScript development, ensuring cross-browser compatibility is paramount. One essential tool in achieving this is the bind() method. However, older browsers might not fully support it. This is where polyfills come to the rescue.

A polyfill is essentially a piece of code that provides functionality not natively supported by the older browser. In this case, we'll delve into creating a polyfill for the bind() method to ensure your code works seamlessly across different environments.

Let's explore how to build this crucial polyfill.

Definition : The Bind() method basically allows an object to borrow a method from another object without copying.

Here is a step by step breakdown, of the Bind polyfill.

Ln:1, Person is an object, that has the "name" property and printAge as a function property. PrintAge here prints the name and age.
Ln:8, Person2 is simply another object that has the "name" property but no printAge function.
Ln: 22, In this line, we call the myBind function (which is a polyfill) and store the result in a variable named "bindFunc".
Ln 12, this is where we write the polyfill for our myBind method. In this function, we take the Object we want to append the myBind method to and other arguments. Since a lot of arguments can be passed, so we basically target all arguments using the "...args".
Next we check if the type of "this", which is the "printAge" function here is a function or not, if not we throw an error, else we assign the function to the obj (person2) as "obj.fn" that is being passed to us as a parameter in our myBind function. But since "bind" method returns a function that gets invoked separately, so here also we return the function with "...args2" as arguments, this is to mean that we can pass extra arguments to it also, that are not supposed to be passed through the polyfill.
Ln 18, we pass all the arguments to our printAge function. Now it has all that is required and can function just like the bind method.

Note: Instead of sending the age = 35 in the myBind method invoke (Ln 22), we can pass it as an argument to the bindFunc(35) as well, this is why we are taking the "...args2", to handle extra parameters or arguments.

If you like this explanation, let's connect on Twitter or LinkedIn and if you have any feedback, let me know in the comments. Would really help.

Twitter
LinkedIn

Polyfill for Apply()

Chiranjit Dey — Fri, 09 Aug 2024 06:48:23 +0000

Polyfills are essential tools for developers aiming to create web applications compatible with a wide range of browsers. These code snippets bridge the gap between modern functionalities and older browser limitations.

Today, we'll delve into the apply() function and explore how to implement a polyfill for it, ensuring your applications function seamlessly across different browser environments.

Given below is a line by line explanation of the code.

The apply() method in JS invokes a function with a specified "this" value and allows passing arguments in an array.
Ln:1, person is an object.
Ln:5, printAge is a function, that takes age as an arg. (Apply method can take N number of arguments in the array).

Ln:9, Function.prototype.myApply is our polyfill that handles the apply method. It takes the object and [arguments].
Ln:11, we check whether the typeOf "this" and typeOf the ...args, if both satisfies then,
Ln:10, we make a key in the object naming it fn and assigning "this" to it. "this" refers to the printAge function() here.
Ln:19 we call the function with the arguments.
Ln:22, we call the myApply method here and get to see our output in the console.

If you like the post, let's connect on Twitter or LinkedIn. I post almost everyday about JS fundamentals.

Twitter
LinkedIn

Polyfill for Call()

Chiranjit Dey — Mon, 05 Aug 2024 06:30:40 +0000

Today, we'll delve into the call() function and explore how to implement a polyfill for it, ensuring your applications function seamlessly across different browser environments.

Given below is a line by line explanation of the code.

The call() method in JS invokes a function with a specified "this" value and allows passing arguments individually.
Ln:1, person is an object.
Ln:5, printAge is a function, that takes age as an arg. (Call method can take N number of arguments).

4.Ln:9, Function.prototype.myCall is our polyfill that handles the call method. It takes the object and arguments.

Ln:10, we now make a key in the object naming it fn and assigning "this" to it. "this" refers to the printAge function() here.
Ln:11 we call the function with the arguments.
Ln:14, we call the myCall method here and get to see our output in the console.

If you like the post, make sure to follow me on Twitter and LinkedIn. I post almost everyday about JS fundamentals.

Twitter
LinkedIn