Vanilla JavaScript VS libraries

00-readme.md

Some examples of the things one can do with Vanilla JavaScript. Comparison of Vanilla JS to jQuery and Underscore.js.

01-select.js

// jQuery
var element = $( '#element' );
var links = $( '.some-class' );
var articles = $( 'article' );

// Vanilla JavaScript
var element = document.getElementById( 'element' );
var links = document.getElementsByClassName( 'some-class' );
var articles = document.getElementsByTagName( 'article' );

02-select-css.js

// Element
var element = document.querySelector( '#element' );

// Array of elements
var links = document.querySelectorAll( '.some-class' );
var articles = document.querySelectorAll( 'article' );

03-traverse.js

// jQuery
var firstElement = jQuery( '#list li:first' );
var nextElement = firstElement.next();

// Vanilla JavaScript
var firstElement = document.getElementById( 'list' ).getElementsByTagName( 'li' )[0];
var nextElement = firstElement.nextElementSibling;

04-set-get.js

// jQuery
var element = $( '#element');

var scale = element.data( 'scale' );
element.data( 'scale', scale + 10 );

element.addClass( 'some-class' );

// Vanilla JavaScript
var element = document.getElementById( 'element' );

var scale = element.getAttribute( 'data-scale' );
element.setAttribute( 'data-scale', scale + 10 );

var classAttr = element.getAttribute( 'class' );
element.setAttribute( 'class', classAttr + ' some-class' );

05-jquery-loops.js

$( '#post a' ).addClass( 'post-link' );

06-js-loops.js

var links = document.getElementById( 'post' ).getElementsByTagName( 'a' );
for ( i = 0; i < links.length; ++i ) {
  links[ i ].className += ' post-link';
}

07-array-functions.js

// Underscore.js
_.each( list, iteratee );
var newList = _.map( list, iteratee );
var value = _.reduce( list, iteratee, memo );
var bool = _.every( list, predicate );
var bool = _.some( list, predicate );
...

// Vanilla JavaScript
list.forEach( iteratee );
var newList = list.map( iteratee );
var value = list.reduce( iteratee, memo );
var bool = list.every( predicate );
var bool = list.some( predicate );
...

08-better-loops.js

document
  .querySelectorAll( '#post a' )
  .forEach( a => a.className += ' post-link' );

09-objects.js

// Underscore.js
_.keys( object );
_.size( object );
_.values( object );
...

// Vanilla JavaScript
Object.keys( object );
Object.keys( object ).length;
Object.keys( object ).map( key => object[ key ] );
...

10-pluck.js

// Underscore.js
var result = _.pluck( list, 'attribute' );

// Vanilla JavaScript
var result = list.map( e => e.attribute );