Table of Contents

How to generate a random number in a given range

// Returns a random number(float) between min (inclusive) and max (exclusive) const getRandomNumber = (min, max) => Math.random() * (max - min) + min;getRandomNumber(2, 10) // Returns a random number(int) between min (inclusive) and max (inclusive)const getRandomNumberInclusive =(min, max)=> {    min = Math.ceil(min);    max = Math.floor(max);    return Math.floor(Math.random() * (max - min + 1)) + min;}getRandomNumberInclusive(2, 10);

How to find the difference between two arrays

const firstArr = [5, 2, 1];const secondArr = [1, 2, 3, 4, 5];const diff = [    ...secondArr.filter(x => !firstArr.includes(x)),    ...firstArr.filter(x => !secondArr.includes(x))];console.log('diff',diff) //[3,4]function arrayDiff(a, b) {    return [        ...a.filter(x => b.indexOf(x) === -1),        ...b.filter(x => a.indexOf(x) === -1)    ]}console.log('arrayDiff',arrayDiff(firstArr, secondArr)) //[3,4]const difference = (a, b) => {    const setA = new Set(a);    const setB = new Set(b);    return [        ...a.filter(x => !setB.has(x)),        ...b.filter(x => !setA.has(x))    ]};difference(firstArr, secondArr); //[3,4]console.log('difference',difference(firstArr, secondArr))

Convert truthy falsy to boolean

const myVar = null; const mySecondVar = 1; console.log( Boolean(myVar) ) // falseconsole.log( !!myVar ) // falseconsole.log( Boolean(mySecondVar) ) // trueconsole.log( !!mySecondVar ) // true

Repeat a string

let aliens = '';for(let i = 0 ; i < 6 ; i++){ aliens += '👽'}//👽👽👽👽👽👽Array(6).join('👽')//👽👽👽👽👽👽'👽'.repeat(6)//👽👽👽👽👽👽

Check how long an operation takes

//The performance.now() method returns a DOMHighResTimeStamp, measured in milliseconds.//performance.now() is relative to page load and more precise in orders of magnitude. //Use cases include benchmarking and other cases where a high-resolution time is required //such as media (gaming, audio, video, //etc.)var startTime = performance.now();doSomething();const endTime = performance.now();console.log("this doSomething took " + (endTime - startTime) + " milliseconds.");

Two ways to remove an item in a specific in an array

//Mutating wayconst muatatedArray = ['a','b','c','d','e'];muatatedArray.splice(2,1)console.log(muatatedArray) //['a','b','d','e']//Non-mutating wayconst nonMuatatedArray = ['a','b','c','d','e'];const newArray = nonMuatatedArray.filter((item, index) => !( index === 2 ));console.log(newArray) //['a','b','d','e']

Did you know you can flat an array

const myArray = [2, 3, [4, 5],[7,7, [8, 9, [1, 1]]]];myArray.flat() // [2, 3, 4, 5 ,7,7, [8, 9, [1, 1]]]myArray.flat(1) // [2, 3, 4, 5 ,7,7, [8, 9, [1, 1]]]myArray.flat(2) // [2, 3, 4, 5 ,7,7, 8, 9, [1, 1]]//if you dont know the depth of the array you can use infinitymyArray.flat(infinity) // [2, 3, 4, 5 ,7,7, 8, 9, 1, 1];

Get unique values in an array

const numbers = [1,1,3,2,5,3,4,7,7,7,8];//Ex1const unieqNumbers = numbers.filter((v,i,a) => a.indexOf(v )=== i )console.log(unieqNumbers) //[1,3,2,5,4,7,8]//Ex2const unieqNumbers2 = Array.from(new Set(numbers))console.log(unieqNumbers2) //[1,3,2,5,4,7,8]//Ex3const unieqNumbers3 = [...new Set(numbers)]console.log(unieqNumbers3) //[1,3,2,5,4,7,8]//EX4 lodashconst unieqNumbers4 = _.uniq(numbers)console.log(unieqNumbers4) //[1,3,2,5,4,7,8]

Copy Text to Clipboard

function copyToClipboard() {  const copyText = document.getElementById("myInput");  copyText.select();  document.execCommand("copy");  }//new APIfunction copyToClipboard(){ navigator.clipboard.writeText(document.querySelector('#myInput').value)}

Nested Destructuring

const user = { id: 459, name: 'JS snippets', age:29, education:{  degree: 'Masters' }}const { education : { degree } } = user;console.log(degree) //Masters

URLSearchParams

//The URLSearchParams interface defines utility methods to work with the query string of a URL.const urlParams = new URLSearchParams("?post=1234&action=edit");console.log(urlParams.has('post')); // trueconsole.log(urlParams.get('action')); // "edit"console.log(urlParams.getAll('action')); // ["edit"]console.log(urlParams.toString()); // "?post=1234&action=edit"console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

Count elements in an array

const myFruits = ['Apple','Orange','Mango','Banana','Apple','Apple','Mango']//first optionconst countMyFruits = myFruits.reduce((countFruits,fruit) => {  countFruits[fruit] = ( countFruits[fruit] || 0 ) +1;  return countFruits },{} ) console.log(countMyFruits) // { Apple:3, Banana:1, Mango:2, Orange:1 }  //seconf option const fruitsCounter = {};  for( const fruit of myFruits ){   fruitsCounter[fruit] = fruitsCounter[fruit] ? fruitsCounter[fruit]+1 :1; }   console.log(fruitsCounter) // { Apple:3, Banana:1, Mango:2, Orange:1 }

Aliases with JavaScript Destructuring

//There are cases where you want the destructured variable to have a different name than the property nameconst obj = {   name: "JSsnippets"};// Grabs obj.name as { pageName }const { name: pageName } = obj;//log our aliasconsole.log(pageName) // JSsnippets

The Object.is() method determines whether two values are the same value

Object.is('foo', 'foo');     // trueObject.is(null, null);       // trueObject.is(Nan, Nan);       // true 😱const foo = { a: 1 };const bar = { a: 1 };Object.is(foo, foo);         // trueObject.is(foo, bar);         // false

Freeze an object

const obj = {   name: "JSsnippets",  age:29,  address:{  street : 'JS'}};const frozenObject = Object.freeze(obj);frozenObject.name = 'weLoveJS'; // Uncaught TypeError//Although, we still can change a property’s value if it’s an object:frozenObject.address.street = 'React'; // no error, new value is setdelete frozenObject.name // Cannot delete property 'name' of #<Object>//We can check if an object is frozen by usingObject.isFrozen(obj) //true

Printing Object keys and values

const obj = {   name: "JSsnippets",  age:29,};//Object.entries() method is used to return an array consisting of enumerable property //[key, value] pairs of the object which are passed as the parameter.for(let [key,value] of Object.entries(obj)){   console.log(`${key}: ${value}`)}//expected output:// "name: Jssnippets"// "age: 29"// order is not guaranteed

Capture the right click event

window.oncontextmenu = () => {console.log('right click');return false // cancel default menu}//orwindow.addEventListener('contextmenu', ()=>{console.log('right click');return false // cancel default menu},false)

In HTML5, you can tell the browser when to run your JavaScript code

//Without async or defer, browser will run your script immediately, before rendering the elements that's below your script tag.<script src="myscript.js"></script>//With async (asynchronous), browser will continue to load the HTML page and render it while the browser load and execute the script at the same time.//Async is more useful when you really don't care when the script loads and nothing else that is user dependent depends upon that script loading.(for scripts likes Google analytics)<script async src="myscript.js"></script>//With defer, browser will run your script when the page finished parsing. (not necessary finishing downloading all image files. <script defer src="myscript.js"></script>

Nullish coalescing operator

// an equality check against nullary values (e.g. null or undefined). Whenever the expression to the left of the ?? operator evaluates to either //undefined or null, the value defined to the right will be returned.const foo = undefined ?? 'default string';console.log(foo);// expected output: "default string"const age = 0 ?? 30;console.log(age);// expected output: "0"

Optional chaining

const car = {}const carColor = car.name.colorconsole.log(carColor);// error- "Uncaught TypeError: Cannot read property 'carColor' of undefined//In JavaScript, you can first check if an object exists, and then try to get one of its properties, like this:const carColor = car && car.name && car.name.color;console.log(carColor);//undefined- no error//Now this new optional chaining operator will let us be even more fancy:const newCarColor = car?.name?.color;console.log(newCarColor) //undefined- no error//You can use this syntax today using @babel/plugin-proposal-optional-chaining

globalThis

Accessing the global property in JavaScript has always posed some difficulty. This is because different platforms have different ways to access it.Client-side JavaScript uses window or selfNode.js uses globalWeb workers use selfThe globalThis property provides a standard way of accessing the global 'this' value across environments. you can access the global object in a consistent manner without having to know which environment the code is being run in. console.log(globalThis) //get the global this depends on your environment

The second argument of JSON.stringify lets you cherry-pick 🍒 keys to serialize.

const user = { id: 459, name: 'JS snippets', age:29, education:{  degree: 'Masters' }}JSON.stringify(user,[name,age], 2)/*returns{  "name": "JS snippets",  "age": 29}*/

Fire an event listener only once

const el = document.getElementById("btn");function myClickHandler(){  console.log('this click will only fire once')}el.addEventListener('click', myClickHandler, {  once: true,});

Vanilla JS toggle

const span = document.querySelector("span");let classes = span.classList;span.addEventListener("click", function() {  let result = classes.toggle("active");  if (result) {    console.log("active class was added");  } else {    console.log("active class was removed");  }});

Check if a string is a valid JSON

function isJson(str) {    try {        JSON.parse(str);    } catch (e) {      //the json is  not ok        return false;    }    //the json is ok    return true;}

getBoundingClientRect

//getBoundingClientRect provides you with important pieces of data about an//HTML element’s size and positioning.const bodyBounderies = document.body.getBoundingClientRect();// =>  {//       top: Number,//       left: Number,//       right: Number,//       bottom: Number,//       x: Number,//       y: Number,//       width: Number,//       height: Number,//     }

Check if a node is in the viewport

const image = document.querySelector('.animate-me');observer = new IntersectionObserver((entries) => {  const [ myImg ] = entries;    if (myImg.intersectionRatio > 0) {      myImg.target.classList.add('fancy');    } else {      myImg.target.classList.remove('fancy');    }});observer.observe(image);

Notify when element size is changed

const foo = document.getElementById("foo");const observer = new ResizeObserver((entries) => {  for (let entry of entries) {    const cr = entry.contentRect;    console.log = `Size: ${cr.width}px X ${cr.height}px`;  }});observer.observe(foo);

Detect if Browser Tab is in the view

const video =  document.getElementById("my-video");const onVisibilitychange =()=>{   return document.hidden      ? video.pause()      : video.play();} document.addEventListener("visibilitychange", onVisibilitychange)

Private class methods and fields

class Students {  #name;  constructor(){    this.#name = "JS snippets";  }  #privateMethod() {    return 'Come and learn Js with us';  }  getPrivateMessage() {      return this.#privateMethod();  }}const instance = new Something();console.log(instance.name); //=> undefinedconsole.log(instance.privateMethod); //=> undefinedconsole.log(instance.getPrivateMessage()); //=> Come and learn Js with us

Preventing paste into an input field

const pasteBox = document.getElementById("paste-no-event");pasteBox.onpaste = (e) => {  e.preventDefault();  return false;};

The void operator

void 0;  //returns undefinedvoid (0); //returns undefinedvoid {}; //returns undefinedvoid "JSsnippets; //returns undefinedvoid (0); //returns undefinedvoid (2 == '2'); //returns undefinedvoid anyfunction(); //returns undefined

replaceAll

const str = 'this is a JSsnippets example';const updatedStr = str.replace('example', 'snippet'); // 'this is a  JSsnippets snippet'The tricky part is that replace method replaces only the very first match of the substring we have passed:const str = 'this is a JSsnippets example and examples are great';const updatedStr = str.replace('example', 'snippet'); //'this is a JSsnippets snippet and examples are great'In order to go through this, we need to use a global regexp instead:const str = 'this is a JSsnippets example and examples are great';const updatedStr = str.replace(/example/g, 'snippet'); //'this is a JSsnippets snippet and snippets are greatr'but now we have new friend in town, replaceAllconst str = 'this is a JSsnippets example and examples are great';const updatedStr = str.replaceAll('example', 'snippet'); //'this is a JSsnippets snippet and snippets are greatr'

Required Function Params

const isRequired = () => {    throw new Error( 'This is a mandatory parameter.' );}const getPage = ( pageName = 'Jssnippets', url = isRequired() ) => {    return `${pageName} ${url}`;}console.log(getPage());//In the above code, url will be undefined and that will try to set the default value for it which is the isRequired() function. It will throw an error as,//Uncaught error: This is a mandatory parameter.//at isRequired

Get input value as a number

<input type="number" onkeyup="checkMyType(event)" />function checkMyType(event){    console.log(typeof event.target.value) // string  console.log(typeof event.target.valueAsNumber ) // number}

reduceRight

const arr = ["a", "b", "c", "d", "e"]const reduceArray = arr.reduce((acc, current) => {    return acc + current}, "")//return abcdeconst reduceRightArray = arr.reduceRight((acc, current) => {    return acc + current}, "")//return edcba

Abort Fetch

//HTML<button>Download</button><button>Abort</button>//JSlet controller;document.querySelector('#download').addEventListener('click', () => {  controller = new AbortController();  const signal = controller.signal;  fetch('https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4', {signal})    .then(() => console.log('done'));});document.querySelector('#abort').addEventListener('click', function() {  controller.abort();});