Eeny Meeny Miny Arrays

In JavaScript, there are many different types of data structures. The most commonly used data structures are arrays and objects. Arrays are used to store many items in a single variable as a list. These items can be numbers, booleans, strings, objects, and other arrays. For now, we are going to focus on numbers, booleans, and strings.

When creating an array, we first assign it to a variable name and use bracket notation [] to store our items. We then separate each element with a comma inside of the bracket notation.

example:

let cars = [‘Mercedes’, ‘Infiniti’, ‘Ferrari’, ‘McLaren’];

let familyAges = [51, 28, 22, 21, 19];

Let random = [‘basketball’, 23, true];

If you personally don’t like bracket notation, don’t fret! There is another way to declare an array. However, this isn’t the best option to use because of performance issues.. but it still works.

example:

let cars = new Array(‘Mercedes’, ‘Infiniti’, ‘Ferrari’, ‘McLaren’);
console.log(cars)
// This will log [‘Mercedes’, ‘Infiniti’, ‘Ferrari’, ‘McLaren’];
let newCars = new Array(12);
console.log(newCars)
// This will log [empty x 12]

Instead of using bracket notations, we can use the keyword new and the constructor Array() after assigning it to a variable. This tells JavaScript that we are creating an array. Inside of the parentheses is where we record whatever elements we want the array to consist of.

On line 6, our array is given the value of 12. When we console.log(newCars) we get the output of [empty x 12]. Why is this? Since our Array() constructor passes items as parameters, we are telling JavaScript to create 12 slots of empty arrays.

Now, how do we access a given value in our array?

Since an array is an ordered list. Each element in an array has a numeric position known as its index. By using bracket notation, we can access an element in our array at its index.

example:

//               0           1          2           3
let cars = ['Mercedes', 'Infiniti', 'Ferrari', 'McLaren'];
console.log(cars[2]);
//If you are accessing index 2, then you will get 'Ferrari'

On line 4 we gave our variable cars an index of 2 to get the output of Ferrari. In JavaScript, arrays start counting at zero instead of 1. So when you are thinking of accessing an element in your array, remember to always start counting at zero.

Although, if we wanted to know how many elements are in our given array JavaScript will start its count at 1.

example:

let cars = ['Mercedes', 'Infiniti', 'Ferrari', 'McLaren'];
//              1           2           3          4
console.log(cars.length);
//This will log '4'

Arrays in arrays?

When thinking of arrays I like to think of the body of the array as a building and then the data inside of the array as doors. Just how doors can lead to another door, arrays can be stored inside another array.

example:

let nestedArray = ['door1a','door2a', ['door1b', 'door2b']];
// the nested array would be ['door1b', 'door2b']

Did you say… A shortcut?

Array methods can be used to convert data, delete, change, modify, etc. Instead of manually going into an array you would like to change, you can add a method to your array that does it for you.

example:

let sneakerBrands = ['Nike', 'Adidas', 'Reebok'];
sneakerBrands.pop()
// This will return ['Reebok']
console.log(sneakerBrands)
// This will log ['Nike', 'Adidas']

On line 1 for our array sneakerBrands we are using the method .pop() . This method removes the last element in an array and returns the removed element.

const jewelry = ['Bracelet', 'Rings', 'Necklace'];
let firstElement = jewelry.shift();
console.log(jewelry)
// This will log ['Rings', 'Necklace']
console.log(firstElement)
// This will log ['Bracelet']

.shift() is similar to .pop() instead of deleting the last element .shift() deletes the first element in an array and returns the removed element. Once this method is used it doesn’t store the element anywhere unless you tell it to. So if we ever wanted to store our removed elements in a safe place to maybe use again later on in our code we will call .shift() while assigning it to a variable (look on line 2).

let seasons = ['Fall', 'Spring', 'Winter'];
seasons.unshift(['Summer', 'Pre-Summer'] 5, 7)
console.log(unshift)
// [['Summer', 'Pre-Summer'], 5, 7, 'Fall', 'Spring', 'Winter']

What do you think .unshift() does while knowing what .shift() does? Yes, you are absolutely correct! .unshift() does the exact opposite of .shift(). With .unshift() we can add as many elements to the beginning of our array. All we have to do is insert our desired data in the parentheses.

If you made it this far congratulations! You are now 1% better than you were before you started this reading. I hope this article has given you a better understanding of arrays and their use.

Oh and remember, practice makes perfect! Good luck!