Introduction To 11 Core JavaScript Functions To Improve Code Quality

It doesn't care if you working with backend or frontend (or even SPACESHIPS!), JavaScript could be used everywhere because it is a quite flexible language. It has hardcore functional programming patterns as well as classes and its similarity to other "C-like" languages enables an easy transition for every developer.

If you want to level up your skills in JavaScript, I would suggest learning about, practicing, and mastering the following very important core functions that are available in the language. You will not need every function for solving most problems but they can help you to avoid heavy lifting in some cases, while in others, they will reduce the amount of code that you have to write.

1. map()

One of the most important JavaScript functions is map()! Also, it is one function that gives the most trouble to people who learn JavaScript. This happens because the way this function works is an idea taken from Functional Programming which most developers are not familiar with. It seems strange or even wrong to our biased brains.

The function map() is very simple. It attaches itself to an array and converts each item into something else, resulting in a new array. This conversion is done by an anonymous function provided in the map brackets.

That's all that map does!

At first, the syntax for map() might take some time to get used to but after mastering it will be one of your best friends working with JavaScript.

Why You Might Want To Use map()?

For instance, let's say we recorded the amount of water in a fountain for each day of the last week and stored it in an array. At the end of the week, you are told that the measurement tool was not as accurate as possible and the amount of water was 3.2 liters less than it should be.

With the map() function you can easily solve this issue by doing this:

const dailyReadings = [34.2, 35.4, 40.1, 35.2, 33.5, 36.5, 38.7];

const correctedDailyReadings = dailyReadings.map(day => day + 3.2);

console.log(correctedDailyReadings); //gives [37.4, 38.6, 43.3, 38.4, 36.7, 39.7, 41.9]

You can find another very practical example in the world of React when you create DOM element lists from arrays. This is a common pattern in React and will be achieved by this piece of code:

export default({articles}) => {
    return links.map(article => {
        return (
        	<div className="link" key={article.id}>
            	<div className="article-name">{article.name}</div>
                <div className="article-desc">{article.description}</div>
            </div>
        );
    });
};

Now you can argue that map() is nothing but another implementation of a for loop and you will be right but notice that maybe this is your object-oriented trained mind that makes this argument.

2. filter()

filter() is an unbelievably useful JavaScript function that you can use in many situations because it filters an array based on a given rule/logic. This rule/logic will be provided as anonymous functions.

To show how filter() is working we can reuse the previous fountain example. Assume that the array contains the amount of water stored within the fountain (This time measurement tool works as expected). Now, we want to find out how often the amount was lower than 36 liters. This can be achieved using the filter() function:

const dailyReadings = [34.2, 35.4, 40.1, 35.2, 33.5, 36.5, 38.7];

const daysWithLowAmount = dailyReadings.filter(day => {
	return day < 36
});

console.log("Days with low amount of water: " + daysWithLowAmount.length); // 4
console.log(daysWithLowAmount); // [34.2, 35.4, 35.2, 33.5]

It is important that the anonymous function that you pass to filter() has to return a Boolean value: true or false. The Boolean expression is used by the filter() function to determine if a value should be inserted in the newly generated array or not.

Within the anonymous function, you can implement any amount of complex logic to filter the data; you can read user inputs, make any API call, and so on, as long as you return a Boolean value in the end.

BEWARE: Keep in mind that filter() always returns an array. This is also the case if the filtered data is empty. Often this leads to subtle bugs within code snippets because filter() is used this way:

const dailyReadings = [34.2, 35.4, 40.1, 35.2, 33.5, 36.5, 38.7];

const daysWithCriticalAmount = dailyReadings.filter(day => {
	return day < 30
});

if(daysWithCriticalAmount) {
	console.log("The amount of water was critical");
} else {
	console.log("The amount of water was normal");
}

Did you notice something? The if condition in the end checks daysWithCriticalAmount which is actually an array that is empty because there was no day with less water than 30.

Surprisingly, this mistake is done too often if you are rushing toward a deadline and just want to implement a filter method fast. The problem with this piece of code is that especially JavaScript (Yeah, JavaScript is weird) is an inconsistent language in many ways. Sometimes the "truthiness" of things is one of them.

As you maybe know in JavaScript [] == true returns false and you may think that the above code is correct.

Unfortunately, within an if condition, [] evaluates to true! In other words, the else block will never be executed.

Fixing this problem is very easy because you only have to check if the length of the resulting array is greater or equal to 1.

3. reduce()

Compared to all the other functions in this article reduce() is competing for the first place of "confusing, weird, and complex JavaScript functions". Although this function is highly important and results in elegant code in many situations, it is avoided by many JavaScript developers. They prefer to write code without the help of reduce().

One reason for this is the complexity of reduce(). It is very hard to understand the concept and the execution of this function. Furthermore, if you read its description, you have to re-read it several times, and still, you doubt yourself if you read it wrong (Happens to me until I saw it in action).

The reduce() function is used to reduce (obvious isn't it?) the given array to a single value. This could be a number, a string, a function, an object, or whatever else.

If you want to use the reduce() function to reduce an array you need to supply the needed logic by providing a function. In general, this function will be called the reducer function that transforms the first argument to reduce(). Also, it contains a second argument that is a starting value and can be a number, a string, etc. The function itself will look like this:

array.reduce(reducerFunction, startValue)

startValue: The startValue passed to reduce() function is the starting value (obvious...) for the calculation you want to process with the reducerFunction. For example, if you want to execute an addition you might start with 0 and if you want to do a multiplication you should use a value of 1.

reducerFunction: As mentioned before the reducer function is used to convert the array into a single value. It has two arguments:  an accumulator and a variable to store the current value.

The accumulator is just a fancy name describing the variable that contains the result of the calculation (it is like using total to sum up all items in an array). Within the reducer function, the accumulator will be initially set to the starting value and then the calculation will be performed step by step iterating through the array while the result of each step is saved within the accumulator.

The second argument of the reducer function is currentValue and will contain the value within the array at a given position in a specific step. For example, in step 2 while executing the reducer function the variable currentValue will contain the second value from the input array.

With all this information we should look at the following example which will add every value from an input array within the reducer function:

const input = [1, 2, 3, 4];
const result = input.reduce((acc, currentValue) => acc + currentValue, 0);
console.log(result); // 10

Within the first line, we define the input array that's holding all the numbers we want to add. The next line will contain the input.reduce() call, which defines the starting value for acc to be 0 because in an addition we should start with 0 to not influence the result. The reducer functions body (acc, currentValue) => acc + currentValue does a simple addition of the current value and the value that is stored in the accumulator.

If you would do this addition with a for loop it would look like this:

const input = [1, 2, 3, 4];
let result = 0;
for (let i = 0; i < input.length; i++) {
	result += input[i]
}
console.log(total)

As you can see, the simple for-loop example is much longer and less elegant than reducing.

4. some()

Imagine you have an array of objects containing Students and their scores in an exam. Now, you want to know if there are students in your class that have a score that is greater than 90% and it does not care if there is one or multiple students that passed that exam with more than 90%.

If you want to do this in JavaScript you can solve the problem while using a loop and a variable that is set to true after the first person is found that has a score greater 90%:

const students = [{
	name: "Stud 1",
    score: 78,
}, {
	name: "Stud 2",
    score: 92
}, {
	name: "Stud 3",
    score: 90
}]

let over90 = false;

for(let i = 0; i < students.length; i++) {
	if(students[i].score > 90) {
    	over90 = true;
        break;
    }
}

if(over90) {
	console.log("There are students with exceptional score!")
} else {
	console.log("Unfortunately, nothing is exceptional")
}
    

For me, this code looks very "ugly", "verbose", or "horrible"!

It could be optimized by using the map() function that was described earlier but the solution will still be a little bit clunky.

Luckily, JavaScript has a rather neat function called some() that is available in the core language, works with arrays, and returns a Boolean value. While providing an anonymous function it will filter the input array to solve the problem elegantly:

const students = [{
	name: "Stud 1",
    score: 78,
}, {
	name: "Stud 2",
    score: 92
}, {
	name: "Stud 3",
    score: 90
}]

if(students.some(student => {
	return student.score > 90
})) {
	console.log("There are students with exceptional score!")
} else {
	console.log("Unfortunately, nothing is exceptional")
}

You can see it gets the same input and will produce the same result but in a more elegant way. Also, the amount of code is reduced and it is much more readable than before.

5. every()

Another function that already exists in the JavaScript core language is every(). This function will return a Boolean value (like some()) but will test all items within the input array. To do this you have to provide (again) an anonymous function. As an example, we will test if every student has passed the exam by achieving an exam score of 70 or more:

const students = [{
	name: "Stud 1",
    score: 78,
}, {
	name: "Stud 2",
    score: 92
}, {
	name: "Stud 3",
    score: 90
}]

if(students.every(student => {
	return student.score > 70
})) {
	console.log("All students passed the exam!")
} else {
	console.log("Unfortunately, not all students did well")
}

Like some() this function creates elegant, readable, and maintainable code that is short.

6. includes()

Often, if I want to check an array of the existence of substrings I will use indexOf(). Unfortunately, I have to look up the docs to know how their return values are.

Luckily, there is a nice alternative in JavaScript that can be used to achieve this: includes(). The usage is very easy and it is case-sensitive (I guess you wished for it anyway). See the following code snippet for an example:

const numbers = [6, 5, 13, 26, 48, 1];
console.log(numbers.includes(5)); // true

const name = "Paul Knulst";
console.log(name.includes('paul')); // false, because first letter is in small
console.log(name.includes('Paul')); // true, as expected

However, includes can only compare simple values and no objects:

const user = {a: 6, b: 5, c: 26};
console.log(user.includes('b')); // does not work because objects does not have an "includes" method

7. shift()

If you want to remove the first element of an array shift() is the method you should use because it is easy to remember and intuitive. Notice that you also can do it with splice (see it later) but shift() is easier:

const input = [1, 2, 3, 4];
const first = input.shift();
console.log(input); // gives: Array [2, 3, 4]
console.log(first); // gives: 1

As you can see here shift alters the array it is called on and returns the removed element.

Notice: shift is extremely inefficient and should be avoided if you are working with large arrays. Too many calls of shift() on large arrays can break your applications!

8. unshift()

In contrast to shift() which removes one element this function is used to add a new element at the beginning of the array:

const input = [1, 2, 3, 4];
input.unshift(0);
console.log(input); // expected output: Array [0, 1, 2, 3, 4]

Notice: Like shift, unshift is extremely inefficient and should be avoided if you are working with large arrays. Too many calls of unshift() on large arrays can break your applications!

9. slice()

In JavaScript exist a concept that is called slicing which is a function to create a new string containing a part of an original string by providing a starting index and an end index. Now, with help of the indexOf function you can slice an input string to retrieve the searched substring:

const input = "This is a cool article about mandatory JavaScript functions that every developer shoud know";
const start = input.indexOf("cool");
const end = input.indexOf("that");
const headline = input.slice(start, end);
console.log(headline); // "cool article about mandatory JavaScript functions "

Notice that the start index is included in the resulting array but the end index is not. Also, you can see that the space between "functions" and "that" is also not sliced.

Additionally, slicing can also be used with arrays:

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2)); // ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4)); // Array ["camel", "duck"]

10. splice()

splice() sounds like slice() and could be compared with it because both functions create new arrays or strings from the original ones. The main small but very important difference is that splice() removes, changes, or adds elements but modifies the original array. This "destructuring" of the original array can lead to huge problems if you do not fully understand how deep copies and references work in JavaScript!

The following example will show how splice() can be used:

const months = ['Jan', 'March', 'April', 'June'];
const feb = months.splice(1, 0, 'Feb'); // inserts at index 1
console.log(months); // ["Jan", "Feb", "March", "April", "June"]
console.log(feb); // []

const may = months.splice(4, 1, 'May'); // replaces 1 element at index 4
console.log(months); // ["Jan", "Feb", "March", "April", "May"]
console.log(may); // ["June"]

You can see here that splice() manipulates the original array. If you remove an item it will also return the removed entry but if you add an entry the return array will be empty.

11. fill()

The last JavaScript function is fill() and is used to change several items to a single value or even reset the full array to their initial values. If you need this fill() can help you avoid loops to reset the values of an array. Furthermore, the function can be used to replace some or all entries from the array with a given value.

You can see how it works within the following example:

const input = [1, 2, 3, 4, 5, 6];
console.log(input.fill(0, 2, 4)); // [1, 2, 0, 0, 0, 0]
console.log(input.fill(5, 1)); // [1, 5, 5, 5, 5, 5]
console.log(input.fill(6)); // [6, 6, 6, 6, 6, 6]

Conclusion

This list contains functions that most JavaScript developers encounter and use in their careers. Although it is long, it is by no means complete because there are so many more minor but very useful functions in JavaScript: reverse(), sort(), find(), flat(), entries(). I would suggest that you read about these functions because you will at any point use them in your JavaScript project.

Furthermore, whenever you can you should explore the core language or famous utility libraries such as lodash to deepen your JavaScript knowledge. It will result in massive productivity and you will learn to create cleaner, compact, readable, maintainable, and usable code!

Feel free to connect with me on Medium, LinkedIn, Twitter, and GitHub.