JavaScript Array Methods Level 1 pop push indexOf length splice

Arrays are useful. Array methods make arrays even more useful. The better I get at programming, the more uses I find for them. In this article, I am going over what I call: Level 1 Array Methods using JavaScript.

Have you read through Mozilla Developer Network’s documentation on arrays? It’s great, but it can be a little overwhelming (especially if you are new to programming and/or arrays). Below, I have written an easy to follow quick start on the array methods I believe are level 1 that I use most in my programming.

If you are not new to arrays, then click here to skip the Quick Notes for Beginners with Arrays section.


Three Quick Notes for Beginners with Arrays

1) Arrays have an index that starts at 0.

An index is a number assigned to an item as it enters the array. The number can be used to locate an item in the array. (See below.)

		0    1    2    3
const myArray = ['a', 'b', 'c', 'd'];

Item c is located at index 2. It is the third item in the list but since an array’s index starts at 0, it is located at position 2.

2) How to declare an array.

const arrayName = [];
// or
const arrayName = ['Item0', 'Item1', 'Item2', 'Item3'];

Use brackets to declare an array. Use empty brackets when you do not have values for your array yet. The name of my array is arrayName but you can call your array just about anything (as long as it does not start with a number).

3) Array Values - Strings and Numbers

// Strings
const arrayWithStrings = ['Apples', 'Bananas', 'Oranges', 'Mangos'];
// Numbers
const arrayWithNumbers = [10, 11, 12, 13];
// Both Strings and Numbers
const arrayWithBothStringsAndNumbers = ['Apple', 11, 'Oranges', 'Bananas', 23, 47, 85];

Items in the array can be strings or numbers. Strings have to be surrounded by single ' or double quotes " and numbers do not. Yes, you can have both strings and numbers in the same array.


Intro Over… On To Array Methods…


Add Item to end of Array

arrayName.push('Tom'); // adds 'Tom' to end of array

Push adds the item in parenthesis to the end of the array.

Use case: When you need to add a username to the array of logged in users.

// Example:
const arrayName = ['Harry', 'Steve', 'Jack'];
// add Tom to array
arrayName.push('Tom');
// log array to console to see what is in array
console.log(arrayName);
// output: ['Harry', 'Steve', 'Jack', 'Tom'];


Find Index of Item in Array

arrayName.indexOf('Tom'); // returns index number of where Tom is in our array

If the item you put in parenthesis is in the array, indexOf will return the index number of the item. If the item you are searching for is not in the variable you specified, then indexOf will return -1.

Use case: Check if the user is already in your array.

// Example:
const arrayName = ['Harry', 'Steve', 'Jack', 'Tom'];
// log to console the index of Tom in array
console.log(arrayName.indexOf('Tom'));
// output: 3

In the example above, indexOf returns the number 3. To see what indexOf returned, we logged it to the console using console.log().


Remove Item in Array by Index Number

arrayName.splice(0, 1);

Splice takes two parameters, Start and deleteCount. The Start is the index number of the item to start from, and deleteCount is how many to delete. For this example, I used 0 as the Start and 1 as the deleteCount.

Use case: Remove username from the array when the user logs off.

// Example
const usersOnline = ['Harry', 'Steve', 'Jack', 'Tom'];
// Delete Jack
usersOnline.splice(2, 1);
// output: ["Jack"]
// log array to console to verify that 'Jack' was removed from array
console.log(usersOnline);
// output: ['Harry', 'Steve', 'Tom']

Now usersOnline array is just ['Harry', 'Steve', 'Tom'].


Remove From End of Array

arrayName.pop();

Pop removes the last item in the array.

Use Case: When you are doing Last In First Out (LIFO), pop will get the last item you added to the array out for you.

// Example
const usersOnline = ['Harry', 'Steve', 'Jack', 'Tom'];
// Remove last item in array
usersOnline.pop();
// output: 'Tom'
// log array to console to see if last array element has been removed
console.log(usersOnline);
// output: ['Harry', 'Steve', 'Jack']


Bonus: Check Array’s Length

arrayName.length;

Returns the count of items in the array. The count starts with 1.

Use Case: When you need to capitalize the first letter of each word in the array.

// Example
const arrayName = ['Harry', 'Steve', 'Jack', 'Tom'];

//loop through each item in arrayName array
for (let i = 0; i < arrayName.length; i++) {
  // capitalize first letter of each word
  arrayName[i] = arrayName[i].toUpperCase();
}

//log to console the length of array to prove to the people I am not lying
console.log(arrayName.length);
// output: 4


Those are my most used level 1 array methods.

I hope this article was quick, easy to follow, and helped you learn. Let me know if I need to expand on something or explain it better (in the comments section below).

Next up… Level 2 Array Methods.