DATA
WRANGLING
IN
JS

Data Wrangling in JS

Unfortunately, often necessary...

Let's start with a simple example:

var myArray = [2,4,5,10];
/* how to get a new array with 
each number multiplied by 3? */    
    

Something more interesting:

var myArray = [2,4,5,10];
/* how to get a new array with 
each EVEN number divided by 2? */
    

Something even more interesting:

var myArray = [2,4,5,10];
/* create an array of objects containing:
   NUM: original_number,
   SQUARED: original_number_squared
*/
    

Two main programming styles:

Imperative:
How to do something

Declarative:
What to do (usually associated with a more Functional Programming style)

Javascript Array functions

Javascript Array functions

sort:
sorts an array

JS: sort

console.log([4,2,3,1].sort());
    

=> [1,2,3,4]        
    

Javascript Array functions

sort:
sorts an array, also works with a compare function (a,b). If the compare function returns
< 0 => a > b,
= 0 => a = b,
> 0 => a < b

JS: sort

console.log([4,2,3,1].sort(
    function(a, b){
        return b - a;
    }
));

=> [4,3,2,1]        

Javascript Array functions

forEach:
traverses an array, performs given function with each element as parameter

JS: forEach

[1,2,3,4].forEach(
function(d){
console.log(d * 2);
});
  

=>
2
4
6
8
  

Javascript Array functions

map:
performs function with each element as parameter, returns the result as an array

JS: map

var roots = [1,2,3,4].map(
function(d){
  return Math.sqrt(d);
});
console.log(roots);
    

=> [1, 1.414.., 1.732.., 2]
    

Javascript Array functions

filter:
performs function with each element as parameter, return array with all elements where function returns true.

JS: filter

var evens = [1,2,3,4].filter(
function(d){
  return d % 2 === 0;
});
console.log(evens);
    

=> [2, 4]
    

Javascript Array functions

reduce:
performs functions with an "accumulator" and each element as parameters. Return the value of the accumulator.

JS: reduce

var sum = [1,2,3,4].reduce(
    function(acc, val){
        return acc + val;
    },
    0);
console.log(sum);
        

    => 10 // == 1 + 2 + 3 + 4
        

Javascript Object functions

Javascript Object functions

Object.keys:
Returns all keys of an object as array.

JS: Object.keys

var obj = { 'a': 4, 'b': 12, 'c': 36 };
console.log(Object.keys(obj));
    

=> ['a', 'b', 'c']
    

Javascript Object functions

Object.values:
Returns all values of an object as array.

JS: Object.values

var obj = { 'a': 4, 'b': 12, 'c': 36 };
console.log(Object.values(obj));
    

=> [4, 12, 36]
    

Javascript chaining

Javascript chaining

Each of the previous functions returns the result of its computation.
So you can chain them to have the next function work with the previous one's results:

var result = arr.filter(...)
    .map(...)
    .reduce(...);
    
  

ES6 Arrow functions

ES6 Arrow functions

(ECMAScript 6), the latest, widely-distributed version of Javascript allows a short-hand writing for functions using arrows:

var myFunc = function(a){
    return a * 2;
}
// becomes:
var myFunc = (a) => { return a * 2; };
// or even:
var myFunc = a => a * 2;

        

Arrow functions make declarative calls even shorter:

var arr = [1,5,14,28];

arr.filter(d => d % 2 === 0)
    .map(d => d * 2)
    .reduce((a, v) => a + v);

// => 84

Lodash

Lodash is a helper library containing even more functions for various array and object manipulations.

Each function name starts with _. (underscore dot) and usually takes an array/object and a string/function as parameters.

Lodash _.without

_.without([2, 1, 2, 3], 1, 2);
// => [3]
    

Lodash _.keyBy

var array = [
{ 'dir': 'left', 'code': 97 },
{ 'dir': 'right', 'code': 100 }
];

_.keyBy(array, function(o) {
return String.fromCharCode(o.code);
});
// => { 'a': { 'dir': 'left', 'code': 97 }, 
//      'd': { 'dir': 'right', 'code': 100 } }

_.keyBy(array, 'dir');
// => { 'left': { 'dir': 'left', 'code': 97 }, 
//      'right': { 'dir': 'right', 'code': 100 } }
    

Learn more: