Think of JavaScript Arrays as that list where you can write down a number of things you want to do or buy, small list or a large list, related or unrelated.
What is a JavaScript Array
An array is simply a type of JavaScript data structures that enables the nesting of elements in a collection under a named variable.
let computers = [element1, element2, ……];
// variable array with nested elements
Creating an Array
You can declare or create an array by using the square brackets ‘[]’ using a variable and then separating elements using a comma(,). You can do this using the array literal notation or the array constructor
Formula for creating an array
variable arrayName = [element1, element2, element3........]
const computers = [“hp”, “apple”, “dell”]; // array literal notation
const computers = newArray [“hp”, “apple”, “dell”]; // array constructor
Two-dimensional/ Multi-dimensional arrays
You can either have two-dimensional arrays or arrays nested in other arrays which are referred to as a multi-dimensional array.
const computers= [“hp”, “apple”, “dell”]; // two dimensional arrays
const computers = [“hp”, “apple”, [“dell”, “compaq”] ]; //multidimensional array
To determine the Length of an array
The length property is simply used to count elements in an array.
const computers = [“hp”, “apple”, “dell”];
console log(computers.length); // prints 3
Accessing Arrays with Indexes
Arrays make use of the zero-index numbering system like the strings, you can easily access elements in the array. This simply means, the first element in an array is the zero(0) element.
const computers = [“hp”, “apple”, “dell”]
console.log(computers[0]) // prints hp since it’s the first element
console.log(computers[1]) // prints apple since it’s the second element
console.log(computers[2] // prints dell since it's the third elemet
Arrays are mutable and dynamically sized so elements in an array can be arranged in any order. and can be of any size. Arrays have built-in methods that make it easy to manipulate the values of elements, add, remove and even change their position.
Array Methods
Adding elements to Array
When adding elements to an array, you can use the unshift()method or the push() method.
The unshift() method adds elements to the beginning of an array.
const computers = [“hp”, “apple”, “dell”];
computers.unshift(“toshiba” , “compaq”);
console.log(computers); // prints toshiba, compaq, hp, apple, dell
The push() method adds elements to the end of an array.
const computers = [“hp”, “apple”, “dell”];
computers.push(“toshiba” , “compaq”);
console.log(computers); // prints hp, apple, dell, toshiba, compaq
Removing elements from an array
The shift()method removes elements from the beginning of an array.
const computers = [“hp”, “apple”, “dell”];
computers.shift();
console.log(computers); // prints apple, dell since hp has been removed
Thepush() method removes elements from the end of an array.
const computers = [“hp”, “apple”, “dell”];
computers.push();
console.log(computers); // prints hp, apple since dell has been removed
Merging Two Arrays
You can easily merge two arrays with the concat() method. This method merges two arrays creating a new array with the merged elements, leaving the individual arrays themselves unmerged.
const letters1 = [A B, C];
const letters2 = [D, E, F];
const letters3 = letters1.concat(letters2);
console.log(letters3); // prints A, B, C, D, E, F]// letters1 and letters2 still remain unchanged
The splice() and slice() method
The splice() method can be used to add or remove any number of elements in a row from anywhere in an array. This method can add or remove up to three(3) elements from an array and create a new array for the removed elements.
const letters = [A, B, C, D, E, F];
const splicedItems = letters.splice(3, 2); // this means at index 3, delete 2 elements
console.log(splicedItems) = [C, D]
console.log(letters)=[A, B, E, F]
The slice()method is used to copy a selected number of elements to a new array without changing the old array. You can use this method to copy or extract more than two(2) elements at a time.
const letters = [A, B, C, D, E, F];
const slicedItems = letters.slice(3, 2); // this means at index 3, copy 2 elements
console.log(slicedItems) = [C, D]
console.log(letters)=[A, B, C, D, E, F] // remains unchanged
You can now easily create, resize, edit arrays. There are also more advanced methods that perform other functions in JavaScript Arrays . I hope these tips aid with better understanding of arrays.
I hope you found this useful. I would love to hear from you so please feel free to drop a comment or connect with me on Twitter , LinkedIn, or you can check out my Github page for some of my projects.