Table of Contents generated with DocToc

• JavaScript Snippets
  • array-adjacents
  • array-match
  • array-occurrences
  • array-reject
  • array-sum
  • british-date
  • modulus
  • array-duplicate
  • convert-querystring
  • string-permutations
  • object-deep-clone
• Custom Array methods
  • array-foreach
  • array-filter
  • array-find
  • array-findIndex
  • array-every
  • array-reduce
  • array-map

JavaScript Snippets

Short JavaScript snippets.

Created for educational purposes.

array-adjacents

Find adjacent elements in a 2D Matrix, for example:

[
	['A', 'B', 'C'],
	['D', 'E', 'F'],
	['G', 'H', 'I']
]

findAjacents([0, 0]); // [ [0,1], [1,0], [1, 1] ]

array-match

Determines if two arrays are exactly the same, for example:

arrayMatch([1,1], [1,1]); // true
arrayMatch([1,0], [1,1]); // false
arrayMatch([1, '0'], [1, 0]); // false

array-occurrences

Counts the number of occurrences (strict equal comparison) of an element in an array, for example:

const array = [1, 1, 2, 3, 4, 5];

getCount(array, 1); // 2
getCount(array, 5); // 1
getCount(array, 'a'); // 0

array-reject

Opposite of Array.filter(). Removes the requested items from an existing array. Example:

const array = [1, 1, 2, 3, 4, 5];

arrayReject(array, (item) => item > 2); // [1, 1, 2];
arrayReject(array, (item) => typeof item === 'number')); // [];
arrayReject(array, (item) => item === 1); // [2, 3, 4, 5];

array-sum

Sums all numeric values in an array using Array.filter() to filter out numeric values and Array.reduce() to sum. Example:

arraySum([1, 2, 3, 4, 'a']); // 10
arraySum([10, 10000, 20]); // 10030

british-date

Formats a given date to british formats, for example:

formatDate(new Date()); // 12/02/2016
formatDate('2014-10-12 09:00 AM'); // 12/10/2014
formatDate(new Date(), '-'); // 12-02-2016

modulus

Calculate modulus with modulus operator and without:

getModulus(20, 3); // 2

array-duplicate

Multiple methods for duplicating values of an array using different techniques such as:

• Array.reduce
• Array.concat
• ES6 spread operator
• Array.forEach

Example using ES6 spread:

const duplicateSpread = (array) => {
  const duplicate = [...array, ...array];

  return duplicate.sort();
};

const array = [1, 2, 3];
console.log(duplicateSpread(array)); // [1, 1, 2, 2, 3, 3]

convert-querystring

Takes a querystring and converts it to an object e.g.

const convert = convertQueryString('first_name=lyndsey&last_name=browning&likes=javascript&likes=react&likes=sass');

/*
{
  first_name: 'Lyndsey',
  last_name: 'Browning',
  likes: [
    'javascript',
	'react',
	'sass'
  ]
}
*/

string-permutations

Find all permutations of a given string, e.g.

const permutations = permute('abc');

console.log(permutations); // ["abc", "acb", "bac", "bca", "cab", "cba"]

object-deep-clone

Deep clone an object preventing the original input being mutated.

const source = {
  name: 'Lyndsey',
  age: 30,
  likes: ['javascript', 'css'],
  other: {
  	color: 'orange'
  }
};

Example standard shallow-clone using Object.assign:

const shallow = Object.assign({}, source);
shallow.other.color = 'red';

console.log(source.other.color); // red. obj is mutated!

Example using deep clone method:

const cloned = clone(source);
cloned.other.color = 'red';

console.log(source.other.color); // orange
console.log(cloned.other.color); // red

Custom Array methods

Made to further my understanding of existing array methods and callback functions.

array-foreach

Custom version of Array.forEach.

This method takes an existing array and performs a callback function on each item in turn.

forEach([1, 2, 3, 4, 5], (item) => {
  console.log(item); // 1, 2, 3, 4, 5
});

array-filter

Custom version of Array.filter.

This method takes an existing array and returns a new array with the items that comply with the callback function.

Example:

const array = [1, 2, 3, 4, 5];
const divisibleByTwo = filter(array, (item, index) => {
	return item % 2 === 0;
});

console.log(divisibleByTwo); // [2, 4]

array-find

Custom version of Array.find.

This method finds the first instance of an item that passes the callback function (truthy).

Example:

const array = [1, 2, 3, 4, 5];
const findGreaterThan3 = find(array, item => item > 3);

console.log(findGreaterThan3); // 4

array-findIndex

Custom version of Array.findIndex.

This method is the same as Array.find but the index of the first instance of an item is found, instead of the item itself.

Example:

const array = [1, 2, 3, 4, 5];
const findGreaterThan3Index = findIndex(array, item => item > 3);

console.log(findGreaterThan3Index); // 3

array-every

Custom version of Array.every.

Returns truthy if every item in the array passed the callback function.

Example:

const array = [1, 2, 3, 4, 5];
const singleDigits = every(array, item => item < 10);
const greaterThan10 = every(array, item => item > 10);

console.log(singleDigits); // true
console.log(greaterThan10); // false

array-reduce

Custom version of Array.reduce.

The reduce method takes an existing array, a callback function to be acted upon each element and an initial value. The existing array is reduced down to a single value; its type is determined by the initial value.

The result of the previous iteration is passed to the next iteration and thus an accumulator is created.

Example:

const array = [1, 2, 3, 4, 5];
const sumReduce = reduce(array, (acc, cur) => acc + cur, 0);
const reduceToString = reduce(array, (acc, cur) => acc += cur, '');

console.log(sumReduce); // 15
console.log(reduceToString); // 12345

array-map

Custom version of Array.map.

This method takes an array and performs a callback function on each element in the array that transforms it, producing a new array of mapped values.

Example:

const array = [1, 2, 3, 4, 5];
const doubleAll = map(array, item => item * 2);

console.log(doubleAll); // [2, 4, 6, 8, 10]