Published
Edited
May 15, 2019
1 fork
4 stars
{
// ES6
const myConst = 5;
myConst = 0;
// Can’t reassign a const
const myVariable;
// const needs to be initialized with a value
for (const i = 0; i < 10; i ++) {
console.log(i);
}
// Same as the first, can’t reassign a const
}
{
// ES6
window.addEventListener('scroll', function(e) {
const scrollAmount = window.scrollY;
console.log('hello')
});
}
{
// ES5
if (true) {
var msg = 'hello';
}
return msg; // In spite of being defined inside the if statement, msg is accessible outside of it because there’s no block scoping
}
{
// ES6
if (true) {
let msg = 'hello';
}
return msg; // The if statement defines a new scope
}
// ES5
'width: ' + myObject.width + 'px; height: ' + myObject.height + 'px; left: ' + myObject.left + 'px; top: ' + myObject.left + 'px'
// ES6
`width: ${myObject.width}px; height: ${myObject.height}px; left: ${myObject.left}px; top: ${myObject.left}px`
{
// ES6
const someClass = "my-class";
const someString = "Test string";
const myDiv = document.createElement('div');
myDiv.innerHTML = `<p>
<span class="${someClass}">
${someString}
</span>
</p>`;
return myDiv;
}
{
// ES5
var top = myObject.top;
var left = myObject.left;
// ...and so on.
}
{
// ES6
const { top,
left,
width,
height,
gabriel = 10 } = myObject;
return gabriel;
}
{
//ES6
const [first, second] = digitalNewsDesign;
return `first: ${'0'}, second: ${second}`;
}
{
// ES6
const [first, second, ...rest] = digitalNewsDesign;
return rest;
}
{
// ES5
function getPos() {
const x = 20;
const y = 10;
return { x: x, y: y };
}
return getPos();
}
{
// ES6
function getPos() {
const x = 20;
const y = 10;
return { x, y };
}
return getPos();
}
{
const designSnap = [...digitalNewsDesign, ...snapchat];
return designSnap;
}
{
const pos = [0, 20, 10];
// doSomethingWithPos(pos);
doSomethingWithPos(...pos);
function doSomethingWithPos(x, y, z) {
console.log(x, y, z);
}
}
{
// ES5
setTimeout(function() {
console.log('hello');
}, 1000);
// ES6
setTimeout(() => {
console.log('hello');
}, 1000);
}
{
// ES5
var initialsES5 = digitalNewsDesign.map(function(name, i) {
const initial = name.substring(0, 1);
return initial;
});
// ES6
const initialsES6 = digitalNewsDesign.map((name, i) => {
const [initial] = name; // This is using the destructuring syntax explained above. It also works with strings!
return initial;
});
return initialsES6;
}
{
// ES6
const initialsES6 = digitalNewsDesign.map(name => {
const [initial] = name;
return initial;
});
return initialsES6;
}
{
// ES6
const initialsES6 = digitalNewsDesign.map(name => name.substring(0, 1));
return initialsES6;
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
