Using UnderscoreJs in Angular4 project

I recently introduced UnderscoreJs in a previous article : Introducing UnderscoreJs.

I’m a big fan of  Angular 4 as well, and in this article i will show you how to use UnderscoreJs in Angular 4 (that uses Typescript).

I will show you also how to abstract UnderscoreJs in you Angular 4 in order to decouple as much as possible your from UnderscoreJs.

 

Step 1 :

Create your app and add Underscore as NPM package:

npm install underscore

Step 2 :

We want to abstract Underscore, let’s create a service :

ng g service services/Helper

This command will create the service directory and a prefilled file named helper.service.ts wich look like this :

import { Injectable } from '@angular/core';
@Injectable()
export class HelperService {
constructor() { }
}

Step 3 :

Import Underscore in your service then encapsulate it in custom function (example with each function) :

import { Injectable } from '@angular/core';
import { _ } from 'underscore';

@Injectable()
export class HelperService {

  constructor() { }

  public each(array, delegate) {
    return _.each(array, delegate);
  }

}

Step 4 :

Inject your service into your components like this :

import { Component, OnInit } from '@angular/core';
import { HelperService } from './services/helper.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private _helper: HelperService) { }
}

Step 5 :

To use each function define an array and call the service mwthod previously defined :

import { Component, OnInit } from '@angular/core';
import { HelperService } from './services/helper.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  private _fruits = ["Apple", "Banana", "Grapefruit"];

  constructor(private _helper: HelperService) { }

  public ngOnInit() {
    this._helper.each(this._fruits, console.log);
  }
}

Step 6 :

Run your app with

ng serve

and look in the Chrome console for example :

Now you can encapsulate Underscore and many other libraries in your apps 😉

Underscore.js in Visual Studio Code, working with collections – part 1

Working with collections part 1

each

Signature : _.each(list, iteratee)

Iterates over a list of elements, yielding each in turn to an iteratee function.

Each invocation of iteratee is called with three arguments: (element, index, list). If list is a JavaScript object, iteratee‘s arguments will be (value, key, list). Returns the list for chaining.

Example :

var _ = require('underscore');

var myFunction = function(element, index, list)
{
    console.log(`Element : ${element}, Index : ${index}, Element found by index : ${list[index]}`);
}

_.each(["Apple", "Banana", "Grapefruit"], myFunction);

_.each({one: "Apple", two : "Banana", three : "Grapefruit"}, myFunction);

Output :

map

Signature : _.map(list, iteratee)

Produces a new array of values by mapping each value in list through a transformation function (iteratee). The iteratee is passed three arguments: the value, then the index (or key) of the iteration, and finally a reference to the entire list.

Example :

var _ = require('underscore');

var value = _.map([10, 20, 30], function(element) {
   return element * 10;
});
console.log(value);

value = _.map({one: 10, two : 20, three : 30}, function(element, key) {
    return element * 5;
});
console.log(value);

Output :

reduce

Signature : _.reduce(list, iteratee,[memo])

Reduce boils down a list of values into a single value.Memo is the initial state of the reduction, and each successive step of it should be returned by iteratee. The iteratee is passed four arguments: the memo, then the value and index (or key) of the iteration, and finally a reference to the entire list.

If no memo is passed to the initial invocation of reduce, the iteratee is not invoked on the first element of the list. The first element is instead passed as the memo in the invocation of the iteratee on the next element in the list.

Example : 

var _ = require('underscore');

var value = _.reduce(["Apple", "Banana", "Grapefruit"], function(memo, value, index) {
    if (index == 0)
        return`I love ${value}`;
    else
        return`${memo} and ${value}`;
},"");
console.log(value);

Output :

reduceRight

Signature : _.reduceRight(list, iteratee,[memo])

The right-associative version of reduce.

Example : 

var _ = require('underscore');

var value = _.reduceRight(["Apple", "Banana", "Grapefruit"], function(memo, value, index, list) {
    if (index==list.length-1)
        return`I love ${value}`;
    else
        return`${memo} and ${value}`;
},"");

console.log(value);

Output :

find

Signature : _.find(list, iteratee)

Looks through each value in the list, returning the first one that passes a truth test (predicate), or undefined if no value passes the test. The function returns as soon as it finds an acceptable element, and doesn’t traverse the entire list.

Example :

var _ = require('underscore');

var value = _.find(["Apple", "Banana", "Grapefruit"], function(value) {
    return value.indexOf("p") >0;
});
console.log(value);

Output :

filter

Signature : _.filter(list, iteratee)

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

Example :

var _ = require('underscore');

var value = _.filter(["Apple", "Banana", "Grapefruit"], function(value) {
    return value.indexOf("p") >0;
});
console.log(value);

Output :

where

Signature : _.where(list, properties)

Looks through each value in the list, returning an array of all the values that contain all of the key-value pairs listed in properties.

Example :

var _ = require('underscore');

var listOfProducts = [
{country : "Canada", fruit : "Apple", color : "red"},
{country : "Canada", fruit : "Apple", color : "green"},
{country : "USA", fruit : "Grape", color : "yellow"},
{country : "USA", fruit : "Apple", color : "red"},
{country : "USA", fruit : "Lemon", color : "yellow"},
{country : "USA", fruit : "Lemon", color : "green"},
{country : "France", fruit : "Grape", color : "black"},
{country : "France", fruit : "Grape", color : "green"},
{country : "France", fruit : "Apple", color : "yellow"}
];

var value = _.where(listOfProducts, {country : "USA", fruit : "Lemon"});
console.log(value);

Output :

findWhere

Signature : _.reduceRight(list, properties)

Looks through the list and returns the first value that matches all of the key-value pairs listed in properties.

If no match is found, or if list is empty, undefined will be returned.

Example :

var _ = require('underscore');

var listOfProducts = [
    {country : "Canada", fruit : "Apple", color : "red"},
    {country : "Canada", fruit : "Apple", color : "green"},
    {country : "USA", fruit : "Grape", color : "yellow"},
    {country : "USA", fruit : "Apple", color : "red"},
    {country : "USA", fruit : "Lemon", color : "yellow"},
    {country : "USA", fruit : "Lemon", color : "green"},
    {country : "France", fruit : "Grape", color : "black"},
    {country : "France", fruit : "Grape", color : "green"},
    {country : "France", fruit : "Apple", color : "yellow"}
];

var value = _.findWhere(listOfProducts, {color : "yellow"});
console.log(value);

Output :

Introducing Underscore.js: A Javascript helpers library, installation installation Visual Studio Code

Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects.

Underscore provides over 100 functions that support both your favorite workaday functional helpers: mapfilterinvoke — as well as more specialized goodies: function binding, javascript templating, creating quick indexes, deep equality testing, and so on.

Underscore allows to work with collections, arrays, objects, functions, and provides other utilities

How to install it?

Visual Studio Code using NPM:

npm install underscore

Visual Studio using Bower

bower install underscore

You can also simply download it here and include it in your Html pages.

Examples given in next serie of articles require Visual Studio code, Node.js (and NPM)

Let’s start with collections : Underscore.js, working with collections – part 1