Breaking JS

Arrays and Objects

Arrays and Objects | JavaScript for Beginners | PIXEL BOUTIQUE | #BreakingJS

In real life, we organise our life and the data in it using lists. Arrays are JavaScripts version of lists. They are a way of organising a list within your code. An array holds multiple items that are ordered, which means that each item has a numbered position within the array. This is numbered using the JavaScript zero-index.

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.

Property Access

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[0]); // 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[5]); // 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[2] = "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.

Length Property

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.

Push method

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

Pop method

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"]; 
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"];
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"];
console.log(iLove); // Outputs: coffee, wine, code, walking, dogs

What next?




Share the love:

Leave a Reply

Your email address will not be published. Required fields are marked *