JavaScript Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations, according to MDN. Arrays are one of the basic Data storing/manipulating/handling things you will encounter when first starting with almost any programming language, if not all of them.
Simply put: Arrays are simple way of storing data. In JavaScript, unlike objects and associative arrays, simple arrays are indexing data using integers. Any array can hold as much data as you want, technically.
Simple array would look like this:
let arr = [1, 2, "test", "bob", false, 33];
/*
This array is initialized with some data.
We can initialize an empty array and add data
later.
*/
let emptyArray = [];
The best thing is you can store any type of data in an array including: integer, string, undefined, boolean, etc.
Accessing data within an array
The easiest way to access data is by using indexes. Only, you have to keep in mind that in JS indexes are 0 based, meaning that you start counting from 0 instead of 1.
let arr = [1, 2, "test", "bob", false, 33]; //Get first element console.log(arr[0]); //Output: 1 //Get third element console.log(arr[2]); //Output: "test" //Get last element console.log(arr[arr.length-1]); //Output: 33
If we use methods above we are able to access only one element at the time. But what if we want to access more than one?
let arr = [1, 2, "test", "bob", false, 33]; //Get two elements starting from third position console.log(arr.splice(2, 2)); //Output: ["test", "bob"]
By using splice method we can access multiple elements at once. Splice returns an array of elements that we selected. When you use splice method first you specify starting position, including that index, then number of elements you want to select.
let arr = [1, 2, "test", "bob", false, 33];
//Get two elements starting from third position
console.log(arr.splice(2, 2));
//Output: ["test", "bob"]
/*
Here we said to JS: starting at position number 3
(index 2 since JS is 0 based), and including position
number 3, give me two consecutive elements
*/
Adding data to an array
We initialized our array, with or without data, and now we want to add some data to it. JavaScript offers some predefined methods to add data to an array.
let arr = [1, 2, "test", "bob", false, 33];
/*
Let's say we initialized array with some data in it.
Now we want to add some data.
There are methods like unshift(), push(), splice
*/
arr.unshift("new data");
console.log(arr);
//Output: ["new data", 1, 2, "test", "bob", false, 33]
/*
unshift() method adds new data to the first position
You can add more than one element, by seperating elements with a comma
*/
arr.unshift("new data", 2333);
console.log(arr);
//Output: ["new data", 2333, 1, 2, "test", "bob", false, 33]
arr.push("some data");
console.log(arr);
//Output: [1, 2, "test", "bob", false, 33, "some data"]
/*
push() is same as unshift() except it adds data to the end
of an array.
You can also add multiple elements by seperating them with a comma
*/
arr.push("some data", "more data");
console.log(arr);
//Output: [1, 2, "test", "bob", false, 33, "some data", "more data"];
arr.splice(2, 0, "Here is new data", "This is another one", 100);
console.log(arr);
//Output: [1, 2, "Here is new data", "This is another one", 100, "test", "bob", false, 33];
/*
By using splice() method you can add multiple elements where ever
you want inside your array.
First parameter inside splice, in our case it was number 2, is on what position do you
start to add elements, 0 means you do not want to remove any elements, and at the
end you specify what elements, as many as you want, comma separated.
*/
Updating data in array
Maybe we have just enough elements in our array, but now we need to update them.
Updating arrays is all about knowing index we want to update.
let arr = [1, 2, "test", "bob", false, 33]; //we can update first element arr[0] = 0; console.log(arr); //Output: [0, 2, "test", "bob", false, 33]; //We can update third element arr[2] = "not a test"; console.log(arr); //Output: [1, 2, "not a test", "bob", false, 33]; //Or we can update last element arr[arr.length-1] = 50; console.log(arr); //Output: [1, 2, "test", "bob", false, 50]
Apart from the examples above, we can use some other methods to update multiple elements, like for() loop, but more on that in next article.
Removing data from array
We have used our data and we need to remove some of it from an array. There are also some buil-in JavaScript methods for this job.
let arr = [1, 2, "test", "bob", false, 33];
/*
For removing data from an array using
JavaScript we can, among other things,
use built-in methods like pop(), shift()
and splice();
*/
//Remove first element
arr.shift();
console.log(arr);
//Output: [2, "test", "bob", false, 33]
//Remove last element
arr.pop();
console.log(arr);
//Output: [1, 2, "test", "bob", false]
//Remove several consecutive elements
arr.splice(0, 3);
console.log(arr);
//Output: ["bob", false, 33]
/*
We previously used splice() to add
elements to an array. If we do not
specify elements that we want to add,
but only specify starting position and
number of elements, those elements will be
removed from an array, and returned as
an array.
*/
Arrays are large field in JavaScript. In this part we only covered data manipulation. Stay tuned for other parts to learn more stuff about arrays and what can you do with them.
If you have any questions or anything you can find me on my Twitter, or you can read some of the older articles like How to select element(s) using vanilla JavaScript?