Arrays are collections of items. These items can be of the same type or different but arrays provide a way to group them together into a common collection. An array being a collection, is stored and used differently than other primitive data types. Array values are indexed which means in order to obtain any value from this collection, a developer should use it’s index (starts at 0) within the collection itself. Let’s see a visual representation of an array.
In the example above, as you can see there are 10 numbers in the array. The length of the array is 10 however in order to extract any value for e.g. 60, a developer has to use the index value for that element which is 5 considering the index value starts at 0.
. Let’s take a look at an example. As seen below, the
length of the array can be figured out by using the
length property on the array itself. In order to access a particular element from the array, use it’s index value inside of the square brackets. An item can be changed in an array by reassigning it a new value using the equal sign
``` const grades = [50, 78, 94, 65, 79, 82, 100, 91]; console.log(grades.length); // prints 8 // access the value 79 using its index value console.log(grades); // prints 79. Index starts at 0. // change value at index 0 from 50 to be 86 grades = 86 console.log(grades); // prints [86, 78, 94, 65, 79, 82, 100, 91] ```
Arrays Default Methods
Arrays provide some useful built-in methods to use it efficiently. Here is a MDN Documentation on Arrays and it’s methods. We will explore the most commonly used methods listed below:
Array Push or Add Elements to an Array
An element can easily be added to an existing array by using
push(). This method will add an element to the end of the array and return the new length of the array for future use.
``` const grades = [50, 78, 94, 65, 79, 82, 100, 91]; console.log(grades.length); // prints 8 // add 86 to the end of grades array // returns new length of the array const newGradesLength = grades.push(86); console.log(grades); // prints [50, 78, 94, 65, 79, 82, 100, 91, 86] console.log(newGradesLength); // 9 ```
Array Pop or Remove Elements to an Array
An element can easily be removed from an existing array by using
pop(). This method will remove an element from the end of the array and return that element.
``` const grades = [50, 78, 94, 65, 79, 82, 100, 91]; console.log(grades.length); // prints 8 // remove last element 91 from the end of grades array const lastElement = grades.pop(); console.log(grades); // prints [50, 78, 94, 65, 79, 82, 100] console.log(grades.length); // 7 ```
includes() method is very useful to find if a certain element exists in the array. It returns
false indicating whether the element was found or not.
``` const grades = [50, 78, 94, 65, 79, 82, 100, 91]; console.log(grades.includes(86)); // prints false console.log(grades.includes(91)); // prints true ```
indexOf() method is very useful to find if a certain element exists in the array and if so, at what index it was found. If an element is not found, the index returned will be
``` const grades = [50, 78, 94, 65, 79, 82, 100, 91]; console.log(grades.indexOf(86)); // prints -1 console.log(grades.indexOf(91)); // prints 7 ```
Kick-Start Your Web Developer Career
We offer a wide variety of programs and courses built on adaptive curriculum and led by leading industry experts.
- Work on projects in a collaborative setting
- Take advantage of our flexible plans and scholarships
- Get access to VIP events and workshops
Recommended Courses for Web Developer
The Web Development bootcamp is an intensive, hands-on learning experience, designed to introduce the skills and concepts required to build modern web applications.
The part-time Web Development course is designed to provide a crash course in web development, with introductions to HTML, CSS, and the Bootstrap framework.