Don't start learning JavaScript without learning these Array Methods

Don't start learning JavaScript without learning these Array Methods

JavaScript is a programming language that powers the dynamic behaviour on most websites. Along side HTML and CSS. It is core technology that makes the web run.

What is an Array?

The Array object, enables sorting and collection of multiple items under single variable name and has number of methods for performing common array objects

Array = [0, 1, 2, 3] // An Array
Animals = ["cats", "dogs", "bears", "sheep"] 
Animals[0] = "cats" // Array indexing starts from zero
Animals[3] = "sheep"

What is a Method?

Methods return information about an object and are called by appending an instance with a period . the method name and parentheses.

Math.random(); //Returns a random number between 0 and 1

Here random is a method in library Math.

Some important methods of an Array:

Let us initiate an array to work with to understand these arrays more clearly.

let arr = ["cats", "dogs", "bears", "sheep"]

isArray( ):

  • arr.isArray() This method returns weather passed value is array or not.
let st = 25;
// True
// False

indexOf( ):

  • arr.indexOf("item") Returns the index of the passed item in an array
// expected output > 1

push( ):

  • arr.push( items ) Adds items into end of the array.
  • This method modifies the original array
// ["cats", "dogs", "bears", "sheep", "camel"]

pop( ):

  • arr.pop( ) Removes item from the end
  • This method modifies the original array
let pop = arr.pop();
// "camel"
// [ 'cats', 'dogs', 'bears', 'sheep' ]

shift( ):

  • arr.shift( ) This method changes the original array by removing the first item from the array.
let shift = arr.shift();
// 'cats'
// [ 'dogs', 'bears', 'sheep' ]

unshift( ):

  • arr.unshift( items ) This method changes the original array by adding items to beginning of the array
// [ 'birds', 'dogs', 'bears', 'sheep' ]

splice( ):

  • arr.splice( start, number of items, replacement items ..... ) This method is used to change contents of an array by removing or replacing elements in an array.
arr = ["India", "USA", "Russia", "Ukraine" "China", "Italy", "Spain"];
arr.splice(2, 3, "Taiwan");
// This removes Russia Ukraine China and replaces with Taiwan

slice( ):

  • Arr.slice(start, end) This method returns a copy of the portion of the original array to a new array object.
arr = ["India", "USA", "Russia", "Ukraine" "China", "Italy", "Spain"]
arr.slice(1, 3) 
// Returns sliced array ["USA", "Russia"] 
// Ending point is exclusive

sort( ):

  • arr.sort() This method sorts the elements in an array and returns the reference to the same array, new sorted.
  • The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.
const months = ['March', 'Jan', 'Feb', 'Dec'];
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
// expected output: Array [1, 100000, 21, 30, 4]

Iteration of array items using methods:

We can iterate array items using some inbuilt methods in an array let us see some of them.

forEach( ):

  • arr.forEach( function ) This method executes provided function to every item in the array.
  • This method returns nothing
let square = (e) => console.log(`${e * e}`);
let arr = [1, 2, 3, 4, 5];
// prints square of each item in array

every( ):

  • arr.every() This method checks if every element passes the given condition.
  • Returns boolean
let graterThan = (e) => e > 3;
let arr = [1, 2, 3, 4, 5];
let ishigh = arr.every(graterThan);
// False

map( ):

  • This method creates a new array populated with results of the function passed with each item as a parameter.
let square = (e) => e * e;
let arr = [1, 2, 3, 4, 5];
// [ 1, 4, 9, 16, 25 ]

In this article I've just touched most commonly used methods for more refer to MDN Docs