Tips & Tricks to Up Your JavaScript Game

Blog Barista: Ian DesJardins  |  Dec 18, 2019  |  Development Practices  |  Brew time: 6 min

JavaScript. If you’re a web developer, you write it. Many of us have been writing it for years and have gotten comfortable with certain patterns and language features. Those patterns and features let us write code efficiently and consistently, but they can also hold us back from learning and using new or better language features and patterns. Most of us don’t explicitly reject deeper understanding of JavaScript, but rather lack the time or other resources needed to keep up with every single language feature. There are however some features that are worth learning. In this post, I’m going to show you how to improve your JavaScript code with just a few simple array methods and without sacrificing productivity, consistency, or code readability.

The forEach Method

The JavaScript forEach array method is a great way to iterate over each array element without writing your own for loop. While the forEach method is great for most cases, it should be noted that asynchronous callbacks and await statements are not supported. You are also not able to break out of a loop early like you could with a traditional for loop. 

The forEach method takes in two parameters: 

1.   A callback function that will be called on each iteration. Each callback function also has three parameters:

a.   value: The array value for the particular iteration

b.   index (optional): The array value for the particular iteration

c.   array (optional): The array that the forEach method is being called on

2.   (Optional) A reference object that will be accessible via this inside of the forEach function.

Let’s take a look at an example:

For more information on the forEach method take a look at the documentation.

The find Method

The find method returns the value of the first element in the array where the callback function returns true. Otherwise undefined is returned. 

This is one of my most widely used methods. Instead of writing loops and searching for the index of my desired array element, you can use just use the find method and return the element to a new variable. 

The find method takes in two parameters: 

1.   A callback function that will be called on each iteration. This function returns true when a match is found. Each callback function has the same value, index, and array parameters as the forEach method.

2.   (Optional) A reference object that will be accessible via this inside of the find function.

Here is the find method in action:

For more information on the find method take a look at the documentation.

The filter Method

Another array method that helped eliminate extra code was filter. The filter method returns all elements in the array where the callback function returns true. If no matches are found, an empty array is returned. 

Pro Tip: If you’re not looking to replace any elements in your array, you can use filter in place of splice to just filter out elements you don’t need.

The filter method takes in two parameters: 

1.   A callback function that will be called on each iteration. This function returns true when a match is found. Each callback function has the same value, index, and array parameters as the forEach method.

2.   (Optional) A reference object that will be accessible via this inside of the filter function.

Here is an example of the filter function:

For more information on the filter method take a look at the documentation.

The map Method

The map method returns a new array with each element being the result of the callback function. It is mainly used to map data from one array into another array. Switching from looping structures to the map method has made life much easier. I didn’t realize how often I need to map data until I found myself using this method regularly. Use this in conjunction with filter and you’ll be having a good time.

The map method takes in two parameters: 

1.   A callback function that will be called on each iteration. This function returns a new value or object for each element in your array. Each callback function has the same value, index, and array parameters as the forEach method.

2.   (Optional) A reference object that will be accessible via this inside of the map function.

Here is an example of the map function:

For more information on the map method take a look at the documentation.

The reduce Method

The reduce method returns the accumulated value from the last call of the callback function. It’s useful for reducing or collapsing arrays with elements of all types into a single output. Although I don’t use this as widely, it comes in handy for performing arithmetic over your data, forming a single object from multiple objects, or any other operations where the primary goal is condensing data from your list.

The reduce method takes in two parameters: 

1.   A callback function that will be called on each iteration. This function returns an accumulated or reduced value after every iteration. The callback function takes in four parameters:

a.   accumulator: The accumulated/reduced value from the previous iteration

b.   current value: The array value for this iteration

c.   index (optional): The array value for the particular iteration

d.   array (optional): The array that the reduce method is being called on

2.   (Optional) A reference object that will be accessible via this inside of the reduce function.

Here is an example of the reduce function:

For more information on the reduce method take a look at the documentation.

The from Method

The from method creates a new array from an array or from an iterable object such as a string. That may not sound super useful, but it can simplify some common tasks like string manipulation or modifying all elements in an array in the same way.

The from method takes in three parameters: 

1.   An array or other iterable item

2.   A callback function that will be called on each iteration. This function returns a new value or object for each element in your array. Each callback function has the same value, index, and array parameters as the forEach method.

3.   (Optional) A reference object that will be accessible via this inside of the from function.

Here is an example of the Array.from function:

For more information on the reduce method take a look at the documentation.

Array Destructuring

Array destructuring is an operation that involves pulling out values from arrays at specific indexes with a special syntax. What makes this syntax special is that there are no explicit function calls involved. I’ll let the code examples speak for themselves.

One of the biggest advantages to this method is that if you already know the order and format of some array, you can pull out and assign these items in their own variable in one line of code. Neat, huh?

Object Destructuring

Object destructuring is similar to array destructuring, in fact the syntax is nearly identical! The code will also be speaking for itself on this one…

All of these operators should make working with arrays and objects much easier. Once you get used to the syntax, you’ll wonder how we ever got by with simple for loops. If you’re looking for even more useful operators, I would suggest looking at the fill, reduceRight, and some methods. If you found this post useful be sure to share it with your developer friends. If you have feedback or any cool array operator examples be sure to leave a comment!

Other recent posts: