Arrays

Arrays Methods

.push('arg')	append	(Destructive)
.unshift('arg')	prepend	(Destructive)
.pop()	remove last	(Destructive)
.shift()	remove first	(Destructive)
...	spread	(NON-Destructive)
.slice(start, end)	remove / copy / replace	(NON-Destructive)
.splice(start, deleteCount, NewItem1, NewItem2 +)	add / remove / replace	(Destructive)

.push() and .unshift() (ADD) (Destructive)

.push()add elements to the end of an Array:

const superheroes = ['Catwoman', "Miss Marvel", 'She-Hulk', 'Jessica Jones'];

superheroes.push('Wonder Woman');
// => 5

superheroes;
// => ["Catwoman", "Miss Marvel", "She-Hulk", "Jessica Jones", "Wonder Woman"]

.unshift() add elements onto the beginning of an Array:

const cities = ['New York', 'San Francisco'];

cities.unshift('Los Angeles');
// => 3

cities;
// => ["Los Angeles", "New York", "San Francisco"]

... Spread Operator

const coolCities = ['New York', 'San Francisco'];

const allCities = ['Los Angeles', ...coolCities];

coolCities;
// => ["New York", "San Francisco"]

allCities;
// => ["Los Angeles", "New York", "San Francisco"]

const coolCats = ['Hobbes', 'Felix', 'Tom'];

const allCats = [...coolCats, 'Garfield'];

coolCats;
// => ["Hobbes", "Felix", "Tom"]

allCats;
// => ["Hobbes", "Felix", "Tom", "Garfield"]

.pop() and .shift() (REMOVE) (Destructive)

.pop()

const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

days.pop();
// => "Sun"

days;
// => ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

.shift()

const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

days.shift();
// => "Mon"

days;
// => [Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

Notice that the return value for the .pop() and .shift() methods is the element that was removed.

.slice() (REMOVE) (COPY) (NON-Destructive)

returns a slice of the original array. .slice()

const primes = [2, 3, 5, 7];

const copyOfPrimes = primes.slice(); // no arguments!

primes;
// => [2, 3, 5, 7]

copyOfPrimes;
// => [2, 3, 5, 7]


primes.push(11);
// => 5

primes;
// => [2, 3, 5, 7, 11]

copyOfPrimes;
// => [2, 3, 5, 7]

arr.slice(start = 0, end = arr.length) start and end is actually +1 and -1, end defaults to the end of the array

const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

days.slice(2, 5);
// => ["Wed", "Thu", "Fri"]

days.slice(5);
// => ["Sat", "Sun"]

days.slice(1);
// => ["Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

days.slice(-1);
// => ["Sun"]

days.slice(-3);
// => ["Fri", "Sat", "Sun"]

.splice() (ADD) (REMOVE) (REPLACE) (Destructive)

three ways to use .splice():

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)



const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

1.
remove 2 elements:

days.splice(2);
// => ["Wed", "Thu", "Fri", "Sat", "Sun"]

days;
// => ["Mon", "Tue"]


days.splice(-2);
// => ["Sat", "Sun"]

days;
// => ["Mon", "Tue", "Wed", "Thu", "Fri"]

2.
remove 3 elements:

days.splice(2, 3);
// => ["Wed", "Thu", "Fri"]

days;
// => ["Mon", "Tue", "Sat", "Sun"]

3.
replace 1 element:

days.splice(2, 1, 'NewDay');
// => ["Wed"]

days;
// => ['Mon', 'Tue', 'NewDay', 'Thu', 'Fri', 'Sat', 'Sun']

replace 2, add 1:

days.splice(1, 2, 'NewTue', 'NewWed', 'NewDay');
// => ["Cheeseburger", "Fish and Chips"]

days;
// => ['Mon', 'NewTue', 'NewWed', 'NewDay', 'Thu', 'Fri', 'Sat', 'Sun']

add 2:

days.splice(2, 0, 'NewDay1', 'NewDay2');
// => []

days;
// => ['Mon', 'Tue', 'NewDay1', 'NewDay2', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

notice that if .splicehas 2+ args it always returns the set of elements that were removed

arr[n] (REPLACE) (Destructive)

days[3] = 'NewDay';
// => "NewDay"

days;
// => ['Mon', 'Tue', 'Wed', 'NewDay', Fri', 'Sat', 'Sun']

... and .splice (REPLACE) (NON-Destructive)

days_new = [...days.slice(0,3), 'NewDay', ...days.slice(3)]
// => "NewDay"

days_new;
// => ['Mon', 'Tue', 'Wed', 'NewDay', Fri', 'Sat', 'Sun']

days;
// => ['Mon', 'Tue', 'Wed', 'Thu', Fri', 'Sat', 'Sun']

---

Array of Functions

var wakeDog = function(dogName) {
  return `Wake ${dogName}`
}

var walkToPark = function(dogName) {
  return `Walk to the park with ${dogName}`
}

const routine = [wakeDog, walkToPark]

function exerciseDog(dog) {
  return routine.map(fn => fn(dog))
}

exerciseDog('byron')

// => ["Wake byron", "Walk to the park with byron"]