diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b1aee2261..7e90497d5 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,13 +1,13 @@ ## Contributing -You can cntribute to **30 seconds of code** by sending pull requests for snippets that you find useful, reporting issues with current snippets or suggesting changes and/or additions. +You can contribute to **30 seconds of code** by sending pull requests for snippets that you find useful, reporting issues with current snippets or suggesting changes and/or additions. ### Guidelines for new snippets - Snippets must be short. Usually anything above 10 lines would be considered too long, but you can still submit it as it might be possible to shorten it or it might still prove useful regardless of its length. -- Snippets must be explain to a certain extent in the description above them. Make sure to include what functions you are using and why. +- Snippets must be explained to a certain extent in the description above them. Make sure to include what functions you are using and why. - Snippets must solve real-world problems and should be abstract enough to use in different scenarios. This is highly subjective, so send them in anyways. - Snippets *should* be written in ES6 if possible. -- Snippet files must follow the anchor name conventions of (GitHub Flavored Markdown)[https://github.github.com/gfm/], so that the `builder.js` can build the links for the list. +- Snippet files must follow the anchor name conventions of [GitHub Flavored Markdown](https://github.github.com/gfm/), so that the `builder.js` can build the links for the list. - Use the [template](snippet-template.md) to format your snippets. - If possible, provide test cases in your Pull Request (link or comment), so that it's easier to verify that each snippet is working. diff --git a/README.md b/README.md index 30ef32a40..8e718d097 100644 --- a/README.md +++ b/README.md @@ -8,11 +8,9 @@ ## Contents -* [RGB to hexadecimal](#rgb-to-hexadecimal) -* [URL parameters](#url-parameters) -* [UUID generator](#uuid-generator) * [Anagrams of string (with duplicates)](#anagrams-of-string-with-duplicates) * [Average of array of numbers](#average-of-array-of-numbers) +* [Capitalize first letter of every word](#capitalize-first-letter-of-every-word) * [Capitalize first letter](#capitalize-first-letter) * [Count occurrences of a value in array](#count-occurrences-of-a-value-in-array) * [Current URL](#current-url) @@ -23,7 +21,9 @@ * [Even or odd number](#even-or-odd-number) * [Factorial](#factorial) * [Fibonacci array generator](#fibonacci-array-generator) +* [Filter out non uniqe values in an array](#filter-out-non-uniqe-values-in-an-array) * [Flatten array](#flatten-array) +* [Get scroll position](#get-scroll-position) * [Greatest common divisor (GCD)](#greatest-common-divisor-gcd) * [Head of list](#head-of-list) * [Initial of list](#initial-of-list) @@ -36,6 +36,8 @@ * [Random number in range](#random-number-in-range) * [Randomize order of array](#randomize-order-of-array) * [Redirect to url](#redirect-to-url) +* [Reverse a string](#reverse-a-string) +* [RGB to hexadecimal](#rgb-to-hexadecimal) * [Scroll to top](#scroll-to-top) * [Similarity between arrays](#similarity-between-arrays) * [Sort characters in string (alphabetical)](#sort-characters-in-string-alphabetical) @@ -43,40 +45,10 @@ * [Swap values of two variables](#swap-values-of-two-variables) * [Tail of list](#tail-of-list) * [Unique values of array](#unique-values-of-array) +* [URL parameters](#url-parameters) +* [UUID generator](#uuid-generator) * [Validate number](#validate-number) -### RGB to hexadecimal - -Convert each value to a hexadecimal string, using `toString(16)`, then `padStart(2,'0')` to get a 2-digit hexadecimal value. -Combine values using `join('')`. - -```js -var rgbToHex = (r, g, b) => - [r,g,b].map( v => v.toString(16).padStart(2,'0')).join(''); -``` - -### URL parameters - -Use `match()` with an appropriate regular expression to get all key-value pairs, `map()` them appropriately. -Combine all key-value pairs into a single object using `Object.assign()` and the spread operator (`...`). -Pass `location.search` as the argument to apply to the current `url`. - -```js -var getUrlParameters = url => - Object.assign(...url.match(/([^?=&]+)(=([^&]*))?/g).map(m => {[f,v] = m.split('='); return {[f]:v}})); -``` - -### UUID generator - -Use `crypto` API to generate a UUID, compliant with [RFC4122](https://www.ietf.org/rfc/rfc4122.txt) version 4. - -```js -var uuid = _ => - ( [1e7]+-1e3+-4e3+-8e3+-1e11 ).replace( /[018]/g, c => - (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) - ) -``` - ### Anagrams of string (with duplicates) Use recursion. @@ -85,7 +57,7 @@ Use `map()` to combine the letter with each partial anagram, then `reduce()` to Base cases are for string `length` equal to `2` or `1`. ```js -var anagrams = s => { +const anagrams = s => { if(s.length <= 2) return s.length === 2 ? [s, s[1] + s[0]] : [s]; return s.split('').reduce( (a,l,i) => { anagrams(s.slice(0,i) + s.slice(i+1)).map( v => a.push(l+v) ); @@ -99,24 +71,34 @@ var anagrams = s => { Use `reduce()` to add each value to an accumulator, initialized with a value of `0`, divide by the `length` of the array. ```js -var average = arr => +const average = arr => arr.reduce( (acc , val) => acc + val, 0) / arr.length; ``` +### Capitalize first letter of every word + +Use `replace()` to match the first character of each word and `toUpperCase()` to capitalize it. + +```js +const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase()); +``` + ### Capitalize first letter -Use `toUpperCase()` to capitalize first letter, `slice(1)` to get the rest of the string. +Use `slice(0,1)` and `toUpperCase()` to capitalize first letter, `slice(1)` to get the rest of the string. +Omit the `lowerRest` parameter to keep the rest of the string intact, or set it to `true` to convert to lower case. ```js -var capitalize = str => str[0].toUpperCase() + str.slice(1); +const capitalize = (str, lowerRest = false) => + str.slice(0, 1).toUpperCase() + (lowerRest? str.slice(1).toLowerCase() : str.slice(1)); ``` ### Count occurrences of a value in array -Use `filter()` to create an array containing only the items with the specified value, count them using `length`. +Use `reduce()` to increment a counter each time you encounter the specific value inside the array. ```js -var countOccurrences = (arr, value) => arr.filter(v => v === value).length; +const countOccurrences = (arr, value) => arr.reduce((a, v) => v===value ? a + 1 : a + 0, 0); ``` ### Current URL @@ -124,7 +106,7 @@ var countOccurrences = (arr, value) => arr.filter(v => v === value).length; Use `window.location.href` to get current URL. ```js -var currentUrl = _ => window.location.href; +const currentUrl = _ => window.location.href; ``` ### Curry @@ -134,27 +116,25 @@ If the number of provided arguments (`args`) is sufficient, call the passed func Otherwise return a curried function `f` that expects the rest of the arguments. ```js -var curry = f => +const curry = f => (...args) => args.length >= f.length ? f(...args) : (...otherArgs) => curry(f)(...args, ...otherArgs) ``` ### Difference between arrays -Use `filter()` to remove values that are part of `values`, determined using `indexOf()`. +Use `filter()` to remove values that are part of `values`, determined using `includes()`. ```js -var difference = (arr, values) => - arr.filter(v => values.indexOf(v) === -1); +const difference = (arr, values) => arr.filter(v => !values.includes(v)); ``` ### Distance between two points -Use `Math.pow()` and `Math.sqrt()` to calculate the Euclidean distance between two points. +Use `Math.hypot()` to calculate the Euclidean distance between two points. ```js -var distance = x0, y0, x1, y1 => - Math.sqrt(Math.pow(x1-x0, 2) + Math.pow(y1 - y0, 2)) +const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0); ``` ### Escape regular expression @@ -162,7 +142,7 @@ var distance = x0, y0, x1, y1 => Use `replace()` to escape special characters. ```js -var escapeRegExp = s => +const escapeRegExp = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); } ``` @@ -173,16 +153,17 @@ Use `Math.abs()` to extend logic to negative numbers, check using the modulo (`% Return `true` if the number is even, `false` if the number is odd. ```js -var isEven = num => Math.abs(num) % 2 === 0; +const isEven = num => Math.abs(num) % 2 === 0; ``` ### Factorial -Create an array of length `n+1`, use `reduce()` to get the product of every value in the given range, utilizing the index of each element. +Use recursion. +If `n` is less than or equal to `1`, return `1`. +Otherwise, return the product of `n` and the factorial of `n - 1`. ```js -var factorial = n => - Array.apply(null, [1].concat(Array(n))).reduce( (a, _, i) => a * i || 1 , 1); +const factorial = n => n <= 1 ? 1 : n * factorial(n - 1) ``` ### Fibonacci array generator @@ -191,7 +172,7 @@ Create an empty array of the specific length, initializing the first two values Use `reduce()` to add values into the array, using the sum of the last two values, except for the first two. ```js -var fibonacci = n => +const fibonacci = n => Array.apply(null, [0,1].concat(Array(n-2))).reduce( (acc, val, i) => { acc.push( i>1 ? acc[i-1]+acc[i-2] : val); @@ -199,16 +180,37 @@ var fibonacci = n => },[]); ``` +### Filter out non-unique values in an array + +Use `Array.filter()` for an array containing only the unique values. + +```js +const unique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i)); +// unique([1,2,2,3,4,4,5]) -> [1,3,5] +``` + ### Flatten array Use recursion. Use `reduce()` to get all elements that are not arrays, flatten each element that is an array. ```js -var flatten = arr => +const flatten = arr => arr.reduce( (a, v) => a.concat( Array.isArray(v) ? flatten(v) : v ), []); ``` +## Get scroll position + +Use `pageXOffset` and `pageYOffset` if they are defined, otherwise `scrollLeft` and `scrollTop`. +You can omit `el` to use a default value of `window`. + +```js +const getScrollPos = (el = window) => + ( {x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft, + y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop} ); +// getScrollPos() -> {x: 0, y: 200} +``` + ### Greatest common divisor (GCD) Use recursion. @@ -216,7 +218,7 @@ Base case is when `y` equals `0`. In this case, return `x`. Otherwise, return the GCD of `y` and the remainder of the division `x/y`. ```js -var gcd = (x , y) => !y ? x : gcd(y, x % y); +const gcd = (x , y) => !y ? x : gcd(y, x % y); ``` ### Head of list @@ -224,7 +226,7 @@ var gcd = (x , y) => !y ? x : gcd(y, x % y); Return `arr[0]`. ```js -var head = arr => arr[0]; +const head = arr => arr[0]; ``` ### Initial of list @@ -232,7 +234,7 @@ var head = arr => arr[0]; Return `arr.slice(0,-1)`. ```js -var initial = arr => arr.slice(0,-1); +const initial = arr => arr.slice(0,-1); ``` ### Initialize array with range @@ -241,7 +243,7 @@ Use `Array(end-start)` to create an array of the desired length, `map()` to fill You can omit `start` to use a default value of `0`. ```js -var initializeArrayRange = (end, start = 0) => +const initializeArrayRange = (end, start = 0) => Array.apply(null, Array(end-start)).map( (v,i) => i + start ); ``` @@ -251,7 +253,7 @@ Use `Array(n)` to create an array of the desired length, `fill(v)` to fill it wi You can omit `v` to use a default value of `0`. ```js -var initializeArray = (n, v = 0) => +const initializeArray = (n, v = 0) => Array(n).fill(v); ``` @@ -260,7 +262,7 @@ var initializeArray = (n, v = 0) => Return `arr.slice(-1)[0]`. ```js -var initial = arr => arr.slice(-1)[0]; +const last = arr => arr.slice(-1)[0]; ``` ### Measure time taken by function @@ -269,7 +271,7 @@ Use `performance.now()` to get start and end time for the function, `console.log First argument is the function name, subsequent arguments are passed to the function. ```js -var timeTaken = (f,...args) => { +const timeTaken = (f,...args) => { var t0 = performance.now(), r = f(...args); console.log(performance.now() - t0); return r; @@ -278,19 +280,18 @@ var timeTaken = (f,...args) => { ### Object from key-value pairs -Use `map()` to create objects for each key-value pair, combine with `Object.assign()`. +Use `Array.reduce()` to create and combine key-value pairs. ```js -var objectFromPairs = arr => - Object.assign(...arr.map( v => ({ [v[0]] : v[1] }))); +const objectFromPairs = arr => arr => arr.reduce((a,b) => { a[b[0]] = b[1]; return a;}, {}); ``` ### Powerset -Use `reduce()` combined with `map()` to iterate over elements and combine into an array containing all combinations. +Use `reduce()` combined with `map()` to iterate over elements and combine into an array containing all combinations. ```js -var powerset = arr => +const powerset = arr => arr.reduce( (a,v) => a.concat(a.map( r => [v].concat(r) )), [[]]); ``` @@ -299,7 +300,7 @@ var powerset = arr => Use `Math.random()` to generate a random value, map it to the desired range using multiplication. ```js -var randomInRange = (min, max) => Math.random() * (max - min) + min; +const randomInRange = (min, max) => Math.random() * (max - min) + min; ``` ### Randomize order of array @@ -307,7 +308,7 @@ var randomInRange = (min, max) => Math.random() * (max - min) + min; Use `sort()` to reorder elements, utilizing `Math.random()` to randomize the sorting. ```js -var randomizeOrder = arr => arr.sort( (a,b) => Math.random() >= 0.5 ? -1 : 1) +const randomizeOrder = arr => arr.sort( (a,b) => Math.random() >= 0.5 ? -1 : 1) ``` ### Redirect to URL @@ -316,18 +317,37 @@ Use `window.location.href` or `window.location.replace()` to redirect to `url`. Pass a second argument to simulate a link click (`true` - default) or an HTTP redirect (`false`). ```js -var redirect = (url, asLink = true) => +const redirect = (url, asLink = true) => asLink ? window.location.href = url : window.location.replace(url); ``` +### Reverse a string + +Use array destructuring and `Array.reverse()` to reverse the order of the characters in the string. +Combine characters to get a string using `join('')`. + +```js +const reverseString = str => [...str].reverse().join(''); +``` + +### RGB to hexadecimal + +Convert each value to a hexadecimal string, using `toString(16)`, then `padStart(2,'0')` to get a 2-digit hexadecimal value. +Combine values using `join('')`. + +```js +const rgbToHex = (r, g, b) => + [r,g,b].map( v => v.toString(16).padStart(2,'0')).join(''); +``` + ### Scroll to top Get distance from top using `document.documentElement.scrollTop` or `document.body.scrollTop`. -Scroll by a fraction of the distance from top. Use `window.requestFrame()` to animate the scrolling. +Scroll by a fraction of the distance from top. Use `window.requestAnimationFrame()` to animate the scrolling. ```js -var scrollToTop = _ => { - var c = document.documentElement.scrollTop || document.body.scrollTop; +const scrollToTop = _ => { + const c = document.documentElement.scrollTop || document.body.scrollTop; if(c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c/8); @@ -337,11 +357,10 @@ var scrollToTop = _ => { ### Similarity between arrays -Use `filter()` to remove values that are not part of `values`, determined using `indexOf()`. +Use `filter()` to remove values that are not part of `values`, determined using `includes()`. ```js -var difference = (arr, values) => - arr.filter(v => values.indexOf(v) !== -1); +const difference = (arr, values) => arr.filter(v => values.includes(v)); ``` ### Sort characters in string (alphabetical) @@ -349,7 +368,7 @@ var difference = (arr, values) => Split the string using `split('')`, `sort()` utilizing `localeCompare()`, recombine using `join('')`. ```js -var sortCharactersInString = str => +const sortCharactersInString = str => str.split('').sort( (a,b) => a.localeCompare(b) ).join(''); ``` @@ -358,7 +377,7 @@ var sortCharactersInString = str => Use `reduce()` to add each value to an accumulator, initialized with a value of `0`. ```js -var sum = arr => +const sum = arr => arr.reduce( (acc , val) => acc + val, 0); ``` @@ -375,21 +394,38 @@ Use array destructuring to swap values between two variables. Return `arr.slice(1)`. ```js -var tail = arr => arr.slice(1); +const tail = arr => arr.slice(1); ``` ### Unique values of array -Use `reduce()` to accumulate all unique values in an array. -Check if each value has already been added, using `indexOf()` on the accumulator array. +Use ES6 `Set` and the `...rest` operator to discard all duplicated values. ```js -var uniqueValues = arr => - arr.reduce( (acc, val) => { - if(acc.indexOf(val) === -1) - acc.push(val); - return acc; - }, []); +const unique = arr => [...new Set(arr)]; +// unique([1,2,2,3,4,4,5]) -> [1,2,3,4,5] +``` + +### URL parameters + +Use `match()` with an appropriate regular expression to get all key-value pairs, `map()` them appropriately. +Combine all key-value pairs into a single object using `Object.assign()` and the spread operator (`...`). +Pass `location.search` as the argument to apply to the current `url`. + +```js +const getUrlParameters = url => + Object.assign(...url.match(/([^?=&]+)(=([^&]*))?/g).map(m => {[f,v] = m.split('='); return {[f]:v}})); +``` + +### UUID generator + +Use `crypto` API to generate a UUID, compliant with [RFC4122](https://www.ietf.org/rfc/rfc4122.txt) version 4. + +```js +const uuid = _ => + ( [1e7]+-1e3+-4e3+-8e3+-1e11 ).replace( /[018]/g, c => + (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) + ) ``` ### Validate number @@ -398,7 +434,7 @@ Use `!isNaN` in combination with `parseFloat()` to check if the argument is a nu Use `isFinite()` to check if the number is finite. ```js -var validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n); +const validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n); ``` ## Credits diff --git a/scripts/builder.js b/scripts/builder.js index 1b6ab5b67..b3305147a 100644 --- a/scripts/builder.js +++ b/scripts/builder.js @@ -7,7 +7,19 @@ var staticPartsPath = './static-parts'; var snippets = {}, startPart = '', endPart = '', output = ''; try { - for(var snippet of fs.readdirSync(snippetsPath)){ + var snippetFilenames = fs.readdirSync(snippetsPath); + snippetFilenames.sort((a, b) => { + a = a.toLowerCase(); + b = b.toLowerCase(); + if (a < b) { + return -1; + } + if (a > b) { + return 1; + } + return 0; + }); + for(var snippet of snippetFilenames){ snippets[snippet] = fs.readFileSync(path.join(snippetsPath,snippet),'utf8'); } } diff --git a/snippets/RGB-to-hexadecimal.md b/snippets/RGB-to-hexadecimal.md index 7c804c8e6..102821d53 100644 --- a/snippets/RGB-to-hexadecimal.md +++ b/snippets/RGB-to-hexadecimal.md @@ -4,6 +4,6 @@ Convert each value to a hexadecimal string, using `toString(16)`, then `padStart Combine values using `join('')`. ```js -var rgbToHex = (r, g, b) => +const rgbToHex = (r, g, b) => [r,g,b].map( v => v.toString(16).padStart(2,'0')).join(''); ``` diff --git a/snippets/URL-parameters.md b/snippets/URL-parameters.md index 05f523fba..9c1aff9a4 100644 --- a/snippets/URL-parameters.md +++ b/snippets/URL-parameters.md @@ -5,6 +5,6 @@ Combine all key-value pairs into a single object using `Object.assign()` and the Pass `location.search` as the argument to apply to the current `url`. ```js -var getUrlParameters = url => +const getUrlParameters = url => Object.assign(...url.match(/([^?=&]+)(=([^&]*))?/g).map(m => {[f,v] = m.split('='); return {[f]:v}})); ``` diff --git a/snippets/UUID-generator.md b/snippets/UUID-generator.md index a76d10034..1dafab3a1 100644 --- a/snippets/UUID-generator.md +++ b/snippets/UUID-generator.md @@ -3,7 +3,7 @@ Use `crypto` API to generate a UUID, compliant with [RFC4122](https://www.ietf.org/rfc/rfc4122.txt) version 4. ```js -var uuid = _ => +const uuid = _ => ( [1e7]+-1e3+-4e3+-8e3+-1e11 ).replace( /[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) ) diff --git a/snippets/anagrams-of-string-(with-duplicates).md b/snippets/anagrams-of-string-(with-duplicates).md index 9c13eed58..97140f0e4 100644 --- a/snippets/anagrams-of-string-(with-duplicates).md +++ b/snippets/anagrams-of-string-(with-duplicates).md @@ -6,7 +6,7 @@ Use `map()` to combine the letter with each partial anagram, then `reduce()` to Base cases are for string `length` equal to `2` or `1`. ```js -var anagrams = s => { +const anagrams = s => { if(s.length <= 2) return s.length === 2 ? [s, s[1] + s[0]] : [s]; return s.split('').reduce( (a,l,i) => { anagrams(s.slice(0,i) + s.slice(i+1)).map( v => a.push(l+v) ); diff --git a/snippets/average-of-array-of-numbers.md b/snippets/average-of-array-of-numbers.md index e0eeab7ff..53119bc32 100644 --- a/snippets/average-of-array-of-numbers.md +++ b/snippets/average-of-array-of-numbers.md @@ -3,6 +3,6 @@ Use `reduce()` to add each value to an accumulator, initialized with a value of `0`, divide by the `length` of the array. ```js -var average = arr => +const average = arr => arr.reduce( (acc , val) => acc + val, 0) / arr.length; ``` diff --git a/snippets/capitalize-first-letter-of-every-word.md b/snippets/capitalize-first-letter-of-every-word.md new file mode 100644 index 000000000..6c93eecd4 --- /dev/null +++ b/snippets/capitalize-first-letter-of-every-word.md @@ -0,0 +1,7 @@ +### Capitalize first letter of every word + +Use `replace()` to match the first character of each word and `toUpperCase()` to capitalize it. + +```js +const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase()); +``` diff --git a/snippets/capitalize-first-letter.md b/snippets/capitalize-first-letter.md index 56e42eab5..f6b933998 100644 --- a/snippets/capitalize-first-letter.md +++ b/snippets/capitalize-first-letter.md @@ -1,7 +1,9 @@ ### Capitalize first letter -Use `toUpperCase()` to capitalize first letter, `slice(1)` to get the rest of the string. +Use `slice(0,1)` and `toUpperCase()` to capitalize first letter, `slice(1)` to get the rest of the string. +Omit the `lowerRest` parameter to keep the rest of the string intact, or set it to `true` to convert to lower case. ```js -var capitalize = str => str[0].toUpperCase() + str.slice(1); +const capitalize = (str, lowerRest = false) => + str.slice(0, 1).toUpperCase() + (lowerRest? str.slice(1).toLowerCase() : str.slice(1)); ``` diff --git a/snippets/count-occurrences-of-a-value-in-array.md b/snippets/count-occurrences-of-a-value-in-array.md index e7d532435..459aa08d3 100644 --- a/snippets/count-occurrences-of-a-value-in-array.md +++ b/snippets/count-occurrences-of-a-value-in-array.md @@ -1,7 +1,7 @@ ### Count occurrences of a value in array -Use `filter()` to create an array containing only the items with the specified value, count them using `length`. +Use `reduce()` to increment a counter each time you encounter the specific value inside the array. ```js -var countOccurrences = (arr, value) => arr.filter(v => v === value).length; +const countOccurrences = (arr, value) => arr.reduce((a, v) => v===value ? a + 1 : a + 0, 0); ``` diff --git a/snippets/current-URL.md b/snippets/current-URL.md index b417229e8..6256aeaea 100644 --- a/snippets/current-URL.md +++ b/snippets/current-URL.md @@ -3,5 +3,5 @@ Use `window.location.href` to get current URL. ```js -var currentUrl = _ => window.location.href; +const currentUrl = _ => window.location.href; ``` diff --git a/snippets/curry.md b/snippets/curry.md index a30e74433..b03d6bf3e 100644 --- a/snippets/curry.md +++ b/snippets/curry.md @@ -5,7 +5,7 @@ If the number of provided arguments (`args`) is sufficient, call the passed func Otherwise return a curried function `f` that expects the rest of the arguments. ```js -var curry = f => +const curry = f => (...args) => args.length >= f.length ? f(...args) : (...otherArgs) => curry(f)(...args, ...otherArgs) ``` diff --git a/snippets/difference-between-arrays.md b/snippets/difference-between-arrays.md index 01e6c5883..9976f67a9 100644 --- a/snippets/difference-between-arrays.md +++ b/snippets/difference-between-arrays.md @@ -1,8 +1,7 @@ ### Difference between arrays -Use `filter()` to remove values that are part of `values`, determined using `indexOf()`. +Use `filter()` to remove values that are part of `values`, determined using `includes()`. ```js -var difference = (arr, values) => - arr.filter(v => values.indexOf(v) === -1); +const difference = (arr, values) => arr.filter(v => !values.includes(v)); ``` diff --git a/snippets/distance-between-two-points.md b/snippets/distance-between-two-points.md index e8c91eafd..a93ca2102 100644 --- a/snippets/distance-between-two-points.md +++ b/snippets/distance-between-two-points.md @@ -1,8 +1,7 @@ ### Distance between two points -Use `Math.pow()` and `Math.sqrt()` to calculate the Euclidean distance between two points. +Use `Math.hypot()` to calculate the Euclidean distance between two points. ```js -var distance = x0, y0, x1, y1 => - Math.sqrt(Math.pow(x1-x0, 2) + Math.pow(y1 - y0, 2)) +const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0); ``` diff --git a/snippets/escape-regular-expression.md b/snippets/escape-regular-expression.md index 00367ec3d..69fd9958a 100644 --- a/snippets/escape-regular-expression.md +++ b/snippets/escape-regular-expression.md @@ -3,7 +3,7 @@ Use `replace()` to escape special characters. ```js -var escapeRegExp = s => +const escapeRegExp = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); } ``` diff --git a/snippets/even-or-odd-number.md b/snippets/even-or-odd-number.md index 1745c5e24..c846aa517 100644 --- a/snippets/even-or-odd-number.md +++ b/snippets/even-or-odd-number.md @@ -4,5 +4,5 @@ Use `Math.abs()` to extend logic to negative numbers, check using the modulo (`% Return `true` if the number is even, `false` if the number is odd. ```js -var isEven = num => Math.abs(num) % 2 === 0; +const isEven = num => Math.abs(num) % 2 === 0; ``` diff --git a/snippets/factorial.md b/snippets/factorial.md index fb60c9204..8472c3f51 100644 --- a/snippets/factorial.md +++ b/snippets/factorial.md @@ -1,8 +1,9 @@ ### Factorial -Create an array of length `n+1`, use `reduce()` to get the product of every value in the given range, utilizing the index of each element. +Use recursion. +If `n` is less than or equal to `1`, return `1`. +Otherwise, return the product of `n` and the factorial of `n - 1`. ```js -var factorial = n => - Array.apply(null, [1].concat(Array(n))).reduce( (a, _, i) => a * i || 1 , 1); +const factorial = n => n <= 1 ? 1 : n * factorial(n - 1) ``` diff --git a/snippets/fibonacci-array-generator.md b/snippets/fibonacci-array-generator.md index 209b186d6..08a587565 100644 --- a/snippets/fibonacci-array-generator.md +++ b/snippets/fibonacci-array-generator.md @@ -4,7 +4,7 @@ Create an empty array of the specific length, initializing the first two values Use `reduce()` to add values into the array, using the sum of the last two values, except for the first two. ```js -var fibonacci = n => +const fibonacci = n => Array.apply(null, [0,1].concat(Array(n-2))).reduce( (acc, val, i) => { acc.push( i>1 ? acc[i-1]+acc[i-2] : val); diff --git a/snippets/filter-out-non-uniqe-values-in-an-array.md b/snippets/filter-out-non-uniqe-values-in-an-array.md new file mode 100644 index 000000000..622026234 --- /dev/null +++ b/snippets/filter-out-non-uniqe-values-in-an-array.md @@ -0,0 +1,8 @@ +### Filter out non-unique values in an array + +Use `Array.filter()` for an array containing only the unique values. + +```js +const unique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i)); +// unique([1,2,2,3,4,4,5]) -> [1,3,5] +``` diff --git a/snippets/flatten-array.md b/snippets/flatten-array.md index eb5967a5e..cba163a5e 100644 --- a/snippets/flatten-array.md +++ b/snippets/flatten-array.md @@ -4,6 +4,6 @@ Use recursion. Use `reduce()` to get all elements that are not arrays, flatten each element that is an array. ```js -var flatten = arr => +const flatten = arr => arr.reduce( (a, v) => a.concat( Array.isArray(v) ? flatten(v) : v ), []); ``` diff --git a/snippets/get-scroll-position.md b/snippets/get-scroll-position.md new file mode 100644 index 000000000..ea823fd18 --- /dev/null +++ b/snippets/get-scroll-position.md @@ -0,0 +1,11 @@ +## Get scroll position + +Use `pageXOffset` and `pageYOffset` if they are defined, otherwise `scrollLeft` and `scrollTop`. +You can omit `el` to use a default value of `window`. + +```js +const getScrollPos = (el = window) => + ( {x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft, + y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop} ); +// getScrollPos() -> {x: 0, y: 200} +``` diff --git a/snippets/greatest-common-divisor-(GCD).md b/snippets/greatest-common-divisor-(GCD).md index 3a201fb28..32935afe7 100644 --- a/snippets/greatest-common-divisor-(GCD).md +++ b/snippets/greatest-common-divisor-(GCD).md @@ -5,5 +5,5 @@ Base case is when `y` equals `0`. In this case, return `x`. Otherwise, return the GCD of `y` and the remainder of the division `x/y`. ```js -var gcd = (x , y) => !y ? x : gcd(y, x % y); +const gcd = (x , y) => !y ? x : gcd(y, x % y); ``` diff --git a/snippets/head-of-list.md b/snippets/head-of-list.md index b0b8e6305..16aec6a09 100644 --- a/snippets/head-of-list.md +++ b/snippets/head-of-list.md @@ -3,5 +3,5 @@ Return `arr[0]`. ```js -var head = arr => arr[0]; +const head = arr => arr[0]; ``` diff --git a/snippets/initial-of-list.md b/snippets/initial-of-list.md index 8ed934543..273c6d737 100644 --- a/snippets/initial-of-list.md +++ b/snippets/initial-of-list.md @@ -3,5 +3,5 @@ Return `arr.slice(0,-1)`. ```js -var initial = arr => arr.slice(0,-1); +const initial = arr => arr.slice(0,-1); ``` diff --git a/snippets/initialize-array-with-range.md b/snippets/initialize-array-with-range.md index 494138621..cdcc8fb82 100644 --- a/snippets/initialize-array-with-range.md +++ b/snippets/initialize-array-with-range.md @@ -4,6 +4,6 @@ Use `Array(end-start)` to create an array of the desired length, `map()` to fill You can omit `start` to use a default value of `0`. ```js -var initializeArrayRange = (end, start = 0) => +const initializeArrayRange = (end, start = 0) => Array.apply(null, Array(end-start)).map( (v,i) => i + start ); ``` diff --git a/snippets/initialize-array-with-values.md b/snippets/initialize-array-with-values.md index f03c1e78b..a01104ea8 100644 --- a/snippets/initialize-array-with-values.md +++ b/snippets/initialize-array-with-values.md @@ -4,6 +4,6 @@ Use `Array(n)` to create an array of the desired length, `fill(v)` to fill it wi You can omit `v` to use a default value of `0`. ```js -var initializeArray = (n, v = 0) => +const initializeArray = (n, v = 0) => Array(n).fill(v); ``` diff --git a/snippets/last-of-list.md b/snippets/last-of-list.md index 4397d5980..62f7219a7 100644 --- a/snippets/last-of-list.md +++ b/snippets/last-of-list.md @@ -3,5 +3,5 @@ Return `arr.slice(-1)[0]`. ```js -var initial = arr => arr.slice(-1)[0]; +const last = arr => arr.slice(-1)[0]; ``` diff --git a/snippets/measure-time-taken-by-function.md b/snippets/measure-time-taken-by-function.md index 254243c56..88dc7d48a 100644 --- a/snippets/measure-time-taken-by-function.md +++ b/snippets/measure-time-taken-by-function.md @@ -4,7 +4,7 @@ Use `performance.now()` to get start and end time for the function, `console.log First argument is the function name, subsequent arguments are passed to the function. ```js -var timeTaken = (f,...args) => { +const timeTaken = (f,...args) => { var t0 = performance.now(), r = f(...args); console.log(performance.now() - t0); return r; diff --git a/snippets/object-from-key-value-pairs.md b/snippets/object-from-key-value-pairs.md index b133b82d5..0435b4c4d 100644 --- a/snippets/object-from-key-value-pairs.md +++ b/snippets/object-from-key-value-pairs.md @@ -3,5 +3,5 @@ Use `Array.reduce()` to create and combine key-value pairs. ```js -const objectFromPairs = arr => arr => arr.reduce((a,b) => { a[b[0]] = b[1]; return a;}, {}) +const objectFromPairs = arr => arr => arr.reduce((a,b) => { a[b[0]] = b[1]; return a;}, {}); ``` diff --git a/snippets/powerset.md b/snippets/powerset.md index 53c98a3a1..de2ecdc42 100644 --- a/snippets/powerset.md +++ b/snippets/powerset.md @@ -1,8 +1,8 @@ ### Powerset -Use `reduce()` combined with `map()` to iterate over elements and combine into an array containing all combinations. +Use `reduce()` combined with `map()` to iterate over elements and combine into an array containing all combinations. ```js -var powerset = arr => +const powerset = arr => arr.reduce( (a,v) => a.concat(a.map( r => [v].concat(r) )), [[]]); ``` diff --git a/snippets/random-number-in-range.md b/snippets/random-number-in-range.md index f9f768fa0..ed4dc7af8 100644 --- a/snippets/random-number-in-range.md +++ b/snippets/random-number-in-range.md @@ -3,5 +3,5 @@ Use `Math.random()` to generate a random value, map it to the desired range using multiplication. ```js -var randomInRange = (min, max) => Math.random() * (max - min) + min; +const randomInRange = (min, max) => Math.random() * (max - min) + min; ``` diff --git a/snippets/randomize-order-of-array.md b/snippets/randomize-order-of-array.md index 8228dcfdf..ed826338d 100644 --- a/snippets/randomize-order-of-array.md +++ b/snippets/randomize-order-of-array.md @@ -3,5 +3,5 @@ Use `sort()` to reorder elements, utilizing `Math.random()` to randomize the sorting. ```js -var randomizeOrder = arr => arr.sort( (a,b) => Math.random() >= 0.5 ? -1 : 1) +const randomizeOrder = arr => arr.sort( (a,b) => Math.random() >= 0.5 ? -1 : 1) ``` diff --git a/snippets/redirect-to-url.md b/snippets/redirect-to-url.md index d21fcf4b8..e459c9ea7 100644 --- a/snippets/redirect-to-url.md +++ b/snippets/redirect-to-url.md @@ -4,6 +4,6 @@ Use `window.location.href` or `window.location.replace()` to redirect to `url`. Pass a second argument to simulate a link click (`true` - default) or an HTTP redirect (`false`). ```js -var redirect = (url, asLink = true) => +const redirect = (url, asLink = true) => asLink ? window.location.href = url : window.location.replace(url); ``` diff --git a/snippets/reverse-a-string.md b/snippets/reverse-a-string.md new file mode 100644 index 000000000..a8612177e --- /dev/null +++ b/snippets/reverse-a-string.md @@ -0,0 +1,8 @@ +### Reverse a string + +Use array destructuring and `Array.reverse()` to reverse the order of the characters in the string. +Combine characters to get a string using `join('')`. + +```js +const reverseString = str => [...str].reverse().join(''); +``` diff --git a/snippets/scroll-to-top.md b/snippets/scroll-to-top.md index a562869d2..1765fb4f3 100644 --- a/snippets/scroll-to-top.md +++ b/snippets/scroll-to-top.md @@ -1,11 +1,11 @@ ### Scroll to top Get distance from top using `document.documentElement.scrollTop` or `document.body.scrollTop`. -Scroll by a fraction of the distance from top. Use `window.requestFrame()` to animate the scrolling. +Scroll by a fraction of the distance from top. Use `window.requestAnimationFrame()` to animate the scrolling. ```js -var scrollToTop = _ => { - var c = document.documentElement.scrollTop || document.body.scrollTop; +const scrollToTop = _ => { + const c = document.documentElement.scrollTop || document.body.scrollTop; if(c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c/8); diff --git a/snippets/similarity-between-arrays.md b/snippets/similarity-between-arrays.md index b4d08de0a..7b71c56bd 100644 --- a/snippets/similarity-between-arrays.md +++ b/snippets/similarity-between-arrays.md @@ -1,8 +1,7 @@ ### Similarity between arrays -Use `filter()` to remove values that are not part of `values`, determined using `indexOf()`. +Use `filter()` to remove values that are not part of `values`, determined using `includes()`. ```js -var difference = (arr, values) => - arr.filter(v => values.indexOf(v) !== -1); +const difference = (arr, values) => arr.filter(v => values.includes(v)); ``` diff --git a/snippets/sort-characters-in-string-(alphabetical).md b/snippets/sort-characters-in-string-(alphabetical).md index 89ad75144..ac3c8208b 100644 --- a/snippets/sort-characters-in-string-(alphabetical).md +++ b/snippets/sort-characters-in-string-(alphabetical).md @@ -3,6 +3,6 @@ Split the string using `split('')`, `sort()` utilizing `localeCompare()`, recombine using `join('')`. ```js -var sortCharactersInString = str => +const sortCharactersInString = str => str.split('').sort( (a,b) => a.localeCompare(b) ).join(''); ``` diff --git a/snippets/sum-of-array-of-numbers.md b/snippets/sum-of-array-of-numbers.md index 22d202550..e5207ccb0 100644 --- a/snippets/sum-of-array-of-numbers.md +++ b/snippets/sum-of-array-of-numbers.md @@ -3,6 +3,6 @@ Use `reduce()` to add each value to an accumulator, initialized with a value of `0`. ```js -var sum = arr => +const sum = arr => arr.reduce( (acc , val) => acc + val, 0); ``` diff --git a/snippets/tail-of-list.md b/snippets/tail-of-list.md index 1b5adfd83..802a91ec6 100644 --- a/snippets/tail-of-list.md +++ b/snippets/tail-of-list.md @@ -3,5 +3,5 @@ Return `arr.slice(1)`. ```js -var tail = arr => arr.slice(1); +const tail = arr => arr.slice(1); ``` diff --git a/snippets/unique-values-of-array.md b/snippets/unique-values-of-array.md index d00c7f112..0d7639815 100644 --- a/snippets/unique-values-of-array.md +++ b/snippets/unique-values-of-array.md @@ -1,13 +1,8 @@ ### Unique values of array -Use `reduce()` to accumulate all unique values in an array. -Check if each value has already been added, using `indexOf()` on the accumulator array. +Use ES6 `Set` and the `...rest` operator to discard all duplicated values. ```js -var uniqueValues = arr => - arr.reduce( (acc, val) => { - if(acc.indexOf(val) === -1) - acc.push(val); - return acc; - }, []); +const unique = arr => [...new Set(arr)]; +// unique([1,2,2,3,4,4,5]) -> [1,2,3,4,5] ``` diff --git a/snippets/validate-number.md b/snippets/validate-number.md index 38bfb2f58..6f273350d 100644 --- a/snippets/validate-number.md +++ b/snippets/validate-number.md @@ -4,5 +4,5 @@ Use `!isNaN` in combination with `parseFloat()` to check if the argument is a nu Use `isFinite()` to check if the number is finite. ```js -var validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n); +const validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n); ```