What is Zero-Index?
Zero-index is a way of counting in JS that starts at 0 instead of 1.
var iLove = [ "wine", // 0 position "code", // 1 position "walking", // 2 position "dogs" // 3 position ];
So an array of 4 items is numbered 0 – 3.
We can access an item within an array using their position number. So for example, to select the 1st item within our array, we would do this:
var iLove = [ "wine", "code", "walking", "dogs"]; console.log(iLove); // Output: 'wine'
Using the console.log, this would output the first item, “wine”, because wine is positioned at number 0.
We can also select individual characters in a string. But note that a space within a string will count as one character. And don’t forget to start counting at zero:
var hello = "My name is Leanne"; console.log(hello); // will output 'm'
We can also update/change items within an array using their index number like so:
var iLove = [ "wine", "code", "walking", "dogs"]; iLove = "running"; console.log(iLove) // Output: wine, code, running, dogs
This says to change the item at position number 2 in the iLove variable to “running”. So item number 2 is “walking”. This changes “walking” to “running” when we log to the console.
Built in properties
Arrays have multiple built in properties that help us with various tasks. Let’s take a look at a few of the common ones that we may find helpful in our JS journey.
The .length property is a handy property that allows us to easily count how many items are stored within an array. We can do this on any variable that holds an array and is easily applied by adding .length to the end of the array you wish to count:
var iLove = [ "wine", "code", "walking", "dogs"]; console.log(iLove.length); // Will return 3
The above code will return the number of 3, since there is 3 items within my array.
The .push() method let’s us add items on to the end of our array. It pushes them onto the end so that when we run our function, it will run the pushed items onto the end:
var iLove = [ "wine", "code", "walking", "dogs"]; iLove.push("shopping", "technology"); console.log(iLove); // output: wine, code, walking, dogs, shopping, technology
The .pop() method is very similar to the .push() method, however instead of adding items on to the end of an array, the .pop() removes the last item from the end of an array:
var iLove = [ "wine", "code", "walking", "dogs"]; iLove.pop(); console.log(iLove); // Outputs wine, code, walking
You can see that the last item of the array, “dogs” has now been removed and will not run with the rest of the list.
Just as we can remove the last item of an array, we can also remove the first item with the .shift() method:
var iLove = [ "wine", "code", "walking", "dogs"]; iLove.shift(); console.log(iLove); // Outputs: code, walking, dogs
We can also add items to the beginning of our array using the .unshift() method:
var iLove = [ "wine", "code", "walking", "dogs"]; iLove.unshift("coffee"); console.log(iLove); // Outputs: coffee, wine, code, walking, dogs