Building JavaScript Array Methods from Scratch in 2024 - Easy tutorial for beginners # 1
Tags: beginners, tutorial, javascript, learning
Published: 2024-06-18 16:04:59

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8lys0lav1rouk46jrke.png)

 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hd2zfxqecw1ia7hrz7mi.png)

1. 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04fazk4p66al5wk4sb0r.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lybydb0togpjkk1c3b4c.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/doxrit66aslenbrdjhgq.png)

Here is flowchart representation of algorithm:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oz71lxk4dm5c6n5rxnue.png)
 Now let’s code it up with javaScript :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0p0ipdj8rwomayds92gr.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bodc2avts23h89hbw50g.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50xwdc4uip2zh2jlge0v.png)
2. 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbujlypfei6me1n6r1fn.png)

 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vegiaq9qkh43ifkkdgrd.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvon0u4uigr3nq9ub1tk.png)

Here is the flowchart representation of the algorithm;

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dl700ho4wjf936yelt9h.png)
 Now let's code it up with JavaScript:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf2d7y3lfmtz67845caf.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jcn6hh0ikmis5dbyy83.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/400ownztqtbwvkdk4pvg.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsvszp31dh5odzbce8bk.png)

Well, that's all for today. I hope this post was useful for you and thank you for reading.