Taking JavaScript arrays to a new level

Published on Feb 13, 2014 by Sebastian Stefaniuk | Category: technology

When built-in JavaScript methods only take you so far, employing plugins often enhance a programmer’s workflow and efficiency. Let me explain...

Web development is an ever changing and advancing technological field in which paradigms constantly shift and client’s requirements continue to evolve to reflect the needs of their users. With higher Internet speeds available to users, the demand for faster loading and responding websites grows.

Technically speaking, for a website to be responsive to user demands, development needs to focus on how data is loaded and manipulated so that it is efficiently displayed to the user. To achieve this, data can be loaded via AJAX requests, stored in local storage or session variables, or partially loaded as needed. Sometimes it’s a combination of these techniques. Usually, JavaScript is used to make websites achieve this.

I recently had the opportunity to work on a data visualization website that loaded huge amounts of data directly onto the home page. For this particular project, data was used to statistically show the difference of youth incarceration between states, counties, and for different years in various categories and offense types for the United States.

About 50,000 records are loaded onto the home page to make the data-visualization work. The website has a lot of filtering options that can be applied to different levels of comparisons. This means that the data is manipulated with many array operations. Although JavaScript has decent array methods, I quickly realized that simple for-loops with wildly nested if-else statements wouldn’t let me handle the filtering of data efficiently.

Since I program server side 75% of the time, I have become used to using C#’s convenient List class to perform sophisticated operations on arrays with simple calls. I only started to appreciate built-in methods such as finding and sorting elements after realizing that I needed those exact same methods in JavaScript arrays. I thought to myself: “Gee, wouldn’t it be nice to have a List class in JavaScript?”

Surely there are plugins that do that type of thing, but I like the exercise and so I started typing away. After adding one Array.prototype function, I added another, then another, and yet another. I also liked the idea of defining a generic type for a list, so I incorporated that as an extent. Overall, I defined 16 functions to make my JavaScript programming with arrays easier, plus it was a great exercise!

Someday, someone will come across a similar need, find this post, and take advantage of some lightweight, yet quite powerful, JavaScript array methods. You can download the latest version of my extended Array.prototype on Github (w.array-list.js).

« All Blog Posts

Our history in a nutshell

Webitects formed in 1995 knowing the web was going to be more than a flash in the pan. Since then, we've been building successful websites based on a user-centered design philosophy. We enjoy long-lasting relationships with our clients because of our personal touch and dedication to them.

Meet the team »

Contact us
Webitects 11 East Adams, Suite 900 Chicago, IL 60603 (312) 469-5444