Things Not To Do With Modern JavaScript

I see people using older functionalities and methods and I wonder why do people stick to older syntaxes rather than the newer ones. Lets see the newer implementations and how it overcomes the older ones below!!!

1. Using var

let and const are better alternatives to var. They both have scope blocking behaviour in a more consistent way, as you would expect variables to behave like other programming language.

// Using var
for(var i=0; i<3; i++) {
     console.log(i); // 0 1 2 
}
console.log(i); // 3
// Using let
for(let i=0; i<3; i++) {
     console.log(i); // 0 1 2 
}
console.log(i); // Error

2. Using regular equality

== is not that evil, unless you compare between different types. The outcome might be very unexpected and contributes to a lot of memes about JS.

Always use === unless you know exactly what you are doing.

// Using ==
'1' == 1 // true 
It automatically converts the Number 1 into String '1' and compares with '1'
// Using === 
'1' === 1 //false

3. Not using strict mode

If you are not aware of strict mode you might get into trouble , it is a way of entering into a more restricted version of JavaScript and option of the Sloppy mode.

There are some scenarios where JavaScript will fail silently causing a headache during debugging. The strict mode is very explicit, and throws error for such scenarios.

4. Callback Hell

Don’t use Callback

function updateScore(callback) {
     setTimeout(()=> callback(100), 2000);
}
function restartGameWithInFiveSecond(callback) {
     setTimeout(() => callback("start game"), 5000);
}
updateScore(score => {
     console.log(`score: ${score}`);
     restartGameWithInFiveSecond(text => {
          console.log(text);
     });
});

Using Promise async/await instead

const updateScore = () => new Promise ((resolve, reject)=> {
     setTimeout(()=> resolve(100), 2000);
});
const restartGameWithInFiveSecond = () => new Promise ((resolve, reject)=> {
     setTimeout(()=> resolve("start game"), 5000);
});
// Using Then Catch
updateScore()
     .then(score => { 
          console.log(score);
          restartGameWithInFiveSecond().then(text => {
               console.log(text);
          });
     })
     .catch(err => {
          console.log(err.message);
     });
// Using async/await
async function game() {
     const score = await updateScore();
     console.log(`score: ${score}`);
     const text = await restartGameWithInFiveSecond();
     console.log(text);
}
game();

5. Use map, reducer, filter, forEach, etc.

If you aren’t using these functions, you should try them out. They are super cool and much more fun to use and you will start writing much better code.

6. Excessive console.log()

Especially for debugging. Try to minimize manual debugging and use debugging tools. Also, you can use other console functions such as warn(), error(), table() and so on based on the scenario.

// console.table()
> const person = {
     name: "John Doe",
     age: 21,
     address: "111 main st."
}
> console.table(person)
┌─────────┬────────────────┐
│ (index) │     Values     │
├─────────┼────────────────┤
│  name   │   'John Doe'   │
│   age   │       21       │
│ address │ '111 main st.' │
└─────────┴────────────────┘

Bonus:

removing duplicates in an array using JavaScript

const arr = [1, 2, 3, 4, 5, 5];
const newSet = new Set(arr);
console.log([...newSet]); // [1, 2, 3, 4, 5]

Take a array convert into set and convert it back to array.

Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection.