Creating Arrays (data-list)
An array in JavaScript is basically an order list. Every item inside the array list is place in a position known as an index.
Arrays begin at index 0 for the first item and then the following index position 1 for the next item in the array,and so on.
Creating an Array literal
One way to create an array in javascript is to use an array literal (wrapping items inside of square brackets ['item1', 'item2']. Each item inside the array is known as an individual element. Each element is wrapped in quotes single or double if the data type is string or backticks if you are using template literals for data interpolation.
Arrays data types
Arrays can store any data types. All primitive data types from Boolean, Null, Undefined, Number, String, Symbol. Though it is not recommended to use Null and Undefined because they can cause some quirks.
Example of quirks storing undefined inside an array literal. In the example below we can see that we are console logging some of the array elements by using bracket notation and passing in the index value we want to log to the terminal.
Towards the end of the array we try to log an element at index 5, but there is no element at index 5 so the output returns undefined. So basically undefined is use to display values that are yet not defined. So it is best to follow good practice and not define variables with a value of undefined or store an array element in the same way.
Examples of Array data types
As mentioned above arrays can hold any data types as elements they are place inside an array and are separated by a comma ,. Here is a example of an array with different data types store as elements
The example above has some different data types including string, number, boolean, object. We even see another empty array inside our array. (arrays are known and consider to be a special kind object in javascript.
Accessing Array elements
Each element stored inside the array has a numbered position known as an index. Remember array indexes start at 0 not 1. We can access stored elements inside the array using their corresponding index.
In the example above we retrieved the 2nd element index at spot 2 inside our array. We do this by referencing the array name or better known as an identifier, followed by bracket notation [2]. The console.log returns the value mango which is stored in index 2 inside the fruits array.
Storing array elements to variables
If we wanted to store individual element values that are stored inside our array to variable we are able to do that
If an array is store in a const variable we are still able to modify elements inside that const variable array. This is known as mutable. Meaning we can change the elements inside that array even if it was defined with a const variable.
Updating or changing elements
If for some reason we wanted to change an element of our array we can do so by using bracket notation as mentioned above and the index of the element we want to modify, followed by the assignment operator = and the new value. Again can be any data type.
Returning the number of elements in an array
If we want to know how many elements are in our array or any given array we can use a built in array property length. The length array property returns the number of elements in an array. We access the length property with dot notation array.length .
Adding elements to an array
If we wanted to add new elements to an array dynamically using a built in JavaScript method we could do so with the .push() built in method.
We use the push method by using dot notation and then the method name, followed by invocation operators (). The push method can take as many arguments as you like but a large numbers of arguments can cause performance and memory usage issues for your application.
An Important thing to know is that the .push() method is known in JavaScript as an destructive array method that will change and modify the original initial array.
Removing the last element in an array
Just like the .push() method that allows us to add elements to the end of an array. The .pop() method removes the last item in an array. The .pop() method does not take any arguments and is also known as a destructive array method.
The .pop() method also has a return value that we can capture with a variable for later use, the .pop() method returns the last element in the array that was removed.
Removing the first element in an array
If we wanted to remove the first element in an array we can use yet another built in JavaScript method .shift(). The .shift() method does not take any arguments and is also known as a destructive array method.
Adding an element at the start of an array
Let's say we wanted to add a new element to the start of the array. Well you guess it! there is a built in array method for that as well. The .unshift()method takes any amount of arguments we would like to add as elements to the start of the array and is also known as a destructive array method.
Extracting a portion of elements of an array
If we want to remove a portion of elements from a given array we can use another built in method .slice(). The slice method takes 2 arguments the starting index (where to start the extraction) and the ending index (where to end the extraction), if the ending index is not given .slice() method will extract starting from the starting given index to the end of the array. The .slice() method is a non-destructive array method it instead will extract the elements and return a new array.
We must save the .slice() method statement in a variable to be able to see the new array with the extracted elements. If we console.log() the new array it will only output the arrays extracted from start to ending index. If we console.log the original array it will output all values, as it was not modified.
Search for a particular element index in an array
If we wanted to search for a particular index of an element, we can use the .indexOf() method. The .indexOf() method takes in 1 argument the element we are looking for and an optional second argument the starting index of where to start the search. The .indexOf() method is a non-destructive array method it instead will extract the element and return a new array which we save to a variable.
If we provide an element that does not exist in the array or if we start at an index that is passing the the index of the element we want, the .indexOf() method will return -1 for both of these occurrences.
Top comments (0)