But why can't I code like that?

Oldies JavaScript I grew up with...which I didn't know WHY it's not hip anymore.

I don't really know how people lean JavaScipt "properly" or if there is even a "proper" way to learn JavaScript. For me it started with copy and pasting code I found on weblogs into my HTML file (without even understanding syntax) 10 years ago. I did some tutorials on syntax and read a book on jQuery about 5 years later (This was when I starting making "web apps" because I was told HTML5 is really cool 😎). Most recently, I've been copy and pasting someone's code professionally for about 3 years.

Last time I sat down with tutorials on JS syntax (5 years ago), I didn't even know JavaScript had versions. I didn't know there are groups of people called standards body like W3C and TC39, and I didn't know JavaScript is actually called ECMAScript. (I know, surprising right ? I want my money back too.)

My point is, no one really told me what I'm supposed to do, or what is the most current way of doing things. Some times I copy tricks from a website made in 1999, and sometimes I copy from new and shiny ES5 syntax (Note, I thought ES5 was new until about the end of 2014).

Over this past 3 years, some parts of my coding habit was corrected by working with people and getting code reviews. I've accumulated knowledge of "oh that's old way of doing things, do it this way because it's new and better". But often why it's old and bad was left out. Here is 2 of those whys I found this weekend.

Why should ".onEVENT" be written in "addEventListener('EVENT')" ?

I have definitely wrapped application code in window.onload before because probably some code sample I copied did so. But I've been using window.addEventListener('load', function...) instead for the most part.

Why people should stop using .onEVENT is perhaps obvious when you realize that when you write window.onload = function(){} you are assigning new function to onload method of window object. Thus if mistakenly assign onload twice in your code, you will over write the method.

// you might be thinking this will get executed
window.onload = function () {
  console.log('loaded!')
}

// ... but in fact this will
window.onload = function(){
  console.log('Oops!...I Did It Again')
}

To avoid this situation, EventTarget.addEventListener was introduced. Unlike .onEVENT which assigns single function to a method in target object, EventListener can register multipl listeners to a target.

// This event will fire!
window.addEventListener('load', function (e) {
  console.log('loaded!')
}, false)

// ... and then this will too, yay!!
window.addEventListener('load', function (e) {
  console.log('Oops!...I Did It Again')
}, false)

You might be thinking, "I only need to register this event listener once, can't I just use .onEvent ?" but can you really guarantee that nothing in the codebase (including external library you included in the project) will over write it ? CAN YOU ??? I can't. It's better to keep my pudding in the safe place 💅.

Why should I pass function, not code string, to "setInterval" and "setTimeout" ?

I have no idea where I picked this up, but I used to think I have to write setInterval and setTimeout like this setTimeout('done()', 500) (note the first argument is code string). Nowadays I simply pass name of the callback function like setTimeout(done, 500).

I remember the moment reading code sample on MDN and realizing that I can just pass around function by name. It was kind of mind blowing (Why I didn't know about it in the first place? who knows).

So why does both function and code string work as the first argument? Turns out, code string as the first argument is archaeological artifact from browser wild wide west days (or at least so did my twitter friends, said. ) I didn't even know DOM had Level 0 and Level 1 (if you want to know more, this is what I raed on DOM Level 0).

With little more digging, I found explanation online that said "when you pass code string as the first argument, the string is wrapped in Function object"... WOW WOW WOW what do you mean wrapping string in a function object?

apparently you can new a Function (who knew !)

As far as I can remember, no tutorial taught me to make functiom by using new keyword like const omg = new Function(), but apparently you can. On top of that, you can pass argument names and function body as sting (WTF!)


const omg = new Function('keyword', 'return "omg! " + keyword')
console.log(omg('waaaaah!?')) // 'omg! waaaaah!?'

For more, read MDN article on Function Object. I mean... everything is Object in JavaScript, so this make sense. I'm just surprised I survived thus far without knowing about it.

Now, why is it bad to pass code sting? because you risk executing malicious code with privilege of the caller. Passing code string may risk running bad code on the user's machine 🙅. Better to avoid it if you can.

---

This post is more or less a memo to myself. I have few more which I haven't really understood enough to write it in words (like use insertAdjacentHTML instead of innerHTML) I might write follow up post as I learn more !