Here’s a few tricks and traps that javascript beginners should probably know of. If you’re already an expert, feel free to read this with a knowing look.
Javascript is just another programming language. What could possibly go wrong ?
1. Did you ever try to sort an array of numbers ?
Javascript sort()uses alphanumeric sort per default.
So [1,2,5,10].sort() will output [1, 10, 2, 5].
To properly sort an array, you can use [1,2,5,10].sort((a, b) => a — b)
Easy solution, provided you knew there was a problem in the first place :)
2. new Date() is just wonderful
new Date() can accept:
- no argument: returns now
- one argument
x: returns 1st of january 1970, + x milliseconds. Unix people know why. - new Date(1, 1, 1) returns 1901, february , 1. Because you know, the first one means 1 year after 1900, the second one is the second month of the year (hence february) — who in his right mind would start indexing a table at indice 1 — , and the third one obviously is the first day of the month, so 1 — because sometimes the indices do start at 1 — .
- Oh, and also new Date(2016, 1, 1) will not add 2016 years to 1900. It will simply represent the year 2016.
3. Replace does not replace
I find it to be a good thing, as I don’t like functions that mutate their input. You also should know that replace will only replace the first match:
If you wish to replace all occurences, you can use a regex with /g :
"bob".replace(/b/g, 'l') === 'lol' // replace all occurences
4. Careful with comparisons
Reason: [1,2,3] and [1,2,3] are two separate arrays. They just happen to contain the same values. They have distinct references and cannot be compared with ===
5. Array is no primitive type
To know if your var is an array, you can still use Array.isArray(myVar)
6. Closures
This one makes a well known javascript interview question:
Did you expect it to output 0, 1, 2… ? Do you know why it does not ? How would you fix it ?
Let’s mention two of the possible solutions to this problem:
- Use
letinstead ofvar. Boom. solved.
“The difference [between let and var] is scoping.
varis scoped to the nearest function block andletis scoped to the nearest enclosing block (both are global if outside any block), which can be smaller than a function block.” (source)
- Alternative: use
bind:
Greeters.push(console.log.bind(null, i))
There are plenty of other ways to do this. These are only my top-2 choices :)
7. Speaking about bind
What do you think this will output ?
One point for you if you think this will crash with Cannot read property 'name' of undefined
Reason: greet is not run with proper context. Again, there are many ways to solve this.
- I personally like
This way you ensure that greet is called with your class instance as context.
-
If you feel like
greetshould never be run out of context, you can also bind it in your class constructor: -
You should also know that fat arrows (
=>) can be used to preserve the context. This will also work:
although I find this last example less elegant in our case.
I’m glad we fixed this
Conclusion
Congrats, you’re now able to put stuff on the internet. Probably. Perhaps even without breaking everything (generally it does, though). Cheers \o/
Let me know if there’s anything I should have mentioned!