JavaScript Snippets Save
Short JavaScript code snippets
Project README
JavaScript-snippets
Click :star: if you like the project. Pull Request are highly appreciated. Follow us on Facebook
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) ) // false
console.log( !!myVar ) // false
console.log( Boolean(mySecondVar) ) // true
console.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 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']
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 infinity
myArray.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];
//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]
Copy Text to Clipboard
function copyToClipboard() {
const copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("copy");
}
//new API
function 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')); // 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"
Count elements in an array
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 }
Aliases with JavaScript Destructuring
//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
The Object.is() method determines whether two values are the same value
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
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 set
delete frozenObject.name // Cannot delete property 'name' of #<Object>
//We can check if an object is frozen by using
Object.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
}
//or
window.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.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
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 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
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
bonus: add/remove animation depending if an image is in the viewport https://codepen.io/JSsnippets/pen/PoqrjEY
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
see our codepen: https://codepen.io/JSsnippets/pen/dyYoYVX
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
play/pause video accordingly see our codepen: https://codepen.io/JSsnippets/pen/gOapPzq
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); //=> undefined
console.log(instance.privateMethod); //=> undefined
console.log(instance.getPrivateMessage()); //=> Come and learn Js with us
Preventing paste into an input field
see our codepen: https://codepen.io/JSsnippets/pen/qBbyMoJ
const pasteBox = document.getElementById("paste-no-event");
pasteBox.onpaste = (e) => {
e.preventDefault();
return false;
};
The void operator
The void operator evaluates the given expression and then returns undefined.
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
replaceAll
the method string.replaceAll(search, replaceWith) replaces all appearances of search string with replaceWith.
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'
Required Function Params
Expanding on the default parameter technique, we can mark a parameter as mandatory
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" id="JSsnippets" 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 abcde
const reduceRightArray = arr.reduceRight((acc, current) => {
return acc + current
}, "")
//return edcba
Abort Fetch
//HTML
<button id="download">Download</button>
<button id="abort">Abort</button>
//JS
let 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();
});
How to change the value of an object which is inside an array
const state = [
{
userId: 1,
name: "JSSnippets",
isOwner: false,
},
{
userId: 2,
name: "React",
isOwner: false,
},
{
userId: 3,
name: "Vue",
isOwner: false,
},
{
userId: 4,
name: "Angular",
isOwner: false,
},
];
const newState = state.map((obj) =>
obj.name === "JSSnippets" ? { ...obj, isOwner: true } : obj
);
Numeric separators allow us to improve our code readability
100_000_000 === 100000000 // true
300_000 === 300000 //true
pay attention when using every
Calling this method on an empty array will return true for any condition!
const arr = []
const result = arr.every(x=> x==5)
console.log(result) //true
How to convert an array of key-value tuples into an object
const JSarr = [
['name', 'JSsnippets'],
['address', 'worldwide'],
['year', '2018'],
['followers', '15000']
];
const obj = Object.fromEntries(JSarr);
//{
// "name": "JSsnippets",
// "address": "worldwide",
// "year": "2018",
// "followers": "15000"
//}
Native text to speech JS
const startSpeaking=()=>{
let msg = document.getElementById("text-to-speech").value;
let speech = new SpeechSynthesisUtterance();
speech.lang = "en-US";
speech.text = msg;
speech.volume = 1;
speech.rate = 1;
speech.pitch = 1;
window.speechSynthesis.speak(speech);
}
toFixed
Warning: Floating point numbers cannot represent all decimals precisely in binary. This can lead to unexpected results, such as 0.1 + 0.2 === 0.3 returning false .
123.678.toFixed() // Returns '124'
123.678.toFixed(1) // Returns '123.7': Note rounding
2.35.toFixed(1) // Returns '2.4'. Note it rounds up
2.65.toFixed(1) // Returns '2.6'. Note it rounds down -why??? see the warning above
generate random uuid
The randomUUID() method of the Crypto interface is used to generate a v4 UUID using a cryptographically secure random number generator.
crypto.randomUUID() // print in console '460ff1e6-2106-4848-833d-5c5b3bfdc943'
crypto.randomUUID() // print in console '9a91c014-d1b1-453a-8091-ef8b9b48b14a'
structuredClone
If you want to deep clone a value in Node.js, you no longer need to use a library or the JSON.parse(JSON.stringify(value)) hack. You can use the new global function structuredClone()
const user = {
name: "JS Snippets",
address: { street: "Original Road", city: "Placeshire" },
};
const clonedUser = structuredClone(user);
clonedUser.address.street = "New Road";
console.log("user.address.street:", user.address.street);
// > Original Road
console.log("clonedUser.address.street:", clonedUser.address.street);
// > New Road
get device orientation
Browsers expose a global variable named screen, which we’ll use to access the information we need.
function getOrientation() {
const isPortrait = screen.orientation.type.startswith('portrait')
return isPortrait ? 'portrait' : 'landscape'
}
CONST vs LET vs VAR
| const | Let | Var | |
|---|---|---|---|
| Can be Reaasigned? | :x: | :white_check_mark: | :white_check_mark: |
| Cab be Redeclared? | :x: | :x: | :white_check_mark: |
| Block Scope | :white_check_mark: | :white_check_mark: | :x: |
| Function Scope | :white_check_mark: | :white_check_mark: | :white_check_mark: |
| Stored in Global Scope | :x: | :x: | :white_check_mark: |
Open Source Agenda is not affiliated with "JavaScript Snippets" Project. README Source: roeib/JavaScript-snippets
Stars
610
Open Issues
8
Last Commit
1 year ago
Repository
License
Open Source Agenda Badge
