See More

# JavaScript-snippets > Click :star:if you like the project. Pull Request are highly appreciated. Follow us on [Facebook](https://www.facebook.com/snippetsJS) ### Table of Contents | No. | Questions | |---- | --------- |1 | [Generate a random number in a given range](#How-to-generate-a-random-number-in-a-given-range) | |2 | [Find the difference between two arrays](#How-to-find-the-difference-between-two-arrays)| |3 | [Convert truthy/falsy to boolean(true/false)](#Convert-truthy-falsy-to-boolean)| |4 | [Repeat a string](#Repeat-a-string)| |5 | [Check how long an operation takes](#Check-how-long-an-operation-takes)| |6 | [Two ways to remove an item in a specific in an array](#Two-ways-to-remove-an-item-in-a-specific-in-an-array)| |7 | [Did you know you can flat an array?](#Did-you-know-you-can-flat-an-array)| |8 | [Get unique values in an array](#Get-unique-values-in-an-array)| |9 | [Copy Text to Clipboard](#Copy-Text-to-Clipboard)| |10 | [Nested Destructuring](#Nested-Destructuring)| |11 | [URLSearchParams](#URLSearchParams)| |12 | [Count elements in an array](#Count-elements-in-an-array)| |13 | [Aliases with JavaScript Destructuring](#Aliases-with-JavaScript-Destructuring)| |14 | [The Object.is() method determines whether two values are the same value](#the-objectis-method-determines-whether-two-values-are-the-same-value)| |15 | [Freeze an object](#Freeze-an-object)| |16 | [Printing Object keys and values](#Printing-Object-keys-and-values)| |17 | [Capture the right click event](#Capture-the-right-click-event)| |18 | [In HTML5, you can tell the browser when to run your JavaScript code](#in-html5-you-can-tell-the-browser-when-to-run-your-javascript-code)| |19 | [Nullish coalescing operator](#Nullish-coalescing-operator)| |20 | [Optional chaining](#Optional-chaining)| |21 | [globalThis](#globalThis)| |22 | [The second argument of JSON.stringify lets you cherry-pick 🍒 keys to serialize.](#the-second-argument-of-jsonstringify-lets-you-cherry-pick--keys-to-serialize)| |23 | [Fire an event listener only once.](#Fire-an-event-listener-only-once)| |24 | [Vanilla JS toggle](#Vanilla-JS-toggle)| |25 | [Check if a string is a valid JSON](#Check-if-a-string-is-a-valid-JSON)| |26 | [getBoundingClientRect](#getBoundingClientRect)| |27 | [Check if a node is in the viewport](#Check-if-a-node-is-in-the-viewport)| |28 | [Notify when element size is changed](#Notify-when-element-size-is-changed)| |29 | [Detect if Browser Tab is in the view](#Detect-if-Browser-Tab-is-in-the-view)| |30 | [Private class methods and fields](#Private-class-methods-and-fields)| |31 | [Preventing paste into an input field](#Preventing-paste-into-an-input-field)| |32 | [The void operator](#The-void-operator)| |33 | [replaceAll](#replaceAll)| |34 | [Required Function Params](#Required-Function-Params)| |35 | [Get input value as a number](#Get-input-value-as-a-number)| **[⬆ Back to Top](#table-of-contents)** ### How to generate a random number in a given range ```javascript // 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); ``` **[⬆ Back to Top](#table-of-contents)** ### How to find the difference between two arrays ```javascript 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)) ``` **[⬆ Back to Top](#table-of-contents)** ### Convert truthy falsy to boolean ```javascript const myVar = null; const mySecondVar = 1; console.log( Boolean(myVar) ) // false console.log( !!myVar ) // false console.log( Boolean(mySecondVar) ) // true console.log( !!mySecondVar ) // true ``` **[⬆ Back to Top](#table-of-contents)** ### Repeat a string ```javascript let aliens = ''; for(let i = 0 ; i < 6 ; i++){ aliens += '👽' } //👽👽👽👽👽👽 Array(6).join('👽') //👽👽👽👽👽👽 '👽'.repeat(6) //👽👽👽👽👽👽 ``` **[⬆ Back to Top](#table-of-contents)** ### Check how long an operation takes ```javascript //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."); ``` **[⬆ Back to Top](#table-of-contents)** ### Two ways to remove an item in a specific in an array ```javascript //Mutating way const muatatedArray = ['a','b','c','d','e']; muatatedArray.splice(2,1) console.log(muatatedArray) //['a','b','d','e'] //Non-mutating way const nonMuatatedArray = ['a','b','c','d','e']; const newArray = nonMuatatedArray.filter((item, index) => !( index === 2 )); console.log(newArray) //['a','b','d','e'] ``` **[⬆ Back to Top](#table-of-contents)** ### Did you know you can flat an array ```javascript 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 infinity myArray.flat(infinity) // [2, 3, 4, 5 ,7,7, 8, 9, 1, 1]; ``` **[⬆ Back to Top](#table-of-contents)** ### Get unique values in an array ```javascript const numbers = [1,1,3,2,5,3,4,7,7,7,8]; //Ex1 const unieqNumbers = numbers.filter((v,i,a) => a.indexOf(v )=== i ) console.log(unieqNumbers) //[1,3,2,5,4,7,8] //Ex2 const unieqNumbers2 = Array.from(new Set(numbers)) console.log(unieqNumbers2) //[1,3,2,5,4,7,8] //Ex3 const unieqNumbers3 = [...new Set(numbers)] console.log(unieqNumbers3) //[1,3,2,5,4,7,8] //EX4 lodash const unieqNumbers4 = _.uniq(numbers) console.log(unieqNumbers4) //[1,3,2,5,4,7,8] ``` **[⬆ Back to Top](#table-of-contents)** ### Copy Text to Clipboard ```javascript function copyToClipboard() { const copyText = document.getElementById("myInput"); copyText.select(); document.execCommand("copy"); } //new API function copyToClipboard(){ navigator.clipboard.writeText(document.querySelector('#myInput').value) } ``` **[⬆ Back to Top](#table-of-contents)** ### Nested Destructuring ```javascript const user = { id: 459, name: 'JS snippets', age:29, education:{ degree: 'Masters' } } const { education : { degree } } = user; console.log(degree) //Masters ``` **[⬆ Back to Top](#table-of-contents)** ### URLSearchParams ```javascript //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')); // true console.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" ``` **[⬆ Back to Top](#table-of-contents)** ### Count elements in an array ```javascript const myFruits = ['Apple','Orange','Mango','Banana','Apple','Apple','Mango'] //first option const 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 } ``` **[⬆ Back to Top](#table-of-contents)** ### Aliases with JavaScript Destructuring ```javascript //There are cases where you want the destructured variable to have a different name than the property name const obj = { name: "JSsnippets" }; // Grabs obj.name as { pageName } const { name: pageName } = obj; //log our alias console.log(pageName) // JSsnippets ``` **[⬆ Back to Top](#table-of-contents)** ### The Object.is() method determines whether two values are the same value ```javascript Object.is('foo', 'foo'); // true Object.is(null, null); // true Object.is(Nan, Nan); // true 😱 const foo = { a: 1 }; const bar = { a: 1 }; Object.is(foo, foo); // true Object.is(foo, bar); // false ``` **[⬆ Back to Top](#table-of-contents)** ### Freeze an object ```javascript 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 set delete frozenObject.name // Cannot delete property 'name' of # //We can check if an object is frozen by using Object.isFrozen(obj) //true ``` **[⬆ Back to Top](#table-of-contents)** ### Printing Object keys and values ```javascript 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 ``` **[⬆ Back to Top](#table-of-contents)** ### Capture the right click event ```javascript window.oncontextmenu = () => { console.log('right click'); return false // cancel default menu } //or window.addEventListener('contextmenu', ()=>{ console.log('right click'); return false // cancel default menu },false) ``` **[⬆ Back to Top](#table-of-contents)** ### In HTML5, you can tell the browser when to run your JavaScript code ```javascript //Without async or defer, browser will run your script immediately, before rendering the elements that's below your script tag. //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) //With defer, browser will run your script when the page finished parsing. (not necessary finishing downloading all image files. ``` **[⬆ Back to Top](#table-of-contents)** ### Nullish coalescing operator ```javascript // 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" ``` **[⬆ Back to Top](#table-of-contents)** ### Optional chaining ```javascript const car = {} const carColor = car.name.color console.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 ``` **[⬆ Back to Top](#table-of-contents)** ### globalThis ```javascript 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 self Node.js uses global Web workers use self The 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 ``` **[⬆ Back to Top](#table-of-contents)** # The second argument of JSON.stringify lets you cherry-pick 🍒 keys to serialize. ```javascript const user = { id: 459, name: 'JS snippets', age:29, education:{ degree: 'Masters' } } JSON.stringify(user,[name,age], 2) /* returns { "name": "JS snippets", "age": 29 } */ ``` **[⬆ Back to Top](#table-of-contents)** ### Fire an event listener only once ```javascript const el = document.getElementById("btn"); function myClickHandler(){ console.log('this click will only fire once') } el.addEventListener('click', myClickHandler, { once: true, }); ``` **[⬆ Back to Top](#table-of-contents)** ### Vanilla JS toggle ```javascript 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"); } }); ``` **[⬆ Back to Top](#table-of-contents)** ### Check if a string is a valid JSON ```javascript function isJson(str) { try { JSON.parse(str); } catch (e) { //the json is not ok return false; } //the json is ok return true; } ``` **[⬆ Back to Top](#table-of-contents)** ### getBoundingClientRect ```javascript //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, // } ``` **[⬆ Back to Top](#table-of-contents)** ### Check if a node is in the viewport bonus: add/remove animation depending if an image is in the viewport https://codepen.io/JSsnippets/pen/PoqrjEY ```javascript 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); ``` **[⬆ Back to Top](#table-of-contents)** ### Notify when element size is changed see our codepen: https://codepen.io/JSsnippets/pen/dyYoYVX ```javascript 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); ``` **[⬆ Back to Top](#table-of-contents)** ### Detect if Browser Tab is in the view play/pause video accordingly see our codepen: https://codepen.io/JSsnippets/pen/gOapPzq ```javascript const video = document.getElementById("my-video"); const onVisibilitychange =()=>{ return document.hidden ? video.pause() : video.play(); } document.addEventListener("visibilitychange", onVisibilitychange) ``` **[⬆ Back to Top](#table-of-contents)** ### Private class methods and fields ```javascript 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); //=> undefined console.log(instance.privateMethod); //=> undefined console.log(instance.getPrivateMessage()); //=> Come and learn Js with us ``` **[⬆ Back to Top](#table-of-contents)** ### Preventing paste into an input field see our codepen: https://codepen.io/JSsnippets/pen/qBbyMoJ ```javascript const pasteBox = document.getElementById("paste-no-event"); pasteBox.onpaste = (e) => { e.preventDefault(); return false; }; ``` **[⬆ Back to Top](#table-of-contents)** ### The void operator The void operator evaluates the given expression and then returns undefined. ```javascript void 0; //returns undefined void (0); //returns undefined void {}; //returns undefined void "JSsnippets; //returns undefined void (0); //returns undefined void (2 == '2'); //returns undefined void anyfunction(); //returns undefined ``` **[⬆ Back to Top](#table-of-contents)** ### replaceAll the method string.replaceAll(search, replaceWith) replaces all appearances of search string with replaceWith. ```javascript 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, replaceAll const 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' ``` **[⬆ Back to Top](#table-of-contents)** ### Required Function Params Expanding on the default parameter technique, we can mark a parameter as mandatory ```javascript 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 ``` **[⬆ Back to Top](#table-of-contents)** ### Get input value as a number ```javascript function checkMyType(event){ console.log(typeof event.target.value) // string console.log(typeof event.target.valueAsNumber ) // number } ```