DEV Community

Rahul Sharma
Rahul Sharma

Posted on • Edited on

Javascript short reusable functions everyone will always need

Most of you probably already know them. lodash/underscore was built to provide utility functions for common tasks in Javascript. But some you don’t want to install a package for the small use case.

Repo: Javascript Quick functions

Javascript short reusable functions everyone will always need

Table of contents

Functions

Array

Numbers

String

Date & Object

Promises

Styling

Window & Dom

Data Structures

Functions

Regular function



function sum(a, b) {
  return a + b;
}


Enter fullscreen mode Exit fullscreen mode

Function expression



const sum = function (a, b) {
  return a + b;
};


Enter fullscreen mode Exit fullscreen mode

Arrow function



const sum = (a, b) => {
  return a + b;
};
// OR
const sum = (a, b) => a + b;


Enter fullscreen mode Exit fullscreen mode

Generator function



function* indexGenerator() {
  let index = 0;
  while (true) {
    yield index++;
  }
}
const g = indexGenerator();
console.log(g.next().value); // => 0
console.log(g.next().value); // => 1


Enter fullscreen mode Exit fullscreen mode

Time the execution of your code



console.time("time");
for (let i = 0; i < 1000000; i++) {
  // do something
}
console.timeEnd("time"); // time: 0.827ms


Enter fullscreen mode Exit fullscreen mode

Evaluate a string



const toJavascript = (str) => eval(str);
toJavascript("alert('Hello World')");


Enter fullscreen mode Exit fullscreen mode

Array

Create an array of numbers from 1 to n



const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]


Enter fullscreen mode Exit fullscreen mode

Create an array of numbers from 1 to n with a step



const range = (n, step = 1) => Array.from({ length: n }, (_, i) => i * step);
console.log(range(10, 2)); // [1, 3, 5, 7, 9]


Enter fullscreen mode Exit fullscreen mode

Create an array and fill it with a value



const fill = (len, value) => Array(len).fill(value);
console.log(fill(3, 0)); // [0, 0, 0]


Enter fullscreen mode Exit fullscreen mode

Shuffling an array



const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
console.log(shuffleArray([1, 2, 3, 4])); // [3, 2, 1, 4]


Enter fullscreen mode Exit fullscreen mode

Convert an object into a list of [key, value] pairs



const toPairs = (obj) => Object.entries(obj);
console.log(toPairs({ a: 1, b: 2, c: 3 })); // [['a', 1], ['b', 2], ['c', 3]]


Enter fullscreen mode Exit fullscreen mode

Convert a list of [key, value] pairs into an object



const fromPairs = (pairs) =>
  pairs.reduce((a, b) => ({ ...a, [b[0]]: b[1] }), {});
console.log(
  fromPairs([
    ["a", 1],
    ["b", 2],
    ["c", 3],
  ])
); // { a: 1, b: 2, c: 3 }


Enter fullscreen mode Exit fullscreen mode

Remove an element from an array



const removeElement = (arr, element) => arr.filter((e) => e !== element);
console.log(removeElement([1, 2, 3, 4], 2)); // [1, 3, 4]


Enter fullscreen mode Exit fullscreen mode

Remove Duplicated from Array



const removeDuplicated = (arr) => [...new Set(arr)];
console.log(removeDuplicated([1, 2, 3, 3, 4, 4, 5, 5, 6])); // Result: [ 1, 2, 3, 4, 5, 6 ]

const removeDuplicate = (arr) =>
  Object.values(arr.reduce((a, b) => (a[b] ? a : { ...a, [b]: b }), {}));
console.log(removeDuplicate([1, 2, 3, 3])); // Result: [ 1, 2, 3, ]


Enter fullscreen mode Exit fullscreen mode

Swap variables or values



const swap = (a, b) => [b, a];
let a = 1,
  b = 2;
[b, a] = swap(a, b);
console.log(a, b); // 2, 1


Enter fullscreen mode Exit fullscreen mode

Numbers

Generate random number



const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
console.log(random(1, 10)); // Result: 1 ~ 10


Enter fullscreen mode Exit fullscreen mode

Generate random number with a step



const random = (min, max, step = 1) =>
  Math.floor(Math.random() * (max - min + 1)) * step + min;
console.log(random(1, 10, 2)); // Result: 1 ~ 10 with step 2


Enter fullscreen mode Exit fullscreen mode

Number is even or not



const isEven = (num) => num % 2 === 0;
console.log(isEven(4)); // true


Enter fullscreen mode Exit fullscreen mode

Number is odd or not



const isOdd = (num) => num % 2 !== 0;
console.log(isOdd(4)); // false


Enter fullscreen mode Exit fullscreen mode

Find the factorial of a number



const factorial = (num) => (num === 0 ? 1 : num * factorial(num - 1));
console.log(factorial(5)); // 120


Enter fullscreen mode Exit fullscreen mode

Find the sum of an array



const sum = (arr) => arr.reduce((a, b) => a + b, 0);
console.log(sum([1, 2, 3, 4])); // 10


Enter fullscreen mode Exit fullscreen mode

Find median of an array



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;
};
console.log(median([1, 2, 3, 4])); // 2.5


Enter fullscreen mode Exit fullscreen mode

Find largest numbers



const findLargest = (arr) => arr.map((subArr) => Math.max(...subArr));
console.log(
  findLargest([
    [4, 5, 1, 3],
    [13, 27, 18, 26],
    [32, 35, 37, 39],
    [1000, 1001, 857, 1],
  ])
); // [5, 27, 39, 1001]


Enter fullscreen mode Exit fullscreen mode

Find average of Numbers



const findAverage = (arr) => arr.reduce((a, b) => a + b, 0) / arr.length;
console.log(findAverage([1, 2, 3, 4])); // 2.5


Enter fullscreen mode Exit fullscreen mode

Find smallest numbers



const findSmallest = (arr) => arr.map((subArr) => Math.min(...subArr));
console.log(
  findSmallest([
    [4, 5, 1, 3],
    [13, 27, 18, 26],
    [32, 35, 37, 39],
    [1000, 1001, 857, 1],
  ])
); // [1, 18, 32, 857]


Enter fullscreen mode Exit fullscreen mode

Find mode of an array



const mode = (arr) => {
  const counts = arr.reduce((a, b) => {
    a[b] = (a[b] || 0) + 1;
    return a;
  }, {});
  const maxCount = Math.max(...Object.values(counts));
  return Object.keys(counts).filter((key) => counts[key] === maxCount);
};
console.log(mode([3, "a", "a", "a", 2, 3, "a", 3, "a", 2, 4, 9, 3])); // ['a']


Enter fullscreen mode Exit fullscreen mode

Find the range of an array



const range = (arr) => Math.max(...arr) - Math.min(...arr);
console.log(range([1, 2, 3, 4])); // 3


Enter fullscreen mode Exit fullscreen mode

Pick a random element from an array



const pick = (arr) => arr[Math.floor(Math.random() * arr.length)];
console.log(pick([1, 2, 3, 4])); // 2


Enter fullscreen mode Exit fullscreen mode

Map an array without .map()



const map = (arr, cb) => Array.from(arr, cb);
console.log(map([1, 2, 3, 4], (n) => n * 2)); // [2, 4, 6, 8]


Enter fullscreen mode Exit fullscreen mode

Empty an array without .splice()



const empty = (arr) => {
  arr.length = 0;
  return arr;
};
console.log(empty([1, 2, 3, 4])); // []


Enter fullscreen mode Exit fullscreen mode

Convert array to object



const toObject = (arr) => ({ ...arr });
console.log(toObject(["a", "b"])); // { 0: 'a', 1: 'b' }


Enter fullscreen mode Exit fullscreen mode

Find intersection of two arrays



const intersection = (arr1, arr2) => {
  const set = new Set(arr1);
  return arr2.filter((x) => set.has(x));
};
console.log(intersection([1, 2, 3], [2, 3, 4])); // [2, 3]


Enter fullscreen mode Exit fullscreen mode

Remove falsy values from an array



const compact = (arr) => arr.filter(Boolean);
console.log(compact([0, 1, false, 2, "", 3, "a", "e" * 23, NaN, "s", 34])); // [1, 2, 3, 'a', 's', 34]


Enter fullscreen mode Exit fullscreen mode

Rounding number to N decimal place



const round = (num, decimals = 0) => num.toFixed(decimals);
console.log(round(1.005, 2)); // 1.00


Enter fullscreen mode Exit fullscreen mode

String

Reverse String



const reverseString = (str) => str.split("").reverse().join("");
console.log(reverseString("hello")); // olleh


Enter fullscreen mode Exit fullscreen mode

Find Longest Word in a String



const findLongestWord = (str) =>
  str.split(" ").reduce((a, b) => (a.length > b.length ? a : b));
console.log(findLongestWord("The quick brown fox jumped over the lazy dog")); // jumped


Enter fullscreen mode Exit fullscreen mode

Generate Title Case



const titleCase = (str) =>
  str
    .split(" ")
    .map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase())
    .join(" ");
console.log(titleCase("the quick brown fox")); // The Quick Brown Fox


Enter fullscreen mode Exit fullscreen mode

Is String Palindrome



const isPalindrome = (str) => str === str.split("").reverse().join("");
console.log(isPalindrome("madam")); // true


Enter fullscreen mode Exit fullscreen mode

Copy to Clipboard



const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Hello World");


Enter fullscreen mode Exit fullscreen mode

Find a vowel in a string



const findVowel = (str) => str.match(/[aeiou]/gi);
console.log(findVowel("hello")); // ['e', 'o']


Enter fullscreen mode Exit fullscreen mode

Email validator



const validateEmail = (email) => {
    const re = /^(([^<>()\[\]\\.,;:\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,}))$/;
    return re.test(String(email).toLowerCase());
};
console.log(validateEmail('abc@aaa.co'); // true


Enter fullscreen mode Exit fullscreen mode

Validate only character and space



const validateName = (name) => /^[A-Za-z\s]+$/.test(name);
console.log(validateName("abc")); // true
console.log(validateName("123")); // false


Enter fullscreen mode Exit fullscreen mode

Validate only number



const validateNumber = (number) => /^[0-9]+$/.test(number);
console.log(validateNumber("123")); // true
console.log(validateNumber("abc")); // false


Enter fullscreen mode Exit fullscreen mode

Casting values in arrays using map



const castArray = (arr) => arr.map(Number);
console.log(castArray(["1", "2", [3]])); // [1, 2, 3]


Enter fullscreen mode Exit fullscreen mode

Date & Object

Check object is empty or not



const isEmpty = (obj) => Object.keys(obj).length === 0;
console.log(isEmpty({})); // true


Enter fullscreen mode Exit fullscreen mode

Get the current date



const getDate = () => new Date();
console.log(getDate()); // 2020-05-25T09:57:37.869Z


Enter fullscreen mode Exit fullscreen mode

Find the day of the week



const getDayName = (date) => {
  const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ];
  return days[date.getDay()];
};
console.log(getDayName(new Date())); // Friday


Enter fullscreen mode Exit fullscreen mode

Find the day of the year



const getDayOfYear = (date) => {
  const firstDay = new Date(date.getFullYear(), 0, 1);
  return Math.ceil((date - firstDay) / 86400000);
};
console.log(getDayOfYear(new Date())); // 182


Enter fullscreen mode Exit fullscreen mode

Find the number of days in a month



const getDaysInMonth = (date) =>
  new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
console.log(getDaysInMonth(new Date())); // 31


Enter fullscreen mode Exit fullscreen mode

Find the current month



const getMonthName = (date) => {
  const months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];
  return months[date.getMonth()];
};
console.log(getMonthName(new Date())); // March


Enter fullscreen mode Exit fullscreen mode

Find the number of seconds until midnight



const getSecondsUntilMidnight = (date) =>
  (24 - date.getHours()) * 60 * 60 +
  (60 - date.getMinutes()) * 60 +
  (60 - date.getSeconds());
console.log(getSecondsUntilMidnight(new Date())); // 86400


Enter fullscreen mode Exit fullscreen mode

Log Time from Date



const logTime = (date) => date.toTimeString().slice(0, 8);
logTime(new Date()); // 09:57:37

const logTime = (date) => date.toLocaleTimeString("en-GB");
logTime(new Date()); // 09:57:37


Enter fullscreen mode Exit fullscreen mode

Format JSON output with spaces



const formatJSON = (json) => JSON.stringify(json, null, 2);
console.log(formatJSON({ a: 1, b: 2 }));


Enter fullscreen mode Exit fullscreen mode

Deep clone an object



const clone = (obj) => JSON.parse(JSON.stringify(obj));
console.log(clone({ a: 1, b: 2 })); // { a: 1, b: 2 }

// OR

const deepCopy = (obj, copy = {}) => {
  if (!obj || typeof obj !== "object") return obj;
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) copy[key] = deepCopy(obj[key]);
  }
  return copy;
};


Enter fullscreen mode Exit fullscreen mode

Promises

Javascript promises in depth | DevsMitra

Wait for a promise to resolve



const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
wait(1000).then(() => console.log("You'll see this after 1 second"));
await wait(1000); // Next line will be executed after 1 second


Enter fullscreen mode Exit fullscreen mode

Is function async



const isAsync = (fn) => fn.constructor.name === "AsyncFunction";
console.log(isAsync(async () => {})); // true


Enter fullscreen mode Exit fullscreen mode

Callback to Promise



const promisify =
  (fn) =>
  (...args) => {
    return new Promise((res, reject) =>
      fn(...args, (err, data) => (err ? reject(err) : res(data)))
    );
  };


Enter fullscreen mode Exit fullscreen mode

Promise retry



const retry = (fn, times = 3) => {
  return (...args) =>
    new Promise((resolve, reject) => {
      const attempt = (n) => {
        fn(...args)
          .then(resolve)
          .catch((err) => {
            if (n === times) return reject(err);
            attempt(n + 1);
          });
      };
      attempt(1);
    });
};


Enter fullscreen mode Exit fullscreen mode

Styling

Generate a random color



const getRandomColor = () =>
  `#${Math.floor(Math.random() * 16777215).toString(16)}`;
console.log(getRandomColor()); // #f0f0f0

const randomHex = () =>
  `#${Math.floor(Math.random() * 0xffffff)
    .toString(16)
    .padEnd(6, "0")}`;
console.log(randomHex()); // #f0f0f0


Enter fullscreen mode Exit fullscreen mode

Convert to rem



const toRem = (px) => `${px / 16}rem`;
console.log(toRem(16)); // 1rem


Enter fullscreen mode Exit fullscreen mode

Styled Components get color from theme



Off topic but very useful

const getPrimaryMain = props => props.theme.main

const Button = styled.button`
    color: ${getPrimaryMain};
    border: 2px solid ${getPrimaryMain};
`;


Enter fullscreen mode Exit fullscreen mode

Window & Dom

Get selected text



const getSelectedText = () => window.getSelection().toString();
console.log(getSelectedText()); // Hello World


Enter fullscreen mode Exit fullscreen mode

Data Structures

Create a stack



const Stack = () => {
  let data = [];
  return {
    push(item) {
      data.push(item);
    },
    pop() {
      return data.pop();
    },
    peek() {
      return data[data.length - 1];
    },
    get length() {
      return data.length;
    },
  };
};


Enter fullscreen mode Exit fullscreen mode

Create a queue



const Queue = () => {
  let data = [];
  return {
    push(item) {
      data.push(item);
    },
    pop() {
      return data.shift();
    },
    peek() {
      return data[0];
    },
    get length() {
      return data.length;
    },
  };
};


Enter fullscreen mode Exit fullscreen mode

Recursion



const range = (n) => {
  if (n === 0) return;
  console.log(n);
  range(n - 1);
};
console.log(range(5));


Enter fullscreen mode Exit fullscreen mode

Memoization (cache)

Try the following code without memo and with memo.



const fib = (n) => {
  if (n < 2) return n;
  return fib(n - 1, memo) + fib(n - 2, memo);
};
console.log(fib(40)); // Browser crash or timeout

const fib = (n, memo = {}) => {
  if (n < 2) return n;
  if (memo[n]) return memo[n];
  memo[n] = fib(n - 1, memo) + fib(n - 2, memo);
  return memo[n];
};
console.log(fib(40)); // 102334155


Enter fullscreen mode Exit fullscreen mode

Javascript short reusable functions everyone will always need


More content at Dev.to.
Catch me on Youtube, Github, Twitter, LinkedIn, Medium, Stackblitz, Hashnode, HackerNoon, and Blogspot.

Top comments (0)