10 JS tricks you *probably* didn't know

1. You can use + in front of a string to convert it into a number. console.log(typeof +"5") //number
2. + in front of date object will convert in into number of milliseconds. console.log(+new Date()) //1634538267248
3. | 0 after a floating point number will convert in into a integer. console.log(35.354 | 0) //35
4. If an array only contains one number you can use + in front of array to convert it into a number. console.log(typeof +[6]) //number
5. Use es6 to remove duplicates from array. console.log([...new Set([1,2,2,3,4,4,5])]) //[1, 2, 3, 4, 5]
6. Converting Numbers array to Strings array console.log([1,2,2,3,4,4,5].map(String)) //['1', '2', '2', '3', '4', '4', '5']
7. Converting String array to Numbers array console.log(['1', '2', '2', '3', '4', '4', '5'].map(Number)) //[1, 2, 2, 3, 4, 4, 5]

8. HTML comment is valid in JavaScript WTF 🤣
   

   <!--Don't mind me I am just a comment-->
   console.log("Hello")
   

9. Compare three values without using &&. console.log(3 > 2 < 5) //false

10. Deep copy object using JSON.stringify and JSON.parse console.log(obj == JSON.parse(JSON.stringify(obj))) // false

Comments

[Nicolas Hervé]

You should stop using "tricks" to convert types in javascript and start using explicit type conversion.
Implicit type conversion is bad for readability and leads to errors.
Your "trick" number 9 prove my point : it does not compare 3 values like you say but instead evaluate 3 > 2 which returns false, then implicitly convert false to 0 because a boolean cannot be compared to a number, then it returns the result of 0 < 5 which is true.
Try 2 > 0 < 1 and you will see it does not work.

Try number 10 with a Date object or any other object that define the toJSON method...

[Joe Attardi]

Be explicit about your type conversions. Using tricks like +'5' and +new Date() will just confuse beginners (and it requires you to memorize these "tricks". What's wrong with parseInt('5') or new Date().getTime() (or even, Date.now())?

The last item is the worst here, though. JSON.parse(JSON.stringify(obj)) won't work in many cases. There are many cases, not even edge cases, where this won't perform a correct clone.

You lose any functions the source object has:

const obj = {
  name: 'bob',
  getAge() { return 25; }
}

obj.getAge(); // 25

const clone = JSON.parse(JSON.stringify(obj));
clone.name  // 'bob'
clone.getAge(); // TypeError: clone.getAge is not a function

You lose any inherited properties from the prototype chain:

const obj = Object.create({ protoProp: 123 });
obj.name = 'bob';

obj.name; // 'bob'
obj.protoProp; // 123

const clone = JSON.parse(JSON.stringify(obj));
clone.name; // 'bob'
clone.protoProp; // undefined

It messes with class instances too:

class Person {
  constructor(name) {
    this.name = name;
  }
}

const bob = new Person('bob');
bob.constructor.name; // 'Person'

const clone = JSON.parse(JSON.stringify(obj));
clone.name; // 'bob' 
clone.constructor.name; // 'Object'

Use a proper deep clone function.

You are teaching beginners a lot of terrible practices with these posts tagged #beginners...