How to define a Javascript object?
const obj= { identifier1:"value of an identifier key", "identifier1":"value of a string key", 0:"value of an number key", 00:"value of a number key", "0":"value of a string key", "string":"value of an normal string key", "a string":"value of a string key that has a space in it", }
The key of an object can be an identifier/symbol(an identifier is a continuous alphabeta/number/_ that does not begin with a number), a number, or a string. Internally, all keys are stored as strings. So, the number key will be converted to a string key. In the above example, both the number keys 0 and 00 will be converted to the string key ‘0’. So, there are 3 properties with the same key. In this case, the effective property is the last defined one( “0”:”value of a string key”). The identifier keys are also stored as strings, so in the above example, there are two properties with the same key “indentifer1” and the effective property is the one defined last. Now, you have known putting quotation marks around a key does not change the key at all so why we need those quotation marks? That’s because sometimes we need a key that has space(s) in it and we cannot use an identifier for it(remember an identifier cannot have a space in it?) and we have to use a string for this key.
B.T.W., Javascript array is object, too. So
a=[1,2,3,4,5]
is such an object:
a= { "0":1, "1":2, "2":3, "3":4, "4":5 }
In the array notation, we only list the value of each property while the object notation list both the key and the value of each property. Note that the key starts from “0” not “1”.
How to access property of Javascript object?
There are two methods: using the dot notation or using the bracket notation.
The dot notation: obj.identifier
So, you cannot access the property with a key that has space(s) in it because identifier does not allow space(s). Note that obj.”some key” or obj.”somekey” are not correct usages of the dot notation because “some key” or “somekey” are not identifiers. You’ll get the error:
Uncaught SyntaxError: missing name after . operator
The identifier will be converted to the string “identifier” which is used as the key to look up the property of the object.
The bracket notation: obj[value]
value can be a constant string(obj[“a string”]), a variable(obj[varname]), a number(obj[0]), all of which will be converted to a string to access the property. So, obj[0], obj[“0”], obj[000] all access to the same property.
Note that obj[identifier] is not a correct usage of the bracket notation if the identifier does not represent a variable. You’ll get the error:
Uncaught ReferenceError: identifier is not defined
The bracket notation is the only method to access a property with a key that has space(s) in it. You can use obj[“some key”] or
var keyvar="some key"; obj[keyvar];
On the other hand, obj.keyvar may not be correct if keyvar is not a key of obj.
Access to undefined property of Javascript object
You can access an undefined property of an object without getting an error:
alert(obj.undefinedkey); alert(obj["undefinedkey");
undefinedkey is not a key of obj so the accessed property has the value of “undefined”. You can also use an undefined property as the left value:
obj.undefinedkey="value of a new key"; obj["undefinedkey"]="value of a new key";
Now, the obj has a new key “undefinedkey”.
An interesting example of accessing properties of Javascript object
var keyvar="newkey"; obj[keyvar]="value of new key"; alert(obj.newkey);//"value of new key"