Hello my frontend developer friends, today i will be discussing some awesome javascript snippets which you may or may not have used but is very useful and used in almost all the web dev projects.
- I'll be creating my code snippets on Scribbler.live first, which is a fantastic platform that allows you to run a JavaScript Notebook, Online Compiler, and Editor without the need for manual setup.
- Additionally, I am including a link to code snippets that includes all of the code examples so you can open the snippet and run it yourself to see the results.
- I will be using
scrib.showfrom scribbler.live, it is equivalent toconsole.log
Lets dive in...
Table of contents
- Use const and let
- Default Function Parameters
- Template Literals over String Concatenation
- Object Destructuring
- Array Destructuring
- Optional Chaining (?.)
- Nullish Coalescing Operator (??)
- Short-Circuit Evaluation
- Ternary Operator
- Spread Operator for Objects/Arrays
- Use Array.map() for Transformation
- Use Array.filter() to Remove Items
- Use Array.reduce() for Aggregation
- Debounce Functions (for Search Inputs, etc.)
- Throttle Function
- Deep Clone with structuredClone()
- Clean try-catch Blocks
- Use async/await with Fetch
- Memoization with Closures
- Readable Conditionals with Guard Clauses
- Abort Fetch Requests
- Function Composition
- Custom Event Emitter
- Proxy for Reactive Objects
- Tagged Template Literals
1. Use const and let
Using const and let are more safer than var as these are scoped to the block in which they are using. let value could be re-assigned later but cannot be re-initialised in the same scope while const can neither be re-initialised nor re-assigned.
// const and let
const awesome = "javascript"
// awesome = "java" // throws error, value cannot be re-assigned
// const awesome = "java" // throws error, cannot be re-initialized
let trending = "React JS"
trending = "Next JS" // allowed, value can be re-assigned
// let trending = "java" // throws error, cannot be re-initialized
2. Default Function Parameters
This avoids undefined when arguments are missing.
// Default Function Parameters
function awesome(name = "javascript") {
scrib.show(`Trending language is ${name}!`);
}
awesome(); // Trending language is javascript!
3. Template Literals over String Concatenation
This helps in integrating dynamic values inside strings without using "+" and commas
// Template literal strings
// Without template literal
const framework = "React JS"
scrib.show("Javascript has " + framework + " as framework/library");
// With template literal
scrib.show(`Javascript has ${framework} as framework/library`);
4. Object Destructuring
Allows to extract out the keys from an object to use directly instead of using dot notation or square brackets to access key values from an object.
// Object destructuring
const language = {
name: "Javascript",
usedIn: "Web development",
framework: "React JS, Next JS, Vue JS"
}
const { name, usedIn, framework } = language // destructure the properties you want to use
scrib.show(`${name} is used in ${usedIn} and it has multiple frameworks like ${framework}`)
5. Array destructuring
Just like object destructuring, we could do the same with arrays, extracting out its elements using square brackets
// Array destructuring
const frameworks = ["React JS", "Next JS", "Vue JS"]
const [reactjs, nextjs, vuejs] = frameworks
scrib.show(reactjs, nextjs, vuejs)
6. Optional Chaining (?.)
It prevents runtime errors from accessing undefined.
// Optional Chaining
const languages = { javascript: { ext: ".js" } };
scrib.show(languages?.javascript?.ext); // ".js"
scrib.show(languages?.javascript?.library); // undefined
7. Nullish Coalescing Operator (??)
Only falls back if null or undefined, not 0 or false.
// Nullish coelsing
const language = null;
const library = language ?? "javacript";
console.log(library); // "javacript"
8. Short-Circuit Evaluation
If the value is truthy, evaluates to right side value, if the value is falsy like 0, false, null, undefines, evaluates to left side value.
// Short-Circuit Evaluation
const language = true;
const message = language && `Javascript is used is web development? - ${language}`;
scrib.show(message)
9. Ternary Operator
It is the short form of if-else where ? indicateds if and ":" indicates else
// Ternary operator
const library = "ReactJS"
const isJsLibrary = library === "ReactJS" ? `${library} is a JS library` : `${library} is not a JS library`
scrib.show(isJsLibrary)
10. Spread Operator for Objects/Arrays
It spreads the value of an object or array inside another object or array.
// Spread operator with objects
const language1 = {
name: "javascript",
ext: ".js"
}
const languages1Extended = {
...language1,
libraries: "axios, react js"
}
// Spread operator with arrays
const languageSet1 = ["java", "python", "rust"]
const languageSet2 = ["javascript", "go", "c++"]
const languages = [...languageSet1, ...languageSet2]
scrib.show(languages1Extended)
scrib.show(languages)
11. Use Array.map() for Transformation
It helps in mapping over array values and adding transformations to each array value like capitalizing each word.
// Transformations using array map method
const languages = [ "java", "python", "rust", "javascript", "go", "c++" ]
const upperCase = languages.map(language => language.toUpperCase())
const capitalize = languages.map(language => language.split("")[0].toUpperCase() + language.split("").slice(1).join(""))
scrib.show(upperCase)
scrib.show(capitalize)
12. Use Array.filter() to Remove Items
This one doesn't need explaination it just simply checks the elements which we want to remove and won't include in the transformed array.
// Removing item using filter
const languages = [ "java", "python", "rust", "javascript", "go", "c++" ]
const webDevLanguages = languages.filter(language => language !== "rust" && language !== "go" && language !== "c++")
scrib.show(webDevLanguages) // [ "java", "python", "javascript" ]
13. Use Array.reduce() for Aggregation
Reduce method allows us to compute multiple values to a single value like summation of multiple values.
// Aggregation using reduce method
const finances = [908000, 209010,400000]
const total = finances.reduce((acc, val) => acc + val, 0); // 1517010
scrib.show(total)
14. Debounce Functions (for Search Inputs)
The debounce function allows us to call a callback function after a delay like 100ms, 1s, etc. It helps in calling apis for searching purpose with a delay to avoid making api calls on every keystroke.
function debounce(callback, delay) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => callback(...args), delay);
};
}
15. Throttle Function
Throttle functions allows us to limit the number of times a function can be executed in a given time frame.
// Throttle function
function throttle(callback, delay) {
let shouldWait = false;
return (...args) => {
if (!shouldWait) {
callback(...args);
shouldWait = true;
setTimeout(() => (shouldWait = false), delay);
}
};
}
16. Deep cloning
It helps to clone an object with nested properties at multiple levels and it is Ssafer than JSON.parse(JSON.stringify(...)) for deep objects.
const language = { name: "javascript", ext: { js: ".js", jsx: ".jsx" } };
const copyLanguage = structuredClone(language);
scrib.show(copyLanguage)
17. Clean try-catch-finally Blocks
try, catch and finally blocks allows us to handle errors efficiently without breaking or stopping the main thread executions.
// Try catch blocks
try {
// risky code here that could have errors
throw Error("This is a custom error")
} catch (error) {
scrib.show("Something went wrong:", error.message); // Something went wrong: This is a custom error
} finally {
scrib.show("It will run no matter a error is thrown or not")
}
18. Async await with fetch
async/await is a cleaner and more readable way for asynchronous data fetching using fetch method.
// Async await with fetch
async function getData() {
try {
const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const data = await res.json();
scrib.show(data); // { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }
} catch (err) {
scrib.show("Error:", err);
} finally {
scrib.show("Data fetched successfully")
}
}
getData()
19. Memoization with Closures
It is used to optimize performance by caching the results of function calls.
function memoize(fn) {
const cache = {};
return function (n) {
if (n in cache) return cache[n];
return (cache[n] = fn(n));
};
}
20. Readable Conditionals with Guard Clauses
It helps to avoids deeply nested if statements.
// Guard clause to avoid deeply nested if
const language = {
name: "javascript",
ext: ".js",
library: "axio"
}
function checkLanguage(language) {
if (!language) return "No language found";
if (!language.name) return "Name required";
if (!language.ext) return "Extension required";
if (!language.library) return "A library name is required";
return "All good"
}
scrib.show(checkLanguage(language)) // All good
21. Abort Fetch Requests
Sometime a user might click another link or button when a fetch call is getting processed, in that case we could use the abort controller to abort the current fetch call and proceed with the next one.
const controller = new AbortController();
const signal = controller.signal;
fetch("https://jsonplaceholder.typicode.com/todos/1", { signal })
.catch(err => {
if (err.name === "AbortError") scrib.show("Request aborted");
});
controller.abort(); // Request aborted
22. Function Composition
It allows us to combine multiple functions into a single function.
// Function composition
const compose = (...fns) => (val) => fns.reduceRight((acc, fn) => fn(acc), val);
// Example usage
const financeBonusQuarted1 = x => x * 1.25;
const financeBonusQuarted2 = x => x * 2;
const result = compose(financeBonusQuarted1, financeBonusQuarted2)(500000);
scrib.show(result) // 1250000
23. Custom Event Emitter
It just mimics Node.js style event systems.
class EventEmitter {
constructor() {
this.events = {};
}
on(event, cb) {
(this.events[event] ||= []).push(cb);
}
emit(event, ...args) {
this.events[event]?.forEach(fn => fn(...args));
}
}
const emitter = new EventEmitter();
const languages = [ "java", "python", "rust", "javascript", "go", "c++" ]
emitter.on("findLanguages", language => scrib.show(languages.filter(lang => lang === language)));
emitter.emit("findLanguages", "java");
24. Proxy for Reactive Objects
It allows us to track property access, validate values before setting them, freeze some properties, etc.
const language = new Proxy({ name: "Javascript" }, {
get(target, prop) {
console.log(`Getting ${prop}`);
return target[prop];
},
set(target, prop, value) {
scrib.show(`Setting ${prop} to ${value}`);
if(typeof value !== "string"){
scrib.show("Value type should be string");
return false
} else {
target[prop] = value;
return true
}
}
});
scrib.show(language.name) // Javascript
language.name = "Python"
scrib.show(language.name) // Python
language.extension = ".py"
scrib.show(language.extension) // .py
language.library = 100;
scrib.show(language.library) // undefined as the type is number and it didn't set the property on language
25. Tagged Template Literals
In tagged template literals, you call a function on the template literal itself
// Tagged literals
function strong(strings, ...values) {
return strings.reduce((result, str, i) => {
return result + str + (values[i] ? `<strong>${values[i]}</strong>` : '');
}, "");
}
const language = "JavaScript";
scrib.show(strong`${language} is trending`)
That's it for this post, Let me know if i could do any improvements in this article. Also, do check Scribbler.live website.
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - [email protected]
You can help me with some donation at the link below Thank you👇👇
https://www.buymeacoffee.com/waaduheck
Also check these posts as well
08:22
MicroFrontend - React | Solid | Vue
Shubham Tiwari ・ Jan 9 '24
#tutorial
#webdev
#beginners
#learning
15:48
Codium | AI Assistant for DEVs
Shubham Tiwari ・ Jan 4 '24
#vscode
#learning
#tutorial
#beginners