Develop Reference

How typescript implements enumerations?

I was wondering about how typescript would compile an enumeration into a javascript code. So I implemented the following example:
enum Contagens {
UM,
DOIS,
TRES
}
And it was compiled into this:
"use strict";
var Contagens;
(function (Contagens) {
Contagens[Contagens["UM"] = 0] = "UM";
Contagens[Contagens["DOIS"] = 1] = "DOIS";
Contagens[Contagens["TRES"] = 2] = "TRES";
})(Contagens || (Contagens = {}));
But, I don't understand how it works... someone could explain this code to me?

The variable var Contagens; This creates the variable that will hold a reference to the enum.
The argument Contagens || (Contagens = {}) the enum is used if it already exists, and will be set to an empty object, if it doesn't. This allows enums to be extended:
enum Contagens {
UM,
DOIS,
TRES
}
enum Contagens {
CATRE = 4
}
The function function (Contagens) { takes an argument Contagens that is the value from step #2. In this function it will create the entries on the enum object. It has the same name as the outer variable Contagens, so it shadows that variable. But it's the same value, so that doesn't matter much.
The assignment.
Contagens[Contagens["UM"] = 0] = "UM";
The result of an assignment is the value being assigned.* So Contagens["UM"] = 0 does two things. It sets the key "UM" to the value 0, and it returns 0.
That returned 0 is used then in the a second assignment:
Contagens[0] = "UM";
Now the "UM" property has been assigned 0 and the 0 property has been assigned to "UM". The enum now looks like this:
{ UM: 0, "0": "UM" }
This allows you to lookup a value in an enum by its name, or get its name from its value.
Contagens.UM // 0
Contagens[0] // "UM"
Which is handy!
* The result of an assignment when delcaring a variable is undefined, but assigning a property of an object or assigning to an existing variable will return the assigned value. JS is quirky like that.

Set value to a referenced JavaScript object

For example, I have the following JS object:
var obj = {
n: 0,
o: {}
};
var nGlobal = obj.n;
var oGlobal = obj.o;
And want to use global variables in order to make it look like this:
var obj = {
n: 5,
o: {
x: 7
}
};
Obviously, I am able to assign a value to a property of oGlobal:
oGlobal.x = 7;
However, is there any way to change the value of obj.n through nGlobal, without mentioning obj?
Just something like this:
console.log(obj); // {n: 1, o: {}}
nGlobal.set(5);
// or
nGlobal.value = 5;
console.log(obj); // {n: 5, o: {}}

Short answer:
No, there is not.
Long answer:
In JS primitive types are immutable and passed by values.
JS implements pass-by-value strategy, which means that ALL data is always passed by value (in case if you pass a reference to object - the reference is passed by value)
One important consequence from the items above: in JS there is no way to change the original object using the = operation. That is: you can modify an object when you have a reference to it, but you cannot swap one object with something else so that all other references also "were modified".
Related:
Evaluation strategy - Call by sharing
Credits:
Felix Kling

Enums in TypeScript: what is the JavaScript code doing?

The following TypeScript:
enum PrimaryColors { Red, Green, Blue };
Produces the following JavaScript:
var PrimaryColors;
(function (PrimaryColors) {
PrimaryColors[PrimaryColors["Red"] = 0] = "Red";
PrimaryColors[PrimaryColors["Green"] = 1] = "Green";
PrimaryColors[PrimaryColors["Blue"] = 2] = "Blue";
})(PrimaryColors || (PrimaryColors = {}));
;
I am embarrassed to admit that I don't understand what the JavaScript is doing.
The function in parentheses is assigning string values using another assignment as the index/key. I have not seen anything like this before.
And what is the purpose of the (PrimaryColors || (PrimaryColors = {}) following the function?
If the answer is to learn JavaScript properly, I will readily accept it, provided it comes with a suggested source that clearly explains what I am seeing here.

I believe:
PrimaryColors[PrimaryColors["Red"] = 0] = "Red";
is equivalent to:
PrimaryColors[0] = "Red";
PrimaryColors["Red"] = 0;
See this reference.
The expression x = 7 is an example of the first type. This expression
uses the = operator to assign the value seven to the variable x. The
expression itself evaluates to seven.
For example:
console.log((x = 7));
outputs:
7
Similarly:
var x = {};
console.log((x["hi"] = 7));
Also outputs 7.
As for the second thing, PrimaryColors is initially undefined.
var x;
console.log(x); // undefined
In a boolean context, undefined evaluates to false:
console.log(!undefined); // true
console.log(!!undefined); // false
Sanity check:
console.log((!undefined) === true); // true
console.log((!!undefined) === false); // true
console.log(undefined === false); // false
This is a common usage of short circuiting. Because PrimaryColors is initially undefined (false), it will pass {} to the function.
PrimaryColors || (PrimaryColors = {})

Maybe this will help.
(function() {})();
This is an 'immediately executing function'. It defines a function as an expression, and then invokes it.
var x = y || y = {};
If a common pattern for initializing something to a default value. If y does not have a value, the 1st part of the or-statement is false, so it executes the 2nd part, which assigns a value to y. The value of that 2nd expression is the new value of y. So x becomes that value of y -- which is the new value if it wasn't already defined.
x[y] = z;
Objects in JS are associative arrays. In other words, string-object pairs, like IDictionary(string,object). This expression is setting the key with value y to the value of z, in the dictionary x;
x[x["a"] = 0] = "a";
So, same thing here, but with a nested expression, which is:
x["a"] = 0;
So that just sets the value of key "a". Nothing fancy. But this is also an expression, whose value is 0. So substitute that in the original expression:
x[0] = "a";
Keys need to be strings, so it's actually the same thing as:
x["0"] = "a";
Which just sets yet another key in the dictionary. Result is that these statements are true:
x["0"] === "a";
x["a"] === 0;

I found this question because I was wondering why use an IIFE at all when you can just init the var with {} right off. The previous answers don’t cover it, but I’ve found my answer in the TypeScript Deep Dive.
The thing is, enums can be split into multiple files. You just have to explicitly initialize the first member of second, third, etc. enums, so this:
enum Colors {
Red,
Green,
Blue
}
enum Colors {
Cyan = 3,
Magenta,
Lime
}
transpiles to this:
var Colors;
(function (Colors) {
Colors[Colors["Red"] = 0] = "Red";
Colors[Colors["Green"] = 1] = "Green";
Colors[Colors["Blue"] = 2] = "Blue";
})(Colors || (Colors = {}));
var Colors;
(function (Colors) {
Colors[Colors["Cyan"] = 3] = "Cyan";
Colors[Colors["Magenta"] = 4] = "Magenta";
Colors[Colors["Lime"] = 5] = "Lime";
})(Colors || (Colors = {}));
As you probably know, redeclaring a variable within the same scope is harmless, but reinitialization is not.
I think they could probably just go:
var Colors;
Colors || (Colors = {});
Colors[Colors["Cyan"] = 3] = "Cyan";
// ...
and skip the closure, but maybe I’m still missing something.

It is used to create an associated map (in other words an object) where you will retrieve the 'name' of the enum value by using the index as key and vice versa. In other words: PrimaryColors["Red"] (or PrimaryColors.Red using dot notation) will yield 0. PrimaryColors[0] (dot notation would be invalid here) will yield "Red".
Understanding the implementation is actually not that hard if we consider three concepts:
The assignment of values to existing variables in javascript evaluates to a value (so it's an expression rather than a statement in spirit)
Object attributes (keys) can be accessed via brackets given their key
Object attributes need to be of type string or Symbol but other values will be propagated to a string if possible.
Therefore:
PrimaryColors[PrimaryColors["Red"] = 0] = "Red";
is equivalent to
const valueToBeUsedAsIndex = PrimaryColors.Red = 0; // assignment evaluates to 0, i. e. valueToBeUsedAsIndex has value 0
PrimaryColors[valueToBeUsedAsIndex] = "Red"; // PrimaryColors[0] is "Red". Technically this assignment yields a value too ("Red" in this particular case) but the value is discarded as it's not needed anymore
// at this point PrimaryColors looks like this: { Red: 0, "0": "Red" }

Lots of great answers here and thank you all, but I would like to add more for simplicity and for my personal reference, and for others who have the same learning structure in breaking things down to the last bit, I will be skipping the Immediately-invoked Function Expressions (IIFE) ill image we all already know that part
now let me break it step by step
PrimaryColors = {} // right now this is an empty object
PrimaryColors[PrimaryColors["Red"]=0] = 'Red'
the most important part here is many don't know that when u set a value to an object
you get a returned value
like below
pp = {}
dd = pp['red']=0
0 // as you can see here the result of the assignment is returned
//now dd is assigned this returned value
// this is the same thing going on here.
> dd
0
we are setting the returned value as the key which is 0 which the javascript hashing algorithm converts to a string and returns as a string.
I hope everyone understands.

argumental reference inconsistency in javascript

I have recently encountered a nasty issue in JS.
Let say we pass a map, an array of objects to a function f.
var o=[{a:0}];
function f(a){
for(var i in a){
if (a.hasOwnProperty(i)){
a[i]=null;
}
}
return a;
};
var outp=f(o);
alert(outp[0]+" === "+o[0]+" : "+(outp[0]===o[0]));
// here we expect loose equality, and equality in type,
//furthermore it should identically equal as well, and we got right!
But, we can not pass total responsibility of an object to a function as argument, same like in functional paradigm o=(function(o){return o})(), because any kind of modification to o is not referenced!
var o=[];
function ff(a){
return (a=undefined);
};
var outp=ff(o);
alert(outp+" === "+o.constructor+" : "+(outp===o));
// here we expect true, but we got false!
Why is the above described reference loss and
presumably different referencce handling in the second use case,
though in both case, functions got the array argument in the 0. position?

Javascript always passes arguments by value, so this won't work:
function foo(x) {
x = 100;
}
y = 5
foo(y)
y == 100 // nope
However this does work:
function foo(x) {
x.bar = 100;
}
y = {}
foo(y)
y.bar == 100 // yes
In the second snippet x is still passed by value, but this very value is a reference (pointer) to an object. So it's possible in a function to dereference it and access what's "inside" the object.

Is null a valid javascript property name?

Javascript objects can be used as maps. The following all is valid code:
var x = {};
x.a = 1;
x['b'] = 2; // the same as x.b = 2;
x[3] = 3; // x.3 won't work, but this syntax works fine. Also, x[3] == x['3'].
x['What, this works too?!?!?'] = 'Yup, it does!';
But today I tested another case which... seems to work, but raises some warning flags in my head because it looks... wrong:
x[null] = 42;
Now, it would be extremely cool if this worked as expected (I won't have to rewrite a bunch of code then), but can I rely on it? Or maybe this is just some undocumented behavior which just happens to work in all modern browsers but might as well cease working on the next release of Google Chrome?

Anything between the property brackets is converted to a string. null becomes "null", which is a valid property.

It's valid ECMAScript 5, but you may run into problems in some versions of Internet Explorer.
This is all fine:
x = {};
x[null] = 42;
x[null];
// 42
x = {"null": 42};
x[null];
// 42
However, IE8 doesn't accept the following with reserved words such as null:
x.null
// Error: Expected identifier
x = {null: 42}
// Expected identifier, string or number
(Both of the above work in Chrome, even with "use strict" enabled.)

I cannot leave comments so I created an answer...
While Rob W is correct his answer is a little misleading. The item between the square brackets is converted to a string using ToString(). So, a[null] only equals a['null'] because ToString( null ) == 'null'
take for instance
var a = 1;
var x = {}
x[a] = 20;
x['1'] = 30; -- this is exactly the same as the previous line and now x[a] == 30

If your environment supports ES6 and you need to be able to store a value for null as well as any arbitrary string then you can use a Map.
const a = new Map();
a.set(null, 'foo')
a.set('null', 'bar')
// Map { null => 'foo', 'null' => 'bar' }

x['null'] = 42;
I would strongly dis-recommend that, though, to avoid confusion.
Property names are strings. Every string will work, even ones that represent reserved identifiers.
Everything that's not a string will be converted into a string (by calling the object's toString() method):
a = ['FOO']; // an array
o = {}; // an object
o[a] = 'foo'; // using a as the property name
// o now is:
{
FOO: 'foo'
}