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:
1. <!DOCTYPE html>
2. <html ng-app>
4. <head>
5. <script type='text/javascript' src='angular.js'></script>
6. <script type='text/javascript' src='controller.js'></script>
7. </head>
9. <body>
10. <script type='text/javascript'>
11. var restaurant = [{
12. 'id': '0',
13. 'restaurantName': 'Indian Delight',
14. 'street': '123, Street1, 1st Avenue',
15. 'menu': [{
16. 'Roti': '5',
17. 'Dal': '10',
18. 'Veggies': '20'
19. }]
20. },
21. {
22. 'id': '1',
23. 'restaurantName': 'Chinese Hut',
24. 'street': '456, Street2, 2nd Avenue',
25. 'menu': [{
26. 'Dimsum': '10',
27. 'Momos': '20',
28. 'Soup': '15'
29. }]
30. },
31. {
32. 'id': '2',
33. 'restaurantName': 'Italian Bistro',
34. 'street': '789, 5th Block, 3rd Avenue',
35. 'menu': [{
36. 'Pasta': 15,
37. 'Pizza': 20,
38. 'Salad': 5
39. }]
40. }
41. ]
43. function GetAllRestaurant() {
44. console.log(_.pluck(restaurant, 'restaurantName'));
45. }
47. function RestaurantTotalMenuItemPrice(id) {
48. var RestaurantMenu = _.pluck(restaurant, 'menu')[id];
49. //Find RestaurantMenu by passing id
50. //output is object > [...]
51. //sum prices of all items, therefore we'll get all values from Key Pair
52. var prices = _.values(RestaurantMenu[0]);
53. //now reduce values to sum
54. var sum = _.reduce(prices, function(memo, num) { return memo + num; })
55. console.log(sum);
56. }
58. function TotalRestaurant() {
59. console.log(_.size(restaurant));
60. }
61. GetAllRestaurant(); //output : ["Indian Delight", "Chinese Hut", "Italian Bistro"]
62. RestaurantTotalMenuItemPrice(2); //output : 40
63. TotalRestaurant(); //output : 3
64. </script>
65. </div>
66. </body>
68. </html>

5 Comments

Join the conversation! Your thoughts help the community grow.

Guest User12y ago
Thanks DJ & Sanjay!!!
Sanjay Singh12y ago
nice explanation
Former member12y ago
It is nice blog post !
Guest User12y ago
sure Mahesh!
Mahesh Chand12y ago
Welcome aboard :). You can post these as articles with little more description. We are planning to merge both Articles and Blogs. Some people are confused about Articles vs. Blogs.