JavaScript FILTER method in-depth

🤓 Introduction

Welcome to my first coding blog! 🎉
My name is Lazar, I am a Software Engineer, actively working in the tech industry and I also work as a tutor for aspiring software developers. With this blog, I will start a long-term commitment to devote my time to writing about the coding paradigms, and computer science concepts. Also, I will talk about experiences in the tech industry, all of that with some humor sprinkles on the top.

📚 Quick story

I will start an article with an imaginative depiction of the supermarket. You are entering the front doors. Listening to the quiet noise that they are producing while sliding to the sides. You are picking up the basket, there is an odd-looking mascot looking at you with creepy soulless eyes. You were just passing the automated doors when you realized you only have $15 in your pocket (😯). You planned to buy all sorts of things. The supermarket offers the same product from a different supplier at a different price. Now...🤔 imagine you had a tool to filter out all the products that are in your budget range, and those that are not are now invisible. That's where the FILTER method can help you !!! (At least if we are talking about the virtual supermarket)

💪 Real work

Definition

The filter() array method is a method that creates a new array that will consist of
elements that are under the given criteria from an existing array.

Filter syntax

//Supermarket prices
const prices = [1.50, 2.99, 7.50, 55.00, 100.00, 33.22, 13.21, 11.00, 23.11, 73.99];

/*Filter all prices that are under the specific budget value
or equal to the specific budget value (in this case $15)*/
var pricesInBudgetRange = prices.filter((price) =>{
  return price <= 15;
});

console.log(pricesInBudgetRange); // [1.50, 2.99, 7.50, 13.21, 11.00]

If you are a beginner, you may not be familiar with the FILTER method, yet. But you are probably familiar with the [for] loop. Let me write this code with the [for] loop.

const prices = [1.50, 2.99, 7.50, 55.00, 100.00, 33.22, 13.21, 11.00, 23.11, 73.99];
const budget = 15;
var tempArray = [] //initialize temporary array

for (let i = 0; i < prices.length; i++){
  if (prices[i] <= budget){
    tempArray.push(prices[i]);
  }
}

console.log(tempArray); // [1.50, 2.99, 7.50, 13.21, 11.00]

You could also do this with the while loop

💭 Practical wisdom moment: There is always a way to go if you look for it. - E. A. Fitzgerald

⚙Under the hood

The FILTER method is called with one or two arguments. The first argument is a callback function. Yes, the function that accepts three arguments and returns a value that is coercible to the Boolean value [true or false].

Argument 1

The callback function will be called for each element in the array in ascending order, and it will construct a new array that consists of all the values for which the callback function returns true, meaning, it will return all values that are under the given criteria.

Argument 2

The second argument, if provided, will be used as the this value for each invocation of the callback function. If it's not provided, undefined is used instead.

THE THREE RIDERS OF THE CALLBACK

As mentioned above, the callback function is called with three arguments:

• The value of the element
• The index of the element
• The object that is being traversed

⌚Time complexity

Regarding the time complexity, the FILTER method is a LINEAR operation denoted with O(n) (Big O of N). This is determined as time complexity. The necessary time to perform a certain algorithm is usually rising with the rise of the number of entries. To determine the time complexity we are finding The dependence of algorithm execution time on the size of the problem. The best algorithm to use is the one with the lowest complexity rising speed. The big O(n) in the case of the FILTER method means that the time complexity is proportionally equal to the number of entries (prices), and thus it is considered as an optimal algorithm regarding time complexity analysis.

🥊FOR vs FILTER

FILTER method is a sexy little looking thing. If you were to go through the code you would certainly consider the filter method easily readable and maintainable. But, that is the case when we are handling small datasets. Calling the function comes with the price in all programming languages. The cause is because we need to update the stack. Variables visible in the calling function are not visible in the called function, thus, the stack is used. Because of the callback function, that will always be applied to all elements of the dataset, the time complexity is rising while performance is decreasing. In that case, the "for" loop is much more suitable.

🙏 THANK YOU FOR READING!

Please leave the comment, tell me about you, about your work, comment your thoughts on the filter method, connect with me via Twitter or LinkedIn.

Let this year be your year, let this year be our year. Until the next typing...

Have a nice time! 😊