When learning JS, what was your your Aha-moment?

Question

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!

I find the quote confusing and unclear to be honest, and I've been using JavaScript in anger for a number of years, so I'm not surprised if it's confusing for someone new to the language :) — Russ Cam, Mar 24 '11 at 19:07
Quote and confusion is coming because that quote is trying to say that functions are first class objects in javascript. Keep pounding, and you will provide yourself with the source of 'a-ha' moments: Additional frames of reference. — chiggsy, Nov 06 '12 at 19:10

score 15 · Answer 1 · answered Mar 24 '11 at 19:17

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

score 10 · Answer 2 · answered Mar 24 '11 at 19:02

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/

answered Mar 24 '11 at 19:02

CarlosZ

201
1
3

Good one, will definately read the article. – Mar 24 '11 at 19:10

score 10 · Answer 3 · edited Jun 16 '20 at 10:01

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

I haven't been through this whole site but it looks like a great resource, touching on these topics: http://eloquentjavascript.net/contents.html
Check out http://ejohn.org/apps/learn/ for a great tutorial on Javascript

score 4 · Answer 4 · answered Mar 24 '11 at 19:02

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)

answered Mar 24 '11 at 19:02

Alexander Gessler

742
4
11

Really? JavaScript *is* confusing? To me it all seems quite natural. But that's just me :-P. – Htbaa Mar 25 '11 at 11:31

score 3 · Answer 5 · answered Mar 24 '11 at 19:10

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 :)

Some really good directions here already, thanks everyone! – Mar 24 '11 at 20:11 — , Mar 24 '11 at 20:11

score 1 · Answer 6 · answered Oct 26 '11 at 18:22

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'

score 1 · Answer 7 · answered Mar 24 '11 at 19:05

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!";
}

answered Mar 24 '11 at 19:05

Travis Webb

131
1
6

How is this really different from overriding? – Nicole Oct 27 '11 at 05:56

score 0 · Answer 8 · answered Mar 24 '11 at 19:38

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.

answered Mar 24 '11 at 19:38

Tomasz Nurkiewicz

311
2
5

score 0 · Answer 9 · answered Mar 26 '11 at 11:47

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.

jasssonpet · Answer 10 · 2011-03-26T12:24:43.867

0

No block scoping and hoisting.

foo(); // function executes, no error

if (...) {
  function foo(){
    ...
  }
}

edited Mar 26 '11 at 12:24

answered Mar 26 '11 at 12:19

jasssonpet

101
3

score 0 · Answer 11 · answered Mar 26 '11 at 12:34

0

It's just Scheme with syntax.

That was the big one for me.

answered Mar 26 '11 at 12:34

Jörg W Mittag

101,921
24
218
318

score -1 · Answer 12 · answered Mar 26 '11 at 10:25

-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#.

answered Mar 26 '11 at 10:25

klir2m

1

When learning JS, what was your your Aha-moment?

12 Answers12

Resources