
A re-introduction to JavaScript - Garbage
https://developer.mozilla.org/en/JavaScript/A_re-introduction_to_JavaScript
======
greggman
Sadly JavaScript's 16bit strings are broken. Unicode has more than 16bits
worth of codes. Especially now that emoji have finally been added the
140million Japanese users of them can now finally take all their messages
online......except JavaScript will choke on all of them

Welcome to tons of JS Unicode String libraries to work around this problem :-(

~~~
andolanra
The tutorial is somewhat incorrect with respect to strings. JavaScript strings
are UTF-16, which means that strings are represented as a sequence of 16-bit
half-words, but a single character _could be_ spread over multiple half-words.
For example, open up the Developer console on your browser and type

    
    
        alert("🐱"); // a cat face
    

and JavaScript will not have any problems processing the string (assuming you
have the fonts to see that particular character.) Then try

    
    
        alert("🐱".length); // 2
    

and you will find that it prints 2, because that single character ("code
point") requires two half-words to represent. This does mean that you cannot
access this character except by slicing, because

    
    
        alert("🐱"[0]); // an unknown character
    

produces half of a character, which could be problematic and require libraries
to work around if you're attempting to access individual characters. Other
string operations still work fine, though

    
    
        alert("abc🐱de".indexOf("🐱")) // 3
    

so while a few operations will need special library support in some cases,
JavaScript certainly won't "choke" on any of these strings.

~~~
grannyg00se
Interestingly, the javascript scratchpad in firefox requires two deletes to
fully delete that character. This is consistent with the fact that its length
is 2. The first delete actually changes it to some other character.

From what I understand this is not a case of a unicode character with a second
character applied as an accent. Although it's possible it may be behaving the
same way.

In any case, it's interesting to see the delete key change a character to
something else rather than fully delete it.

~~~
andolanra
JavaScript's access to individual parts of a string works on _code units_ ,
which are distinct from _code points_ , which in turn are distinct from
_characters_. A single (visible) character can be composed of multiple _code
points_ , such as a character plus an accent. However, a single _code point_
can also be represented by multiple _code units_ , where a code unit is a
fixed number of bits. UTF-16 is a variable-width encoding, so a given code
point can be either one code unit or two; in this case, the cat face is a
single character, composed of a single code point, composed of two code units.

(UTF-8 is another variable-width encoding where a code point can be anywhere
from one to four 8-bit code units, and UTF-32 is a fixed-width encoding where
every code point is exactly 32-bit one code unit. Because code points can be
accents or modifiers, UTF-32 is still variable-width with respect to
characters, because there's no guarantee that a given character is composed of
a single code unit.)

Because UTF-16 is a variable-width encoding, and because JavaScript exposes
UTF-16 code units (instead of code points or characters), it is possible to
delete half of a code point and even end up with an invalid UTF-16 string in
some cases (IIRC). As another comment mentions, some languages (e.g. Python 3)
expose code points instead, which still isn't the same as characters.

------
adamrmcd
This was actually an thorough overview for JavaScript newbies. My only
complaint was that the author glossed over apply() and call() saying they were
'difficult to illustrate', two functions that were new to me.

Wisely, the author did link to
[https://developer.mozilla.org/en/Introduction_to_Object-
Orie...](https://developer.mozilla.org/en/Introduction_to_Object-
Oriented_JavaScript) to fill in the gaps.

------
perlpimp
This tutorial reminds me of Python reference by new riders from which I picked
up and started coding fresh literate python in 2 days, writing code that
worked and without bugs. I guess if you can show commonly used idioms and
supply edge conditions such as "NaNs are toxic" - language learning happens in
a snap. big thumbs up for the tutorial.

~~~
nodata
Do you remember the title of the Python book?

~~~
a_a_r_o_n
My total guess is Python Essential Reference.

<https://duckduckgo.com/?q=new+riders+python>

------
jarek-foksa
If you are looking to learn how OOP in JavaScript works, I would highly
recommend you to read [http://killdream.github.com/blog/2011/10/understanding-
javas...](http://killdream.github.com/blog/2011/10/understanding-javascript-
oop/) instead of this MDN article.

------
karpathy
Wow that was good! I'm very happy to have found this. I've had very little
luck finding good tutorials for experienced programmers who just want to pick
up JavaScript. Most tutorials I found either assume very little prior
knowledge and write dense paragraphs on what an object is, or they assume too
much and explain too little. I love the focus on example-driven explanation as
I somehow process code much faster than text, and I love that it is all on a
single page (a surprisingly rare feature!).

------
schristo
According to the article, the code below causes a memory leak in IE, though I
fail to see how.

function addHandler() { var el = document.getElementById('el'); el.onclick =
function() { this.style.backgroundColor = 'red'; } }

I'm assuming the author believes `this` is evaluated immediately and refers to
the `el` variable instance, rather than being evaluated when the function is
called.

Any ideas?

~~~
jdale27
When addHandler is called, the anonymous function expression is evaluated and
its result is assigned to el.onclick. Thus, el contains a reference to the
newly created function. However, when the function is created, it captures the
environment in which it is defined, including the variable el. Thus, el points
to the function, and the function (closure) points to el. This is the circular
reference that IE can't handle.

~~~
schristo
Maybe I'm missing something, but the function doesn't point to `el`. `el` just
exists in a lower execution context on the stack. If a variable inside the
anonymous function referenced `el` directly, then a closure would be formed
over `el`. In this instance `this` is just assigned when the function is
called.

~~~
mattmanser
I'm not sure whether you're saying the code is wrong or you can't understand
how that code creates the circular reference. This problem was widely known
and stopped being a problem in IE8 I believe. Maybe it was IE7. A while ago
anyway. That code looks like the type of circular reference that would cause
it. You used to be able to download tools to watch for the memory leak.

From what I remember the closure will keep a reference to el even though it
will never use it, which means el won't be garbage collected when removed from
the dom, which means the closure won't be removed from the onclick to free up
el. Hence a circular reference. IE6's javascript garbage collector couldn't
detect that.

The article is old. Here's an article from MS in 2005 describing the problem
in more detail:

<http://msdn.microsoft.com/en-us/library/Bb250448>

Apologies if you understood that and were just saying the code is wrong, but
it looks right to me. Not that I can be bothered to fire up IE6 to test it
out.

EDIT: Some more detail about the definitely historical leak from SO, it also
turns out it was only partially fixed in IE7:

[http://stackoverflow.com/questions/1999840/javascript-
circul...](http://stackoverflow.com/questions/1999840/javascript-circular-
references-and-memory-leaks)

~~~
Roboprog
Thanks for the info. So it was the dreaded IE 6 that would not release things
when you reloaded or went to another page. I was wondering why the base
article here said you had to restart the browser completely, as I could think
of no reason to carry over objects between pages (outside of browser/external
persistence). At least IE 7 implemented the obvious "clean up between pages"
operation.

Die, Explorer, die! :-)

------
methoddk
Wonderfully written. A great lang that doesn't get enough credit. When people
ask me things about JS, I'm sending them there.

------
chintan
> Last Updated Date: March 7, 2006

~~~
switz
Unless they can predict the future, it was updated as recently as 2009:

> The fourth edition was abandoned, due to political differences concerning
> language complexity. Many parts of the fourth edition formed a basis of the
> new ECMAScript edition 5, published in December of 2009.

EDIT: If you scroll to the bottom right it says: "Page last modified 21:08, 5
Jan 2012 by Janet Swisher"

~~~
yuhong
Yea, that date is under "Original Document Information".

------
finnw
Today I would recommend that anyone who plans to learn JS learns Lua first.
It's similar enough, but simpler and you don't have to be concerned with all
the browser-specific functions right away.

