andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update snippet descriptions

Browse Source
This commit is contained in:
Isabelle Viktoria Maciohsek
2020-10-21 21:54:53 +03:00
parent 47276ac092
commit ce48fffb4d
41 changed files with 171 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
snippets/mapKeys.md
View File

@ -3,9 +3,9 @@ title: mapKeys
tags: object,intermediate
---
Creates an object with keys generated by running the provided function for each key and the same values as the provided object.
Maps the keys of an object using the provided function, generating a new object.
- Use `Object.keys(obj)` to iterate over the object's keys.
- Use `Object.keys()` to iterate over the object's keys.
- Use `Array.prototype.reduce()` to create a new object with the same values and mapped keys using `fn`.
```js

2
snippets/mapNumRange.md
View File

@ -5,7 +5,7 @@ tags: math,beginner
Maps a number from one range to another range.
- Returns `num` mapped between `outMin`-`outMax` from `inMin`-`inMax`.
- Return `num` mapped between `outMin`-`outMax` from `inMin`-`inMax`.
```js
const mapNumRange = (num, inMin, inMax, outMin, outMax) =>

2
snippets/mapObject.md
View File

@ -3,7 +3,7 @@ title: mapObject
tags: array,object,intermediate
---
Maps the values of an array to an object using a function, where the key-value pairs consist of the original value as the key and the result of the function as the value.
Maps the values of an array to an object using a function.
- Use `Array.prototype.reduce()` to apply `fn` to each element in `arr` and combine the results into an object.
- Use `el` as the key for each property and the result of `fn` as the value.

2
snippets/mapString.md
View File

@ -3,7 +3,7 @@ title: mapString
tags: string,intermediate
---
Creates a new string with the results of calling a provided function on every character in the calling string.
Creates a new string with the results of calling a provided function on every character in the given string.
- Use `String.prototype.split('')` and `Array.prototype.map()` to call the provided function, `fn`, for each character in `str`.
- Use `Array.prototype.join('')` to recombine the array of characters into a string.

4
snippets/mapValues.md
View File

@ -3,9 +3,9 @@ title: mapValues
tags: object,intermediate
---
Creates an object with the same keys as the provided object and values generated by running the provided function for each value.
Maps the values of an object using the provided function, generating a new object with the same keys.
- Use `Object.keys(obj)` to iterate over the object's keys.
- Use `Object.keys()` to iterate over the object's keys.
- Use `Array.prototype.reduce()` to create a new object with the same keys and mapped values using `fn`.
```js

9
snippets/mask.md
View File

@ -5,12 +5,15 @@ tags: string,intermediate
Replaces all but the last `num` of characters with the specified mask character.
- Use `String.prototype.slice()` to grab the portion of the characters that will remain unmasked and use `String.padStart()` to fill the beginning of the string with the mask character up to the original length.
- Omit the second argument, `num`, to keep a default of `4` characters unmasked. If `num` is negative, the unmasked characters will be at the start of the string.
- Use `String.prototype.slice()` to grab the portion of the characters that will remain unmasked.
- Use `String.padStart()` to fill the beginning of the string with the `mask` character up to the original length.
- If `num` is negative, the unmasked characters will be at the start of the string.
- Omit the second argument, `num`, to keep a default of `4` characters unmasked.
- Omit the third argument, `mask`, to use a default character of `'*'` for the mask.
```js
const mask = (cc, num = 4, mask = '*') => `${cc}`.slice(-num).padStart(`${cc}`.length, mask);
const mask = (cc, num = 4, mask = '*') =>
`${cc}`.slice(-num).padStart(`${cc}`.length, mask);
```
```js

13
snippets/matches.md
View File

@ -5,14 +5,19 @@ tags: object,intermediate
Compares two objects to determine if the first one contains equivalent property values to the second one.
- Use `Object.keys(source)` to get all the keys of the second object, then `Array.prototype.every()`, `Object.prototype.hasOwnProperty()` and strict comparison to determine if all keys exist in the first object and have the same values.
- Use `Object.keys()` to get all the keys of the second object.
- Use `Array.prototype.every()`, `Object.prototype.hasOwnProperty()` and strict comparison to determine if all keys exist in the first object and have the same values.
```js
const matches = (obj, source) =>
Object.keys(source).every(key => obj.hasOwnProperty(key) && obj[key] === source[key]);
Object.keys(source).every(
key => obj.hasOwnProperty(key) && obj[key] === source[key]
);
```
```js
matches({ age: 25, hair: 'long', beard: true }, { hair: 'long', beard: true }); // true
matches({ hair: 'long', beard: true }, { age: 25, hair: 'long', beard: true }); // false
matches({ age: 25, hair: 'long', beard: true }, { hair: 'long', beard: true });
// true
matches({ hair: 'long', beard: true }, { age: 25, hair: 'long', beard: true });
// false
```

3
snippets/matchesWith.md
View File

@ -5,7 +5,8 @@ tags: object,intermediate
Compares two objects to determine if the first one contains equivalent property values to the second one, based on a provided function.
- Use `Object.keys(source)` to get all the keys of the second object, then `Array.prototype.every()`, `Object.prototype.hasOwnProperty()` and the provided function to determine if all keys exist in the first object and have equivalent values.
- Use `Object.keys()` to get all the keys of the second object.
- Use `Array.prototype.every()`, `Object.prototype.hasOwnProperty()` and the provided function to determine if all keys exist in the first object and have equivalent values.
- If no function is provided, the values will be compared using the equality operator.
```js

8
snippets/maxBy.md
View File

@ -5,13 +5,15 @@ tags: math,array,beginner
Returns the maximum value of an array, after mapping each element to a value using the provided function.
- Use `Array.prototype.map()` to map each element to the value returned by `fn`, `Math.max()` to get the maximum value.
- Use `Array.prototype.map()` to map each element to the value returned by `fn`.
- Use `Math.max()` to get the maximum value.
```js
const maxBy = (arr, fn) => Math.max(...arr.map(typeof fn === 'function' ? fn : val => val[fn]));
const maxBy = (arr, fn) =>
Math.max(...arr.map(typeof fn === 'function' ? fn : val => val[fn]));
```
```js
maxBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n); // 8
maxBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], x => x.n); // 8
maxBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n'); // 8
```

11
snippets/maxDate.md
View File

@ -1,22 +1,23 @@
---
title: maxDate
tags: date,math,beginner
tags: date,intermediate
---
Returns the maximum of the given dates.
- Use the ES6 spread syntax with `Math.max` to find the maximum date value, `new Date()` to convert it to a `Date` object.
- Use the ES6 spread syntax with `Math.max()` to find the maximum date value.
- Use `new Date()` to convert it to a `Date` object.
```js
const maxDate = dates => new Date(Math.max(...dates));
const maxDate = (...dates) => new Date(Math.max(...dates));
```
```js
const array = [
const dates = [
new Date(2017, 4, 13),
new Date(2018, 2, 12),
new Date(2016, 0, 10),
new Date(2016, 0, 9)
];
maxDate(array); // 2018-03-11T22:00:00.000Z
maxDate(...dates); // 2018-03-11T22:00:00.000Z
```

6
snippets/maxN.md
View File

@ -1,14 +1,14 @@
---
title: maxN
tags: array,math,beginner
tags: array,math,intermediate
---
Returns the `n` maximum elements from the provided array.
If `n` is greater than or equal to the provided array's length, then return the original array (sorted in descending order).
- Use `Array.prototype.sort()` combined with the spread operator (`...`) to create a shallow clone of the array and sort it in descending order.
- Use `Array.prototype.slice()` to get the specified number of elements.
- Omit the second argument, `n`, to get a one-element array.
- If `n` is greater than or equal to the provided array's length, then return the original array (sorted in descending order).
```js
const maxN = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);
@ -16,5 +16,5 @@ const maxN = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);
```js
maxN([1, 2, 3]); // [3]
maxN([1, 2, 3], 2); // [3,2]
maxN([1, 2, 3], 2); // [3, 2]
```

2
snippets/median.md
View File

@ -6,7 +6,7 @@ tags: math,array,intermediate
Returns the median of an array of numbers.
- Find the middle of the array, use `Array.prototype.sort()` to sort the values.
- Return the number at the midpoint if `length` is odd, otherwise the average of the two middle numbers.
- Return the number at the midpoint if `Array.prototype.length` is odd, otherwise the average of the two middle numbers.
```js
const median = arr => {

8
snippets/memoize.md
View File

@ -13,8 +13,10 @@ Returns the memoized (cached) function.
```js
const memoize = fn => {
const cache = new Map();
const cached = function(val) {
return cache.has(val) ? cache.get(val) : cache.set(val, fn.call(this, val)) && cache.get(val);
const cached = function (val) {
return cache.has(val)
? cache.get(val)
: cache.set(val, fn.call(this, val)) && cache.get(val);
};
cached.cache = cache;
return cached;
@ -25,6 +27,6 @@ const memoize = fn => {
// See the `anagrams` snippet.
const anagramsCached = memoize(anagrams);
anagramsCached('javascript'); // takes a long time
anagramsCached('javascript'); // returns virtually instantly since it's now cached
anagramsCached('javascript'); // returns virtually instantly since it's cached
console.log(anagramsCached.cache); // The cached anagrams map
```

13
snippets/merge.md
View File

@ -5,15 +5,17 @@ tags: object,array,intermediate
Creates a new object from the combination of two or more objects.
- Use `Array.prototype.reduce()` combined with `Object.keys(obj)` to iterate over all objects and keys.
- Use `hasOwnProperty()` and `Array.prototype.concat()` to append values for keys existing in multiple objects.
- Use `Array.prototype.reduce()` combined with `Object.keys()` to iterate over all objects and keys.
- Use `Object.prototype.hasOwnProperty()` and `Array.prototype.concat()` to append values for keys existing in multiple objects.
```js
const merge = (...objs) =>
[...objs].reduce(
(acc, obj) =>
Object.keys(obj).reduce((a, k) => {
acc[k] = acc.hasOwnProperty(k) ? [].concat(acc[k]).concat(obj[k]) : obj[k];
acc[k] = acc.hasOwnProperty(k)
? [].concat(acc[k]).concat(obj[k])
: obj[k];
return acc;
}, {}),
{}
@ -30,5 +32,6 @@ const other = {
b: [2, 3],
c: 'foo'
};
merge(object, other); // { a: [ { x: 2 }, { y: 4 }, { z: 3 } ], b: [ 1, 2, 3 ], c: 'foo' }
```
merge(object, other);
// { a: [ { x: 2 }, { y: 4 }, { z: 3 } ], b: [ 1, 2, 3 ], c: 'foo' }
```

3
snippets/midpoint.md
View File

@ -5,7 +5,8 @@ tags: math,beginner
Calculates the midpoint between two pairs of (x,y) points.
- Destructure the array to get `x1`, `y1`, `x2` and `y2`, calculate the midpoint for each dimension by dividing the sum of the two endpoints by `2`.
- Destructure the array to get `x1`, `y1`, `x2` and `y2`.
- Calculate the midpoint for each dimension by dividing the sum of the two endpoints by `2`.
```js
const midpoint = ([x1, y1], [x2, y2]) => [(x1 + x2) / 2, (y1 + y2) / 2];

2
snippets/milesToKm.md
View File

@ -12,5 +12,5 @@ const milesToKm = miles => miles * 1.609344;
```
```js
milesToKm(5); // 8.04672
milesToKm(5); // ~8.04672
```

8
snippets/minBy.md
View File

@ -5,13 +5,15 @@ tags: math,array,beginner
Returns the minimum value of an array, after mapping each element to a value using the provided function.
- Use `Array.prototype.map()` to map each element to the value returned by `fn`, `Math.min()` to get the minimum value.
- Use `Array.prototype.map()` to map each element to the value returned by `fn`.
- Use `Math.min()` to get the minimum value.
```js
const minBy = (arr, fn) => Math.min(...arr.map(typeof fn === 'function' ? fn : val => val[fn]));
const minBy = (arr, fn) =>
Math.min(...arr.map(typeof fn === 'function' ? fn : val => val[fn]));
```
```js
minBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n); // 2
minBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], x => x.n); // 2
minBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n'); // 2
```

11
snippets/minDate.md
View File

@ -1,22 +1,23 @@
---
title: minDate
tags: date,math,beginner
tags: date,intermediate
---
Returns the minimum of the given dates.
- Use the ES6 spread syntax to find the minimum date value, `new Date()` to convert it to a `Date` object.
- Use the ES6 spread syntax with `Math.min()` to find the minimum date value.
- Use `new Date()` to convert it to a `Date` object.
```js
const minDate = dates => new Date(Math.min(...dates));
const minDate = (...dates) => new Date(Math.min(...dates));
```
```js
const array = [
const dates = [
new Date(2017, 4, 13),
new Date(2018, 2, 12),
new Date(2016, 0, 10),
new Date(2016, 0, 9)
];
minDate(array); // 2016-01-08T22:00:00.000Z
minDate(...dates); // 2016-01-08T22:00:00.000Z
```

6
snippets/minN.md
View File

@ -1,14 +1,14 @@
---
title: minN
tags: array,math,beginner
tags: array,math,intermediate
---
Returns the `n` minimum elements from the provided array.
If `n` is greater than or equal to the provided array's length, then return the original array (sorted in ascending order).
- Use `Array.prototype.sort()` combined with the spread operator (`...`) to create a shallow clone of the array and sort it in ascending order.
- Use `Array.prototype.slice()` to get the specified number of elements.
- Omit the second argument, `n`, to get a one-element array.
- If `n` is greater than or equal to the provided array's length, then return the original array (sorted in ascending order).
```js
const minN = (arr, n = 1) => [...arr].sort((a, b) => a - b).slice(0, n);
@ -16,5 +16,5 @@ const minN = (arr, n = 1) => [...arr].sort((a, b) => a - b).slice(0, n);
```js
minN([1, 2, 3]); // [1]
minN([1, 2, 3], 2); // [1,2]
minN([1, 2, 3], 2); // [1, 2]
```

8
snippets/mostPerformant.md
View File

@ -1,14 +1,14 @@
---
title: mostPerformant
tags: function,intermediate
tags: function,advanced
---
Returns the index of the function in an array of functions which executed the fastest.
- Use `Array.prototype.map()` to generate an array where each value is the total time taken to execute the function after `iterations` times.
-Use the difference in `performance.now()` values before and after to get the total time in milliseconds to a high degree of accuracy.
- Use the difference in `performance.now()` values before and after to get the total time in milliseconds to a high degree of accuracy.
- Use `Math.min()` to find the minimum execution time, and return the index of that shortest time which corresponds to the index of the most performant function.
- Omit the second argument, `iterations`, to use a default of 10,000 iterations.
- Omit the second argument, `iterations`, to use a default of `10000` iterations.
- The more iterations, the more reliable the result but the longer it will take.
```js
@ -29,7 +29,7 @@ mostPerformant([
[1, 2, 3, 4, 5, 6, 7, 8, 9, '10'].every(el => typeof el === 'number');
},
() => {
// Only needs to reach index `1` before returning false
// Only needs to reach index `1` before returning `false`
[1, '2', 3, 4, 5, 6, 7, 8, 9, 10].every(el => typeof el === 'number');
}
]); // 1

12
snippets/nest.md
View File

@ -1,13 +1,13 @@
---
title: nest
tags: object,intermediate
tags: object,recursion,intermediate
---
Given a flat array of objects linked to one another, it will nest them recursively.
Useful for nesting comments, such as the ones on reddit.com.
Nests recursively objects linked to one another in a flat array.
- Use recursion.
- Use `Array.prototype.filter()` to filter the items where the `id` matches the `link`, then `Array.prototype.map()` to map each one to a new object that has a `children` property which recursively nests the items based on which ones are children of the current item.
- Use `Array.prototype.filter()` to filter the items where the `id` matches the `link`.
- Use `Array.prototype.map()` to map each item to a new object that has a `children` property which recursively nests the items based on which ones are children of the current item.
- Omit the second argument, `id`, to default to `null` which indicates the object is not linked to another one (i.e. it is a top level object).
- Omit the third argument, `link`, to use `'parent_id'` as the default property which links the object to another one by its `id`.
@ -19,7 +19,6 @@ const nest = (items, id = null, link = 'parent_id') =>
```
```js
// One top level comment
const comments = [
{ id: 1, parent_id: null },
{ id: 2, parent_id: 1 },
@ -27,5 +26,6 @@ const comments = [
{ id: 4, parent_id: 2 },
{ id: 5, parent_id: 4 }
];
const nestedComments = nest(comments); // [{ id: 1, parent_id: null, children: [...] }]
const nestedComments = nest(comments);
// [{ id: 1, parent_id: null, children: [...] }]
```

2
snippets/nodeListToArray.md
View File

@ -5,7 +5,7 @@ tags: browser,array,beginner
Converts a `NodeList` to an array.
- Use spread operator inside new array to convert a `NodeList` to an array.
- Use spread operator (`...`) inside new array to convert a `NodeList` to an array.
```js
const nodeListToArray = nodeList => [...nodeList];

2
snippets/none.md
View File

@ -3,7 +3,7 @@ title: none
tags: array,beginner
---
Returns `true` if the provided predicate function returns `false` for all elements in a collection, `false` otherwise.
Checks if the provided predicate function returns `false` for all elements in a collection.
- Use `Array.prototype.some()` to test if any elements in the collection return `true` based on `fn`.
- Omit the second argument, `fn`, to use `Boolean` as a default.

11
snippets/normalizeLineEndings.md
View File

@ -1,6 +1,6 @@
---
title: normalizeLineEndings
tags: string,intermediate
tags: string,regexp,intermediate
---
Normalizes line endings in a string.
@ -9,10 +9,13 @@ Normalizes line endings in a string.
- Omit the second argument, `normalized`, to use the default value of `'\r\n'`.
```js
const normalizeLineEndings = (str, normalized = '\r\n') => str.replace(/\r?\n/g, normalized);
const normalizeLineEndings = (str, normalized = '\r\n') =>
str.replace(/\r?\n/g, normalized);
```
```js
normalizeLineEndings('This\r\nis a\nmultiline\nstring.\r\n'); // 'This\r\nis a\r\nmultiline\r\nstring.\r\n'
normalizeLineEndings('This\r\nis a\nmultiline\nstring.\r\n', '\n'); // 'This\nis a\nmultiline\nstring.\n'
normalizeLineEndings('This\r\nis a\nmultiline\nstring.\r\n');
// 'This\r\nis a\r\nmultiline\r\nstring.\r\n'
normalizeLineEndings('This\r\nis a\nmultiline\nstring.\r\n', '\n');
// 'This\nis a\nmultiline\nstring.\n'
```

3
snippets/nthArg.md
View File

@ -3,9 +3,10 @@ title: nthArg
tags: function,beginner
---
Creates a function that gets the argument at index `n`. If `n` is negative, the nth argument from the end is returned.
Creates a function that gets the argument at index `n`.
- Use `Array.prototype.slice()` to get the desired argument at index `n`.
- If `n` is negative, the nth argument from the end is returned.
```js
const nthArg = n => (...args) => args.slice(n)[0];

3
snippets/nthElement.md
View File

@ -10,7 +10,8 @@ Returns the nth element of an array.
- Omit the second argument, `n`, to get the first element of the array.
```js
const nthElement = (arr, n = 0) => (n === -1 ? arr.slice(n) : arr.slice(n, n + 1))[0];
const nthElement = (arr, n = 0) =>
(n === -1 ? arr.slice(n) : arr.slice(n, n + 1))[0];
```
```js

3
snippets/objectFromPairs.md
View File

@ -8,7 +8,8 @@ Creates an object from the given key-value pairs.
- Use `Array.prototype.reduce()` to create and combine key-value pairs.
```js
const objectFromPairs = arr => arr.reduce((a, [key, val]) => ((a[key] = val), a), {});
const objectFromPairs = arr =>
arr.reduce((a, [key, val]) => ((a[key] = val), a), {});
```
```js

23
snippets/objectToQueryString.md
View File

@ -1,27 +1,32 @@
---
title: objectToQueryString
tags: object,intermediate
tags: object,advanced
---
Returns a query string generated from the key-value pairs of the given object.
- Use `Array.prototype.reduce()` on `Object.entries(queryParameters)` to create the query string.
- Determine the `symbol` to be either `?` or `&` based on the length of `queryString` and concatenate `val` to `queryString` only if it's a string.
- Determine the `symbol` to be either `?` or `&` based on the length of `queryString`.
- Concatenate `val` to `queryString` only if it's a string.
- Return the `queryString` or an empty string when the `queryParameters` are falsy.
```js
const objectToQueryString = queryParameters => {
return queryParameters
? Object.entries(queryParameters).reduce((queryString, [key, val], index) => {
const symbol = queryString.length === 0 ? '?' : '&';
queryString += typeof val === 'string' ? `${symbol}${key}=${val}` : '';
return queryString;
}, '')
? Object.entries(queryParameters).reduce(
(queryString, [key, val], index) => {
const symbol = queryString.length === 0 ? '?' : '&';
queryString +=
typeof val === 'string' ? `${symbol}${key}=${val}` : '';
return queryString;
},
''
)
: '';
};
```
```js
objectToQueryString({ page: '1', size: '2kg', key: undefined }); // '?page=1&size=2kg'
objectToQueryString({ page: '1', size: '2kg', key: undefined });
// '?page=1&size=2kg'
```

16
snippets/observeMutations.md
View File

@ -3,7 +3,7 @@ title: observeMutations
tags: browser,event,advanced
---
Returns a new MutationObserver and runs the provided callback for each mutation on the specified element.
Returns a new `MutationObserver` and runs the provided callback for each mutation on the specified element.
- Use a [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to observe mutations on the given element.
- Use `Array.prototype.forEach()` to run the callback for each mutation that is observed.
@ -11,7 +11,9 @@ Returns a new MutationObserver and runs the provided callback for each mutation
```js
const observeMutations = (element, callback, options) => {
const observer = new MutationObserver(mutations => mutations.forEach(m => callback(m)));
const observer = new MutationObserver(mutations =>
mutations.forEach(m => callback(m))
);
observer.observe(
element,
Object.assign(
@ -21,7 +23,7 @@ const observeMutations = (element, callback, options) => {
attributeOldValue: true,
characterData: true,
characterDataOldValue: true,
subtree: true
subtree: true,
},
options
)
@ -31,6 +33,8 @@ const observeMutations = (element, callback, options) => {
```
```js
const obs = observeMutations(document, console.log); // Logs all mutations that happen on the page
obs.disconnect(); // Disconnects the observer and stops logging mutations on the page
```
const obs = observeMutations(document, console.log);
// Logs all mutations that happen on the page
obs.disconnect();
// Disconnects the observer and stops logging mutations on the page
```

3
snippets/off.md
View File

@ -9,7 +9,8 @@ Removes an event listener from an element.
- Omit the fourth argument `opts` to use `false` or specify it based on the options used when the event listener was added.
```js
const off = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts);
const off = (el, evt, fn, opts = false) =>
el.removeEventListener(evt, fn, opts);
```
```js

2
snippets/offset.md
View File

@ -6,7 +6,7 @@ tags: array,beginner
Moves the specified amount of elements to the end of the array.
- Use `Array.prototype.slice()` twice to get the elements after the specified index and the elements before that.
- Use the spread operator(`...`) to combine the two into one array.
- Use the spread operator (`...`) to combine the two into one array.
- If `offset` is negative, the elements will be moved from end to start.
```js

2
snippets/omit.md
View File

@ -5,7 +5,7 @@ tags: object,intermediate
Omits the key-value pairs corresponding to the given keys from an object.
- Use `Object.keys(obj)`, `Array.prototype.filter()` and `Array.prototype.includes()` to remove the provided keys.
- Use `Object.keys()`, `Array.prototype.filter()` and `Array.prototype.includes()` to remove the provided keys.
- Use `Array.prototype.reduce()` to convert the filtered keys back to an object with the corresponding key-value pairs.
```js

5
snippets/omitBy.md
View File

@ -3,10 +3,11 @@ title: omitBy
tags: object,intermediate
---
Creates an object composed of the properties the given function returns falsy for. The function is invoked with two arguments: (value, key).
Omits the key-value pairs corresponding to the keys of the object for which the given function returns falsy.
- Use `Object.keys(obj)` and `Array.prototype.filter()`to remove the keys for which `fn` returns a truthy value.
- Use `Object.keys()` and `Array.prototype.filter()` to remove the keys for which `fn` returns a truthy value.
- Use `Array.prototype.reduce()` to convert the filtered keys back to an object with the corresponding key-value pairs.
- The callback function is invoked with two arguments: (value, key).
```js
const omitBy = (obj, fn) =>

17
snippets/on.md
View File

@ -7,13 +7,18 @@ Adds an event listener to an element with the ability to use event delegation.
- Use `EventTarget.addEventListener()` to add an event listener to an element.
- If there is a `target` property supplied to the options object, ensure the event target matches the target specified and then invoke the callback by supplying the correct `this` context.
- Returns a reference to the custom delegator function, in order to be possible to use with [`off`](#off).
- Omit `opts` to default to non-delegation behavior and event bubbling.
- Returns a reference to the custom delegator function, in order to be possible to use with [`off`](/js/s/off).
```js
const on = (el, evt, fn, opts = {}) => {
const delegatorFn = e => e.target.matches(opts.target) && fn.call(e.target, e);
el.addEventListener(evt, opts.target ? delegatorFn : fn, opts.options || false);
const delegatorFn = e =>
e.target.matches(opts.target) && fn.call(e.target, e);
el.addEventListener(
evt,
opts.target ? delegatorFn : fn,
opts.options || false
);
if (opts.target) return delegatorFn;
};
```
@ -21,6 +26,8 @@ const on = (el, evt, fn, opts = {}) => {
```js
const fn = () => console.log('!');
on(document.body, 'click', fn); // logs '!' upon clicking the body
on(document.body, 'click', fn, { target: 'p' }); // logs '!' upon clicking a `p` element child of the body
on(document.body, 'click', fn, { options: true }); // use capturing instead of bubbling
on(document.body, 'click', fn, { target: 'p' });
// logs '!' upon clicking a `p` element child of the body
on(document.body, 'click', fn, { options: true });
// use capturing instead of bubbling
```

14
snippets/onUserInputChange.md
View File

@ -3,11 +3,11 @@ title: onUserInputChange
tags: browser,event,advanced
---
Run the callback whenever the user input type changes (`mouse` or `touch`). Useful for enabling/disabling code depending on the input device. This process is dynamic and works with hybrid devices (e.g. touchscreen laptops).
Runs the callback whenever the user input type changes (`mouse` or `touch`).
- Use two event listeners.
- Assume `mouse` input initially and bind a `touchstart` event listener to the document.
- On `touchstart`, add a `mousemove` event listener to listen for two consecutive `mousemove` events firing within 20ms, using `performance.now()`.
- Assume `mouse` input initially and bind a `'touchstart'` event listener to the document.
- On `'touchstart'`, add a `'mousemove'` event listener to listen for two consecutive `'mousemove'` events firing within 20ms, using `performance.now()`.
- Run the callback with the input type as an argument in either of these situations.
```js
@ -17,12 +17,16 @@ const onUserInputChange = callback => {
const mousemoveHandler = () => {
const now = performance.now();
if (now - lastTime < 20)
(type = 'mouse'), callback(type), document.removeEventListener('mousemove', mousemoveHandler);
(type = 'mouse'),
callback(type),
document.removeEventListener('mousemove', mousemoveHandler);
lastTime = now;
};
document.addEventListener('touchstart', () => {
if (type === 'touch') return;
(type = 'touch'), callback(type), document.addEventListener('mousemove', mousemoveHandler);
(type = 'touch'),
callback(type),
document.addEventListener('mousemove', mousemoveHandler);
});
};
```

3
snippets/once.md
View File

@ -24,5 +24,6 @@ const once = fn => {
const startApp = function(event) {
console.log(this, event); // document.body, MouseEvent
};
document.body.addEventListener('click', once(startApp)); // only runs `startApp` once upon click
document.body.addEventListener('click', once(startApp));
// only runs `startApp` once upon click
```

2
snippets/or.md
View File

@ -3,7 +3,7 @@ title: or
tags: math,logic,beginner
---
Returns `true` if at least one of the arguments is `true`, `false` otherwise.
Checks if at least one of the arguments is `true`.
- Use the logical or (`||`) operator on the two given values.

26
snippets/orderBy.md
View File

@ -1,19 +1,23 @@
---
title: orderBy
tags: object,array,intermediate
tags: object,array,advanced
---
Returns a sorted array of objects ordered by properties and orders.
Sorts an array of objects, ordered by properties and orders.
- Uses `Array.prototype.sort()`, `Array.prototype.reduce()` on the `props` array with a default value of `0`, use array destructuring to swap the properties position depending on the order passed.
- If no `orders` array is passed it sort by `'asc'` by default.
- Uses `Array.prototype.sort()`, `Array.prototype.reduce()` on the `props` array with a default value of `0`.
- Use array destructuring to swap the properties position depending on the order supplied.
- If no `orders` array is supplied, sort by `'asc'` by default.
```js
const orderBy = (arr, props, orders) =>
[...arr].sort((a, b) =>
props.reduce((acc, prop, i) => {
if (acc === 0) {
const [p1, p2] = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]];
const [p1, p2] =
orders && orders[i] === 'desc'
? [b[prop], a[prop]]
: [a[prop], b[prop]];
acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
}
return acc;
@ -22,7 +26,13 @@ const orderBy = (arr, props, orders) =>
```
```js
const users = [{ name: 'fred', age: 48 }, { name: 'barney', age: 36 }, { name: 'fred', age: 40 }];
orderBy(users, ['name', 'age'], ['asc', 'desc']); // [{name: 'barney', age: 36}, {name: 'fred', age: 48}, {name: 'fred', age: 40}]
orderBy(users, ['name', 'age']); // [{name: 'barney', age: 36}, {name: 'fred', age: 40}, {name: 'fred', age: 48}]
const users = [
{ name: 'fred', age: 48 },
{ name: 'barney', age: 36 },
{ name: 'fred', age: 40 },
];
orderBy(users, ['name', 'age'], ['asc', 'desc']);
// [{name: 'barney', age: 36}, {name: 'fred', age: 48}, {name: 'fred', age: 40}]
orderBy(users, ['name', 'age']);
// [{name: 'barney', age: 36}, {name: 'fred', age: 40}, {name: 'fred', age: 48}]
```

2
snippets/orderWith.md
View File

@ -3,7 +3,7 @@ title: orderWith
tags: array,object,intermediate
---
Returns a sorted array of objects ordered by a property, based on the array of orders provided.
Sorts an array of objects, ordered by a property, based on the array of orders provided.
- Use `Array.prototype.reduce()` to create an object from the `order` array with the values as keys and their original index as the value.
- Use `Array.prototype.sort()` to sort the given array, skipping elements for which `prop` is empty or not in the `order` array.

2
snippets/over.md
View File

@ -13,5 +13,5 @@ const over = (...fns) => (...args) => fns.map(fn => fn.apply(null, args));
```js
const minMax = over(Math.min, Math.max);
minMax(1, 2, 3, 4, 5); // [1,5]
minMax(1, 2, 3, 4, 5); // [1, 5]
```

3
snippets/overArgs.md
View File

@ -8,7 +8,8 @@ Creates a function that invokes the provided function with its arguments transfo
- Use `Array.prototype.map()` to apply `transforms` to `args` in combination with the spread operator (`...`) to pass the transformed arguments to `fn`.
```js
const overArgs = (fn, transforms) => (...args) => fn(...args.map((val, i) => transforms[i](val)));
const overArgs = (fn, transforms) =>
(...args) => fn(...args.map((val, i) => transforms[i](val)));
```
```js