16

Do you remember when you were learning JavaScript? What was the moment that you suddenly "got it"? (For example, my CSS aha-moment was when I learnt about the box model...)

The reason I´m asking is that I´m learning JS for 6 weeks, but I still find it quite confusing. Here´s a quote from something I read recently on SO:

"..functions act similar to values, as method is a property of the object that has a value of a function (which is also an object)."

I´m curious if you were confused as well in the beginning and what was it that made you understand it.

(I´m reading the Sitepoints "Simply JavaScript", the book "Eloquent JavaScript" and following Lynda´s Essential JavaScript tutorial. I don´t have any programming expeirence and was terrible at math ;)

Thanks!

12 Answers12

15

I think the biggest "AHA" moment for me was when I fully grasped the following:

Variable values can be anything, including functions

var person = {
    name: 'Sean',
    getName: function() { return this.name; },
    numbers: [7, 11, 41]
}

var myvar = person.name;
alert(myvar); //prints name
alert(myvar()); //"myvar" is not a function error
alert(myvar.length); //undefined

myvar = person.getName;
alert(myvar); //prints the contents of the function as a string
alert(myvar()); //calls the function
alert(myvar.length); //undefined

myvar = person.numbers;
alert(myvar); //prints contents of array
alert(myvar()); //"myvar" is not a function error
alert(myvar.length); //prints 3
10

To me it was when I understood that the context (what this points to) of a function can be changed arbitrarily

http://www.digital-web.com/articles/scope_in_javascript/

CarlosZ
  • 201
10

I agree with what some of the other answers have touched on; The A-ha moment for me was when I understood what a closure was.

I posted an answer to the question What is a closure? to help explain this.

Without understanding closures, Javascript is a pretty limited language, with a few nice shorthand syntax features like [] for arrays and JSON ({} for objects), and in the context of the browser, the DOM (window/document).

However once you understand closures, a lot of understanding falls into place:

  • What a prototype really is (see here)
  • Why prototypes are the key to OOP in Javascript (see here)
  • How most event handlers in Javascript really work (it can seem like magic without understanding closures)
  • How to save yourself a lot of code (and/or time) with callbacks

Resources

Community
  • 1
Nicole
  • 28,243
4

I think the most essential language 'Aha's for me in Javascript were

  • Functions as objects
  • Closures
  • Prototype-based object-orientation
  • Scoping in JavaScript

For all these topics, you should find plenty of resources on the web.

(And don't think everything will become totally logical: JavaScript is confusing)

Alexander Gessler
  • 742
3

javascript was hard for me when I first started learning it some years ago because I first started learning web development from the server-side end of things (php and perl).

It wasn't so much the syntax or OOP or anything that eluded me, moreso the live and event-driven-ness of javascript - going from "do this and this and this and serve it up and you are done" to "do this and this and this and then we're in a constant state of waiting for something to happen and respond until the user leaves the page". That really threw me for a loop.

I don't think I can name anything in particular that really made it sink in (no definitive "aha!" moment - if I had to name a specific moment, I'd say when I was learning AJAX for a search suggestion script, but IMO that's just arbitrary) but when I did eventually grasp the difference, everything got a lot easier from there :)

CrayonViolent
  • 131
1

When I realized that you could set a property on a function object.

Also when I finally understood what the prototype was.

function Alpha(){
    return 'aplha';
}
Alpha.Beta = function(){
    return 'beta';
}
Alpha.prototype.Delta = function(){
    return 'delta';
}

Alpha(); // 'alpha'
Alpha.Beta(); // 'beta'
new Alpha().Delta(); // 'delta'
timrwood
  • 137
1

When I finally grasped the idea that I can redefine any part of the language to whatever the crap I want it to. In this respect, its even more powerful than C. For example, if I don't like the standard toString() function, then I'll implement my own:

x.toString = function () {
    return "this is MY toString function biatch!";
}
Travis Webb
  • 131
0
function Obj() {
    this.x = 42;
    this.value = function() {
        return this.x;
    };
}

var o = new Obj();
o.value();        // 42
var f = o.value;
f();              // undefined??

And the a-ha moment when you finally catch on these results.

Tomasz Nurkiewicz
  • 311
0

Aha moment #1, for me: Realizing that JavaScript, the language, is distinct from its primary use: dynamic HTML and client-side web programming. I would be frustrated with JavaScript, when I really I was frustrated with the DOM and browser incompatibilities.

Aha moment #2: Understanding that inheritance can be executed in many ways. Typical class-based inheritance is just one. There are others, namely prototype-based (the style used in JavaScript).

With respect to #1, I can't resist recommending JavaScript: The Good Parts. It treats JavaScript as a fine language in its own right.

Michael Easter
  • 529
0

No block scoping and hoisting.

foo(); // function executes, no error

if (...) {
  function foo(){
    ...
  }
}
jasssonpet
  • 101
0

It's just Scheme with syntax.

That was the big one for me.

Jörg W Mittag
  • 104,619
-1

jQuery was basically the 'a-ha' moment for me. The syntax felt familiar after having a lot of experience with LINQ/lambda syntax in C#.

klir2m
  • 1