Last active
February 22, 2016 21:33
-
-
Save raduchiriac/9c21ff56866f785bbc66 to your computer and use it in GitHub Desktop.
JavaScript is Beautiful (w/ a little ES6 make-up)
This file contains hidden or 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
// Smart decider | |
var age = 20; | |
age >= 18 && console.log( "You are allowed to play this game" ); // TRUE | |
age >= 18 || console.log( "The game is restricted to 18 and over" ); // FALSE | |
function fn( cb ) { | |
cb && cb(); | |
}; | |
// Configuring a new Object | |
var task = new Object(); | |
Object.defineProperty(task, 'toString', { | |
value: function () { | |
return this.title + ' ' + this.description; | |
}, | |
writable: false, // cannot be overwriten | |
enumerable: false, // does not get listed using Object.keys() | |
configurable: false // | |
}); | |
// [INFO] adding `new` in front of a function creates an Object with its own scope (creates a constructor function out of that function). Binds `this` to the new object scope returing. | |
// Using Prototypes for better memory management | |
var myObject = function(name){ | |
this.aValueFromMainObject = false; | |
} | |
myObject.prototype.complete = function(){ | |
console.log('from the proto', this.aValueFromMainObject); | |
this.aValueFromMainObject = true; | |
} | |
// Using Classes in ES6 | |
'use strict' | |
class Task { | |
constructor(name) { | |
this.name = name; | |
this.completed = false; | |
}; | |
complete() { | |
console.log('completing task: ' + this.name); | |
this.completed = true; | |
}; | |
save() { | |
console.log('saving Task: ' + this.name); | |
}; | |
} | |
// filter all the array elements greater than 2 | |
// Using an array function, we can do filtering in a cleaner form with ES6: | |
var res = [ 1, 2, 3, 4 ].filter(function( v ){ | |
return v > 2; | |
}) | |
console.log( res ); // [3, 4] | |
var res = [ 1, 2, 3, 4 ].filter( v => v > 2 ); | |
console.log( res ); // [3,4] | |
// In ES6 we can get rid of the function keyword and the colon. So the preceding code can be put this way: | |
let foo = { | |
bar ( param1, param2 ) { | |
} | |
} | |
// ES6 Spread operator | |
let cb = function( foo, bar, ...args ) { | |
console.log( foo, bar, args ); | |
} cb( "foo", "bar", 1, 2, 3); // foo bar [1, 2, 3] | |
let [ bar, ...others ] = [ "bar", "foo", "baz", "qux" ]; | |
console.log([ bar, others ]); // ["bar",["foo","baz","qux"]] | |
var data = Array( 5 ); | |
console.log( data.fill( "bar" ) ); // ["bar", "bar", "bar", "bar", "bar"] | |
var a = [2,3,4]; | |
var b = [ 1, ...a, 5 ]; | |
console.log( b ); // [1,2,3,4,5] | |
// ForEach keys | |
var options = { | |
bar: "bar", | |
foo: "foo" | |
}; | |
Object.keys( options ).forEach(function( key ){ | |
console.log( key, options[ key] ); | |
}); | |
// Convert a NodeList to an Array | |
var nodes = document.querySelectorAll( "div" ), | |
arr = [].slice.call( nodes ); | |
// or in the ES6 way | |
arr = Array.from( nodes ); | |
// New default param in ES6 | |
function foo(x = 11, y = 31) { | |
console.log( x + y ); | |
} | |
function foo(x = y + 3, z = bar( x )) { | |
console.log( x, z ); | |
} |
This file contains hidden or 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
// |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment