DEV Community

Cover image for 10 JS tricks you *probably* didn't know
Shuvo
Shuvo

Posted on

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

Discussion (2)

Collapse
hnicolas profile image
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...

Collapse
joeattardi profile image
Joe Attardi • Edited on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

Use a proper deep clone function.

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