arrays

#Array

Basic Methods of Array

###concat()

concat() creates another array from another that already exists adding to it the elements passed as parameters

>>> var items = [1,2]
>>> items.concat(3,4,5)
[1, 2, 3, 4, 5]
>>> items.concat(3,4,5,'string',undefined)
[1, 2, 3, 4, 5, "string", undefined]
>>> items.concat([3,4,5],[6,7],[8,9])
[1, 2, 3, 4, 5, 6, 7, 8, 9]
>>> items.concat([3,4,5],[6,7,[8,9,10]])
[1, 2, 3, 4, 5, 6, 7, [8,9,10]]

concat w/ forEach example

###join()

join() returns a string with the values of the elements in the array

>>> var a = ['Wind', 'Rain', 'Fire'];
>>> a.join();
"Wind,Rain,Fire"
>>> a.join(" - ");
"Wind - Rain - Fire"
>>> typeof ( a.join(" - ") )
"string"

###indexOf()

indexOf() returns the first index where an element is found or returns -1 if is not found

>>> var a = ['Wind', 'Rain', 'Fire'];
>>> a.indexOf('Rain');
1
>>> a.indexOf('Earth');
-1
>>> a.indexOf('rain');
-1
>>> a.indexOf('Rain',2);
1

###push()

push() insert elements at the end of the array
a.push('new') is the same than a[a.length] = 'new'
push() returns the size of the array updated

>>> var sports = ['soccer', 'baseball'];
>>> sports
["soccer", "baseball"]
>>> sports.length
2
>>> sports.push('football', 'swimming');
4
>>> sports
["soccer", "baseball", "football", "swimming"]

###pop()

pop() removes the last element
a.pop() is the same than a.length--;
pop() returns the removed element

>>> var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
>>> myFish
["angel", "clown", "mandarin", "sturgeon"]
>>> myFish.pop();
"sturgeon"
>>> myFish
["angel", "clown", "mandarin"]

###sort()

sort the array and returns the modified array

• if a function is not passed as a parameter it will order the array based in the ASCII codes
• if a function is passed as a paramter
  • compare(a, b) → -1 → a,b
  • compare(a, b) → 1 → b,a (switch)
  • compare(a, b) → 0 → a,b (do nothing)

>>> var fruit = ['apples', 'bananas', 'Cherries'];
>>> fruit
["apples", "bananas", "Cherries"]
>>> fruit.sort();
["Cherries", "apples", "bananas"]

>>> var scores = [1, 2, 10, 21];
>>> scores
[1, 2, 10, 21]
>>> scores.sort()
[1, 10, 2, 21]

>>> var numbers = [4, 2, 42, 36, 5, 1, 12, 3];
>>> numbers
[4, 2, 42, 36, 5, 1, 12, 3]
>>> numbers.sort()
[1, 12, 2, 3, 36, 4, 42, 5]
>>> numbers.sort( function(a, b) { return a - b; } );
[1, 2, 3, 4, 5, 12, 36, 42]

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1; // a comes first
  }
  if (a is greater than b by the ordering criterion) {
    return 1; // b comes first
  }
  // a must be equal to b
  return 0; // no changes
}

###slice()

slice() returns a piece of the array without modifying the original

>>> var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
>>> var citrus = fruits.slice(1, 3);
>>> fruits
["Banana", "Orange", "Lemon", "Apple", "Mango"]
>>> citrus
["Orange", "Lemon"]
>>> fruits.slice(1)
["Orange", "Lemon", "Apple", "Mango"]
>>> fruits.slice(1).slice(1)
["Lemon", "Apple", "Mango"]
>>> fruits.slice(-1)
["Mango"]
>>> fruits.slice(-2)
["Apple", "Mango"]
>>> fruits.slice(1,-1)
["Orange", "Lemon", "Apple"]

###splice()

splice() removes a piece of the array, it returns it and optionally fill in the gap with new elements

>>> var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

>>> myFish
["angel", "clown", "mandarin", "surgeon"]
>>> var removed = myFish.splice(2, 1);

>>> myFish
["angel", "clown", "surgeon"]
>>> removed
["mandarin"]

>>> var removed = myFish.splice(2, 0, 'drum');
>>> myFish
["angel", "clown", "drum", "surgeon"]
>>> removed
[]

Array methods as Higher Order Functions

_{Functional Programming in JavaScript | YouTube Videos
Higher Order Function | Medium
Functional Programming | Book
Higher-Order Functions and Function Binding | Explained exercise}

Higher Order Functions are those functions that accept other functions as parameters or those that return functions(or both). They are the functions that treat other functions as values (enter or exit)

#### Functional Programming

There's a programming paradigm called functional programming that is based in (among other things):

• The use/creation of pure functions
• The function composition

_{Compose Yourself: Fun with Functions | Talk Slides
Functional Programming | Talk Slides}

This programming style let a code that is cleaner, shorter and more easy to read and test

function double(x) { return x*2; };

[1,2,3,4,5].map(double); // => [2,4,6,8,10]

function sum(total, item) { return total + item; };

[15, 30, 20].reduce(reducer, 0); // => 65

Applied to javascript, some basic and practical principles of this functional programming could be:

• All your functions should accepts at least 1 argument
• All your functions should return a value or another function
• No for-loops

Higher Order Functions

Arrays have available from their prototype some higher order functions VERY used. They're among others:

###forEach()

forEach() allow us to execute a function over every elmement of the array

arr.forEach(callback[, thisArg])

function logArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

// Note elision, there is no member at 2 so it isn't visited
[2, 5, , 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[3] = 9
[]

###map()

map() returns a new array with the result of calling a function provided as an argument over every element of the array

arr.map(callback[, thisArg])

function double(element /*, index, array*/ ) {
  //console.log('a[' + index + '] = ' + element);
  return element * 2;
}

// Note elision, there is no member at 2 so it isn't visited
>>> [2, 5, 3, 9].map(double);
[4, 10, 6, 18]

###filter()

filter() returns a new array with those elements that pass the test (return true when applying the function on them) in the function passed as a paramenter

arr.filter(callback[, thisArg])

function isMoreThan5(element /*, index, array */) {
  //console.log('a[' + index + '] = ' + element);
  return element >= 5;
}

>>> var groupMoreThan5 = [2, 5, 3, 9].filter(isMoreThan5);
>>> groupMoreThan5
[5, 9]

###every()

every() return true if ALL the elements of the array pass the test provided as a parameter (they all return true when we apply the function on them)

arr.every(callback[, thisArg])

function isMoreThan5(element /*, index, array */) {
  //console.log('a[' + index + '] = ' + element);
  return element >= 5;
}

>>> console.log ( [2, 5, 3, 9].every(isMoreThan5) )
false
>>> console.log ( [22, 5, 33, 9].every(isMoreThan5) )
true

###some()

some() return true if SOME element of the array pass the provided test as a parameter (one or more return true when we apply the function on them)

arr.some(callback[, thisArg])

function isMoreThan5(element /*, index, array */) {
  //console.log('a[' + index + '] = ' + element);
  return element >= 5;
}

>>> console.log ( [2, 5, 3, 9].some(isMoreThan5) )
true
>>> console.log ( [1, 2, 3, 4].some(isMoreThan5) )
false

###reduce()

reduce() applies a function recursively over an accumulator and over every item if the array (from left to right) until getting a unique value

arr.reduce(callback[, initialValue])

function sumElements(acc, current /*, index, array */) {
  //console.log(acc + ' | ' + current + ' | ' + index + ' | ' + array);
  return acc + current;
};

// Note elision, there is no member at 2 so it isn't visited
>>> [2, 5, 3, 9].reduce(sumElements);
19

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
  return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]

pluck(), zip(), reject(), groupBy(), sample(), chunk(), flatten()...

By using external libraries (como underscore, lodash o functional.js) we can have available at our code much more higher order functions that will ease our work