A Comprehensive Guide to JavaScript - Part 4 - Arrays

kgprajwal

Prajwal

Posted on July 5, 2020

A Comprehensive Guide to JavaScript - Part 4 - Arrays

Arrays

Arrays are list-like objects. They are just single objects that contain multiple values stored in a list.

var array = [1, 2, 3, 4, 5];
Enter fullscreen mode Exit fullscreen mode

Properties of Arrays

  • length: Returns the number of elements in the array.
array.length // returns 5
Enter fullscreen mode Exit fullscreen mode
  • constructor: Returns the constructor function for the object.
array.constructor; // returns the array constructor
Enter fullscreen mode Exit fullscreen mode
  • prototype: Add properties and elements to an array object.
array.prototype; // refers to array object itself
Enter fullscreen mode Exit fullscreen mode

Important Methods

  • push(): Add an element at the end of the array.
array.push("10"); // [1, 2, 3, 4, 5, 10]
Enter fullscreen mode Exit fullscreen mode
  • pop(): Remove an element from the end of the array.
array.pop(); // 10
Enter fullscreen mode Exit fullscreen mode
  • shift(): Remove the first element and return it.
array.shift(); // 1
Enter fullscreen mode Exit fullscreen mode
  • unshift(): Add an element to the beginning of an array and return length.
array.unshift(0); // 5
Enter fullscreen mode Exit fullscreen mode
  • concat(): Join two arrays together and return a copy of the joined array.
array2 = [99, 100];
array.concat(array2); // 0, 2, 3, 4, 5, 99, 100
Enter fullscreen mode Exit fullscreen mode
  • find(): Find the first element in an array that satisfies a condition.
array.find(function satisfy(num) {
    return num>4; // 5
});
Enter fullscreen mode Exit fullscreen mode
  • sort(): Sort the array.
array.sort(function(a, b){return a-b}); // 0, 2, 3, 4 ,5, 99, 100
Enter fullscreen mode Exit fullscreen mode
  • filter(): Make a new array from an existing one after satisfying a condition.
array.filter(function satisfy(num) {
    return num>4; // 5, 99, 100
});
Enter fullscreen mode Exit fullscreen mode
  • forEach(): calls a function for every element in the array.
var array = [0,2,3,4,5,99,100];
var array2 = [];
array.forEach(function mult(num) {
    array2.push(num*num);
});
array2; // [ 0, 4, 9, 16, 25, 9801, 10000 ]
Enter fullscreen mode Exit fullscreen mode
  • map(): Creates a new array with results of a function called for each and every element in the array.
array3 = array2.map(Math.sqrt)
array3; // [ 0, 2, 3, 4, 5, 99, 100 ]
Enter fullscreen mode Exit fullscreen mode
  • reduce(): Reduce values of an array to one value.
var array = [0,2,3,4,5,99,100];
var s = array.reduce(function sub(total, num) {
  return total + num; // 213
});
Enter fullscreen mode Exit fullscreen mode
  • slice(): Select and return part of an array.
var array = [1, 2, 5, 99, 101];
array.slice(0, 2); // [ 1, 2 ]
Enter fullscreen mode Exit fullscreen mode
  • splice(): Add/remove element from an array.
var lang = ["HTML", "CSS", "JS", "Bootstrap"];
var removed = lang.splice(2, 1, 'PHP', 'React');
console.log(lang); // HTML,CSS,PHP,React,Bootstrap
console.log(removed); // JS
Enter fullscreen mode Exit fullscreen mode

These methods will come in handy when working with data on the web and I hope you have a fair understanding of the most important ones by now.

Thank You!

💖 💪 🙅 🚩
kgprajwal
Prajwal

Posted on July 5, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related