Merge branch 'master' of https://github.com/Chalarangelo/30-seconds-of-code

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,20 @@
+<!--- Provide a general summary of your changes in the Title above -->
+
+<!--- Add the prefix [FIX: #(issue number)] or [FEATURE] to the Title -->
+
+## Description
+<!--- Describe your changes in detail -->
+**Resolves** #(issue number) <!--- Delete if not a issue fix-->
+
+## Types of changes
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to change)
+
+## Checklist:
+<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
+- [ ] My code follows the code style of this project.
+- [ ] My change requires a change to the documentation.
+- [ ] I have updated the documentation accordingly.
+- [ ] I have checked that there isn't any PR doing the same
+- [ ] I have read the **CONTRIBUTING** document.

CONTRIBUTING.md

@@ -24,7 +24,7 @@ Here's what you can do to help:
   - 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 => { }`.
+  - 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.
@@ -57,7 +57,7 @@ Here's what you can do to help:
 - Use `()` if your function takes no arguments.
 - Use `_` 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'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.

README.md

@@ -17,8 +17,10 @@
 * [`countOccurrences`](#countoccurrences)
 * [`deepFlatten`](#deepflatten)
 * [`difference`](#difference)
+* [`differenceWith`](#differencewith)
 * [`distinctValuesOfArray`](#distinctvaluesofarray)
 * [`dropElements`](#dropelements)
+* [`dropRight`](#dropright)
 * [`everyNth`](#everynth)
 * [`filterNonUnique`](#filternonunique)
 * [`flatten`](#flatten)
@@ -34,6 +36,8 @@
 * [`nthElement`](#nthelement)
 * [`pick`](#pick)
 * [`pull`](#pull)
+* [`pullAll`](#pullall)
+* [`pullAtIndex`](#pullatindex)
 * [`remove`](#remove)
 * [`sample`](#sample)
 * [`shuffle`](#shuffle)
@@ -103,6 +107,7 @@
 * [`cleanObj`](#cleanobj)
 * [`objectFromPairs`](#objectfrompairs)
 * [`objectToPairs`](#objecttopairs)
+* [`select`](#select)
 * [`shallowClone`](#shallowclone)
 * [`truthCheckCollection`](#truthcheckcollection)
 
@@ -110,6 +115,7 @@
 * [`anagrams`](#anagrams)
 * [`capitalize`](#capitalize)
 * [`capitalizeEveryWord`](#capitalizeeveryword)
+* [`countVowels`](#countvowels)
 * [`escapeRegExp`](#escaperegexp)
 * [`fromCamelCase`](#fromcamelcase)
 * [`reverseString`](#reversestring)
@@ -234,6 +240,19 @@ const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has
 
 [⬆ back to top](#table-of-contents)
 
+### differenceWith
+
+Filters out all values from an array for which the comparator function does not return `true`.
+
+Use `Array.filter()` and `Array.find()` to find the appropriate values.
+
+```js
+const differenceWith = (arr, val, comp) => arr.filter(a => !val.find(b => comp(a, b)))
+// differenceWith([1, 1.2, 1.5, 3], [1.9, 3], (a,b) => Math.round(a) == Math.round(b)) -> [1, 1.2]
+```
+
+[⬆ back to top](#table-of-contents)
+
 ### distinctValuesOfArray
 
 Returns all the distinct values of an array.
@@ -251,12 +270,12 @@ const distinctValuesOfArray = arr => [...new Set(arr)];
 
 Removes elements in an array until the passed function returns `true`. Returns the remaining elements in the 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`.
+Loop through the array, using `Array.slice()` 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();
+  while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1);
   return arr;
 };
 // dropElements([1, 2, 3, 4], n => n >= 3) -> [3,4]
@@ -264,6 +283,21 @@ const dropElements = (arr, func) => {
 
 [⬆ back to top](#table-of-contents)
 
+### dropRight
+
+Returns a new array with `n` elements removed from the right
+
+Check if `n` is shorter than the given array and use `Array.slice()` to slice it accordingly or return an empty array.
+
+```js
+const dropRight = (arr, n = 1) => n < arr.length ? arr.slice(0, arr.length - n) : []
+//dropRight([1,2,3]) -> [1,2]
+//dropRight([1,2,3], 2) -> [1]
+//dropRight([1,2,3], 42) -> []
+```
+
+[⬆ back to top](#table-of-contents)
+
 ### everyNth
 
 Returns every nth element in an array.
@@ -366,15 +400,16 @@ const initial = arr => arr.slice(0, -1);
 
 ### initializeArrayWithRange
 
-Initializes an array containing the numbers in the specified range.
+Initializes an array containing the numbers in the specified range where `start` and `end` are inclusive.
 
-Use `Array(end-start)` to create an array of the desired length, `Array.map()` to fill with the desired values in a range.
+Use `Array((end + 1) - 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
-const initializeArrayWithRange = (end, start = 0) =>
+const initializeArrayWithRange = (end, start = 0) => 
-  Array.from({ length: end - start }).map((v, i) => i + start);
+  Array.from({ length: (end + 1) - start }).map((v, i) => i + start);
-// initializeArrayWithRange(5) -> [0,1,2,3,4]
+// initializeArrayWithRange(5) -> [0,1,2,3,4,5]
+// initializeArrayWithRange(7, 3) -> [3,4,5,6,7]
 ```
 
 [⬆ back to top](#table-of-contents)
@@ -473,6 +508,8 @@ Mutates the original array to filter out the values specified.
 Use `Array.filter()` and `Array.includes()` to pull out the values that are not needed.
 Use `Array.length = 0` to mutate the passed in array by resetting it's length to zero and `Array.push()` to re-populate it with only the pulled values.
 
+_(For a snippet that does not mutate the original array see [`without`](#without))_
+
 ```js
 const pull = (arr, ...args) => {
   let pulled = arr.filter((v, i) => !args.includes(v));
@@ -485,6 +522,52 @@ const pull = (arr, ...args) => {
 
 [⬆ back to top](#table-of-contents)
 
+### pullAll
+
+Mutates the original array to filter out the values specified (accepts an array of values).
+
+Use `Array.filter()` and `Array.includes()` to pull out the values that are not needed.
+Use `Array.length = 0` to mutate the passed in array by resetting it's length to zero and `Array.push()` to re-populate it with only the pulled values.
+
+```js
+const pullAll = (arr, pullArr) => {
+  let pulled = arr.filter((v, i) => !pullArr.includes(v));
+  arr.length = 0; pulled.forEach(v => arr.push(v));
+}
+// let myArray = ['a', 'b', 'c', 'a', 'b', 'c'];
+// pullAll(myArray, ['a', 'c']);
+// console.log(myArray) -> [ 'b', 'b' ]
+```
+
+[⬆ back to top](#table-of-contents)
+
+### pullAtIndex
+
+Mutates the original array to filter out the values at the specified indexes.
+
+Use `Array.filter()` and `Array.includes()` to pull out the values that are not needed.
+Use `Array.length = 0` to mutate the passed in array by resetting it's length to zero and `Array.push()` to re-populate it with only the pulled values.
+Use `Array.push()` to keep track of pulled values 
+
+```js
+const pullAtIndex = (arr, pullArr) => {
+  let removed = [];
+  let pulled = arr.map((v, i) => pullArr.includes(i) ? removed.push(v) : v)
+                  .filter((v, i) => !pullArr.includes(i))
+  arr.length = 0; 
+  pulled.forEach(v => arr.push(v));
+  return removed;
+}
+
+// let myArray = ['a', 'b', 'c', 'd'];
+// let pulled = pullAtIndex(myArray, [1, 3]);
+
+// console.log(myArray); -> [ 'a', 'c' ]
+// console.log(pulled); -> [ 'b', 'd' ]
+```
+
+[⬆ back to top](#table-of-contents)
+
 ### remove
 
 Removes elements from an array for which the given function returns `false`.
@@ -620,6 +703,8 @@ Filters out the elements of an array, that have one of the specified values.
 
 Use `Array.filter()` to create an array excluding(using `!Array.includes()`) all given values.
 
+_(For a snippet that mutates the original array see [`pull`](#pull))_
+
 ```js
 const without = (arr, ...args) => arr.filter(v => !args.includes(v));
 // without([2, 1, 2, 3], 1, 2) -> [3]
@@ -657,7 +742,7 @@ Use `scrollY`, `scrollHeight` and `clientHeight` to determine if the bottom of t
 
 ```js
 const bottomVisible = () =>
-  document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight || document.documentElement.clientHeight;
+  document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight);
 // bottomVisible() -> true
 ```
 
@@ -1143,7 +1228,7 @@ Return the number at the midpoint if `length` is odd, otherwise the average of t
 
 ```js
 const median = arr => {
-  const mid = Math.floor(arr.length / 2), nums = arr.sort((a, b) => a - b);
+  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
@@ -1372,6 +1457,22 @@ const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]);
 
 [⬆ back to top](#table-of-contents)
 
+### select
+
+Retrieve a property that indicated by the selector from object.
+
+If property not exists returns `undefined`.
+
+```js
+const select = (from, selector) =>
+  selector.split('.').reduce((prev, cur) => prev && prev[cur], from);
+
+// const obj = {selector: {to: {val: 'val to select'}}};
+// select(obj, 'selector.to.val'); -> 'val to select'
+```
+
+[⬆ back to top](#table-of-contents)
+
 ### shallowClone
 
 Creates a shallow clone of an object.
@@ -1452,6 +1553,20 @@ const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperC
 
 [⬆ back to top](#table-of-contents)
 
+### countVowels
+
+Retuns `number` of vowels in provided string.
+
+Use a regular expression to count number of vowels `(A, E, I, O, U)` in a `string`.
+
+```js
+const countVowels = str => (str.match(/[aeiou]/ig) || []).length;
+// countVowels('foobar') -> 3
+// countVowels('gym') -> 0
+```
+
+[⬆ back to top](#table-of-contents)
+
 ### escapeRegExp
 
 Escapes a string to use in a regular expression.
@@ -1487,11 +1602,11 @@ const fromCamelCase = (str, separator = '_') =>
 
 Reverses a string.
 
-Use array destructuring and `Array.reverse()` to reverse the order of the characters in the string.
+Use `split('')` 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('');
+const reverseString = str => str.split('').reverse().join('');
 // reverseString('foobar') -> 'raboof'
 ```
 

docs/index.html

@@ -31,7 +31,7 @@
       </h1>
       <label for="doc-drawer-checkbox" class="button drawer-toggle" style="position: absolute; right: 0; top: 0;"></label>
     </header>
-    <div class="row" style="height: calc(100vh - 3.5625rem);overflow: hidden;">
+    <div class="row" style="height: calc(100vh - 5.875rem);overflow: hidden;">
       <input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
         <nav class="col-md-4 col-lg-3" style="border-top: 0">
           <label for="doc-drawer-checkbox" class="button drawer-close"></label>
@@ -45,8 +45,10 @@
 <a class="sublink-1" href="#countoccurrences">countOccurrences</a>
 <a class="sublink-1" href="#deepflatten">deepFlatten</a>
 <a class="sublink-1" href="#difference">difference</a>
+<a class="sublink-1" href="#differencewith">differenceWith</a>
 <a class="sublink-1" href="#distinctvaluesofarray">distinctValuesOfArray</a>
 <a class="sublink-1" href="#dropelements">dropElements</a>
+<a class="sublink-1" href="#dropright">dropRight</a>
 <a class="sublink-1" href="#everynth">everyNth</a>
 <a class="sublink-1" href="#filternonunique">filterNonUnique</a>
 <a class="sublink-1" href="#flatten">flatten</a>
@@ -62,6 +64,8 @@
 <a class="sublink-1" href="#nthelement">nthElement</a>
 <a class="sublink-1" href="#pick">pick</a>
 <a class="sublink-1" href="#pull">pull</a>
+<a class="sublink-1" href="#pullall">pullAll</a>
+<a class="sublink-1" href="#pullatindex">pullAtIndex</a>
 <a class="sublink-1" href="#remove">remove</a>
 <a class="sublink-1" href="#sample">sample</a>
 <a class="sublink-1" href="#shuffle">shuffle</a>
@@ -131,6 +135,7 @@
 </h3><a class="sublink-1" href="#cleanobj">cleanObj</a>
 <a class="sublink-1" href="#objectfrompairs">objectFromPairs</a>
 <a class="sublink-1" href="#objecttopairs">objectToPairs</a>
+<a class="sublink-1" href="#select">select</a>
 <a class="sublink-1" href="#shallowclone">shallowClone</a>
 <a class="sublink-1" href="#truthcheckcollection">truthCheckCollection</a>
 
@@ -138,6 +143,7 @@
 </h3><a class="sublink-1" href="#anagrams">anagrams</a>
 <a class="sublink-1" href="#capitalize">capitalize</a>
 <a class="sublink-1" href="#capitalizeeveryword">capitalizeEveryWord</a>
+<a class="sublink-1" href="#countvowels">countVowels</a>
 <a class="sublink-1" href="#escaperegexp">escapeRegExp</a>
 <a class="sublink-1" href="#fromcamelcase">fromCamelCase</a>
 <a class="sublink-1" href="#reversestring">reverseString</a>
@@ -212,6 +218,12 @@ Recursively flatten each element that is an array.</p>
 <pre><code class="language-js">const difference = (a, b) =&gt; { const s = new Set(b); return a.filter(x =&gt; !s.has(x)); };
 // difference([1,2,3], [1,2,4]) -&gt; [3]
 </code></pre>
+</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="differencewith">differenceWith</h3></div><div class="section double-padded">
+<p>Filters out all values from an array for which the comparator function does not return <code>true</code>.</p>
+<p>Use <code>Array.filter()</code> and <code>Array.find()</code> to find the appropriate values.</p>
+<pre><code class="language-js">const differenceWith = (arr, val, comp) =&gt; arr.filter(a =&gt; !val.find(b =&gt; comp(a, b)))
+// differenceWith([1, 1.2, 1.5, 3], [1.9, 3], (a,b) =&gt; Math.round(a) == Math.round(b)) -&gt; [1, 1.2]
+</code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="distinctvaluesofarray">distinctValuesOfArray</h3></div><div class="section double-padded">
 <p>Returns all the distinct values of an array.</p>
 <p>Use ES6 <code>Set</code> and the <code>...rest</code> operator to discard all duplicated values.</p>
@@ -220,14 +232,22 @@ Recursively flatten each element that is an array.</p>
 </code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="dropelements">dropElements</h3></div><div class="section double-padded">
 <p>Removes elements in an array until the passed function returns <code>true</code>. Returns the remaining elements in the array.</p>
-<p>Loop through the array, using <code>Array.shift()</code> to drop the first element of the array until the returned value from the function is <code>true</code>.
+<p>Loop through the array, using <code>Array.slice()</code> to drop the first element of the array until the returned value from the function is <code>true</code>.
 Returns the remaining elements.</p>
 <pre><code class="language-js">const dropElements = (arr, func) =&gt; {
-  while (arr.length &gt; 0 &amp;&amp; !func(arr[0])) arr.shift();
+  while (arr.length &gt; 0 &amp;&amp; !func(arr[0])) arr = arr.slice(1);
   return arr;
 };
 // dropElements([1, 2, 3, 4], n =&gt; n &gt;= 3) -&gt; [3,4]
 </code></pre>
+</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="dropright">dropRight</h3></div><div class="section double-padded">
+<p>Returns a new array with <code>n</code> elements removed from the right</p>
+<p>Check if <code>n</code> is shorter than the given array and use <code>Array.slice()</code> to slice it accordingly or return an empty array.</p>
+<pre><code class="language-js">const dropRight = (arr, n = 1) =&gt; n &lt; arr.length ? arr.slice(0, arr.length - n) : []
+//dropRight([1,2,3]) -&gt; [1,2]
+//dropRight([1,2,3], 2) -&gt; [1]
+//dropRight([1,2,3], 42) -&gt; []
+</code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="everynth">everyNth</h3></div><div class="section double-padded">
 <p>Returns every nth element in an array.</p>
 <p>Use <code>Array.filter()</code> to create a new array that contains every nth element of a given array.</p>
@@ -280,12 +300,13 @@ Use <code>Array.reduce()</code> to create an object, where the keys are produced
 // initial([1,2,3]) -&gt; [1,2]
 </code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="initializearraywithrange">initializeArrayWithRange</h3></div><div class="section double-padded">
-<p>Initializes an array containing the numbers in the specified range.</p>
+<p>Initializes an array containing the numbers in the specified range where <code>start</code> and <code>end</code> are inclusive.</p>
-<p>Use <code>Array(end-start)</code> to create an array of the desired length, <code>Array.map()</code> to fill with the desired values in a range.
+<p>Use <code>Array((end + 1) - start)</code> to create an array of the desired length, <code>Array.map()</code> to fill with the desired values in a range.
 You can omit <code>start</code> to use a default value of <code>0</code>.</p>
-<pre><code class="language-js">const initializeArrayWithRange = (end, start = 0) =&gt;
+<pre><code class="language-js">const initializeArrayWithRange = (end, start = 0) =&gt; 
-  Array.from({ length: end - start }).map((v, i) =&gt; i + start);
+  Array.from({ length: (end + 1) - start }).map((v, i) =&gt; i + start);
-// initializeArrayWithRange(5) -&gt; [0,1,2,3,4]
+// initializeArrayWithRange(5) -&gt; [0,1,2,3,4,5]
+// initializeArrayWithRange(7, 3) -&gt; [3,4,5,6,7]
 </code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="initializearraywithvalues">initializeArrayWithValues</h3></div><div class="section double-padded">
 <p>Initializes and fills an array with the specified values.</p>
@@ -336,6 +357,7 @@ Omit the second argument, <code>n</code>, to get the first element of the array.
 <p>Mutates the original array to filter out the values specified.</p>
 <p>Use <code>Array.filter()</code> and <code>Array.includes()</code> to pull out the values that are not needed.
 Use <code>Array.length = 0</code> to mutate the passed in array by resetting it's length to zero and <code>Array.push()</code> to re-populate it with only the pulled values.</p>
+<p><em>(For a snippet that does not mutate the original array see <a href="#without"><code>without</code></a>)</em></p>
 <pre><code class="language-js">const pull = (arr, ...args) =&gt; {
   let pulled = arr.filter((v, i) =&gt; !args.includes(v));
   arr.length = 0; pulled.forEach(v =&gt; arr.push(v));
@@ -344,6 +366,38 @@ Use <code>Array.length = 0</code> to mutate the passed in array by resetting it'
 // pull(myArray, 'a', 'c');
 // console.log(myArray) -&gt; [ 'b', 'b' ]
 </code></pre>
+</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="pullall">pullAll</h3></div><div class="section double-padded">
+<p>Mutates the original array to filter out the values specified (accepts an array of values).</p>
+<p>Use <code>Array.filter()</code> and <code>Array.includes()</code> to pull out the values that are not needed.
+Use <code>Array.length = 0</code> to mutate the passed in array by resetting it's length to zero and <code>Array.push()</code> to re-populate it with only the pulled values.</p>
+<pre><code class="language-js">const pullAll = (arr, pullArr) =&gt; {
+  let pulled = arr.filter((v, i) =&gt; !pullArr.includes(v));
+  arr.length = 0; pulled.forEach(v =&gt; arr.push(v));
+}
+// let myArray = ['a', 'b', 'c', 'a', 'b', 'c'];
+// pullAll(myArray, ['a', 'c']);
+// console.log(myArray) -&gt; [ 'b', 'b' ]
+</code></pre>
+</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="pullatindex">pullAtIndex</h3></div><div class="section double-padded">
+<p>Mutates the original array to filter out the values at the specified indexes.</p>
+<p>Use <code>Array.filter()</code> and <code>Array.includes()</code> to pull out the values that are not needed.
+Use <code>Array.length = 0</code> to mutate the passed in array by resetting it's length to zero and <code>Array.push()</code> to re-populate it with only the pulled values.
+Use <code>Array.push()</code> to keep track of pulled values</p>
+<pre><code class="language-js">const pullAtIndex = (arr, pullArr) =&gt; {
+  let removed = [];
+  let pulled = arr.map((v, i) =&gt; pullArr.includes(i) ? removed.push(v) : v)
+                  .filter((v, i) =&gt; !pullArr.includes(i))
+  arr.length = 0; 
+  pulled.forEach(v =&gt; arr.push(v));
+  return removed;
+}
+
+// let myArray = ['a', 'b', 'c', 'd'];
+// let pulled = pullAtIndex(myArray, [1, 3]);
+
+// console.log(myArray); -&gt; [ 'a', 'c' ]
+// console.log(pulled); -&gt; [ 'b', 'd' ]
+</code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="remove">remove</h3></div><div class="section double-padded">
 <p>Removes elements from an array for which the given function returns <code>false</code>.</p>
 <p>Use <code>Array.filter()</code> to find array elements that return truthy values and <code>Array.reduce()</code> to remove elements using <code>Array.splice()</code>.
@@ -413,6 +467,7 @@ This method also works with strings.</p>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="without">without</h3></div><div class="section double-padded">
 <p>Filters out the elements of an array, that have one of the specified values.</p>
 <p>Use <code>Array.filter()</code> to create an array excluding(using <code>!Array.includes()</code>) all given values.</p>
+<p><em>(For a snippet that mutates the original array see <a href="#pull"><code>pull</code></a>)</em></p>
 <pre><code class="language-js">const without = (arr, ...args) =&gt; arr.filter(v =&gt; !args.includes(v));
 // without([2, 1, 2, 3], 1, 2) -&gt; [3]
 </code></pre>
@@ -435,7 +490,7 @@ If lengths of the argument-arrays vary, <code>undefined</code> is used where no
 <p>Returns <code>true</code> if the bottom of the page is visible, <code>false</code> otherwise.</p>
 <p>Use <code>scrollY</code>, <code>scrollHeight</code> and <code>clientHeight</code> to determine if the bottom of the page is visible.</p>
 <pre><code class="language-js">const bottomVisible = () =&gt;
-  document.documentElement.clientHeight + window.scrollY &gt;= document.documentElement.scrollHeight || document.documentElement.clientHeight;
+  document.documentElement.clientHeight + window.scrollY &gt;= (document.documentElement.scrollHeight || document.documentElement.clientHeight);
 // bottomVisible() -&gt; true
 </code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="currenturl">currentURL</h3></div><div class="section double-padded">
@@ -710,7 +765,7 @@ The GCD formula uses recursion.</p>
 <p>Find the middle of the array, use <code>Array.sort()</code> to sort the values.
 Return the number at the midpoint if <code>length</code> is odd, otherwise the average of the two middle numbers.</p>
 <pre><code class="language-js">const median = arr =&gt; {
-  const mid = Math.floor(arr.length / 2), nums = arr.sort((a, b) =&gt; a - b);
+  const mid = Math.floor(arr.length / 2), nums = [...arr].sort((a, b) =&gt; a - b);
   return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
 };
 // median([5,6,50,1,-5]) -&gt; 5
@@ -844,6 +899,15 @@ Also if you give it a special key (<code>childIndicator</code>) it will search d
 <pre><code class="language-js">const objectToPairs = obj =&gt; Object.keys(obj).map(k =&gt; [k, obj[k]]);
 // objectToPairs({a: 1, b: 2}) -&gt; [['a',1],['b',2]])
 </code></pre>
+</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="select">select</h3></div><div class="section double-padded">
+<p>Retrieve a property that indicated by the selector from object.</p>
+<p>If property not exists returns <code>undefined</code>.</p>
+<pre><code class="language-js">const select = (from, selector) =&gt;
+  selector.split('.').reduce((prev, cur) =&gt; prev &amp;&amp; prev[cur], from);
+
+// const obj = {selector: {to: {val: 'val to select'}}};
+// select(obj, 'selector.to.val'); -&gt; 'val to select'
+</code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="shallowclone">shallowClone</h3></div><div class="section double-padded">
 <p>Creates a shallow clone of an object.</p>
 <p>Use <code>Object.assign()</code> and an empty object (<code>{}</code>) to create a shallow clone of the original.</p>
@@ -889,6 +953,13 @@ Omit the <code>lowerRest</code> parameter to keep the rest of the string intact,
 <pre><code class="language-js">const capitalizeEveryWord = str =&gt; str.replace(/\b[a-z]/g, char =&gt; char.toUpperCase());
 // capitalizeEveryWord('hello world!') -&gt; 'Hello World!'
 </code></pre>
+</div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="countvowels">countVowels</h3></div><div class="section double-padded">
+<p>Retuns <code>number</code> of vowels in provided string.</p>
+<p>Use a regular expression to count number of vowels <code>(A, E, I, O, U)</code> in a <code>string</code>.</p>
+<pre><code class="language-js">const countVowels = str =&gt; (str.match(/[aeiou]/ig) || []).length;
+// countVowels('foobar') -&gt; 3
+// countVowels('gym') -&gt; 0
+</code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="escaperegexp">escapeRegExp</h3></div><div class="section double-padded">
 <p>Escapes a string to use in a regular expression.</p>
 <p>Use <code>replace()</code> to escape special characters.</p>
@@ -908,9 +979,9 @@ Omit the second argument to use a default separator of <code>_</code>.</p>
 </code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="reversestring">reverseString</h3></div><div class="section double-padded">
 <p>Reverses a string.</p>
-<p>Use array destructuring and <code>Array.reverse()</code> to reverse the order of the characters in the string.
+<p>Use <code>split('')</code> and <code>Array.reverse()</code> to reverse the order of the characters in the string.
 Combine characters to get a string using <code>join('')</code>.</p>
-<pre><code class="language-js">const reverseString = str =&gt; [...str].reverse().join('');
+<pre><code class="language-js">const reverseString = str =&gt; str.split('').reverse().join('');
 // reverseString('foobar') -&gt; 'raboof'
 </code></pre>
 </div></div><br/><div class="card fluid"><div class="section double-padded"><h3 id="sortcharactersinstring">sortCharactersInString</h3></div><div class="section double-padded">

snippets/bottomVisible.md

@@ -6,6 +6,6 @@ Use `scrollY`, `scrollHeight` and `clientHeight` to determine if the bottom of t
 
 ```js
 const bottomVisible = () =>
-  document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight || document.documentElement.clientHeight;
+  document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight);
 // bottomVisible() -> true
 ```

snippets/countVowels.md

@@ -0,0 +1,11 @@
+### countVowels
+
+Retuns `number` of vowels in provided string.
+
+Use a regular expression to count number of vowels `(A, E, I, O, U)` in a `string`.
+
+```js
+const countVowels = str => (str.match(/[aeiou]/ig) || []).length;
+// countVowels('foobar') -> 3
+// countVowels('gym') -> 0
+```

snippets/differenceWith.md

@@ -0,0 +1,10 @@
+### differenceWith
+
+Filters out all values from an array for which the comparator function does not return `true`.
+
+Use `Array.filter()` and `Array.find()` to find the appropriate values.
+
+```js
+const differenceWith = (arr, val, comp) => arr.filter(a => !val.find(b => comp(a, b)))
+// differenceWith([1, 1.2, 1.5, 3], [1.9, 3], (a,b) => Math.round(a) == Math.round(b)) -> [1, 1.2]
+```

snippets/dropElements.md

@@ -2,12 +2,12 @@
 
 Removes elements in an array until the passed function returns `true`. Returns the remaining elements in the 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`.
+Loop through the array, using `Array.slice()` 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();
+  while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1);
   return arr;
 };
 // dropElements([1, 2, 3, 4], n => n >= 3) -> [3,4]

snippets/dropRight.md

@@ -0,0 +1,12 @@
+### dropRight
+
+Returns a new array with `n` elements removed from the right
+
+Check if `n` is shorter than the given array and use `Array.slice()` to slice it accordingly or return an empty array.
+
+```js
+const dropRight = (arr, n = 1) => n < arr.length ? arr.slice(0, arr.length - n) : []
+//dropRight([1,2,3]) -> [1,2]
+//dropRight([1,2,3], 2) -> [1]
+//dropRight([1,2,3], 42) -> []
+```

snippets/initializeArrayWithRange.md

@@ -1,12 +1,13 @@
 ### initializeArrayWithRange
 
-Initializes an array containing the numbers in the specified range.
+Initializes an array containing the numbers in the specified range where `start` and `end` are inclusive.
 
-Use `Array(end-start)` to create an array of the desired length, `Array.map()` to fill with the desired values in a range.
+Use `Array((end + 1) - 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
-const initializeArrayWithRange = (end, start = 0) =>
+const initializeArrayWithRange = (end, start = 0) => 
-  Array.from({ length: end - start }).map((v, i) => i + start);
+  Array.from({ length: (end + 1) - start }).map((v, i) => i + start);
-// initializeArrayWithRange(5) -> [0,1,2,3,4]
+// initializeArrayWithRange(5) -> [0,1,2,3,4,5]
+// initializeArrayWithRange(7, 3) -> [3,4,5,6,7]
 ```

snippets/median.md

@@ -7,7 +7,7 @@ Return the number at the midpoint if `length` is odd, otherwise the average of t
 
 ```js
 const median = arr => {
-  const mid = Math.floor(arr.length / 2), nums = arr.sort((a, b) => a - b);
+  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

snippets/pull.md

@@ -5,6 +5,8 @@ Mutates the original array to filter out the values specified.
 Use `Array.filter()` and `Array.includes()` to pull out the values that are not needed.
 Use `Array.length = 0` to mutate the passed in array by resetting it's length to zero and `Array.push()` to re-populate it with only the pulled values.
 
+_(For a snippet that does not mutate the original array see [`without`](#without))_
+
 ```js
 const pull = (arr, ...args) => {
   let pulled = arr.filter((v, i) => !args.includes(v));

snippets/pullAll.md

@@ -0,0 +1,16 @@
+### pullAll
+
+Mutates the original array to filter out the values specified (accepts an array of values).
+
+Use `Array.filter()` and `Array.includes()` to pull out the values that are not needed.
+Use `Array.length = 0` to mutate the passed in array by resetting it's length to zero and `Array.push()` to re-populate it with only the pulled values.
+
+```js
+const pullAll = (arr, pullArr) => {
+  let pulled = arr.filter((v, i) => !pullArr.includes(v));
+  arr.length = 0; pulled.forEach(v => arr.push(v));
+}
+// let myArray = ['a', 'b', 'c', 'a', 'b', 'c'];
+// pullAll(myArray, ['a', 'c']);
+// console.log(myArray) -> [ 'b', 'b' ]
+```

snippets/pullAtIndex.md

@@ -0,0 +1,24 @@
+### pullAtIndex
+
+Mutates the original array to filter out the values at the specified indexes.
+
+Use `Array.filter()` and `Array.includes()` to pull out the values that are not needed.
+Use `Array.length = 0` to mutate the passed in array by resetting it's length to zero and `Array.push()` to re-populate it with only the pulled values.
+Use `Array.push()` to keep track of pulled values 
+
+```js
+const pullAtIndex = (arr, pullArr) => {
+  let removed = [];
+  let pulled = arr.map((v, i) => pullArr.includes(i) ? removed.push(v) : v)
+                  .filter((v, i) => !pullArr.includes(i))
+  arr.length = 0; 
+  pulled.forEach(v => arr.push(v));
+  return removed;
+}
+
+// let myArray = ['a', 'b', 'c', 'd'];
+// let pulled = pullAtIndex(myArray, [1, 3]);
+
+// console.log(myArray); -> [ 'a', 'c' ]
+// console.log(pulled); -> [ 'b', 'd' ]
+```

snippets/reverseString.md

@@ -2,10 +2,10 @@
 
 Reverses a string.
 
-Use array destructuring and `Array.reverse()` to reverse the order of the characters in the string.
+Use `split('')` 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('');
+const reverseString = str => str.split('').reverse().join('');
 // reverseString('foobar') -> 'raboof'
 ```

snippets/select.md

@@ -0,0 +1,13 @@
+### select
+
+Retrieve a property that indicated by the selector from object.
+
+If property not exists returns `undefined`.
+
+```js
+const select = (from, selector) =>
+  selector.split('.').reduce((prev, cur) => prev && prev[cur], from);
+
+// const obj = {selector: {to: {val: 'val to select'}}};
+// select(obj, 'selector.to.val'); -> 'val to select'
+```

snippets/without.md

@@ -4,6 +4,8 @@ Filters out the elements of an array, that have one of the specified values.
 
 Use `Array.filter()` to create an array excluding(using `!Array.includes()`) all given values.
 
+_(For a snippet that mutates the original array see [`pull`](#pull))_
+
 ```js
 const without = (arr, ...args) => arr.filter(v => !args.includes(v));
 // without([2, 1, 2, 3], 1, 2) -> [3]

static-parts/index-start.html

@@ -31,7 +31,7 @@
       </h1>
       <label for="doc-drawer-checkbox" class="button drawer-toggle" style="position: absolute; right: 0; top: 0;"></label>
     </header>
-    <div class="row" style="height: calc(100vh - 3.5625rem);overflow: hidden;">
+    <div class="row" style="height: calc(100vh - 5.875rem);overflow: hidden;">
       <input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
         <nav class="col-md-4 col-lg-3" style="border-top: 0">
           <label for="doc-drawer-checkbox" class="button drawer-close"></label>

tag_database

@@ -15,14 +15,17 @@ collatz:math
 compact:array
 compose:function
 countOccurrences:array
+countVowels:string
 currentURL:browser
 curry:function
 deepFlatten:array
 difference:array
+differenceWith:array
 digitize:math
 distance:math
 distinctValuesOfArray:array
 dropElements:array
+dropRight:array
 elementIsVisibleInViewport:browser
 escapeRegExp:string
 everyNth:array
@@ -71,6 +74,8 @@ pipe:function
 powerset:math
 promisify:function
 pull:array
+pullAll:array
+pullAtIndex:array
 randomIntegerInRange:math
 randomNumberInRange:math
 readFileLines:node
@@ -82,6 +87,7 @@ round:math
 runPromisesInSeries:function
 sample:array
 scrollToTop:browser
+select:object
 shallowClone:object
 shuffle:array
 similarity:array