In JavaScript arrays plays a big part in listing items or having a list coming from an API(source). Arrays are a special type of object and can be a single variable that is used to store similar data or data from a common source. When a typeof operator is used for an array it returns “object”. Usually, arrays are best described as arrays in JavaScript.
let colors = ["blue", "red", "white" ]
// LOG: typeof colors: ‘object’
In the example shown above, the items listed in a particular order, are surrounded by square brackets ([]) and separated by commas (,). In this case, the elements in the array are strings, but arrays can store any data type in JavaScript. The cool thing about arrays is the data type in the array remains the same and has the same properties as singular variables in JavaScript.
Accessing Array Elements
let favoriteFruits = ["watermelon", "mango", "strawberry", "banana"];
To be able to access the elements within the array JavaScript uses non-negative integers as indexes and is always zero-indexed. The first element of the array starts at 0, the second element is at 1, and the last element is always one less than the number of elements in the array.
// [0] = watermelon
// [1] = mango
// [2] = strawberry
// [3] = banana
If we want to access “strawberry”, we need to use the bracket notation. Also, the “length” property of an array is the number of elements in an array.
favoriteFruits[2];
// ‘strawberry’
favoriteFruits.length;
// 4
To access the final element, we use the “.length-1” property. If an index does not exist in an array it will return as undefined.
favotiteFruits.length-1;
// banana
favoriteFruits[47];
// undefined
Now that we touch a bit about what are arrays, there are array iteration methods. Iteration methods operates every single element in an array like a loop. A loop is a program that executes a particular function over a number of times it's set to be. Let’s consider forEach method.
forEach()
arrayName.forEach(function, argument)
forEach() method uses dot notation to join the method to the array and takes in two parameters, which can be a callback function and an argument. A callback function is a First Class Function, which has the ability to use primitive types(boolean, strings, numbers) and is passed as an argument to another function. The second argument is an optional parameter.
let numbers = [5, 47, 24, 14, 100];
let numbersAddFive = numbers.forEach((element) => console.log(element + 5));
A friendly reminder arrow function (=>) with multiple parameters requires parentheses and with a simple expression, the return keyword is not needed. In this case, the console.log() acts as the return keyword and the forEach() method loops over the “numbers” array; while putting the (element + 5) function adding 5 to every element.
// 10
// 52
// 29
// 19
// 105
Yet, this does not return a new array, but an ordered list of the numbers array. In order to return a new array, we need to use an array method called .push(). The .push() method can add multiple elements to the end of an array and creates a new array.
let newSetOfNumbers = [];
numbers.forEach((element) => newSetOfNumbers.push(element + 5));
console.log(newSetOfNumbers);
// LOG: [10, 52, 29, 19, 105];
I declared an empty array for newSetOfNumbers and used the .push() method to fill up the empty array from the callback function in the forEach() method. The forEach() method targets every element and performs newSetOfNumbers.push(element + 5), which outputs into the newSetOfNumbers while having the same order of the elements as in the numbers array. When newSetOfNumbers is console.log it returns an array.
I barely touch the topic of arrays and briefly went into array loops using forEach() method. I hope this article helped you add more information to your knowledge about arrays. Feel free to leave feedback because I just started on the journey to becoming a Software Engineer.
Citation
“Array - Javascript: MDN.” JavaScript | MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array.
JavaScript Array Iteration, https://www.w3schools.com/js/js_array_iteration.asp.
“Array.prototype.foreach() - Javascript: MDN.” JavaScript | MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach.
Top comments (0)