Programming Series with Array and Object Data in Javascript - How to Handle Data Effectively

Programming Series with Array and Object Data in Javascript - How to Handle Data Effectively

Articles in series:
  1. Programming Series with Array and Object Data in Javascript - Handling Plain Data
  2. Programming Series with Array and Object Data in Javascript - How to Handle Data Effectively
Daily short news for you
  • For over a week now, I haven't posted anything, not because I have nothing to write about, but because I'm looking for ways to distribute more valuable content in this rapidly exploding AI era.

    As I shared earlier this year, the number of visitors to my blog is gradually declining. When I looked at the statistics, the number of users in the first six months of 2025 has dropped by 30% compared to the same period last year, and by 15% compared to the last six months of 2024. This indicates a reality that users are gradually leaving. What is the reason for this?

    I think the biggest reason is that user habits have changed. They primarily discover the blog through search engines, with Google being the largest. Almost half of the users return to the blog without going through the search step. This is a positive signal, but it's still not enough to increase the number of new users. Not to mention that now, Google has launched the AI Search Labs feature, which means AI displays summarized content when users search, further reducing the likelihood of users accessing the website. Interestingly, when Search Labs was introduced, English articles have taken over the rankings for the most accessed content.

    My articles are usually very long, sometimes reaching up to 2000 words. Writing such an article takes a lot of time. It's normal for many articles to go unread. I know and accept this because not everyone encounters the issues being discussed. For me, writing is a way to cultivate patience and thoughtfulness. Being able to help someone through my writing is a wonderful thing.

    Therefore, I am thinking of focusing on shorter and medium-length content to be able to write more. Long content will only be used when I want to write in detail or delve deeply into a particular topic. So, I am looking for ways to redesign the blog. Everyone, please stay tuned! 😄

    » Read more
  • CloudFlare has introduced the pay per crawl feature to charge for each time AI "crawls" data from your website. What does that mean 🤔?

    The purpose of SEO is to help search engines see the website. When users search for relevant content, your website appears in the search results. This is almost a win-win situation where Google helps more people discover your site, and in return, Google gets more users.

    Now, the game with AI Agents is different. AI Agents have to actively seek out information sources and conveniently "crawl" your data, then mix it up or do something with it that we can't even know. So this is almost a game that benefits only one side 🤔!?

    CloudFlare's move is to make AI Agents pay for each time they retrieve data from your website. If they don’t pay, then I won’t let them read my data. Something like that. Let’s wait a bit longer and see 🤓.

    » Read more
  • Continuing to update on the lawsuit between the Deno group and Oracle over the name JavaScript: It seems that Deno is at a disadvantage as the court has dismissed the Deno group's complaint. However, in August, they (Oracle) must be held accountable for each reason, acknowledging or denying the allegations presented by the Deno group in the lawsuit.

    JavaScript™ Trademark Update

    » Read more

Issue

Note: The following article is my personal opinions on data handling. This includes my experiences in real projects. Readers can consider this as a reference or leave comments for further discussion.

In my previous article, I introduced some ways of handling data. Today, I will focus more on how I handle data in Javascript and how to write code that is easier to read for future maintenance.

Writing code to make it work is fast, but writing code to make it easy to maintain requires the writer to have certain experience. In addition, organizing code and flow will take more time. The time it takes to maintain a project is usually much longer than the time it takes to release the product for the first time, not to mention new people joining the project. Therefore, if your code organization is good, you will save a lot of time in the future.

Handling data is a frequent task in project functionalities. This includes actions like filtering, mapping, and transforming data in arrays or objects. The following 4 techniques that I often use contribute to making my code clearer.

Immutability

Immutability means that once a variable is declared, it should never be changed. If you want to modify the data, copy it to another variable. At first, this may seem unreasonable because variables in programming languages are allowed to be changed and reassigned normally. This also improves performance and saves memory compared to creating additional variables.

In Javascript, there is no definition of data type. Declaring a variable with the var or let keyword allows us to easily change its data or even its data type in the future. This creates flexibility, but the hidden consequences seem to be more than that.

In a code block with tens or hundreds of lines of code, changing the data of a variable can sometimes make it difficult to track the value of the variable. You will have to wonder where the value of the variable is changed or what is changed... To solve this problem, try to use const as much as possible. When using const, you cannot reassign a value to that variable anymore.

However, const alone is not enough. In Javascript, non-primitive data types such as Array, Object... have reference nature. The data, when assigned, can still change the values of the elements, properties inside it. So sometimes if you accidentally modify the reference data, other variables can also be changed unintentionally. To understand more, you can read my article A Few Things About Object Reference in Javascript. Forget It And How Annoying It Can Be! on estacks.

Instead of updating the reference data directly, we should make a "deep" copy of the reference-like data to another variable for processing. Avoid changes that cause hidden errors in the future.

Focus on What to Do Instead of How to Do It

To explain this, I will take an example of a function that retrieves the name attribute in an array of data:

const users = [
  {
    name: "A",  
    age: 18
  },  
  {
    name: "B",  
    age: 19
  },  
  {
    name: "C",  
    age: 20
  },  
];

// The first way, write a function using map to retrieve the name
function usersWithName(users) {
  return users.map(function(user) {
    return {
      name: user.name,  
    };
  });
};

// The second way, still use map but apply curry function
const get = (attribute) => (data) => data[attribute];
const usersWithName = users.map(get("name"));

In the above example, I used a Curry function. If you're not familiar with curry functions and their applications, you can read more at What is a Curry Function? A Delicious Curry and How to Enjoy It?.

Returning to the example above, I have two ways to achieve the same result.
The first way is the usual way, I write the code step by step to get the desired result.
The second way, instead of following step-by-step thinking, I create a get function to retrieve the attribute's data in an object, and then pass it to the map function.

By the second way, if we create a habit of defining functions like get, it will help create uniformity throughout the project. In addition, when readers see get, they can understand what the code is doing.

The More Reusable, The Better

Try to create code snippets that focus on a specific function that will make your code reusable. At the same time, it also creates consistency throughout the project, which means that when you see it, you can know what it is doing.

Looking at the above example in the second way, the get function can be reused multiple times. Instead of get("name"), I can have get("age")... Moreover, every time we see the get function, we can immediately know that it "retrieves the value of the attribute" instead of having to read a long code snippet like the first way to understand what the writer wants to do.

Apply Common Data Handling Libraries

The benefits of creating reusable code snippets have been discovered by the community for a long time. They have created libraries consisting of a collection of functions to help us handle data. One of them is underscore, lodash, ramda... They are widely used in projects on Github, with a large number of commits and collaborators.

For example, in lodash, there are nearly 50 utility functions to handle Object data. Among them are functions similar to get in my example, and almost anything you want to do has a function that can meet your needs.

In my example, I will combine the functions in lodash to solve the initial example, and there is an additional condition that the order of name to be retrieved should be sorted in descending order of age:

_.chain(users).orderBy("age", "desc").map("name").value();
Premium
Hello

5 profound lessons

Every product comes with stories. The success of others is an inspiration for many to follow. 5 lessons learned have changed me forever. How about you? Click now!

Every product comes with stories. The success of others is an inspiration for many to follow. 5 lessons learned have changed me forever. How about you? Click now!

View all

Subscribe to receive new article notifications

or
* The summary newsletter is sent every 1-2 weeks, cancel anytime.

Comments (0)

Leave a comment...