7 Useful JavaScript Tricks

Discussion

1. Marie Thomas

   Thanks for sharing these JavaScript tricks. All tricks are awesome but Merge Objects is my favorite one as it helps to make your task much easier and speed up my work. Keep up the great work.
2. Yan Bloch

   Regarding “filter falsy values”, you could use reduce function for single iteration.
3. Brian De Sousa

   Great list! I must be living under a rock because I hadn’t heard of URLSearchParams yet. That’s awesome!
4. David Hibshman

   Convert arrays element types:

   // number to strings
   var strArr = [1,2,3,4,5].map(String);
   // ["1","2","3","4","5"]
   
5. Joel Brighton

   Nice! I also particularly like the URLSearchParams tip.

   My only (friendly) word of caution in using ‘tricks’ (not necessarily those above) is that obscure coding practices can sometimes cause more confusion than they’re worth. (Of course, what’s obscure can be a matter of perspective). :)
6. Maximilian Berkmann

   And the good ol:
   exp | 0 instead of Math.floor(exp) and the exp | 1/Math.ceil(exp) equivalent.

   And the ones using bit shifts.
• Michal Zalecki

  These aren’t true equivalents

  0 | 1               // 1
  Math.ceil(0) // 0
  
7. Anh Tran

   URLSearchParams is amazing. It’s been a while struggling with query string and all the regex stuff!
8. James

   Should isRequired throw a ReferenceError instead?
9. Jakub Słowik

   Is it just me or the Math.floor() and Math.ceil() is better in comparison to exp | 0 and exp | 1. It’s just more readable.
• Ujjwal Singha Roy

  for Math.floor() you can use short circuit operator
  ~~

  Example: Math.floor(2.3) is equivalent and faster with ~~(2.3)
10. Avraham Hamu

    what is the impact if we create an empty object with {}? why does __proto__ is an issue? is it a performance issue?
• Rubén S. García

  Maybe not too much, but if you consider that the Object will be used for the solely purpose of being a dictionary, like a Map, it makes sense to “cleanup” the Object :). I’m not a JS expert nor performance wizard either so I may be wrong too.
11. Tobi Reif

    Shortcuts for updating a variable based on its current value:

    let speed = 10;
    speed *= 2;
    // → 20
    speed += 10;
    // → 30
    
12. Jordan Ball

    In your tip on filtering falsey values, I don’t understand why you included the map() method in your illustration. From a pedagogical perspective, it does nothing except cause a reader’s attention to focus on a non-issue.
13. Rich

    Favorite ES trick- Quick value “flip-flopping” between two variables without an intermediary variable: (change a to b, change b to a)

    Could be done before but was super funky:

    let a = 'thing';
    let b = 'otherThing';
    
    /* Works because of destructuring */
     [a,b]=[b,a]; // a is now 'otherthing', b is now 'thing'
    
    /* (Old Super-Funky Way) */
      b = [a, a=b][0]; // Works, but barely understandable
    
• Rubén S. García

  The swap function trick is cool, plus, IMHO, it’s very easy to understand what’s going on if you rely, as myself, heavily on destructuring syntax in JS.
14. K L Estes

    Not a javascript trick per se, but still interesting:

    x = x ^ y
    y = x ^ y
    x = x ^ y
    

    …and swapped !
• Rubén S. García

  I remember this trick from assembly language.
15. Mossa

    to get red of falsy values you can just type

    array.filter(e=>e)
    
16. Andriy Haydash

    Thanks for the great tips.

    The first one with Set and transforming it back into an array is a neat one.
17. Rubén S. García

    Very interesting tricks here :). I learned the other day that using the ?. optional chaining operator you can, besides accessing properties, call functions!

    const adventurer = {
      name: 'Alice',
      cat: {
        name: 'Dinah'
      }
    };
    
    const dogName = adventurer.dog?.name;
    console.log(dogName);
    // expected output: undefined
    
    console.log(adventurer.someNonExistentMethod?.());
    // expected output: undefined
    

    verbatim from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

    MDN is great!