2
.gitignore
vendored
2
.gitignore
vendored
@ -1 +1,3 @@
|
||||
node_modules/
|
||||
|
||||
currentSnippet\.js
|
||||
|
||||
@ -1,13 +1,76 @@
|
||||
## 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.
|
||||
**30 seconds of code** is a community effort, so feel free to contribute in any way you can. Every contribution helps!
|
||||
|
||||
### Guidelines for new snippets
|
||||
Here's what you can do to help:
|
||||
|
||||
- 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 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.
|
||||
- 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.
|
||||
- [Open issues](https://github.com/Chalarangelo/30-seconds-of-code/issues/new) for things you want to see added or modified.
|
||||
- Be part of the discussion by helping out with [existing issues](https://github.com/Chalarangelo/30-seconds-of-code/issues) or talking on our [gitter channel](https://gitter.im/30-seconds-of-code/Lobby).
|
||||
- Submit [pull requests](https://github.com/Chalarangelo/30-seconds-of-code/pulls) with snippets you have created (see below for guidelines).
|
||||
- Fix typos in existing snippets or run `npm run lint "snippet-name.md"` on unlinted snippets (yes, this is something we actually want help with).
|
||||
|
||||
### Snippet submission and Pull request guidelines
|
||||
|
||||
- **DO NOT MODIFY THE README.md FILE!** Make changes to individual snippet files. You can optionally run `npm run build-list` to update the README.md file automatically, based on the changes you have made.
|
||||
- **Snippet filenames** must correspond to the title of the snippet. For example if your snippet is titled `### Awesome snippet` the filename should be `awesome-snippet.md`.
|
||||
- Use `kebab-case`, not `snake_case`.
|
||||
- Avoid capitalization of words, except if the whole word is capitalized (e.g `URL` should be capitalized in the filename and the snippet title).
|
||||
- If there are parentheses in the title, add them to the filename (e.g. `awesome-snippet-(extra-awesome).md` if your snippet's title is `Awesome snippet (extra awesome)`).
|
||||
- **Snippet titles** should have only the first letter of the first word capitalized. Certain words can be in capitals (e.g. `URL`, `RGB`), but this is on a per-snippet basis.
|
||||
- All snippet titles must be prefixed with `###` and be at the very first line of your snippet.
|
||||
- Snippet titles must be unique (although if you cannot find a better title, just add some placeholder at the end of the filename and title and we will figure it out).
|
||||
- Follow snippet titles with an empty line.
|
||||
- **Snippet descriptions** must be short and to the point. Try to explain *how* the snippet works and what Javascript features are used. Remember to include what functions you are using and why.
|
||||
- Follow snippet descriptions with an empty line.
|
||||
- **Snippet code** must be enclosed inside ` ```js ` and ` ``` `.
|
||||
- Remember to start your snippet's code on a new line below the opening backticks.
|
||||
- Use ES6 notation to define your function. For example `const myFunction = arg1, arg2 => { }`.
|
||||
- Try to keep your snippets' code short and to the point. Use modern techniques and features. Make sure to test your code before submitting.
|
||||
- All snippets must be followed by one (more if necessary) test case after the code, on a new line, in the form of a comment, along with the expected output. The syntax for this is `myFunction('testInput') -> 'testOutput'`. Use multiline comments only if necessary.
|
||||
- Try to make your function name unique, so that it does not conflict with existing snippets.
|
||||
- Snippets should be short (usually below 10 lines). If your snippet is longer than that, you can still submit it and we can help you shorten it or figure out ways to improve it.
|
||||
- Snippets *should* solve real-world problems, no matter how simple.
|
||||
- Snippets *should* be abstract enough to be applied to different scenarios.
|
||||
- It is not mandatory, but highly appreciated if you provide **test cases** and/or performance tests (we recommend using [jsPerf](https://jsperf.com/)).
|
||||
- You can start creating a new snippet, by using the [snippet template](snippet-template.md) to format your snippets.
|
||||
|
||||
### Additional guidelines and conventions regarding snippets
|
||||
|
||||
- When describing snippets, refer to methods, using their full name. For example, use `Array.reduce()`, instead of `reduce()`.
|
||||
- If your snippet contains argument with default parameters, explain what happens if they are ommited when calling the function and what the default case is.
|
||||
- If your snippet uses recursion, explain the base cases.
|
||||
- Always use `const functionName` for function definitions.
|
||||
- Use variables only when necessary. Prefer `const` when the values are not altered after assignment, otherwise use `let`. Avoid using `var`.
|
||||
- Use `camelCase` for function and variable names if they consist of more than one word.
|
||||
- Try to give meaningful names to variables. For example use `letter`, instead of `lt`. Some exceptions by convention are:
|
||||
- `arr` for arrays (usually as the snippet function's argument).
|
||||
- `str` for strings.
|
||||
- `n` for a numeric value (usually as the snippet function's argument).
|
||||
- `el` for DOM elements (usually as the snippet function's argument).
|
||||
- `val` or `v` for value (usually when iterating a list, mapping, sorting etc.).
|
||||
- `acc` for accumulators in `Array.reduce()`.
|
||||
- `(a,b)` for the two values compared when using `Array.sort()`.
|
||||
- `i` for indexes.
|
||||
- `func` for function arguments.
|
||||
- `nums` for arrays of numbers.
|
||||
- Use `_` if your function takes no arguments or if an argument inside some function (e.g. `Array.reduce()`) is not used anywhere in your code.
|
||||
- Specify default parameters for arguments, if necessary. It is preferred to put default parameters last, unless you have pretty good reason not to.
|
||||
- If your snippet's function takes variadic arguments, use `..args` (although in certain cases, it might be needed to use a different name).
|
||||
- If your snippet function's body is a single statement, omit the `return` keyword and use an expression instead.
|
||||
- Always use soft tabs (2 spaces), never hard tabs.
|
||||
- Omit curly braces (`{` and `}`) whenever possible.
|
||||
- Always use single quotes for string literals. Use template literals, instead, if necessary.
|
||||
- If your snippet's code is short enough (around 80 characters), you can make it a single-line function (although not mandatory). Otherwise, use multiple lines.
|
||||
- Prefer using `Array` methods whenever possible.
|
||||
- Prefer `Array.concat()` instead of `Array.push()` when working with `Array.reduce()`.
|
||||
- Use strict equality checking (`===` and `!==` instead of `==` and `!=`), unless you specificly have reason not to.
|
||||
- Prefer using the ternary operator (`condition ? trueResult : falseResult`) instead of `if else` statements whenever possible.
|
||||
- Avoid nesting ternary operators (but you can do it if you feel like you should).
|
||||
- You should define multiple variables on the same line (e.g. `const x = 0, y = 0`) on the same line whenever possible.
|
||||
- Do not use trailing or leading underscores in variable names.
|
||||
- Use dot notation (`object.property`) for object properties, when possible. Use bracket notation (`object[variable]`) when accessing object properties using a variable.
|
||||
- Use arrow functions as much as possible, except when you can't.
|
||||
- Use semicolons whenever necessary. If your snippet function's body is a single statement, return an expression and add a semicolon at the end.
|
||||
- Leave a single space after a comma (`,`) character.
|
||||
- Try to strike a balance between readability, brevity and performance.
|
||||
- Never use `eval()`. Your snippet will be disqualified immediately.
|
||||
|
||||
120
LICENSE
120
LICENSE
@ -1,4 +1,116 @@
|
||||
30 seconds of code is licensed under Creative Commons CC0 1.0 Universal license.
|
||||
https://creativecommons.org/publicdomain/zero/1.0/
|
||||
The license states, "You can copy, modify, distribute and perform the work, even for commercial purposes,
|
||||
all without asking permission." Additionally, we ask that groups utilizing this ontology reference this project.
|
||||
CC0 1.0 Universal
|
||||
|
||||
Statement of Purpose
|
||||
|
||||
The laws of most jurisdictions throughout the world automatically confer
|
||||
exclusive Copyright and Related Rights (defined below) upon the creator and
|
||||
subsequent owner(s) (each and all, an "owner") of an original work of
|
||||
authorship and/or a database (each, a "Work").
|
||||
|
||||
Certain owners wish to permanently relinquish those rights to a Work for the
|
||||
purpose of contributing to a commons of creative, cultural and scientific
|
||||
works ("Commons") that the public can reliably and without fear of later
|
||||
claims of infringement build upon, modify, incorporate in other works, reuse
|
||||
and redistribute as freely as possible in any form whatsoever and for any
|
||||
purposes, including without limitation commercial purposes. These owners may
|
||||
contribute to the Commons to promote the ideal of a free culture and the
|
||||
further production of creative, cultural and scientific works, or to gain
|
||||
reputation or greater distribution for their Work in part through the use and
|
||||
efforts of others.
|
||||
|
||||
For these and/or other purposes and motivations, and without any expectation
|
||||
of additional consideration or compensation, the person associating CC0 with a
|
||||
Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
|
||||
and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
|
||||
and publicly distribute the Work under its terms, with knowledge of his or her
|
||||
Copyright and Related Rights in the Work and the meaning and intended legal
|
||||
effect of CC0 on those rights.
|
||||
|
||||
1. Copyright and Related Rights. A Work made available under CC0 may be
|
||||
protected by copyright and related or neighboring rights ("Copyright and
|
||||
Related Rights"). Copyright and Related Rights include, but are not limited
|
||||
to, the following:
|
||||
|
||||
i. the right to reproduce, adapt, distribute, perform, display, communicate,
|
||||
and translate a Work;
|
||||
|
||||
ii. moral rights retained by the original author(s) and/or performer(s);
|
||||
|
||||
iii. publicity and privacy rights pertaining to a person's image or likeness
|
||||
depicted in a Work;
|
||||
|
||||
iv. rights protecting against unfair competition in regards to a Work,
|
||||
subject to the limitations in paragraph 4(a), below;
|
||||
|
||||
v. rights protecting the extraction, dissemination, use and reuse of data in
|
||||
a Work;
|
||||
|
||||
vi. database rights (such as those arising under Directive 96/9/EC of the
|
||||
European Parliament and of the Council of 11 March 1996 on the legal
|
||||
protection of databases, and under any national implementation thereof,
|
||||
including any amended or successor version of such directive); and
|
||||
|
||||
vii. other similar, equivalent or corresponding rights throughout the world
|
||||
based on applicable law or treaty, and any national implementations thereof.
|
||||
|
||||
2. Waiver. To the greatest extent permitted by, but not in contravention of,
|
||||
applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
|
||||
unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
|
||||
and Related Rights and associated claims and causes of action, whether now
|
||||
known or unknown (including existing as well as future claims and causes of
|
||||
action), in the Work (i) in all territories worldwide, (ii) for the maximum
|
||||
duration provided by applicable law or treaty (including future time
|
||||
extensions), (iii) in any current or future medium and for any number of
|
||||
copies, and (iv) for any purpose whatsoever, including without limitation
|
||||
commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
|
||||
the Waiver for the benefit of each member of the public at large and to the
|
||||
detriment of Affirmer's heirs and successors, fully intending that such Waiver
|
||||
shall not be subject to revocation, rescission, cancellation, termination, or
|
||||
any other legal or equitable action to disrupt the quiet enjoyment of the Work
|
||||
by the public as contemplated by Affirmer's express Statement of Purpose.
|
||||
|
||||
3. Public License Fallback. Should any part of the Waiver for any reason be
|
||||
judged legally invalid or ineffective under applicable law, then the Waiver
|
||||
shall be preserved to the maximum extent permitted taking into account
|
||||
Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
|
||||
is so judged Affirmer hereby grants to each affected person a royalty-free,
|
||||
non transferable, non sublicensable, non exclusive, irrevocable and
|
||||
unconditional license to exercise Affirmer's Copyright and Related Rights in
|
||||
the Work (i) in all territories worldwide, (ii) for the maximum duration
|
||||
provided by applicable law or treaty (including future time extensions), (iii)
|
||||
in any current or future medium and for any number of copies, and (iv) for any
|
||||
purpose whatsoever, including without limitation commercial, advertising or
|
||||
promotional purposes (the "License"). The License shall be deemed effective as
|
||||
of the date CC0 was applied by Affirmer to the Work. Should any part of the
|
||||
License for any reason be judged legally invalid or ineffective under
|
||||
applicable law, such partial invalidity or ineffectiveness shall not
|
||||
invalidate the remainder of the License, and in such case Affirmer hereby
|
||||
affirms that he or she will not (i) exercise any of his or her remaining
|
||||
Copyright and Related Rights in the Work or (ii) assert any associated claims
|
||||
and causes of action with respect to the Work, in either case contrary to
|
||||
Affirmer's express Statement of Purpose.
|
||||
|
||||
4. Limitations and Disclaimers.
|
||||
|
||||
a. No trademark or patent rights held by Affirmer are waived, abandoned,
|
||||
surrendered, licensed or otherwise affected by this document.
|
||||
|
||||
b. Affirmer offers the Work as-is and makes no representations or warranties
|
||||
of any kind concerning the Work, express, implied, statutory or otherwise,
|
||||
including without limitation warranties of title, merchantability, fitness
|
||||
for a particular purpose, non infringement, or the absence of latent or
|
||||
other defects, accuracy, or the present or absence of errors, whether or not
|
||||
discoverable, all to the greatest extent permissible under applicable law.
|
||||
|
||||
c. Affirmer disclaims responsibility for clearing rights of other persons
|
||||
that may apply to the Work or any use thereof, including without limitation
|
||||
any person's Copyright and Related Rights in the Work. Further, Affirmer
|
||||
disclaims responsibility for obtaining any necessary consents, permissions
|
||||
or other rights required for any use of the Work.
|
||||
|
||||
d. Affirmer understands and acknowledges that Creative Commons is not a
|
||||
party to this document and has no duty or obligation with respect to this
|
||||
CC0 or use of the Work.
|
||||
|
||||
For more information, please see
|
||||
<http://creativecommons.org/publicdomain/zero/1.0/>
|
||||
|
||||
1421
package-lock.json
generated
1421
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -4,7 +4,8 @@
|
||||
"fs-extra": "^4.0.2",
|
||||
"live-server": "^1.2.0",
|
||||
"markdown-it": "^8.4.0",
|
||||
"nodemon": "^1.12.1"
|
||||
"nodemon": "^1.12.1",
|
||||
"semistandard": "^11.0.0"
|
||||
},
|
||||
"name": "30-seconds-of-code",
|
||||
"description": "A collection of useful Javascript snippets.",
|
||||
@ -13,6 +14,7 @@
|
||||
"devDependencies": {},
|
||||
"scripts": {
|
||||
"build-list": "node ./scripts/builder.js",
|
||||
"lint": "node ./scripts/lintSnippet.js",
|
||||
"start": "concurrently --kill-others \"nodemon -e js,md -i README.md -x \\\"npm run build-list\\\"\" \"live-server ./build\""
|
||||
},
|
||||
"repository": {
|
||||
|
||||
@ -6,8 +6,22 @@ var staticPartsPath = './static-parts';
|
||||
|
||||
var snippets = {}, startPart = '', endPart = '', output = '';
|
||||
|
||||
console.time('Builder');
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
@ -31,7 +45,7 @@ try {
|
||||
output += `* [${snippet[0][0].toUpperCase() + snippet[0].replace(/-/g,' ').slice(1,snippet[0].length-3)}](#${snippet[0].slice(0,snippet[0].length-3).replace(/\(/g,'').replace(/\)/g,'').toLowerCase()})\n`
|
||||
output += '\n';
|
||||
for(var snippet of Object.entries(snippets))
|
||||
output += `${snippet[1]+'\n'}`;
|
||||
output += `${snippet[1]+'\n[⬆ back to top](#table-of-contents)\n'}`;
|
||||
output += `${endPart+'\n'}`;
|
||||
fs.writeFileSync('README.md', output);
|
||||
}
|
||||
@ -39,3 +53,5 @@ catch (err){
|
||||
console.log('Error during README generation: '+err);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
console.timeEnd('Builder');
|
||||
|
||||
31
scripts/lintSnippet.js
Normal file
31
scripts/lintSnippet.js
Normal file
@ -0,0 +1,31 @@
|
||||
var fs = require('fs-extra');
|
||||
var cp = require('child_process');
|
||||
var path = require('path');
|
||||
|
||||
var snippetsPath = './snippets';
|
||||
var snippetFilename = '';
|
||||
|
||||
console.time('Linter');
|
||||
|
||||
if(process.argv.length < 3){
|
||||
console.log('Please specify the filename of a snippet to be linted.');
|
||||
console.log('Example usage: npm run lint "snippet-file.md"');
|
||||
process.exit(0);
|
||||
}
|
||||
else {
|
||||
snippetFilename = process.argv[2];
|
||||
let snippetData = fs.readFileSync(path.join(snippetsPath,snippetFilename),'utf8');
|
||||
try {
|
||||
let originalCode = snippetData.slice(snippetData.indexOf('```js')+5,snippetData.lastIndexOf('```'));
|
||||
fs.writeFileSync('currentSnippet.js',`${originalCode}`);
|
||||
cp.exec('semistandard "currentSnippet.js" --fix',{},(error, stdOut, stdErr) => {
|
||||
let lintedCode = fs.readFileSync('currentSnippet.js','utf8');
|
||||
fs.writeFile(path.join(snippetsPath,snippetFilename), `${snippetData.slice(0, snippetData.indexOf('```js')+5)+lintedCode+'```\n'}`);
|
||||
console.timeEnd('Linter');
|
||||
});
|
||||
}
|
||||
catch (err){
|
||||
console.log('Error during snippet loading: '+err);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,9 @@
|
||||
### Snippet title
|
||||
|
||||
Explain briefly how the snippet works
|
||||
Explain briefly how the snippet works.
|
||||
|
||||
```js
|
||||
var functionName = arguments =>
|
||||
const functionName = arguments =>
|
||||
{functionBody}
|
||||
// functionName(sampleInput) -> sampleOutput
|
||||
```
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
### 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('')`.
|
||||
Convert given RGB parameters to hexadecimal string using bitwise left-shift operator (`<<`) and `toString(16)`, then `padStart(6,'0')` to get a 6-digit hexadecimal value.
|
||||
|
||||
```js
|
||||
var rgbToHex = (r, g, b) =>
|
||||
[r,g,b].map( v => v.toString(16).padStart(2,'0')).join('');
|
||||
const rgbToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
|
||||
// rgbToHex(255, 165, 1) -> 'ffa501'
|
||||
```
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
### 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 (`...`).
|
||||
Use `match()` with an appropriate regular expression to get all key-value pairs, `Array.reduce()` to map and combine them into a single object.
|
||||
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}}));
|
||||
const getUrlParameters = url =>
|
||||
url.match(/([^?=&]+)(=([^&]*))/g).reduce(
|
||||
(a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}
|
||||
);
|
||||
// getUrlParameters('http://url.com/page?name=Adam&surname=Smith') -> {name: 'Adam', surname: 'Smith'}
|
||||
```
|
||||
|
||||
@ -3,8 +3,9 @@
|
||||
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 =>
|
||||
const uuid = _ =>
|
||||
([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
|
||||
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
|
||||
)
|
||||
);
|
||||
// uuid() -> '7982fcfe-5721-4632-bede-6000885be57d'
|
||||
```
|
||||
|
||||
@ -2,15 +2,14 @@
|
||||
|
||||
Use recursion.
|
||||
For each letter in the given string, create all the partial anagrams for the rest of its letters.
|
||||
Use `map()` to combine the letter with each partial anagram, then `reduce()` to combine all anagrams in one array.
|
||||
Use `Array.map()` to combine the letter with each partial anagram, then `Array.reduce()` to combine all anagrams in one array.
|
||||
Base cases are for string `length` equal to `2` or `1`.
|
||||
|
||||
```js
|
||||
var 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) );
|
||||
return a;
|
||||
}, []);
|
||||
}
|
||||
const anagrams = str => {
|
||||
if (str.length <= 2) return str.length === 2 ? [str, str[1] + str[0]] : [str];
|
||||
return str.split('').reduce((acc, letter, i) =>
|
||||
acc.concat(anagrams(str.slice(0, i) + str.slice(i + 1)).map(val => letter + val)), []);
|
||||
};
|
||||
// anagrams('abc') -> ['abc','acb','bac','bca','cab','cba']
|
||||
```
|
||||
|
||||
8
snippets/array-concatenation.md
Normal file
8
snippets/array-concatenation.md
Normal file
@ -0,0 +1,8 @@
|
||||
### Array concatenation
|
||||
|
||||
Use `Array.concat()` to concatenate and array with any additional arrays and/or values, specified in `args`.
|
||||
|
||||
```js
|
||||
const arrayConcat = (arr, ...args) => arr.concat(...args);
|
||||
// arrayConcat([1], 2, [3], [[4]]) -> [1,2,3,[4]]
|
||||
```
|
||||
8
snippets/array-difference.md
Normal file
8
snippets/array-difference.md
Normal file
@ -0,0 +1,8 @@
|
||||
### Array difference
|
||||
|
||||
Create a `Set` from `b`, then use `Array.filter()` on `a` to only keep values not contained in `b`.
|
||||
|
||||
```js
|
||||
const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has(x)); }
|
||||
// difference([1,2,3], [1,2]) -> [3]
|
||||
```
|
||||
8
snippets/array-intersection.md
Normal file
8
snippets/array-intersection.md
Normal file
@ -0,0 +1,8 @@
|
||||
### Array intersection
|
||||
|
||||
Create a `Set` from `b`, then use `Array.filter()` on `a` to only keep values contained in `b`.
|
||||
|
||||
```js
|
||||
const intersection = (a, b) => { const s = new Set(b); return a.filter(x => s.has(x)); }
|
||||
// intersection([1,2,3], [4,3,2]) -> [2,3]
|
||||
```
|
||||
8
snippets/array-union.md
Normal file
8
snippets/array-union.md
Normal file
@ -0,0 +1,8 @@
|
||||
### Array union
|
||||
|
||||
Create a `Set` with all values of `a` and `b` and convert to an array.
|
||||
|
||||
```js
|
||||
const union = (a, b) => Array.from(new Set([...a, ...b]))
|
||||
// union([1,2,3], [4,3,2]) -> [1,2,3,4]
|
||||
```
|
||||
@ -1,8 +1,8 @@
|
||||
### Average of array of numbers
|
||||
|
||||
Use `reduce()` to add each value to an accumulator, initialized with a value of `0`, divide by the `length` of the array.
|
||||
Use `Array.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 =>
|
||||
arr.reduce( (acc , val) => acc + val, 0) / arr.length;
|
||||
const average = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length;
|
||||
// average([1,2,3]) -> 2
|
||||
```
|
||||
|
||||
9
snippets/bottom-visible.md
Normal file
9
snippets/bottom-visible.md
Normal file
@ -0,0 +1,9 @@
|
||||
### Bottom visible
|
||||
|
||||
Use `scrollY`, `scrollHeight` and `clientHeight` to determine if the bottom of the page is visible.
|
||||
|
||||
```js
|
||||
const bottomVisible = _ =>
|
||||
document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight || document.documentElement.clientHeight;
|
||||
// bottomVisible() -> true
|
||||
```
|
||||
8
snippets/capitalize-first-letter-of-every-word.md
Normal file
8
snippets/capitalize-first-letter-of-every-word.md
Normal file
@ -0,0 +1,8 @@
|
||||
### 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());
|
||||
// capitalizeEveryWord('hello world!') -> 'Hello World!'
|
||||
```
|
||||
@ -1,7 +1,10 @@
|
||||
### 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));
|
||||
// capitalize('myName', true) -> 'Myname'
|
||||
```
|
||||
|
||||
14
snippets/chain-asynchronous-functions.md
Normal file
14
snippets/chain-asynchronous-functions.md
Normal file
@ -0,0 +1,14 @@
|
||||
### Chain asynchronous functions
|
||||
|
||||
Loop through an array of functions containing asynchronous events, calling `next` when each asynchronous event has completed.
|
||||
|
||||
```js
|
||||
const chainAsync = fns => { let curr = 0; const next = () => fns[curr++](next); next(); };
|
||||
/*
|
||||
chainAsync([
|
||||
next => { console.log('0 seconds'); setTimeout(next, 1000); },
|
||||
next => { console.log('1 second'); setTimeout(next, 1000); },
|
||||
next => { console.log('2 seconds'); }
|
||||
])
|
||||
*/
|
||||
```
|
||||
12
snippets/check-for-palindrome.md
Normal file
12
snippets/check-for-palindrome.md
Normal file
@ -0,0 +1,12 @@
|
||||
### Check for palindrome
|
||||
|
||||
Convert string `toLowerCase()` and use `replace()` to remove non-alphanumeric characters from it.
|
||||
Then, `split('')` into individual characters, `reverse()`, `join('')` and compare to the original, unreversed string, after converting it `tolowerCase()`.
|
||||
|
||||
```js
|
||||
const palindrome = str => {
|
||||
const s = str.toLowerCase().replace(/[\W_]/g,'');
|
||||
return s === s.split('').reverse().join('');
|
||||
}
|
||||
// palindrome('taco cat') -> true
|
||||
```
|
||||
11
snippets/chunk-array.md
Normal file
11
snippets/chunk-array.md
Normal file
@ -0,0 +1,11 @@
|
||||
### Chunk array
|
||||
|
||||
Use `Array.from()` to create a new array, that fits the number of chunks that will be produced.
|
||||
Use `Array.slice()` to map each element of the new array to a chunk the length of `size`.
|
||||
If the original array can't be split evenly, the final chunk will contain the remaining elements.
|
||||
|
||||
```js
|
||||
const chunk = (arr, size) =>
|
||||
Array.from({length: Math.ceil(arr.length / size)}, (v, i) => arr.slice(i * size, i * size + size));
|
||||
// chunk([1,2,3,4,5], 2) -> [[1,2],[3,4],5]
|
||||
```
|
||||
9
snippets/collatz-algorithm.md
Normal file
9
snippets/collatz-algorithm.md
Normal file
@ -0,0 +1,9 @@
|
||||
### Collatz algorithm
|
||||
|
||||
If `n` is even, return `n/2`. Otherwise return `3n+1`.
|
||||
|
||||
```js
|
||||
const collatz = n => (n % 2 == 0) ? (n/2) : (3*n+1);
|
||||
// collatz(8) --> 4
|
||||
// collatz(5) --> 16
|
||||
```
|
||||
8
snippets/compact.md
Normal file
8
snippets/compact.md
Normal file
@ -0,0 +1,8 @@
|
||||
### Compact
|
||||
|
||||
Use `Array.filter()` to filter out falsey values (`false`, `null`, `0`, `""`, `undefined`, and `NaN`).
|
||||
|
||||
```js
|
||||
const compact = (arr) => arr.filter(v => v);
|
||||
// compact([0, 1, false, 2, '', 3, 'a', 'e'*23, NaN, 's', 34]) -> [ 1, 2, 3, 'a', 's', 34 ]
|
||||
```
|
||||
@ -1,7 +1,8 @@
|
||||
### 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 `Array.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);
|
||||
// countOccurrences([1,1,2,1,2,3], 1) -> 3
|
||||
```
|
||||
|
||||
@ -3,5 +3,6 @@
|
||||
Use `window.location.href` to get current URL.
|
||||
|
||||
```js
|
||||
var currentUrl = _ => window.location.href;
|
||||
const currentUrl = _ => window.location.href;
|
||||
// currentUrl() -> 'https://google.com'
|
||||
```
|
||||
|
||||
@ -3,9 +3,16 @@
|
||||
Use recursion.
|
||||
If the number of provided arguments (`args`) is sufficient, call the passed function `f`.
|
||||
Otherwise return a curried function `f` that expects the rest of the arguments.
|
||||
If you want to curry a function that accepts a variable number of arguments (a variadic function, e.g. `Math.min()`), you can optionally pass the number of arguments to the second parameter `arity`.
|
||||
|
||||
```js
|
||||
var curry = f =>
|
||||
(...args) =>
|
||||
args.length >= f.length ? f(...args) : (...otherArgs) => curry(f)(...args, ...otherArgs)
|
||||
const curry = (f, arity = f.length, next) =>
|
||||
(next = prevArgs =>
|
||||
nextArg => {
|
||||
const args = [ ...prevArgs, nextArg ];
|
||||
return args.length >= arity ? f(...args) : next(args);
|
||||
}
|
||||
)([]);
|
||||
// curry(Math.pow)(2)(10) -> 1024
|
||||
// curry(Math.min, 3)(10)(50)(2) -> 2
|
||||
```
|
||||
|
||||
10
snippets/deep-flatten-array.md
Normal file
10
snippets/deep-flatten-array.md
Normal file
@ -0,0 +1,10 @@
|
||||
### Deep flatten array
|
||||
|
||||
Use recursion.
|
||||
Use `Array.reduce()` to get all elements that are not arrays, flatten each element that is an array.
|
||||
|
||||
```js
|
||||
const deepFlatten = arr =>
|
||||
arr.reduce((a, v) => a.concat(Array.isArray(v) ? deepFlatten(v) : v), []);
|
||||
// deepFlatten([1,[2],[[3],4],5]) -> [1,2,3,4,5]
|
||||
```
|
||||
@ -1,8 +0,0 @@
|
||||
### Difference between arrays
|
||||
|
||||
Use `filter()` to remove values that are part of `values`, determined using `indexOf()`.
|
||||
|
||||
```js
|
||||
var difference = (arr, values) =>
|
||||
arr.filter(v => values.indexOf(v) === -1);
|
||||
```
|
||||
@ -1,8 +1,8 @@
|
||||
### 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);
|
||||
// distance(1,1, 2,3) -> 2.23606797749979
|
||||
```
|
||||
|
||||
8
snippets/divisible-by-number.md
Normal file
8
snippets/divisible-by-number.md
Normal file
@ -0,0 +1,8 @@
|
||||
### Divisible by number
|
||||
|
||||
Use the modulo operator (`%`) to check if the remainder is equal to `0`.
|
||||
|
||||
```js
|
||||
const isDivisible = (dividend, divisor) => dividend % divisor === 0;
|
||||
// isDivisible(6,3) -> true
|
||||
```
|
||||
12
snippets/drop-elements-in-array.md
Normal file
12
snippets/drop-elements-in-array.md
Normal file
@ -0,0 +1,12 @@
|
||||
### Drop elements in array
|
||||
|
||||
Loop through the array, using `Array.shift()` to drop the first element of the array until the returned value from the function is `true`.
|
||||
Returns the remaining elements.
|
||||
|
||||
```js
|
||||
const dropElements = (arr,func) => {
|
||||
while(arr.length > 0 && !func(arr[0])) arr.shift();
|
||||
return arr;
|
||||
}
|
||||
// dropElements([1, 2, 3, 4], n => n >= 3) -> [3,4]
|
||||
```
|
||||
19
snippets/element-is-visible-in-viewport.md
Normal file
19
snippets/element-is-visible-in-viewport.md
Normal file
@ -0,0 +1,19 @@
|
||||
### Element is visible in viewport
|
||||
|
||||
Use `Element.getBoundingClientRect()` and the `window.inner(Width|Height)` values
|
||||
to determine if a given element is visible in the viewport.
|
||||
Omit the second argument to determine if the element is entirely visible, or specify `true` to determine if
|
||||
it is partially visible.
|
||||
|
||||
```js
|
||||
const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
|
||||
const { top, left, bottom, right } = el.getBoundingClientRect();
|
||||
return partiallyVisible
|
||||
? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
|
||||
((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
|
||||
: top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
|
||||
}
|
||||
// e.g. 100x100 viewport and a 10x10px element at position {top: -1, left: 0, bottom: 9, right: 10}
|
||||
// elementIsVisibleInViewport(el) -> false (not fully visible)
|
||||
// elementIsVisibleInViewport(el, true) -> true (partially visible)
|
||||
```
|
||||
@ -3,7 +3,6 @@
|
||||
Use `replace()` to escape special characters.
|
||||
|
||||
```js
|
||||
var escapeRegExp = s =>
|
||||
s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
}
|
||||
const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
// escapeRegExp('(test)') -> \\(test\\)
|
||||
```
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
### Even or odd number
|
||||
|
||||
Use `Math.abs()` to extend logic to negative numbers, check using the modulo (`%`) operator.
|
||||
Return `true` if the number is even, `false` if the number is odd.
|
||||
Checks whether a number is odd or even using the modulo (`%`) operator.
|
||||
Returns `true` if the number is even, `false` if the number is odd.
|
||||
|
||||
```js
|
||||
var isEven = num => Math.abs(num) % 2 === 0;
|
||||
const isEven = num => num % 2 === 0;
|
||||
// isEven(3) -> false
|
||||
```
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
### 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);
|
||||
// factorial(6) -> 720
|
||||
```
|
||||
|
||||
@ -1,13 +1,10 @@
|
||||
### Fibonacci array generator
|
||||
|
||||
Create an empty array of the specific length, initializing the first two values (`0` and `1`).
|
||||
Use `reduce()` to add values into the array, using the sum of the last two values, except for the first two.
|
||||
Use `Array.reduce()` to add values into the array, using the sum of the last two values, except for the first two.
|
||||
|
||||
```js
|
||||
var 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);
|
||||
return acc;
|
||||
},[]);
|
||||
const fibonacci = n =>
|
||||
Array(n).fill(0).reduce((acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i), []);
|
||||
// fibonacci(5) -> [0,1,1,2,3]
|
||||
```
|
||||
|
||||
10
snippets/fill-array.md
Normal file
10
snippets/fill-array.md
Normal file
@ -0,0 +1,10 @@
|
||||
### Fill array
|
||||
|
||||
Use `Array.map()` to map values between `start` (inclusive) and `end` (exclusive) to `value`.
|
||||
Omit `start` to start at the first element and/or `end` to finish at the last.
|
||||
|
||||
```js
|
||||
const fillArray = (arr, value, start = 0, end = arr.length) =>
|
||||
arr.map((v,i) => i>=start && i<end ? value : v);
|
||||
// fillArray([1,2,3,4],'8',1,3) -> [1,'8','8',4]
|
||||
```
|
||||
8
snippets/filter-out-non-unique-values-in-an-array.md
Normal file
8
snippets/filter-out-non-unique-values-in-an-array.md
Normal file
@ -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 filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));
|
||||
// filterNonUnique([1,2,2,3,4,4,5]) -> [1,3,5]
|
||||
```
|
||||
13
snippets/flatten-array-up-to-depth.md
Normal file
13
snippets/flatten-array-up-to-depth.md
Normal file
@ -0,0 +1,13 @@
|
||||
### Flatten array up to depth
|
||||
|
||||
Use recursion, decrementing `depth` by 1 for each level of depth.
|
||||
Use `Array.reduce()` and `Array.concat()` to merge elements or arrays.
|
||||
Base case, for `depth` equal to `1` stops recursion.
|
||||
Omit the second element, `depth` to flatten only to a depth of `1` (single flatten).
|
||||
|
||||
```js
|
||||
const flattenDepth = (arr, depth = 1) =>
|
||||
depth != 1 ? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flattenDepth (v, depth-1) : v), [])
|
||||
: arr.reduce((a,v) => a.concat(v),[]);
|
||||
// flattenDepth([1,[2],[[[3],4],5]], 2) -> [1,2,[3],4,5]
|
||||
```
|
||||
@ -1,9 +1,8 @@
|
||||
### Flatten array
|
||||
|
||||
Use recursion.
|
||||
Use `reduce()` to get all elements that are not arrays, flatten each element that is an array.
|
||||
Use `Array.reduce()` to get all elements inside the array and `concat()` to flatten them.
|
||||
|
||||
```js
|
||||
var flatten = arr =>
|
||||
arr.reduce( (a, v) => a.concat( Array.isArray(v) ? flatten(v) : v ), []);
|
||||
const flatten = arr => arr.reduce((a, v) => a.concat(v), []);
|
||||
// flatten([1,[2],3,4]) -> [1,2,3,4]
|
||||
```
|
||||
|
||||
8
snippets/get-max-value-from-array.md
Normal file
8
snippets/get-max-value-from-array.md
Normal file
@ -0,0 +1,8 @@
|
||||
### Get max value from array
|
||||
|
||||
Use `Math.max()` combined with the spread operator (`...`) to get the maximum value in the array.
|
||||
|
||||
```js
|
||||
const arrayMax = arr => Math.max(...arr);
|
||||
// arrayMax([10, 1, 5]) -> 10
|
||||
```
|
||||
8
snippets/get-min-value-from-array.md
Normal file
8
snippets/get-min-value-from-array.md
Normal file
@ -0,0 +1,8 @@
|
||||
### Get min value from array
|
||||
|
||||
Use `Math.min()` combined with the spread operator (`...`) to get the minimum value in the array.
|
||||
|
||||
```js
|
||||
const arrayMin = arr => Math.min(...arr);
|
||||
// arrayMin([10, 1, 5]) -> 1
|
||||
```
|
||||
9
snippets/get-native-type-of-value.md
Normal file
9
snippets/get-native-type-of-value.md
Normal file
@ -0,0 +1,9 @@
|
||||
### Get native type of value
|
||||
|
||||
Returns lower-cased constructor name of value, "undefined" or "null" if value is undefined or null
|
||||
|
||||
```js
|
||||
const getType = v =>
|
||||
v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();
|
||||
// getType(new Set([1,2,3])) -> "set"
|
||||
```
|
||||
11
snippets/get-scroll-position.md
Normal file
11
snippets/get-scroll-position.md
Normal file
@ -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}
|
||||
```
|
||||
@ -5,5 +5,6 @@ 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);
|
||||
// gcd (8, 36) -> 4
|
||||
```
|
||||
|
||||
12
snippets/group-by.md
Normal file
12
snippets/group-by.md
Normal file
@ -0,0 +1,12 @@
|
||||
### Group by
|
||||
|
||||
Use `Array.map()` to map the values of an array to a function or property name.
|
||||
Use `Array.reduce()` to create an object, where the keys are produced from the mapped results.
|
||||
|
||||
```js
|
||||
const groupBy = (arr, func) =>
|
||||
arr.map(typeof func === 'function' ? func : val => val[func])
|
||||
.reduce((acc, val, i) => { acc[val] = (acc[val] || []).concat(arr[i]); return acc; }, {});
|
||||
// groupBy([6.1, 4.2, 6.3], Math.floor) -> {4: [4.2], 6: [6.1, 6.3]}
|
||||
// groupBy(['one', 'two', 'three'], 'length') -> {3: ['one', 'two'], 5: ['three']}
|
||||
```
|
||||
10
snippets/hamming-distance.md
Normal file
10
snippets/hamming-distance.md
Normal file
@ -0,0 +1,10 @@
|
||||
### Hamming distance
|
||||
|
||||
Use XOR operator (`^`) to find the bit difference between the two numbers, convert to binary string using `toString(2)`.
|
||||
Count and return the number of `1`s in the string, using `match(/1/g)`.
|
||||
|
||||
```js
|
||||
const hammingDistance = (num1, num2) =>
|
||||
((num1 ^ num2).toString(2).match(/1/g) || '').length;
|
||||
// hammingDistance(2,3) -> 1
|
||||
```
|
||||
@ -1,7 +1,8 @@
|
||||
### Head of list
|
||||
|
||||
Return `arr[0]`.
|
||||
Use `arr[0]` to return the first element of the passed array.
|
||||
|
||||
```js
|
||||
var head = arr => arr[0];
|
||||
const head = arr => arr[0];
|
||||
// head([1,2,3]) -> 1
|
||||
```
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
### Initial of list
|
||||
|
||||
Return `arr.slice(0,-1)`.
|
||||
Use `arr.slice(0,-1)`to return all but the last element of the array.
|
||||
|
||||
```js
|
||||
var initial = arr => arr.slice(0,-1);
|
||||
const initial = arr => arr.slice(0, -1);
|
||||
// initial([1,2,3]) -> [1,2]
|
||||
```
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
### Initialize array with range
|
||||
|
||||
Use `Array(end-start)` to create an array of the desired length, `map()` to fill with the desired values in a range.
|
||||
Use `Array(end-start)` to create an array of the desired length, `Array.map()` to fill with the desired values in a range.
|
||||
You can omit `start` to use a default value of `0`.
|
||||
|
||||
```js
|
||||
var initializeArrayRange = (end, start = 0) =>
|
||||
Array.apply(null, Array(end-start)).map( (v,i) => i + start );
|
||||
const initializeArrayRange = (end, start = 0) =>
|
||||
Array.apply(null, Array(end - start)).map((v, i) => i + start);
|
||||
// initializeArrayRange(5) -> [0,1,2,3,4]
|
||||
```
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
### Initialize array with values
|
||||
|
||||
Use `Array(n)` to create an array of the desired length, `fill(v)` to fill it with the desired values.
|
||||
You can omit `v` to use a default value of `0`.
|
||||
You can omit `value` to use a default value of `0`.
|
||||
|
||||
```js
|
||||
var initializeArray = (n, v = 0) =>
|
||||
Array(n).fill(v);
|
||||
const initializeArray = (n, value = 0) => Array(n).fill(value);
|
||||
// initializeArray(5, 2) -> [2,2,2,2,2]
|
||||
```
|
||||
|
||||
9
snippets/is-array.md
Normal file
9
snippets/is-array.md
Normal file
@ -0,0 +1,9 @@
|
||||
### Is array
|
||||
|
||||
Use `Array.isArray()` to check if a value is classified as an array.
|
||||
|
||||
```js
|
||||
const isArray = val => val && Array.isArray(val);
|
||||
// isArray(null) -> false
|
||||
// isArray([1]) -> true
|
||||
```
|
||||
9
snippets/is-boolean.md
Normal file
9
snippets/is-boolean.md
Normal file
@ -0,0 +1,9 @@
|
||||
### Is boolean
|
||||
|
||||
Use `typeof` to check if a value is classified as a boolean primitive.
|
||||
|
||||
```js
|
||||
const isBoolean = val => typeof val === 'boolean';
|
||||
// isBoolean(null) -> false
|
||||
// isBoolean(false) -> true
|
||||
```
|
||||
9
snippets/is-function.md
Normal file
9
snippets/is-function.md
Normal file
@ -0,0 +1,9 @@
|
||||
### Is function
|
||||
|
||||
Use `typeof` to check if a value is classified as a function primitive.
|
||||
|
||||
```js
|
||||
const isFunction = val => val && typeof val === 'function';
|
||||
// isFunction('x') -> false
|
||||
// isFunction(x => x) -> true
|
||||
```
|
||||
9
snippets/is-number.md
Normal file
9
snippets/is-number.md
Normal file
@ -0,0 +1,9 @@
|
||||
### Is number
|
||||
|
||||
Use `typeof` to check if a value is classified as a number primitive.
|
||||
|
||||
```js
|
||||
const isNumber = val => typeof val === 'number';
|
||||
// isNumber('1') -> false
|
||||
// isNumber(1) -> true
|
||||
```
|
||||
9
snippets/is-string.md
Normal file
9
snippets/is-string.md
Normal file
@ -0,0 +1,9 @@
|
||||
### Is string
|
||||
|
||||
Use `typeof` to check if a value is classified as a string primitive.
|
||||
|
||||
```js
|
||||
const isString = val => typeof val === 'string';
|
||||
// isString(10) -> false
|
||||
// isString('10') -> true
|
||||
```
|
||||
9
snippets/is-symbol.md
Normal file
9
snippets/is-symbol.md
Normal file
@ -0,0 +1,9 @@
|
||||
### Is symbol
|
||||
|
||||
Use `typeof` to check if a value is classified as a symbol primitive.
|
||||
|
||||
```js
|
||||
const isSymbol = val => typeof val === 'symbol';
|
||||
// isSymbol('x') -> false
|
||||
// isSymbol(Symbol('x')) -> true
|
||||
```
|
||||
@ -1,7 +1,8 @@
|
||||
### Last of list
|
||||
|
||||
Return `arr.slice(-1)[0]`.
|
||||
Use `arr.slice(-1)[0]` to get the last element of the given array.
|
||||
|
||||
```js
|
||||
var initial = arr => arr.slice(-1)[0];
|
||||
const last = arr => arr.slice(-1)[0];
|
||||
// last([1,2,3]) -> 3
|
||||
```
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
### Measure time taken by function
|
||||
|
||||
Use `performance.now()` to get start and end time for the function, `console.log()` the time taken.
|
||||
First argument is the function name, subsequent arguments are passed to the function.
|
||||
Pass a callback function as the argument.
|
||||
|
||||
```js
|
||||
var timeTaken = (f,...args) => {
|
||||
var t0 = performance.now(), r = f(...args);
|
||||
const timeTaken = callback => {
|
||||
const t0 = performance.now(), r = callback();
|
||||
console.log(performance.now() - t0);
|
||||
return r;
|
||||
}
|
||||
};
|
||||
// timeTaken(() => Math.pow(2, 10)) -> 1024 (0.010000000009313226 logged in console)
|
||||
```
|
||||
|
||||
13
snippets/median-of-array-of-numbers.md
Normal file
13
snippets/median-of-array-of-numbers.md
Normal file
@ -0,0 +1,13 @@
|
||||
### Median of array of numbers
|
||||
|
||||
Find the middle of the array, use `Array.sort()` to sort the values.
|
||||
Return the number at the midpoint if `length` is odd, otherwise the average of the two middle numbers.
|
||||
|
||||
```js
|
||||
const median = arr => {
|
||||
const mid = Math.floor(arr.length / 2), nums = arr.sort((a, b) => a - b);
|
||||
return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
|
||||
};
|
||||
// median([5,6,50,1,-5]) -> 5
|
||||
// median([0,10,-2,7]) -> 3.5
|
||||
```
|
||||
@ -1,8 +1,8 @@
|
||||
### 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 => {return {[v[0]] : v[1]};} ));
|
||||
const objectFromPairs = arr => arr.reduce((a, v) => (a[v[0]] = v[1], a), {});
|
||||
// objectFromPairs([['a',1],['b',2]]) -> {a: 1, b: 2}
|
||||
```
|
||||
|
||||
8
snippets/object-to-key-value-pairs.md
Normal file
8
snippets/object-to-key-value-pairs.md
Normal file
@ -0,0 +1,8 @@
|
||||
### Object to key-value pairs
|
||||
|
||||
Use `Object.keys()` and `Array.map()` to iterate over the object's keys and produce an array with key-value pairs.
|
||||
|
||||
```js
|
||||
const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]);
|
||||
// objectToPairs({a: 1, b: 2}) -> [['a',1],['b',2]])
|
||||
```
|
||||
15
snippets/ordinal-suffix-of-number.md
Normal file
15
snippets/ordinal-suffix-of-number.md
Normal file
@ -0,0 +1,15 @@
|
||||
### Ordinal suffix of number
|
||||
|
||||
Use the modulo operator (`%`) to find values of single and tens digits.
|
||||
Find which ordinal pattern digits match.
|
||||
If digit is found in teens pattern, use teens ordinal.
|
||||
|
||||
```js
|
||||
const toOrdinalSuffix = num => {
|
||||
const int = parseInt(num), digits = [(int % 10), (int % 100)],
|
||||
ordinals = ["st", "nd", "rd", "th"], oPattern = [1,2,3,4],
|
||||
tPattern = [11, 12, 13, 14, 15, 16, 17, 18, 19]
|
||||
return oPattern.includes(digits[0]) && !tPattern.includes(digits[1]) ? int + ordinals[digits[0]-1] : int + ordinals[3];
|
||||
}
|
||||
// toOrdinalSuffix("123") -> "123rd"
|
||||
```
|
||||
10
snippets/percentile.md
Normal file
10
snippets/percentile.md
Normal file
@ -0,0 +1,10 @@
|
||||
### Percentile
|
||||
|
||||
Use `Array.reduce()` to calculate how many numbers are below the value and how many are the same value and
|
||||
apply the percentile formula.
|
||||
|
||||
```js
|
||||
const percentile = (arr, val) =>
|
||||
100 * arr.reduce((acc,v) => acc + (v < val ? 1 : 0) + (v === val ? 0.5 : 0), 0) / arr.length;
|
||||
// percentile([1,2,3,4,5,6,7,8,9,10], 6) -> 55
|
||||
```
|
||||
10
snippets/pick.md
Normal file
10
snippets/pick.md
Normal file
@ -0,0 +1,10 @@
|
||||
### Pick
|
||||
|
||||
Use `Array.reduce()` to convert the filtered/picked keys back to a object with the corresponding key:value pair if the key exist in the obj.
|
||||
|
||||
```js
|
||||
const pick = (obj, arr) =>
|
||||
arr.reduce((acc, curr) => (curr in obj && (acc[curr] = obj[curr]), acc), {});
|
||||
// pick({ 'a': 1, 'b': '2', 'c': 3 }, ['a', 'c']) -> { 'a': 1, 'c': 3 }
|
||||
// pick(object, ['a', 'c'])['a'] -> 1
|
||||
```
|
||||
8
snippets/pipe.md
Normal file
8
snippets/pipe.md
Normal file
@ -0,0 +1,8 @@
|
||||
### Pipe
|
||||
|
||||
Use `Array.reduce()` to pass value through functions.
|
||||
|
||||
```js
|
||||
const pipe = (...funcs) => arg => funcs.reduce((acc, func) => func(acc), arg);
|
||||
// pipe(btoa, x => x.toUpperCase())("Test") -> "VGVZDA=="
|
||||
```
|
||||
@ -1,8 +1,9 @@
|
||||
### Powerset
|
||||
|
||||
Use `reduce()` combined with `map()` to iterate over elements and combine into an array containing all combinations.
|
||||
Use `Array.reduce()` combined with `Array.map()` to iterate over elements and combine into an array containing all combinations.
|
||||
|
||||
```js
|
||||
var powerset = arr =>
|
||||
arr.reduce( (a,v) => a.concat(a.map( r => [v].concat(r) )), [[]]);
|
||||
const powerset = arr =>
|
||||
arr.reduce((a, v) => a.concat(a.map(r => [v].concat(r))), [[]]);
|
||||
// powerset([1,2]) -> [[], [1], [2], [2,1]]
|
||||
```
|
||||
|
||||
17
snippets/promisify.md
Normal file
17
snippets/promisify.md
Normal file
@ -0,0 +1,17 @@
|
||||
### Promisify
|
||||
|
||||
Use currying to return a function returning a `Promise` that calls the original function.
|
||||
Use the `...rest` operator to pass in all the parameters.
|
||||
|
||||
*In Node 8+, you can use [`util.promisify`](https://nodejs.org/api/util.html#util_util_promisify_original)*
|
||||
|
||||
```js
|
||||
const promisify = func =>
|
||||
(...args) =>
|
||||
new Promise((resolve, reject) =>
|
||||
func(...args, (err, result) =>
|
||||
err ? reject(err) : resolve(result))
|
||||
);
|
||||
// const delay = promisify((d, cb) => setTimeout(cb, d))
|
||||
// delay(2000).then(() => console.log('Hi!')) -> Promise resolves after 2s
|
||||
```
|
||||
8
snippets/random-integer-in-range.md
Normal file
8
snippets/random-integer-in-range.md
Normal file
@ -0,0 +1,8 @@
|
||||
### Random integer in range
|
||||
|
||||
Use `Math.random()` to generate a random number and map it to the desired range, using `Math.floor()` to make it an integer.
|
||||
|
||||
```js
|
||||
const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
// randomIntegerInRange(0, 5) -> 2
|
||||
```
|
||||
@ -3,5 +3,6 @@
|
||||
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;
|
||||
// randomInRange(2,10) -> 6.0211363285087005
|
||||
```
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
### Randomize order of array
|
||||
|
||||
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)
|
||||
```
|
||||
@ -4,6 +4,7 @@ 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);
|
||||
// redirect('https://google.com')
|
||||
```
|
||||
|
||||
9
snippets/reverse-a-string.md
Normal file
9
snippets/reverse-a-string.md
Normal file
@ -0,0 +1,9 @@
|
||||
### 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('');
|
||||
// reverseString('foobar') -> 'raboof'
|
||||
```
|
||||
9
snippets/run-promises-in-series.md
Normal file
9
snippets/run-promises-in-series.md
Normal file
@ -0,0 +1,9 @@
|
||||
### Run promises in series
|
||||
|
||||
Run an array of promises in series using `Array.reduce()` by creating a promise chain, where each promise returns the next promise when resolved.
|
||||
|
||||
```js
|
||||
const series = ps => ps.reduce((p, next) => p.then(next), Promise.resolve());
|
||||
// const delay = (d) => new Promise(r => setTimeout(r, d))
|
||||
// series([() => delay(1000), () => delay(2000)]) -> executes each promise sequentially, taking a total of 3 seconds to complete
|
||||
```
|
||||
@ -1,14 +1,15 @@
|
||||
### 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;
|
||||
if(c > 0) {
|
||||
const scrollToTop = _ => {
|
||||
const c = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
if (c > 0) {
|
||||
window.requestAnimationFrame(scrollToTop);
|
||||
window.scrollTo(0, c - c/8);
|
||||
window.scrollTo(0, c - c / 8);
|
||||
}
|
||||
}
|
||||
};
|
||||
// scrollToTop()
|
||||
```
|
||||
|
||||
8
snippets/shuffle-array.md
Normal file
8
snippets/shuffle-array.md
Normal file
@ -0,0 +1,8 @@
|
||||
### Shuffle array
|
||||
|
||||
Use `Array.sort()` to reorder elements, using `Math.random()` in the comparator.
|
||||
|
||||
```js
|
||||
const shuffle = arr => arr.sort(() => Math.random() - 0.5);
|
||||
// shuffle([1,2,3]) -> [2,3,1]
|
||||
```
|
||||
@ -1,8 +1,8 @@
|
||||
### 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 similarity = (arr, values) => arr.filter(v => values.includes(v));
|
||||
// similarity([1,2,3], [1,2,4]) -> [1,2]
|
||||
```
|
||||
|
||||
14
snippets/sleep.md
Normal file
14
snippets/sleep.md
Normal file
@ -0,0 +1,14 @@
|
||||
### Sleep
|
||||
|
||||
Delay executing part of an `async` function, by putting it to sleep, returning a `Promise`.
|
||||
|
||||
```js
|
||||
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
|
||||
/*
|
||||
async function sleepyWork() {
|
||||
console.log('I\'m going to sleep for 1 second.');
|
||||
await sleep(1000);
|
||||
console.log('I woke up after 1 second.');
|
||||
}
|
||||
*/
|
||||
```
|
||||
@ -1,8 +1,9 @@
|
||||
### Sort characters in string (alphabetical)
|
||||
|
||||
Split the string using `split('')`, `sort()` utilizing `localeCompare()`, recombine using `join('')`.
|
||||
Split the string using `split('')`, `Array.sort()` utilizing `localeCompare()`, recombine using `join('')`.
|
||||
|
||||
```js
|
||||
var sortCharactersInString = str =>
|
||||
str.split('').sort( (a,b) => a.localeCompare(b) ).join('');
|
||||
const sortCharactersInString = str =>
|
||||
str.split('').sort((a, b) => a.localeCompare(b)).join('');
|
||||
// sortCharactersInString('cabbage') -> 'aabbceg'
|
||||
```
|
||||
|
||||
17
snippets/standard-deviation.md
Normal file
17
snippets/standard-deviation.md
Normal file
@ -0,0 +1,17 @@
|
||||
### Standard deviation
|
||||
|
||||
Use `Array.reduce()` to calculate the mean, variance and the sum of the variance of the values, the variance of the values, then
|
||||
determine the standard deviation.
|
||||
You can omit the second argument to get the sample standard deviation or set it to `true` to get the population standard deviation.
|
||||
|
||||
```js
|
||||
const standardDeviation = (arr, usePopulation = false) => {
|
||||
const mean = arr.reduce((acc, val) => acc + val, 0) / arr.length;
|
||||
return Math.sqrt(
|
||||
arr.reduce((acc, val) => acc.concat(Math.pow(val - mean, 2)), [])
|
||||
.reduce((acc, val) => acc + val, 0) / (arr.length - (usePopulation ? 0 : 1))
|
||||
);
|
||||
}
|
||||
// standardDeviation([10,2,38,23,38,23,21]) -> 13.284434142114991 (sample)
|
||||
// standardDeviation([10,2,38,23,38,23,21], true) -> 12.29899614287479 (population)
|
||||
```
|
||||
@ -1,8 +1,8 @@
|
||||
### Sum of array of numbers
|
||||
|
||||
Use `reduce()` to add each value to an accumulator, initialized with a value of `0`.
|
||||
Use `Array.reduce()` to add each value to an accumulator, initialized with a value of `0`.
|
||||
|
||||
```js
|
||||
var sum = arr =>
|
||||
arr.reduce( (acc , val) => acc + val, 0);
|
||||
const sum = arr => arr.reduce((acc, val) => acc + val, 0);
|
||||
// sum([1,2,3,4]) -> 10
|
||||
```
|
||||
|
||||
@ -4,4 +4,5 @@ Use array destructuring to swap values between two variables.
|
||||
|
||||
```js
|
||||
[varA, varB] = [varB, varA];
|
||||
// [x, y] = [y, x]
|
||||
```
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
### Tail of list
|
||||
|
||||
Return `arr.slice(1)`.
|
||||
Return `arr.slice(1)` if the array's `length` is more than `1`, otherwise return the whole array.
|
||||
|
||||
```js
|
||||
var tail = arr => arr.slice(1);
|
||||
const tail = arr => arr.length > 1 ? arr.slice(1) : arr;
|
||||
// tail([1,2,3]) -> [2,3]
|
||||
// tail([1]) -> [1]
|
||||
```
|
||||
|
||||
10
snippets/take.md
Normal file
10
snippets/take.md
Normal file
@ -0,0 +1,10 @@
|
||||
### Take
|
||||
|
||||
Use `Array.slice()` to create a slice of the array with `n` elements taken from the beginning.
|
||||
|
||||
```js
|
||||
const take = (arr, n = 1) => arr.slice(0, n);
|
||||
|
||||
// take([1, 2, 3], 5) -> [1, 2, 3]
|
||||
// take([1, 2, 3], 0) -> []
|
||||
```
|
||||
10
snippets/truncate-a-string.md
Normal file
10
snippets/truncate-a-string.md
Normal file
@ -0,0 +1,10 @@
|
||||
### Truncate a String
|
||||
|
||||
Determine if the string's `length` is greater than `num`.
|
||||
Return the string truncated to the desired length, with `...` appended to the end or the original string.
|
||||
|
||||
```js
|
||||
const truncate = (str, num) =>
|
||||
str.length > num ? str.slice(0, num > 3 ? num - 3 : num) + '...' : str;
|
||||
// truncate('boomerang', 7) -> 'boom...'
|
||||
```
|
||||
@ -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]
|
||||
```
|
||||
|
||||
10
snippets/validate-email.md
Normal file
10
snippets/validate-email.md
Normal file
@ -0,0 +1,10 @@
|
||||
### Validate email
|
||||
|
||||
Use a regular experssion to check if the email is valid.
|
||||
Returns `true` if email is valid, `false` if not.
|
||||
|
||||
```js
|
||||
const validateEmail = str =>
|
||||
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(str);
|
||||
// validateEmail(mymail@gmail.com) -> true
|
||||
```
|
||||
@ -2,7 +2,9 @@
|
||||
|
||||
Use `!isNaN` in combination with `parseFloat()` to check if the argument is a number.
|
||||
Use `isFinite()` to check if the number is finite.
|
||||
Use `Number()` to check if the coercion holds.
|
||||
|
||||
```js
|
||||
var validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n);
|
||||
const validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n;
|
||||
// validateNumber('10') -> true
|
||||
```
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||

|
||||
|
||||
# 30 seconds of code
|
||||
# 30 seconds of code [](https://gitter.im/30-seconds-of-code/Lobby)
|
||||
> Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.
|
||||
|
||||
- Use <kbd>Ctrl</kbd> + <kbd>F</kbd> or <kbd>command</kbd> + <kbd>F</kbd> to search for a snippet.
|
||||
- Contributions welcome, please read [contribution guide](CONTRIBUTING.md).
|
||||
- Contributions welcome, please read the [contribution guide](CONTRIBUTING.md).
|
||||
- Snippets are written in ES6, use the [Babel transpiler](https://babeljs.io/) to ensure backwards-compatibility.
|
||||
|
||||
## Contents
|
||||
## Table of Contents
|
||||
|
||||
Reference in New Issue
Block a user