aderaaij’s gists

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 / 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 / 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 / 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 / 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 / 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 / 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 / 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 / for-in-loop.js

Last active November 14, 2017 22:17

A simple for in loop to iterate over object values https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Statements/for...in

	// https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Statements/for...in
	const hulk = {
	color: 'Green',
	size: 'Large',
	weight: 500,
	power: 'Super Strength',
	};

	for (const prop in hulk) {
	console.log(`${prop}: ${hulk[prop]}`);

aderaaij / es6-array-from.html

Last active November 14, 2017 23:13

There are several occasions where you get an array-like value, which isn't actually an array. The most common occasion is when you do `document.querySelectorAll()`, which returns a nodelist instead of an Array. Another possibility is when you use a function which takes in multiple arguments, and you use the `arguments` keyword to retrieve those.…

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Array .from()</title>
	</head>
	<body>
	<ul class="heroes">
	<li>Hulk</li>
	<li>Thor</li>

Arden de Raaij aderaaij