JavaScript

Underscore.js Tutorial

What is underscore.js? 
 
Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. - Excerpts from http://underscorejs.org/

Lets unleash power of underscore.js
  • You can download it from http://underscorejs.org/underscore.js 

    OR
    1. npm install underscore     
  • Use any editor to write HTML file, I prefer Sublime Text, but it's your choice
  • Case study: There are many restaurants in City with different cuisines, menu items etc. Let's find desired output from what we want:
  • There are lot of functions which you can use, I'm posting few examples for your reference:
    1. <!DOCTYPE html>  
    2. <html ng-app>  
    3. <head>  
    4.     <script type='text/javascript' src='angular.js'></script>  
    5.     <script type='text/javascript' src='controller.js'></script>  
    6. </head>  
    7. <body>  
    8. <script type='text/javascript'>  
    9.     var restaurant=[  
    10.   {  
    11.     'id': '0',  
    12.     'restaurantName': 'Indian Delight',  
    13.     'street': '123, Street1, 1st Avenue',  
    14.     'menu': [  
    15.       {  
    16.         'Roti': '5',  
    17.         'Dal': '10',  
    18.         'Veggies': '20'  
    19.       }  
    20.     ]  
    21.   },  
    22.   {  
    23.     'id': '1',  
    24.     'restaurantName': 'Chinese Hut',  
    25.     'street': '456, Street2, 2nd Avenue',  
    26.     'menu': [  
    27.       {  
    28.         'Dimsum': '10',  
    29.         'Momos': '20',  
    30.         'Soup': '15'  
    31.       }  
    32.     ]  
    33.   },  
    34.   {  
    35.     'id': '2',  
    36.     'restaurantName': 'Italian Bistro',  
    37.     'street': '789, 5th Block, 3rd Avenue',  
    38.     'menu': [  
    39.       {  
    40.         'Pasta': 15,  
    41.         'Pizza': 20,  
    42.         'Salad': 5  
    43.       }  
    44.     ]  
    45.   }  
    46. ]  
    47.     function GetAllRestaurant () {  
    48.         console.log(_.pluck(restaurant,'restaurantName'));  
    49.     }  
    50.     function RestaurantTotalMenuItemPrice (id) {  
    51.         var RestaurantMenu=_.pluck(restaurant,'menu')[id];  
    52.         //Find RestaurantMenu by passing id  
    53.         //output is object > [...]  
    54.         //sum prices of all items, therefore we'll get all values from Key Pair  
    55.         var prices=_.values(RestaurantMenu[0]);  
    56.         //now reduce values to sum  
    57.         var sum= _.reduce(prices,function(memo, num){ return memo + num; })  
    58.         console.log(sum);  
    59.     }  
    60.     function TotalRestaurant () {  
    61.         console.log(_.size(restaurant));  
    62.     }  
    63.     GetAllRestaurant(); //output : ["Indian Delight", "Chinese Hut", "Italian Bistro"]    
    64.     RestaurantTotalMenuItemPrice(2); //output : 40  
    65.     TotalRestaurant();//output : 3  
    66. </script>  
    67. </div>  
    68. </body>  
    69. </html>  
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs