Underscore.js Tutorial

Sumit Jolly
Jun 29, 2014
3.7k
0
0
Blog

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>