Some examples of the things one can do with Vanilla JavaScript. Comparison of Vanilla JS to jQuery and Underscore.js.
Vanilla JavaScript VS libraries
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Element | |
var element = document.querySelector( '#element' ); | |
// Array of elements | |
var links = document.querySelectorAll( '.some-class' ); | |
var articles = document.querySelectorAll( 'article' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$( '#post a' ).addClass( 'post-link' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var links = document.getElementById( 'post' ).getElementsByTagName( 'a' ); | |
for ( i = 0; i < links.length; ++i ) { | |
links[ i ].className += ' post-link'; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 ); | |
... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
document | |
.querySelectorAll( '#post a' ) | |
.forEach( a => a.className += ' post-link' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Underscore.js | |
_.keys( object ); | |
_.size( object ); | |
_.values( object ); | |
... | |
// Vanilla JavaScript | |
Object.keys( object ); | |
Object.keys( object ).length; | |
Object.keys( object ).map( key => object[ key ] ); | |
... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Underscore.js | |
var result = _.pluck( list, 'attribute' ); | |
// Vanilla JavaScript | |
var result = list.map( e => e.attribute ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment