Some of Our Sources
- Technology Review
- Just Creative
- Creative Curio
- Naldz Graphics
- Crazy Leaf Design
- Web Design Ledger
- Stylized Web
- Codrops
- Willems Lab
- TechPowerUp
Help Webnuz
Referal links:
5 neat JavaScript tips
In this post, I'll show you 5 neat JavaScript tips that will help you become a better developer. Although this post requires some knowledge of JavaScript, I encourage everyone to read through it.
List of neat tips:
Destructuring
What a better way to explain something than through an example. Let's imagine we have an object with some tiger data and we need a function that will tell if the tiger is endangered.
const tiger = { specific: 'Bengal', latin: 'Panthera tigris tigris', endangered: true, weight: 325, diet: 'fox', legs: 4}// Bad code function isEndangered(tiger){ if (tiger.endangered) { return `${tiger.specific} tiger (${tiger.latin}) is endangered!` } else { return `${tiger.specific} tiger (${tiger.latin}) is not endangered.` } }// Good code function isEndangered({endangered, specific, latin}){ if (endangered) { return `${specific} tiger (${latin}) is endangered!`; } else { return `${specific} tiger (${latin}) is not endangered.`; } }// or function isEndangered(tiger) { const {endangered, specific, latin} = tiger; // the rest is the sameConsole tips
Code execution time
Use console.time and console.timeEnd to determine how fast (or slow) your code is?
Here's an example:
console.time('TEST')//some random code to be testedconsole.timeEnd('TEST')Loggin with style
To have a custom output, we'll add %c like below and then have the actual CSS as the second argument.
console.log('%c AWESOME', 'color: indigo; font-size:100px')Tables
When you want to log an array of objects console.table will come in handy.
// x,y,z are objectsconsole.table([x, y, z])Stack trace logs
If you want to get the stack trace of where a function is being called you can use console.trace
function foo(){ function bar(){ console.trace('test') } bar();}foo();Dynamic key names
A super useful tip!
const key = 'dynamic'const obj = { dynamic: 'hey', [key]: 'howdy'}obj.dynamic // heyobj[key] // howdyobj['dynamic'] //heyobj.key // howdyTo see the most often use case of the dynamic-keys concept, check out my previous post.
Set as a data structure
If I'd ask you to remove the duplicates from an array of numbers. How would you do it?
Use Set as a data structure to improve the functionality and performance of your app. Here's an example where I'll remove duplicates from an array of numbers using Set object.
const arr = [1, 2, 2, 3]const newArr = new Set(arr)const unique = [...newArr]// unique - [1, 2, 3]Callback-based APIs -> Promises
To make things cleaner and more efficient you can transform the callback (ourCallbackFn) into a promise being a function.
// we start with this async function foo() { const x = await something1() const y = await something2() ourCallbackFn(){ // ... }}// the transformationasync function foo() { const x = await something1() const y = await something2() await promiseCallbackFn() //}function promiseCallbackFn() { return new Promise((resolve, reject) => { ourCallbackFn((err, data) => { // if (err) { reject(err) } else { resolve(data) } }) })}This was a list of 5 JavaScript tips. Pretty neat, right?
I hope you find my first post useful! Any feedback is greatly appreciated!
Thank You!
Dalibor
Original Link: https://dev.to/daliboru/5-neat-javascript-tips-284o
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To