Array Methods Part 1

Subscribe to my newsletter and never miss my upcoming articles

Javascripts Array Built-in Methods

In this article I will give you some of the most used methods of an array in javascripts. a short explanation and one or two examples.

Length

 This method will take an array as input and return its length.

example:

let coins = ['dollar', 'half dollar', 'quarter', 'dime', 'nickel', 'penny'];
console.log(`The length of array coins is: ${coins.length}`);

See live code here

Now let us access an element of this array, using index position.

First Item ( ' dollar' )

let first = coins[0];
console.log(`First element of coins: ${first}`);

Last Item ( 'penny' )

let last = coins[coins.length - 1];
console.log(`First element of coins: ${last}`);

forEach

This method allows you to loop thru the whole array visiting each element, and do whatever needs to be done each.

<!--  Iterate an array  -->
console.log(" Index       Array Item");
console.log("-------     ------------");
coins.forEach( (item, index, array) => {
    console.log( " ".repeat(6 - index.length) + index ,  " ".repeat(20 - item.length) + item);  
});

push()

Push allows you to add an element to the end of the array

<!--  Add an Item to the end of array  -->
  coins.push("fake coin-end");
  console.log(`\nCoins: ${coins.join()}\n`);

returns: 'dollar', 'half dollar', 'quarter', 'dime', 'nickel', 'penny', 'fake coin-end'

unshift()

Unshift allows you to add an element to the start of the array

<!--  Add an Item to the start of array  -->
  coins.unshift("fake coin-start");
  console.log(`\nCoins: ${coins.join()}\n`);

returns: 'fake coin-start' 'dollar', 'half dollar', 'quarter', 'dime', 'nickel', 'penny', 'fake coin-end'

pop()

Pop allows you to remove the last element from an array (end of array)

<!--  Remove an Item from the end of array  -->
  coins.pop();
  console.log(`\nCoins: ${coins.join()}\n`);

returns: 'fake coin-start' 'dollar', 'half dollar', 'quarter', 'dime', 'nickel', 'penny'

shift()

Shift allows you to remove and element from start of array

<!--  Remove an Item from the start of array  -->
  coins.shift();
  console.log(`\nCoins: ${coins.join()}\n`);

*returns: 'dollar', 'half dollar', 'quarter', 'dime', 'nickel', 'penny'

indexOf()

IndexOf allows you to find the current position of a given 'element' within the array.
note: (' dollar' is in position 0 within the array )

<!--  Find the numeric index of an item within the array  -->
     let itemIndex = coins.indexOf('quarter');
     console.log(`Item in Coins at index(${itemIndex}): ${coins[itemIndex]}`);

Returns: Item in Coins at index(2): *quarter

splice()

This method allows you to remove elements from any position within the array.

<!--  Remove an item from Coins, given an index position  -->
<!--  Removes 1 or a range of elements from index position  -->
     let idx = 2;
     let itemsToRemove = 1
     let newCoins = coins.splice(idx, itemsToRemove);    
     console.log(`${newCoins}`);

Returns: dollar,half dollar,dime,nickel,penny (quarter is gone)

Slice()

Slice allows you to clone, copy one or more elements from a given array.

 <!-- Clone an array -->
  let newArray = coins.slice();
 console.log(newArray);

returns: Array [ "dollar", "half dollar", "dime", "nickel", "penny"]

 <!-- copy a section of the array only -->
 <!-- END position is not inclusive -->
     coins = ['dollar', 'half dollar', 'quarter', 'dime', 'nickel', 'penny'];
     let start = 1;
     let end   = 3;
     let part1 = coins.slice(start, end);
     console.log(part1);

Returns: Array [ "half dollar", "quarter"]

<!-- copy another section of the array only -->
<!-- END position is not inclusive -->
     let start = 2;
     let end   = 5;
     let part2 = coins.slice(2,5);
     console.log(part2);

Returns: Array [ "quarter", "dime", "nickel"]

Join

This method Creates and returns a new string. It concatenates all elements in the given array

  <!--  Join coins array into an string comma separated  -->   
    let coinsJoined = coins.join();
    console.log(`Coins joined comma separated: ${coinsJoined}`);

returns: "Coins joined comma separated: dollar,half dollar,quarter,dime,nickel,penny"

  <!--  Join coins array into an string no spaces -->   
     coinsJoined = coins.join('');
     console.log(`Coins joined into one string : ${coinsJoined}`);

returns: "Coins joined into one string : dollarhalf dollarquarterdimenickelpenny"

Let's Connect

Array Methods Part 1

#Next article will be: Array Methods Continuation

Comments (5)

Syed Fazle Rahman's photo

Hey Sergio Rueda, please tag your articles. Without tags, it'll not be discoverable on Hashnode's feed.

Also, you can embed codepen using the following syntax:

%[codepen-url]
Show +2 replies
Sergio Rueda's photo

Thank you so much. How do I repost an updated article?

Syed Fazle Rahman's photo

You don't have to repost. Just edit the article and make the changes. It will start appearing on Hashnode feeds. Sergio Rueda