The Startup
Published in

The Startup

Learning to Code: Day 41 — Basic JavaScript Part 6

Heyooo it’s ya boi.

I had a bit of a hectic week, with Christmas coming up my work is bringing in the big orders now, so lots of Arbeitskraft needed, as they say, but let’s jump back into Arrays and Indexes in JavaScript, and look at some manipulation functions between the two, thanks to FreeCodeCamp for the lessons as always.

Accessing Multi-Dimensional Arrays with Indexes

Let’s finish up first from the last blog here and refresh our memories. Try not to get too confused by my explanation to follow.

We can focus in on an array within an array, also known as a multi-dimensional array. For example if we have several arrays, when we type out our first set of brackets, then focus on the outer-most array (first-level) entries, and additional brackets focus on the next entries within and so on. It’s a bit like moving down the list rows in the first bracket, then moving along the list column in the second bracket and so forth. For example:

- FreeCodeCamp

Makes sense right?

Remember: The code counts each time from 0, like we saw in the last blog, so the array containing [1,2,3] is arr[0], not arr[1].

Note: Keep your coding clean by avoiding spaces in the array name and brackets, it’s good practise for readability from other developers later on.

Manipulate Arrays with the push() Function

One easy way to append data onto an array is by using the push() function. Once our variable has been defined with it’s array entries, we can add entires onto the end of the array by typing the variable name followed by “.push([enter new array here]);”

Let’s see how that looks in sequence:

var myArray = [[“John”, 23], [“cat”, 2]];

myArray.push([“dog”, 3]);

This will amend myArray to be equal to [[“John”, 23], [“cat”, 2], [“dog”, 3]]

Manipulate Arrays with the pop() Function

Just as we have added an array entry onto the end of the array, we can also take one off the list, in this case pop() removes entries from the end. However, we can also take that “popped off” entry and assign it to a different variable so it’s stored and still accessible, by assigning the pop() function a new variable simultaneously. Let’s see all that in action and then break it down:


So on line 1, we see the variable threeArr is defined. Line 2 we are defining the variable oneDown and assigning it to the pop() of threeArr (which will take the last array entry, 6). Line 3 and 4 are confirming the changes made by listing the new content of each variable using the console.log() function.

Manipulate Arrays with the shift() Function

Where pop() removes the last entry in the array, shift() removes the first.

This follows the exact same logic as the previous chapter, however our new variable will equal the first entry removed from the original variable, in this case threeArr would now equal [4,6] and oneDown would equal [1].

Manipulate Arrays with the unshift() Function

Just like the push() function which adds entries onto the end on the array, we can use unshift() to add entries in front of the array.

- FreeCodeCamp

In this example above from FreeCodeCamp, we can see that in line 1 a variable was defined, then in line 2 the first entry was removed, line 3 has a new entry added to the beginning of the array.

Note: This example above deals with a singular array so when we are adding a new entry in line 3, it’s going into the existing array, not a new array.

So, to summarise:

To add data in the beginning of the array, use unshift().

To remove data from the beginning of the array, use shift().

To add data in the end of the array, use push().

To remove data from the end of the array, use pop().

Aaaaand let’s call it there. Hope you liked this one! I enjoyed keeping it nice and concise today. See you next time!




Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +756K followers.

Recommended from Medium

Angular Team Open-Sources Their Brain

JavaScript: How to delete an element by Value in an array?

JavaScript and some useful tricks

Chartjs: How To show/hide axis Grid Line

How To Perform User Authentication With React Using Firebase

Final result

React Native — A Deep Dive — Part 1.

Black Horse Games After Action Report

Implementing the Prefix Tree Data Structure in JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hugh Burgess

Hugh Burgess

Step by step, learning to code with FreeCodeCamp

More from Medium

Day 16, End of the First Course

Repetition, React Router, and the Importance of Reading Code

3 Beginner Project Ideas to Get Started on Your Front-End Portfolio

Edison light bulbs against a blue background

HackerRank Algorithm Challenge — Sales by Match (Javascript)