Array Methods

Question 1

What index is the ‘front’ of an array?

Answer 1

0 (the left-hand side)

Question 2

What index is the back of an array?

Answer 2

length - 1 (the right-hand side)
(because length is not zero based, where indices are!)

Question 3

How do I add something to the front (or start) of an array?

Answer 3

UNSHIFT
(So called because it’s the reverse of ‘shifting’)

const newLengthOfArray = myArray.unshift();

Question 4

How do I remove something from the front (or start) of an array?

Answer 4

SHIFT
(so called because if you remove the first item all the others have to shift along one place towards the front)
const removed = myArray.shift();

Question 5

How do I put something on to the back (or end) of the array?

Answer 5

PUSH
(You’re pushing something into that list)

myArray.push(thing);

The method returns the new length of the array
const newArrayLength = myArray.push(thing);

Question 6

How do I remove something from the back (or end) of an array?

Answer 6

POP
myArray.pop();

Question 7

How do I remove thing[s] from the middle of an array?

What arguments does it take?
What does it return?

Answer 7

SPLICE

splice(startIndex, deleteCount)

returns an array of whatever it deletes

myArray.splice(2, 2); // removes the third and fourth item, so [item3, item3]

Question 8

How do I insert things into an array?

Answer 8

SPLICE (again)
splice(startIndex, deleteCount, [thingToBeInserted1, thingToBeInserted2,etc…])

myArray.splice(2, 0, 5, 6); // Insert 5 and 6 at index 2

Question 9

How do I copy parts of an array?

Answer 9

SLICE
myArr.slice() - copies all
myArr.slice(2) - copies from index 2 until the end
myArray.slice(2,4) - copies the things at index 2 and 3 (but not 4!) into a new array

Question 10

How do I make an array run in the opposite order

Answer 10

REVERSE
myArr.reverse():

(mutates the array in place AND returns it)

(You may encounter issues of ‘lazy evaluation’ when logging. Log the original array then reverse it and log it again, but for both log: JSON.parse(JSON.stringify(myArr)) - this stops that issue)

Question 11

How do I join 2 arrays together (to make a new array)?

Answer 11

CONCAT

const newArr = arr1.concat(arr2);

arr1’s items will be first in the new array

Question 12

How do I turn an array into a string?

Answer 12

JOIN
myArr.join()
[‘tim’, ‘jon’, ‘dave’.join(); // tim,jon,dave
[‘tim’, ‘jon’, ‘dave’.join(‘, ‘); // tim, jon, dave

Question 13

How do I iterate over an array? And what arguments am I given when I do?
(To ‘iterate’ means to go over the array one item at a time)

Answer 13

FOREACH

(you’ll be given: the current item; its index in the array, and; the array itself)

myArr.forEach(function(item, index, array){
// Do something with the items here…
})

Question 14

How do I find out if my array has a specific item in it? (for primitives and objects I have direct access to)

What arguments do you pass to it?
What does it return?
Is it handled differently for primitives vs custom objects, arrays, etc.

Answer 14

INCLUDES
You pass the item you’re looking for and [optionally] a startIndex, which is where the search will begin from.
It returns a boolean (true or false)

For primitives: [1,2,3].includes(2); // will work
[{ name: ‘James’ }].includes({ name: ‘James’ }); // won’t work
const james = { name: ‘James’ };
[james].includes(james); // will work

Question 15

How do I find where something is in an array? (for primitives and objects I have direct access to)

What do I pass to it? What does it return?

Answer 15

INDEXOF
You pass the item you’re looking for and [optionally] a startIndex, which is where the search will begin from.
It returns the index of the item or -1

[1,2,3].indexOf(2); // 1
[1,2,3].indexOf(5); // -1

Question 16

How do I make sure all the items in my array pass as specific test?

How is my test passed to the method and what must it return?

Answer 16

EVERY
You pass a function that returns a boolean (true or false)

myArr.every(function(item, index, array){
return item % 2 === 0; // this ‘predicate’/test determines if a number is even
});

Question 17

How do I make some of the items in my array pass as specific test?

How is my test passed to the method and what must it return?

Answer 17

SOME
You pass a function that returns a boolean (true or false)

myArr.some(function(item, index, array){
return item % 2 === 0; // this ‘predicate’/test determines if a number is even
});

Question 18

How do I find something (usually an object) in my array by describing it?

How is my test passed to the method and what must it return?
What does the method return to me?

Answer 18

FIND
You pass a function that return a boolean
The function gets access to the items, index and array
It returns the first item in the array that matches/passes the test or undefined, if none match

friends.find(function(friend){
return friend.name.toLowerCase() === ‘james’;
});

Question 19

How do I find the index of something (usually an object) in my array by describing it?

How is my test passed to the method and what must it return?
What does the method return to me?

Answer 19

FINDINDEX

You pass a function that return a boolean
The function gets access to the items, index and array
It returns the index of the first item to pass it or -1

friends.findIndex(function(friend){
return friend.name.toLowerCase() === ‘james’;
});

Question 20

How do I find items (usually objects) in my array by describing them?

How is my test passed to the method and what must it return?
What does the method return to me?

Answer 20

FILTER

You pass a function that return a boolean
The function gets access to the items, index and array
An array of all items that matched (it will be empty if none pass the test)

friends.filter(function(friend){
return friend.age > 40;
});

Question 21

How do I sort my array
How is my sorting ‘plan’ passed to the method; what is given to it, and; what must it return?
What does the method return to me?

Answer 21

SORT

You pass a function
The function gets access to 2 items (a, b) at a time, so 0 &. 1, then 1 & 2, etc. (done until the array is sorted.)
Your function must return a negative number (if a is less than b in some way); 0 if they are the same, and; a positive if a is greater than b
SORT sorts ‘in place’ and also returns the sorted array (so we can ‘chain’ methods)

[2, 1, 3].sort(function(a, b){
return a - b;
}); // see slides for sorting strings alphabetically and strings and numbers on an object

Question 22

How do I turn the array into a single product? (e.g. adding all the numbers in an array together)

Answer 22

REDUCE
const total = [1,2,3].reduce(function(accumulator, item){
return accumulator + item;
}, 0); // where the second argument (in this case 0) is what the accumulator starts as.

Question 23

How do I use the values in my array to create another array BASED ON those values?
(e.g. make an array of the squares of an array of numbers)

Answer 23

MAP

const doubles = [1,2,3].map(function(num){
return num * 2;
});
// doubles will be [2,6,8]