A few weeks ago, I started solving problems at LeetCode. Even though I've been in tech for three years, I hardly ever code in JavaScript because my position as an accessibility specialist doesn't really involve that programming language.
But my brain likes to challenge itself, so I practise JavaScript in my spare time. So if you're currently doing the same, let's share our approaches and learn together. 🤓
Starting point
Given an integer array arr
and a filtering function fn
, return a filtered array filteredArr
.
The fn
function takes one or two arguments:
-
arr[i]
- number from thearr
-
i
- index ofarr[i]
filteredArr
should only contain the elements from the arr
for which the expression fn(arr[i], i)
evaluates to a truthy value. A truthy value is a value where Boolean(value)
returns true
.
‼️ Please solve it without the built-in Array.filter
method.
My Submission
Let's take a look at my code. Yours maybe looks different, and that's okay. Everyone has their own approach.
var filter = function(arr, fn) {
const filteredArr = [];
for(let i = 0; i < arr.length; i++) {
if (fn(arr[i], i)) {
filteredArr.push(arr[i])
}
}
return filteredArr;
};
What happens here?
var filter = function(arr, fn) {
...
}
What was given by LeetCode was the outer declaration*, the initialization of var filter
, which was assigned a function that takes two arguments, an array of numbers arr
and a filter function fn
.
👻 Note: I personally never use var when declaring a variable, I always opt for let or const, but since this was the default, I'll keep it that way (there's nothing really wrong with using var).
const filteredArr = [];
I declare an empty array filteredArr
which will store the filtered elements.
for(let i = 0; i < arr.length; i++) {
...
}
Since we are not allowed to use the Array.filter
method, I am using a for loop
to go over the given array arr
. We start the for loop
by setting kind of a counter by initializing a variable let i
and set it to 0
.
The second part of the loop is to compare the value of i
against the length of the array arr.length
. The loop should only run as long as i
is smaller array (so, as long it is true
).
After checking, if i
is still smaller, i will be increased by 1 through i++
and the function inside the loop will be called as long as this is the case.
if (fn(arr[i], i)) {
filteredArr.push(arr[i])
}
Inside the loop is an if statement
. The if statement
contains the given function fn
which can take two arguments, the number in the array arr[i]
and the index of the number i
.
The function iterates over the arr
(as long as the for loop
is true) and compares the number with the value given by the function against its expression.
So in case the expression says: is the number inside the array greater then ten arr[i] > 10;
and the number is 20, then it would return true
. And when it is true, we push the number to the new created array filteredArr
using the push()
method.
return filteredArr;
Last thing for us to do is to return the filteredArr
. That's it 😎.
What was it like for you to solve this problem? Was everything clear from the start or did you have difficulty understanding something?
I can imagine it always takes a bit of getting used to thinking back to the origin when you are used to using array methods.
*I'm not happy with what I'm calling it. Do you have any ideas on how I could describe it better?
In general, I am bad at explaining technical stuff. So any advice is welcome to improve my explanation skills 🙏🏽.
Top comments (6)
I think you can also do something like this:
Array.prototype.filter
is a function that returns a new array of items if it's callback returns true.That probably needs clarification, so here's an example:
Your solution works well too though! I hope you learned something new :)
Thanks for your suggestion. :)
As mentioned in the description it should be solved without the filter method.
I am grateful for your explanation, I am sure others will learn a lot from it.
Oh, I hadn't read the description. Now your solution makes more sense :)
How about this?
The art of filtering in JavaScript arrays :D
A practical approach to filtering in JavaScript. Let's learn together!
I'm not a fan of Leetcode, by the way. Did solve around 120 questions though :D
Hey @anmolbaranwal thank you for your response 😊
I am not quite sure how your suggestions fit instead of outer declaration* Or did I misunderstand something? 🙊
I thought you were referring to the title; that's why I proposed some alternative ones. Sorry for any confusion, I guess I misunderstood :D