Skip to content

Instantly share code, notes, and snippets.

View aderaaij's full-sized avatar
💖

Arden de Raaij aderaaij

💖
51 followers · 57 following
View GitHub Profile
@aderaaij
aderaaij / es6-for-of-loop-with-index.js
Last active November 14, 2017 22:18
A way to get a for loop with an index. For this we use Array.entries which returns an `ArrayIterable` which we can go over with array.entries().next(); Each time you call `next()` it will return an object with a `done:` status which has a boolean value and an array of the current array item and its index.
// In the for loop we directly destructure the array returned by heroes.entries();
for (const[i, hero] of heroes.entries()) {
console.log(`${hero} is hero #${i + 1}`);
}
@aderaaij
aderaaij / es6-for-of-loop.js
Last active November 14, 2017 21:48
The for...of statement creates a loop iterating over iterable objects (including Array, Map, Set, String, TypedArray, arguments object and so on), invoking a custom iteration hook with statements to be executed for the value of each distinct property.
const heroes = ['The Hulk', 'Black Widow', 'Vision', 'Thor'];
for (const hero of heroes) {
if(hero === 'Black Widow') {
break;
}
console.log(hero);
}
@aderaaij
aderaaij / es6-destructuring-functions.js
Last active November 14, 2017 21:47
If your function returns a type that can be destructured like an array or an object, you can destructure it on the fly. In case of on object you destructure by key, so the order of destructuring doesn't matter and you can ommit whatever you want. In case of destructuring an array it's position based, so leaving an empty place would be done by le…
function convertCurrency(amount) {
const converted = {
USD: amount * 0.76,
GBP: amount * 0.53,
AUD: amount * 1.01,
MEX: amount * 13.30
};
return converted;
}
@aderaaij
aderaaij / es5-array-reduce.js
Last active November 14, 2017 22:02
The `.reduce()` function is one which I found difficult to wrap my head around, so I'm going to try and break it down. Unlike the `.map()` function, `.reduce` can be used to return not just an array, but also an object, number, string or whatever else you'd like. Some of the use cases of the reduce function are flattening, ordering and adding/su…
// Reduce takes in two arguments, a function and an optional starting point.
// example 1
[1, 2, 3].reduce((prev, curr, index) => {
console.log(prev, curr, index);
return prev + curr;
});
// An example of a function that takes in any list of numbers as arguments
// and returns the total sum through a reduce function
function addNumbers() {
@aderaaij
aderaaij / es6-destructuring-array-value-swapping.js
Last active November 13, 2017 14:40
A neat trick we can do with es6 array destructuring is swapping out values of two variables without the need of a third temporary variable. Example from es6.io
let inRing = 'Hulk Hogan';
let onSide = 'The Rock';
console.log(inRing, onSide);
/* This might look a bit funky but what's happening is pretty simple: On the right
hand side we've got an array with the original values. As we give an array, we can
destructure it, which we do on the lefthand side. We destructure the array renaming
the `onSide` value to `inRing`and the `inRing` value to `onSide`*/
[inRing, onSide] = [onSide, inRing];
console.log(inRing, onSide);
@aderaaij
aderaaij / es6-destructuring-arrays.js
Last active November 13, 2017 14:16
A feature I tend to forget about in es6 is the possibility to destructure arrays as well. Instead of curly brackets you use with an object, you use square brackets and as arrays do not have keys, array destructuring is based on the position of the values in the element.These are a couple of array destructuring examples from es6.io.
const details = ['Arden', 123, 'arden.nl'];
// get a bunch of values out of the details array and name them as variable
const [name, id, website] = details;
console.log(name, id, website);
const data = 'Basketball,Sports,90210,23,super,man,cool';
// We use data.split(',') which takes in the data string and returns it as an
// array which we immediately destructure with es6 array destructuring.
// When we have values that we do not call while destructuring, nothing will
@aderaaij
aderaaij / es6-destructering.js
Last active November 13, 2017 14:12
A few simple examples of destructuring objects. From es6.io
const person = {
first: 'Wes',
last: 'Bos',
country: 'Canada',
city: 'Hamilton',
twitter: '@wesbos',
};
// Destructure an object as values with the keyname
const { first, last, twitter } = person;
@aderaaij
aderaaij / es6-string-improvements.js
Last active November 13, 2017 14:11
Examples of the `.startsWith()`, `.endsWith()`, `.includes()` and `.repeat()` es6 javascript methods.
const course = 'RFB2';
const flightNumber = '20-AC2018-jz';
const accountNumber = '825242631RT0001';
const make = 'BMW';
const model = 'x5';
const colour = 'Royal Blue';
// .startsWith(searchString [, position])
// https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith
@aderaaij
aderaaij / es6-sanitize-with-tag-template-string.html
Last active November 13, 2017 14:12
A way to sanitize html with DOMPurify and tagged template strings. Remember not to rely on just client-side scripting to do things like this. From es6.io
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tagged Templates</title>
<style>
abbr {
border-bottom:1px dotted grey;
}
@aderaaij
aderaaij / es6-tagged-templates-2.js
Last active November 13, 2017 14:12
An example of 'tagging' an ES6 template string with a function. The function takes in the string as an argument and returns strings broken up by values as an array and the values as the rest of the arguments.
const dict = {
HTML: 'Hyper Text Markup Language',
CSS: 'Cascading Style Sheets',
JS: 'JavaScript'
};
/* Create the function we tag onto the template string. Tagging it to a template
string automatically returns the strings seperated by values as an array (strings)
and gives the values as the rest of the argument. */
function addAbrriviations(strings, ...values) {