Returning New Values

Open the project folder

Methods that create new arrays

In the previous lesson, the methods we used all had something in common, and that was we modified the existing array. Even if they returned something, like a true or false value, the original array was still modified.

We are now going to continue with some more array methods, but the difference is this time, the original array will stay intact and something new will be created or returned.

One example of this is something we have already used, which is the includes method. This will return true or false if the value is included in the array, therefore not modifying the original array.

We also have the join method which takes our array values and joins them together as a string.

The includes() method

And we can see an example of includes in the starter project:

let pizza = ['dough', 'sauce', 'cheese'];
const isIncluded = pizza.includes('dough');
console.log(pizza, isIncluded);

You should see the following in the console:

["dough", "sauce", "cheese"] true

This leaves the original array as it was but returns a new value.

The join() method

Next, we have join. This also leaves the original array as it was, and returns back a new string containing all the array values which are separated by a comma:

let pizza = ['dough', 'sauce', 'cheese'];
const string = pizza.join();

console.log(pizza, string);
// ['dough', 'sauce', 'cheese'] 'dough,sauce,cheese'

Leaving our array with 3 values and then a string of dough,sauce,cheese.

If we did not want this comma, we could change it to be something else by adding in a different string value:

const string = pizza.join('-');

Resulting in a string of 'dough-sauce-cheese'.

The indexOf() & lastIndexOf() methods

Since array values are stored numerically, we often need to access the values in a certain index position. But first, we may need to find the index position, and this is what the indexOf method is used for.

Take a look at the follwing example:

let pizza = ['dough', 'sauce', 'cheese'];
const index = pizza.indexOf('sauce');
console.log(pizza, index);
// ['dough', 'sauce', 'cheese'] 1

Here we pass indexOf the string value of 'sauce'. Then we get back the index position of sauce, and since arrays begin at position zero, sauce is position 1.

This next example shows lastIndexOf. It may sound like this is for selecting the very last array value. However, it is for finding the last occurrence of a value:

let pizza = ['dough', 'sauce', 'cheese', 'dough'];
const index = pizza.lastIndexOf('dough');
console.log(pizza, index);
// ['dough', 'sauce', 'cheese', 'dough'] 3

This array has the value of dough twice, so it looks for the last occurrence of this word, which is index position 3.

Both indexOf and lastIndexOf will return -1 if no matching value is found.

The slice() method

Slice is a way to slice out some values from an array. It takes an optional start and end of array index positions.

let pizza = ['dough', 'sauce', 'cheese', 'pepperoni'];
// selects all items from 1 >
const value = pizza.slice(1);
console.log(pizza, value);
// value is now ['sauce', 'cheese', 'pepperoni']

The above example only has the start index position of 1, so it will select all values from sauce until the end of the array.

This next example shows passing in 2 values, 1 and 3. The first value of 1 is the starting position, which again is sauce, then an optional end position of 3:

let pizza = ['dough', 'sauce', 'cheese', 'pepperoni'];
// selects from index number 1-3
const value = pizza.slice(1, 3);
console.log(pizza, value);
// value is now [ "sauce", "cheese" ]

The second value of 3 will not be included, and only returns sauce and cheese.

The concat() method

Now onto concat, this joins together the values of two or more arrays, first we need an extra array to merge:

let pizza = ['dough', 'sauce', 'cheese', 'pepperoni'];
let extras = ['peppers', 'onions'];
const newPizza = pizza.concat(extras);
console.log(newPizza);
/// ['dough', 'sauce', 'cheese', 'pepperoni', 'peppers', 'onions']

Here we have the original pizza array, we then call the concat method on it, and pass in the extras array which will merge them together.

Like all other methods in this section, the original arrays remain intact and returned is a new array with the result.