Created
January 15, 2019 16:56
-
-
Save jasonseminara/13471bcbadd2d3a2e0daeeac45c141f3 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/luwewetezu
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<script id="jsbin-javascript"> | |
const colors = 'red orange red yellow green blue yellow indigo violet red indigo orange green blue'; | |
// Challenge: remove dupes, preserving order; return a string | |
// one simple way could be to use a hash and remove the dupes, preserving the order it was in: | |
const colorsMapped = colors.split(' ').reduce((set, item, i) => { | |
if (item in set) return set; | |
// if the item isn't in the set, put it in and record its position | |
// don't do any mutations! | |
// [item] sets a dynamic key in the newly destructured (and cloned) object | |
return { | |
...set, | |
[item]: i, | |
} | |
}, {}); | |
// Object.entries converts our unsortable object into an array we can sort | |
// @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries | |
// each item will be [color, order] | |
const solution1 = Object.entries(colorsMapped) | |
/* destructure the args so each item will be [color, order]; sort by order */ | |
.sort(([ ,orderA], [ ,orderB]) => orderA - orderB) | |
/* sort doesn't let us modify the array, so let's map over and grab only what we need */ | |
.map(([colorName]) => colorName) | |
/* convert to a string */ | |
.join(' '); | |
console.log(solution1); | |
/** | |
* one-line solution with sets! | |
*/ | |
const oneliner = [...new Set(colors.split(' '))].join(' '); | |
console.log(oneliner); | |
/** | |
* WHOAH! let's break that down! | |
*/ | |
// break up the string on spaces | |
const colorArray = colors.split(' '); | |
// use the Set constructor to convert the array into a non-repeating set | |
// @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#Description | |
const colorSet = new Set(colorArray); | |
// we want to destructure the set into an array then join into a string | |
const solution3 = [...colorSet].join(' '); | |
console.log(solution3); | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript"> | |
const colors = 'red orange red yellow green blue yellow indigo violet red indigo orange green blue'; | |
// Challenge: remove dupes, preserving order; return a string | |
// one simple way could be to use a hash and remove the dupes, preserving the order it was in: | |
const colorsMapped = colors.split(' ').reduce((set, item, i) => { | |
if (item in set) return set; | |
// if the item isn't in the set, put it in and record its position | |
// don't do any mutations! | |
// [item] sets a dynamic key in the newly destructured (and cloned) object | |
return { | |
...set, | |
[item]: i, | |
} | |
}, {}); | |
// Object.entries converts our unsortable object into an array we can sort | |
// @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries | |
// each item will be [color, order] | |
const solution1 = Object.entries(colorsMapped) | |
/* destructure the args so each item will be [color, order]; sort by order */ | |
.sort(([ ,orderA], [ ,orderB]) => orderA - orderB) | |
/* sort doesn't let us modify the array, so let's map over and grab only what we need */ | |
.map(([colorName]) => colorName) | |
/* convert to a string */ | |
.join(' '); | |
console.log(solution1); | |
/** | |
* one-line solution with sets! | |
*/ | |
const oneliner = [...new Set(colors.split(' '))].join(' '); | |
console.log(oneliner); | |
/** | |
* WHOAH! let's break that down! | |
*/ | |
// break up the string on spaces | |
const colorArray = colors.split(' '); | |
// use the Set constructor to convert the array into a non-repeating set | |
// @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#Description | |
const colorSet = new Set(colorArray); | |
// we want to destructure the set into an array then join into a string | |
const solution3 = [...colorSet].join(' '); | |
console.log(solution3);</script></body> | |
</html> |
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
const colors = 'red orange red yellow green blue yellow indigo violet red indigo orange green blue'; | |
// Challenge: remove dupes, preserving order; return a string | |
// one simple way could be to use a hash and remove the dupes, preserving the order it was in: | |
const colorsMapped = colors.split(' ').reduce((set, item, i) => { | |
if (item in set) return set; | |
// if the item isn't in the set, put it in and record its position | |
// don't do any mutations! | |
// [item] sets a dynamic key in the newly destructured (and cloned) object | |
return { | |
...set, | |
[item]: i, | |
} | |
}, {}); | |
// Object.entries converts our unsortable object into an array we can sort | |
// @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries | |
// each item will be [color, order] | |
const solution1 = Object.entries(colorsMapped) | |
/* destructure the args so each item will be [color, order]; sort by order */ | |
.sort(([ ,orderA], [ ,orderB]) => orderA - orderB) | |
/* sort doesn't let us modify the array, so let's map over and grab only what we need */ | |
.map(([colorName]) => colorName) | |
/* convert to a string */ | |
.join(' '); | |
console.log(solution1); | |
/** | |
* one-line solution with sets! | |
*/ | |
const oneliner = [...new Set(colors.split(' '))].join(' '); | |
console.log(oneliner); | |
/** | |
* WHOAH! let's break that down! | |
*/ | |
// break up the string on spaces | |
const colorArray = colors.split(' '); | |
// use the Set constructor to convert the array into a non-repeating set | |
// @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#Description | |
const colorSet = new Set(colorArray); | |
// we want to destructure the set into an array then join into a string | |
const solution3 = [...colorSet].join(' '); | |
console.log(solution3); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment