UNDERSCORE

Introduction to libraries and getting comfortable with using libraries

Lets reflect on the functions we learned and built:

• loop
• transForm
• filterBy
• distill

**Given all the functions you have built..You have been building a library without knowing it!!!! Yayyyy!!!

What is a library???!!!!

A library is a collection of precompiled routines that a program can use. The routines, sometimes called modules, are stored in object format. Libraries are particularly useful for storing frequently used routines because you do not need to explicitly link them to every program that uses them...

 - Webpodia

There is a library for that...

loop, transForm, filterBy and distill

===

_.each, _.map, _.filter and _.reduce

Your Library:

_.each

_.each(list, iterator)

var _ = {}; 

_.each = function(list, callback) {
  if(Array.isArray(list)) {
    for (var i = 0; i < list.length; i++) {
      callback(list[i], i, list);
    }
  } else {
    for (var key in list) {
      callback(list[key], key, list);
    }
  }
};

http://underscorejs.org/#each

• Iterates over a list of elements, giving them one at a time to an iterator function.

_.each Usage

_.each(list, iterator)

var topFiveStartUps = [
'Honor', 
'Checkr', 
'Gusto',
'Slack',
'Navdy' 
];

var logger = function(val){
  console.log(val);
};


_.each(topFiveStartUps, logger);  // 'Honor', 'Checkr', 'Gusto', 'Slack', 'Navdy' 

http://underscorejs.org/#each

• Iterates over a list of elements, giving them one at a time to an iterator function.

_.map

_.map(list, iterator)

var _ = { each: function(/*...*/) { /*...*/ } };

_.map = function(list, iterator) {
  var result = []; // make a new array

  _.each(list, function(item, index, list) {
    result.push(iterator(item, index, list));
  });

  return result;
};

http://underscorejs.org/#map

• Produces a new array of values by mapping each value in list through a transformation function (iterator).

_.map Usage

_.map(list, iterator)

var topFiveStartUps = [
'Honor', 
'Checkr', 
'Gusto',
'Slack',
'Navdy' 
];

var stokedFunc = function(val){
  return val + '!!!';
};

var stokedStartUps = _.map(topFiveStartUps, stokedFunc);

console.log(stokedStartups);

// ['Honor', 'Checkr', 'Gusto','Slack', 'Navdy']

http://underscorejs.org/#map

• Produces a new array of values by mapping each value in list through a transformation function (iterator).

_.filter

_.filter(list, predicate)

var _ = { each: function(/*...*/) { map: function(/*...*/) } };

_.filter = function(list, predicate) {
  var result = []; // make a new array

  _.each(list, function(item, index, list) {
        if(predicate(item){
          result.push(item, index, list);
        }
  });

  return result;
};

http://underscorejs.org/#filter

• Looks through each value in the list, returning an array of all the values that pass a truth test (predicate).

_.filter Usage

_.filter(list, predicate)

var numbers = [2, 3, 4, 5, 6, 8, 1, 7];



var isEvens = function(num){

    return num % 2 === 0;

}


var evenNums = _.filter(numbers, isEven);


console.log(evenNums); // [2, 4, 6, 8]

http://underscorejs.org/#filter

• Looks through each value in the list, returning an array of all the values that pass a truth test (predicate).

_.reduce

_.reduce(list, iterator, memo)

var _ = { each: function(/*...*/)  map: function(/*...*/) filter: function(/*...*/)  };

_.reduce = function(list, iterator, memo) {
      memo = memo || null;
      if(memo === null){
        if(list.length){
          memo = list.shift()
        }
      }
  _.each(list, function(item, index, list) {
        memo = iterator(memo, item);
  });

  return memo;
};

http://underscorejs.org/#reduce

• boils down a list of values into a single value.

_.reduce Usage

_.reduce(list, iterator, memo)

var developers = [
    { name: "Kmack", age: 16 },
    { name: "Albrey", age: 1000 },
    { name: "Jon", age: 18 },
    { name: "Bianca", age: 20 }
];



var age = _.reduce(developers, function(memo, developer) {
    console.log(memo);
    return memo + developer.age; // return previous total plus current age
}, 0); // initialize age with 0 that will be passed as memo


// 0
// 16
// 1016
// 1034

console.log("Sum of all developer ages is " + age); // Sum of all developer ages is 1054
 

http://underscorejs.org/#reduce

• boils down a list of values into a single value.

EXERCISE TIME!!!

Great! Now you have an idea of how to work with the popular underscore.js library. Time to start practicing

https://github.com/TelegraphPrep/ticTacToe