DEV Community

Cover image for A Comprehensive Guide to JavaScript - Part 4 - Arrays
Prajwal
Prajwal

Posted on

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!

Top comments (4)

Collapse
 
ericbabi12 profile image
E. Babi

I thought 'slice' method will create a copy of the existing array. Enlighten me here.

Collapse
 
kgprajwal profile image
Prajwal

Yes! slice will create a copy of the existing array when assigned to a new value, the original array is not bothered. Example:

var arr = ["school", "college", "restaurant", "hospital"];
var newarr = arr.slice(0, 2);
console.log(arr);
console.log(newarr);

Output:
["school", "college", "restaurant", "hospital"]
["school", "college"]

Collapse
 
ericbabi12 profile image
E. Babi

Great. So the conclusion is that if you dont specify the arguments (0,2), arr.slice() will reproduce the original array right?

Thread Thread
 
kgprajwal profile image
Prajwal

Yes! Just arr.slice() will reproduce the original array.