Javascript Training at Mindvalley Day 2

We’ve commissioned Dekatku to train some developers here at Mindvalley on Javascript, and it’s been a great experience so far! Today is Day 2 of the the training and we’ve covered some really deep topics.

I’ve started wearing my whitebelt again and I thought I’ll put up my thoughts and notes here for future reference. At the start of the session we had one hour to make a TODO application. The caveat being that we’re not allowed to use any libraries or frameworks; just pure javascript.

How did it go? I realized (yet again) that raw javascript is very verbose! I looked at the output of my code and there was so much document.getElementById() calls everywhere.

I knew what to do, but I didn’t have the vocabulary to express it.

I found that it was good to go back to fundamentals and try to rebuild what you’ve been using utilizing only the basic building blocks of the technology. It gave me a better appreciation of the work that libraries and frameworks saved me, but more importantly: it gave me the confidence to walk by myself without a crutch; whatever these libraries are doing isn’t magical anymore, and I can rebuild (or debug) them myself.

We then went on to the two different types of expressions in Javascript:

For some reason it reminded me of the command/query separation by Bertrand Meyer.

Of course, what’s some Javascript without surprising behavior:

{} + []
//=> 0 but it's an [object Object] so it's true(thy)

Good piece of advice: deal with an exception, or throw it back out

Some food for thought by Tim when I asked a question about whether you can catch hierarchichal errors:

“The answer is no, but yes.” – Timothy

[Like everything else in Javascript, it would seem. – Tristan]

Fun facts:

More syntactic sugar:

x.foo(args) => x.foo.call(x, args)

The call function from Function.prototype sounds very much like #instance_exec from Ruby.

Words of warning: Don’t mess with the global scope. That’s why we have this pattern:

(function(){})();

Now we have lunch :)

After lunch, things get more exciting as we start diving deeper into the Javascript object model.

Javascript has no formal notion of classes and inheritance, but you can make it behave similar to that:

function LifeForm() {
  this.name = "";
  this.description = "";
  this.setName = function(name) {
    this.name = name;
  };
  this.getName = function() {
    return this.name;
  };
};
var lifeForm = new LifeForm();

function Human() {
  LifeForm.call(this);
  this.arms = 2;
  this.legs = 2;
};

Human.prototype = Object.create(LifeForm.prototype);
// => this changes the class "definition"

More words of wisdom:

Managing scope in OOJavasctipt is very important, especially in async code (which use callbacks a lot) – Björn

Surprising stuff: you can change an object’s prototype and it will change all objects derived from that prototype, even ones that’s already been created.

var baz = function bar() { }
Function.prototype.foo = function() {
  console.log("hello!");
}
baz.foo();
//=> hello

This is very similar to how ruby works with #class_eval

class Bar; end;
Class.class_eval do
  def foo
    puts "hello"
  end
end
Bar.foo #=> "hello"

Note that even though the class Bar was created before we reopened the class Class (which in Ruby is similar to the prototype of the object Function) it still managed to call the #foo method.

What’s a class without Homework:

Super thanks to:

Comments

comments powered by Disqus