Search code examples
javascriptobjectcharacterswap

Why is swapping characters this way valid JavaScript?


I am getting confused on how this snippet of code works. I would assume that the A would need to be 'A' in order for these two characters to swap, but it works. Also, is there a name for what this is doing? From the looks of it, I think it is destructuring, but I'm not certain.

var translations = {
  A : 'U'
};
console.log(translations['A']); //returns U

I would have assumed you need to write it this way:

var translations = {
  'A' : 'U'
};
console.log(translations['A']); //also returns U

https://jsfiddle.net/ud37asp8/14/


Solution

  • Object or property keys can be either an identifier name (i.e. identifiers + reserved words), a string literal, or a numeric literal. It does not really matter whether you call it A or 'A' in the way of accessing it. https://ecma-international.org/ecma-262/6.0/#sec-object-initializer

    Property names

    Property names must be strings. This means that non-string objects cannot be used as keys in the object. Any non-string object, including a number, is typecasted into a string via the toString method.

    var object = {};
    object['1'] = 'value';
    console.log(object[1]);
    

    This outputs "value", since 1 is type-casted into '1'.

    var foo = {unique_prop: 1}, bar = {unique_prop: 2}, object = {};
    object[foo] = 'value';
    console.log(object[bar]);
    

    This also outputs "value", since both foo and bar are converted to the same string. In the SpiderMonkey JavaScript engine, this string would be "['object Object']".

    Also what you are doing is basically creating an Object. I do not see you destroying it anywhere. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

    Creating objects

    However, the advantage of the literal or initializer notation is, that you are able to quickly create objects with properties inside the curly braces. You simply notate a list of key: value pairs delimited by comma. The following code creates an object with three properties and the keys are "foo", "age" and "baz". The values of these keys are a string "bar", a number 42, and another object.

    var object = {
      foo: 'bar',
      age: 42,
      baz: {myProp: 12}
    }
    

    Accessing properties

    Once you have created an object, you might want to read or change them. Object properties can be accessed by using the dot notation or the bracket notation. See property accessors for detailed information.

    object.foo; // "bar"
    object['age']; // 42
    
    object.foo = 'baz';
    

    One can think of an object as an associative array (a.k.a. map, dictionary, hash, lookup table). The keys in this array are the names of the object's properties. It's typical when speaking of an object's properties to make a distinction between properties and methods. However, the property/method distinction is little more than a convention. A method is simply a property that can be called, for example if it has a reference to a Function instance as its value.