Do Underscore.js and jQuery complement each other? [closed]

I'm just starting to learn JavaScript, and stumbled over Underscore.js and jQuery. Underscore looks really cool but I wonder if jQuery does not already provide functions similar to Underscore. So, is it worthwhile to use both?


Solution 1:

Taken from the underscore site:

It's the tie to go along with jQuery's tux, and Backbone.js's suspenders.

Underscore is more suited to data manipulation and brings many Ruby methods to JavaScript. There is some crossover, but not enough to make them mutually exclusive.

Solution 2:

  • jQuery will take care of most of your dom manipulation
  • backbone.js will help you organize all of your code and give your js application some structure (mvc pattern)
  • underscore.js will give you really useful low-level utility. I would have never needed this library until I really got into js apps (it's also a requirement for backbone.js)

Solution 3:

Underscore provides a total of 60 functions for processing data/code. It is agreed that many of the functionalities are present in other libraries like jQuery, Prototype or script.aculo.us. For example, functions like each, map, find, filter or toArray are present in jQuery. These are in Underscore also. This is to make the library independent of jQuery.

When to use Underscore?:

Currently, it is widely used with Backbone.js to use MVC architecture for creating a one page Javascript Web app. The most significant ability of underscore.js is the ability of templating (which jQuery can not do). This library has many other useful functions, which are independent of other Javascript libraries.

Find below a list of functions provided by Underscore:

Collections: each,map,reduce,reduceRight,find,filter,reject,all,any,include,invoke,pluck,max,min,sortBy,groupBy,sortedIndex,shuffle,toArray,size

Array: first,initial,last,rest,compact,flatten,without,union,intersection,difference,uniq,zip,indexOf,lastIndexOf,range

Function: bind,bindAll,memoize,delay,defer,throttle,debounce,once,after,wrap,compose

Object: keys,values,functions,extend,defaults,clone,tap,isEqual,isEmpty,isElement,isArray,isArguments,isFunction,isString,isNumber,isBoolean,isDate,isRegExp,isNaN,isNull,isUndefined

Utitity: noConflict,identity,times,mixin,uniqueId,escape,template

Solution 4:

If you are concerned about overlap, and do not need things like JQuery AJAX, then you might consider using just the JQuery selector engine, named Sizzle.

http://sizzlejs.com/

Note that this is not for all projects, by using Sizzle and Underscore you will lose some JQuery functionality (like AJAX), you need to consider what you really need for your specific application.