← Back to Lessons
Edit on Github

# It's Time To Learn What is an Array

## Why are Arrays in a Separate Lesson?

Because arrays are awesome! You need them! And we need to focus a lot on them in order to prepare you for real life 🙂

Mastering the use of arrays and loops is one of the 5 fundamental skills of building algoritms:

1. Variables.
2. Conditionals.
3. `Arrays`.
4. `Loops`.
5. Functions.

No no no…Wait: Arrays? What?

An array is, normally, any list or collection of values. The rules of how to add or remove elements from that list can change from one programming language to another. But – generally – they are the only ways for developers to create elements.

Arrays are the only way we have to list stuff – regardless of the application you are working with, it will always have things to list. For example: list of students, list of artists, list of transactions…anything!

This data-type does a lot more stuff than the others. Lists are the only way to store more than one data-type in the same variable.

Every array has the same basic concepts:

The items: are the actual values inside in each position of the array.

The length: is the size of the array (how many items the array has).

Index: is the position of the element.

☝Array positions start at zero (0); the first element is the element in the position zero (0)

## How to Declare an Array?

These are different examples of list declarations:

``````var myArray = []; //empty list
var myArray = ["Apple", "Orange", "Donkey"]; //with 3 string items by default.
var myArray = new Array(1,2,3,4,5); //Don't use this! Read below to learn why.``````

☝ Don't declare the Arrays with the `new Array()` syntax – it will not behave properly click here to learn the details

## Access Items in the Array

To access a specific element in a list, you need an `index`. We call `index` the integer value that represents the position of the element you want to access/get/retrieve.

The index always must start at zero (0). That means that an Array of 2 items can have index=0 or index=1. Trying to get the 2nd position will return "undefined" because it will mean that we are trying to access the third element (which does not exist). For example, to get any items in the array you can do the following:

``````    console.log(myArray[0]);  //This will print the 1st element in the console
var aux = myArray[5];
console.log(aux); //This will print the 6th element in the console
console.log(myArray[myArray.length-1]);  //This will print the last element of the array.``````

## Update Items in the Array

If you want, you can reset or update any item inside of an array using the index like this:

``````myArray[5] = 'Whatever value';
//This will set the value 'Whatever value' to the 6th element in the array.``````

## Adding Elements (push function)

The only way to add a new element is at the end of the list, and you will need to use the push() function for that.

``````var myArray = ['Pedro','Juan','Maria'];
myArray.push('Chris');
console.log(myArray); //this will print ['Pedro','Juan','Maria','Chris'];``````

But… what if I want to add Chris in the second position?

Then… you need to create a new empty array and start pushing the elements in the order that you need them. In this case it will be:

``````var myArray = ['Pedro','Juan','Maria'];
var myNewArray = [];
myNewArray.push('Pedro');
myNewArray.push('Chris');
myNewArray.push('Juan');
myNewArray.push('Maria');
console.log(myNewArray); //this will print ['Pedro','Chris','Juan','Maria'];``````

## Removing Elements (pop function)

Removing an element has the exact same limitations as in adding an element: you can only remove an element from the last position using the pop() method. If you want to remove a different element, you will need to create a new array without that particular element.

``````var myArray = ['Pedro','Chris','Juan','Maria'];
myArray.pop();
console.log(myArray); //this will print ['Pedro','Chris','Juan'];
//If you want to remove 'Chris', you need to do the following:
var myNewArray = [];
myNewArray.push('Pedro');
myNewArray.push('Juan');
myNewArray.push('Maria');
console.log(myNewArray); //this will print ['Pedro','Juan','Maria'];``````

## Removing/Adding from the Beginning

The shift and unshift methods are just like push and pop but with the difference that they will only work from the very beginning of the list.

``````var myArray = ['Juan','Maria'];
myArray.unshift('Pedro');
myArray.unshift('Chris','Bob');
console.log(myArray); //this will print ['Chris','Bob','Pedro','Juan','Maria'];
//If you want to remove 'Chris', you need to do the following:
var myArray = ['Chris','Bob','Pedro','Juan','Maria'];
myArray.shift();
console.log(myArray); //this will print ['Bob','Pedro','Juan','Maria'];``````

## Looping an Array

Sometimes, when working with arrays, you will need to loop them. For example: sorting them manually; flipping them; deleting an element from a particular position, etc.

In order to create your loop you will need to use Array.length to get the current size of the array. Most of the time the array items change during the runtime. This is why the only way to get the size of the array will be using the array.length function, like this:

``````var myArray = [3423,5,4,47889,654,8,867543,23,48,56432,55,23,25,12];
for (let i = 0; i < myArray.length; i++) {
console.log(myArray[i]); //this prints the value of the item in the position i
}``````

## For…in…

There is a great adaptation of the for statement to make it loop lists or arrays, like this:

``````var myArray = [3423,5,4,47889,654,8,867543,23,48,56432,55,23,25,12];
for (var index in myArray) {
console.log(myArray[index]);
}
//this prints the value of the item in the position index``````

## Removing from an Array

Variables can have different types of values. Some of them are available only in specific programming languages, but, almost all of them have the following types:

### Splice and Slice

It is possible to cut an array in pieces very fast, with the splice and slice functions.

#### Slice

Will return a new array with a smaller version of the original array. You have to specify the starting and ending index from where you want to cut the array.

#### Splice

Will update the current array leaving everything but the smaller version that you want to remove. You will need to specify the starting and ending indexes from where you want to remove.

Click to open demo in a new window

☝ Splice can accept as many optional paramenters as wanted and those will substitute the part of the array that has been deleted. The first parameter is the index where the deletion starts, the second how many elements will be deleted and from the third onward the elements inserted after the position set by the first parameter.

Example:

``````var y = [14, 3, 3245, 234, 52, 345, 3, 45, 23, 77];
y.splice(2,4,'a');  //returns [3245, 234, 52, 345]
console.log(y); // [14, 3, 'a', 3, 45, 23, 77]``````

We can use this function to insert elements:

``````var y = [14, 3, 3245, 234, 52, 345, 3, 45, 23, 77];
y.splice(2,0,'a');  //returns []
console.log(y); // [14, 3, 'a', 3245, 234, 52, 345, 3, 45, 23, 77]``````

Take a look at the docs

## Sorting the Arrays

It is very common needing to sorting arrays. For example: sorting a list of students by name. You have two functions for sorting in JavaScript:

Sort and Reverse

They do the same, except reverse does it backwards. They both sort using string comparison logic – which means that the string "25" is bigger than "100", because "2" is bigger than "1".

``````var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
console.log(fruits); //[ 'Apple', 'Banana', 'Mango', 'Orange' ]
fruits.reverse();
console.log(fruits); //[ 'Orange', 'Mango', 'Banana', 'Apple' ]``````

### Sorting Numbers

If you want to sort real numbers, or if you want to use any other type of login to sort arrays, you have to use a "comparison function."

You have to define a function that will take care of the comparisons. The sort function will call your function on each comparison and will let your function decide who comes first between both of the elements that are being compared.

``````var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a – b});
console.log(points); //[ 1, 5, 10, 25, 40, 100 ]``````

### Sorting objects

Now that we know about the comparison function, we can use it to tell the sort function how to sort our own special objects – like here for example:

``````var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];
cars.sort(function(a, b){return a.year – b.year});
console.log(cars); //[ { type: 'Saab', year: 2001 },{ type: 'BMW', year: 2010 },{ type: 'Volvo', year: 2016 } ]``````
Click to open demo in a new window

Subscribe for more!

ABOUT

CONTACT

MEDIA KIT

##### SOCIAL & LIVE LEARNING

The most efficient way to learn: Join a cohort with classmates like yourself, live streamings, coding jam sessions, live mentorships with real experts and keep the motivation.

##### INTRO TO CODING

From zero to getting paid as a developer, learn the skills of the present and future. Boost your professional career and get hired by a tech company.

##### DATA SCIENCE

Start a career in data science and analytics. A hands-on approach with interactive exercises, chat support, and access to mentorships.

##### 30DAYSOFGEEKCODING

Keep your motivation with this 30 day challenge. Join hundreds of other developers coding a little every day.

##### A.I. & MACHINE LEARNING

Start with Python and Data Science, Machine Learning, Deep Learning and maintaining a production environment in A.I.

©4Geeks Academy LLC 2019

Privacy policies

Cookies policies

Terms & Conditions