Building JavaScript Array Methods from Scratch in 2024 - Easy tutorial for beginners # 1

#beginners #tutorial #javascript #learning

Video version link: https://www.youtube.com/watch?v=iZaQmP8lXMo

Hi guys, in this post we will be build JavaScript array methods as a function from JavaScript basics as it is great and simple way to refine your JavaScript programming skill and make your fundamentals strong as beginner and you’ll also know various JavaScript array methods along the way, we will start from easiest to more complex ones, i have try to keep it as beginner friendly as possible.

First, i will be introducing the array method with their example input and output, then we will examine those methods, identifying which programming tools and tricks to used and in which order to arrange them.
Along that process we will build pseudocode algorithm for required function and later on, i will show you flowchart version of that algorithm, the important tip that i can give to you all, to get most out of this post, is to first try to build it by yourself then come to this post.

Array.isArray() :

So lets, start with simple one Array.isArray() method. The Array.isArray() method is static method determines whether the passed value is an Array.

So, how will we find if given argument passed to function is of type array? Well, remember whenever you are stuck with problem like this, it is always helpful to go back to basics. let’s start with question “what is argument passed to function? can it give any information about itself?”

and the answer is yes, remember that Almost everything in the language is an object including arrays and functions or gets treated as an object. Objects are a fundamental part of JavaScript. Even primitive data types like strings and numbers can be special temporary objects that provide extra functionality.

If you dig into this object, you can find one useful property called constructor which stores data type of data, and can be utilized for our purpose.

So let's start working on pseudocode:

First we need to initialize function, let call it isArray. Inside function write if statement to check if argument.constructor is equal to array and return the result.

Initialize function name isArray
Check if argument.constructor is equal to Array
If true return true and vice versa

But now there is an edge case to take care of, what if argument passed down is null or undefined, we still have to pass false in that case. So, to update our code we need to check if argument is null or undefined and return false if yes.

Initialize function name isArray
Check if argument is null or undefined
if true return false
Check if argument.constructor is equal to Array
If true return true and vice versa

Here is flowchart representation of algorithm:

Now let’s code it up with javaScript :

Array: length : Next is array’s length method. Well, actually it is an array property, but for learning sake, we will make function similar to it.

As its name suggests, it gives number of elements in particular array, so the function that we will be building have to return value, which represent element's number. So at the end, function will be returning value, or variable containing value which represents number of elements.

Thinking like that, we will be needing variable which keeps track of number of elements. And that first it should be of value zero. Let name it count, but how we will count elements? We need something which goes through each element and increment count variable by one. So loop sounds perfect for it.

But how can we use loop if we don't know length of the array? For this we can use for of loop which loops through the values of an iterable object.

Now, we have all essential parts to make a proper algorithm. First, initialize function, let's name it length. Then, initialize variable name count with value zero. Next, implement a for of loop, in which increment count variable by one in each iteration. And finally, return count variable.

Initialize function name length
Initialize variable name count with value 0, // which keeps track of number of elements
Implement “for of ” loop in which increment count by 1 in each iteration
return count

But what if argument pass to function is not array but other data type? To deal with this edge case, we have to check if argument is an array in the first place. Now, I will encourage you all to think, how can we check if given argument is an array? Stop and ponder.

Well, for this we can use isArray method which we have build earlier. Now, modifying the code. Check if argument is an array. If not then throw an error.