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

Angular 2, 4 and 5 must have extensions for Visual Studio Code

 

You decided to develop with Angular 4 with TypeScript in Visual Studio Code ?

Good Choice ! 🙂

Here are the must have extensions !

For any installation : Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

1- Angular v4 TypeScript Snippets

Installation : 
ext install Angular v4 TypeScript Snippets

Usage :

  • TypeScript Angular Snippets
a-component                 // component
a-component-root            // root app component
a-directive                 // directive
a-guard-can-activate        // CanActivate guard
a-guard-can-activate-child  // CanActivateChild guard
a-guard-can-deactivate      // CanDeactivate guard
a-guard-can-load            // CanLoad guard
a-http-get                  // http.get with Rx Observable
a-httpclient-get            // httpClient.get with Rx Observable
a-module                    // module
a-module-root               // root app module
a-module-routing            // routing module file (forChild)
a-output-event              // @Output event and emitter
a-pipe                      // pipe
a-route-path-404            // 404 route path
a-route-path-default        // default route path
a-route-path-eager          // eager route path
a-route-path-lazy           // lazy route path
a-service                   // service
a-service-http              // service with Http
a-service-httpclient        // service with HttpClient
a-ctor-skip-self            // angular ngmodule's skipself constructor
a-subscribe                 // Rx Observable subscription
  • TypeScript RxJS Snippets

rx-observable               // Rx Observable import
rx-subject                  // Rx Subject import
rx-replay-subject           // Rx ReplaySubject import
rx-behavior-subject         // Rx BehaviorSubject import
rx-add-operator             // Rx add operator import
rx-add-observable           // Rx add observable import
  • HTML Snippets

a-class                     // [class] binding
a-select                    // <select> control
a-style                     // [style] binding
a-ngClass                   // ngClass
a-ngFor                     // *ngFor
a-ngForAsync                // *ngFor with async
a-ngIf                      // *ngIf
a-ngIfElse                  // *ngIf with else
a-ngModel                   // ngModel
a-routerLink                // routerLink
a-routerLink-param          // routerLink with a route parameter
a-ngStyle                   // ngStyle
a-ngSwitch                  // ngSwitch
a-prej                      // <pre>{{model | json}}</pre>
a-preja                     // <pre>{{model | async | json}}</pre>
Demo :

2- Auto Import

Installation :

ext install auto import

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.

Demo :

3- Debugger for Chrome

Installation :

ext install debugger-for-chrome

Supported features :

  • Setting breakpoints, including in source files when source maps are enabled
  • Stepping, including with the buttons on the Chrome page
  • The Locals pane
  • Debugging eval scripts, script tags, and scripts that are added dynamically
  • Watches
  • Console

Unsupported scenarios :

  • Debugging web workers
  • Any features that aren’t script debugging.

Demo :

4- Path Intellisense

A Visual Studio Code plugin that autocompletes filenames.

Installation :

ext install path-intellisense

Demo :

5- sort-imports

Sort ES6 imports for JavaScript and TypeScript automatically.

Installation :

ext install sort-imports

Demo :

6- Visual Studio Team Services

This extension allows you to connect to Team Services and Team Foundation Server and provides support for Team Foundation Version Control (TFVC). It allows you to monitor your builds and manage your pull requests and work items for your TFVC or Git source repositories. The extension uses your local repository information to connect to either Team Services or Team Foundation Server 2015 Update 2 (and later).

Installation :

ext install team

For configuration tutorial, please check my previous article here : http://anthonygiretti.com/2017/05/29/how-to-configure-visual-studio-code-with-visual-studio-team-services/

7- vsc-angular-cli

This extension allows to run angular-cli commands from command panel

Installation :

ext install vsc-angular-cli

Supported commands (by now):

  • ng new
  • ng doc
  • ng lint
  • ng serve
  • ng versio
  • ng format
  • ng e2e
  • ng completion
  • ng generate
  • ng test
  • ng help

8- VSCode simpler Icons with Angular

This extension is a simpler icon pack than the big pack of icons vscode-great-icons.
Personnal icon theme, to group javascript style (typescript, coffee…) into one only icon, css style (less, sass …) into on only icon etc …

Installation :

ext install vscode-great-icons

Demo :

 

Are you ready to ;ake your fiest Angular 4 app with Visual Studio Code ? 😉