10 JavaScript Array Methods as Simple as Possible
How to become a master of JavaScript arrays
As a front end developer, learning JavaScript is scary. And if you are anything like me, you don’t know where to go, where to start. Thousands of resources to choose from which just makes us anxious and not learn anything. Here is something that helped me get better at the arrays. Hope it helps you too.
If you want to know more about JavaScript functions, you can read this short article.
JavaScript array is a special type of variable that lets you store multiple values just like a list.
Most programming languages have arrays, but the difference in JavaScript arrays is that you can store different data types in an array which is not possible in other programming languages.
1. Push
The push() method adds a new element at the end of an array and returns new length. To add items in the beginning use unshift. This can be used in adding an item to a to do list.
const myArray = ["react", "angular"];
myArray.push("vue");//["react", "angular", "vue"]
2. Slice
The slice() method selects a part of an array, and returns the new array. It is very similar to slicing bread. Remember array index starts from 0. So myArray.slice(1,2) means you want to make a cut in the bread loaf at positions 1 and 2. That will give you the middle part of what lies between positions 1 and 2.
const myAarray = ["react", "angular", "vue"];
myArray.slice(1,2);//["angular"]
3. Tostring
The tostring() method converts an array to a string, and returns the result.
const fruits = ["mangoes", "apples", "banana"];
fruits.tostring();//"mangoes,apples,banana"
4. Shift
The shift() method removes the first element of an array, and returns that remaining.
const fruits = ["mangoes", "apples", "banana"];
fruits.shift();//Gives ["apples", "banana"]
5. Unshift
The unshift() method adds an element at the beginning of an array.
const fruits = ["mangoes", "apples", "banana"];
fruits.unshift("papaya");//Gives ["papaya", "mangoes", "apples", "banana"]
6. Map
The map() method creates a new array with the results of calling a function for every array element.
const arr = [1, 2, 3, 10];
arr.map(x => x * 2);// returns [2, 4, 6, 20]
7. Pop
The pop() method pops off (removes) the last element of an array, and returns the last element.
const fruits = ["mangoes", "apples", "banana"];
fruits.pop();//returns ["banana"]
8. Filter
The filter() method creates an array filled with all array elements that pass a test (provided as a function).
const js = ["react", "vue", "angular"];
js.filter(word => word.length > 3);//returns the array ["react", "angular"] following the condition we //specified
9. Includes
The includes() method determines whether an array contains a specified element. It returns boolean true or false.
const fruits = ["mangoes", "apples", "banana"];
fruits.includes("apples");//True
10. Length
This is the most basic one. The length() method gives the number of elements present in an array.
const array = ["grapes", "oranges", "mangoes"];
console.log(array.length());//Returns 3 in console
The Conclusion
JavaScript can be daunting, especially if you are a beginner. But some simple guides can help us reduce the anxiety we get during the learning process. These are the ten JavaScript array methods for you. This helped me in my learning journey. And I believe it will be of importance to you, too.
Further if you want to know more about JavaScript functions, you can read this short article.
