Improve your JS skills with those tips #2

In this article I will share with you some news tips about JS that can improve your skills!

Don't use delete to remove property

delete is very bad to remove a property from an object (bad performance), moreover it will create a lot of side effects.

But what you should do if you need to remove a property?

You need to use Functional approach and create a new object without this property. You can manage to do this with a function like this 👇

const removeProperty = (target, propertyToRemove) => {
    // We split the property to remove from the target in another object
    const { [propertyToRemove]: _, ...newTarget } = target
    return newTarget
}

const toto = { a: 55, b: 66 }
const totoWithoutB = removeProperty(toto, 'b') // { a: 55 }

A very simple snippet that will help you a lot!

Add a property to an object only if it exists

Sometimes we need to add a property to an object if this property is defined. We can make something like this 👇

const toto = { name: 'toto' }
const other = { other: 'other' }
// The condition is not important
const condition = true

if (condition) {
   other.name = toto.name 
}

❌ It's not very good code anyway...

✅ You can use something more elegant!👇

// The condition is not important
const condition = true

const other = {
   other: 'other',
   ...condition && { name: 'toto' }
}

For more explication about spread operator on boolean: https://dev.to/codeoz/comment/1ib4g

If the condition is true, you add the property to your object (it work thanks to the && operator)

I could also make this 👇

// The condition is not important
const condition = true
const toto = { name: 'toto' }

const other = {
   other: 'other',
   ...condition && toto
}

Use template literal string

When we learn strings in javascript and we need to concat them with variable we code something like 👇

const toto = 'toto'
const message = 'hello from ' + toto + '!' // hello from toto!

❌ It can become garbage if you add other variables and string!

You can use template literal string

You just need to replace simple or double quotes by back-tick.

And wrap all variables by ${variable}

const toto = 'toto'
const message = `hello from ${toto}!` // hello from toto!

Short-circuits conditionals

If you have to execute a function just if a condition is true, like 👇

if(condition){
    toto()
}

You can use a short-circuit just like 👇

condition && toto()

Thanks to the && (AND) operator, if the condition is true, it will execute toto function

Set default value for variable

If you need to set a default value to a variable

let toto

console.log(toto) //undefined

toto = toto ?? 'default value'

console.log(toto) //default value

toto = toto ?? 'new value'

console.log(toto) //default value

Thanks to the ?? (Nullish coalescing) operator, if the first value is undefined or null, it will assign the default value after the (??)!

Use console timer

If you need to know the execution time of a function for example you can console timer. It will give you back the time before and after the execution of your function very fastly!

console.time()
for (i = 0; i < 100000; i++) {
  // some code
}
console.timeEnd() // x ms

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and MP me 😁

Or get it HERE

🇫🇷🥖 For french developper you can check my YoutubeChannel

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!