DEV Community

Rahul Sharma
Rahul Sharma

Posted on • Updated on

Javascript short reusable functions everyone will always need

#javascript #react #node #angular

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)

Read next

nicm42 profile image

Earth Day Celebration Landing Page

Nic -

shekhartarare profile image

How to Print to Browser Console from Razor View Page in ASP.NET MVC

Shekhar Tarare -

karsonkalt profile image

Managing View State and Client-side Routing in SPAs

Karson Kalt -

abhsiksah profile image

Dry running the code to understand the flow

abhsiksah -