Accessing properties in JavaScript using square brackets

Question

Accessing properties in JavaScript using square brackets

When I input the following code into my Chrome console:

var object = {0:0, 1:1}

I am able to retrieve the values by calling object[0] and object[1]. Surprisingly, even when I use object["0"] and object["1"], I still get the same results. Then, if I redefine the object as:

var object = {"0":0, "1":1}

It turns out that all four calls work without any issues. However, things take an unexpected turn when I redefine the object like this:

var object = {a:0, 1:1}

Now, when I try to call object[a], a ReferenceError is thrown stating "a is not defined". Strangely, using object["a"] returns 0 even though the property name in the declaration is not a string. It seems like JavaScript assumes I am referencing a non-existent variable in the first example. But why do both object[0] and object["0"] yield proper results? Could it be that JavaScript automatically converts numbers since they can't represent variable names? What are the underlying rules governing this behavior, and does it apply universally or only within object bracket notation?

javascript

Answer 1

Answer №1

By utilizing brackets, the content contained within them is assessed. What do you suppose the result of the following expression will be?

Confused? If "a" hasn't been defined as a variable, it doesn't hold any meaning. When you employ the . notation, the term that comes after this symbol (which must strictly be an identifier) is viewed as a string. This is simply how the language functions.

Answer 2

By utilizing brackets, the content contained within them is assessed. What do you suppose the result of the following expression will be?

Confused? If "a" hasn't been defined as a variable, it doesn't hold any meaning. When you employ the . notation, the term that comes after this symbol (which must strictly be an identifier) is viewed as a string. This is simply how the language functions.

Answer 3

Answer №2

If you're facing a ReferenceError when attempting to access object[a], it's likely due to the fact that a is being treated as a variable in JavaScript rather than a string value containing the letter 'a'.

To resolve this issue, consider using the dot notation like object.a or the bracket notation with object["a"]

object.a;    //=> 0
object["a"]; //=> 0

object[1];   //=> 1
object["1"]; //=> 1

Alternatively, you can utilize a variable for accessing the object properties

var x = "a";
object[x];   //=> 0

var y = 1;
object[y];   //=> 1

Answer 4

If you're facing a ReferenceError when attempting to access object[a], it's likely due to the fact that a is being treated as a variable in JavaScript rather than a string value containing the letter 'a'.

To resolve this issue, consider using the dot notation like object.a or the bracket notation with object["a"]

object.a;    //=> 0
object["a"]; //=> 0

object[1];   //=> 1
object["1"]; //=> 1

Alternatively, you can utilize a variable for accessing the object properties

var x = "a";
object[x];   //=> 0

var y = 1;
object[y];   //=> 1

Answer 5

Answer №3

Indeed, you are correct.

a serves as a token that the engine interprets as a variable.

If you input "a", JavaScript recognizes it as a string-primitive.
If you input 0, JavaScript recognizes it as a number-primitive.

Aside from utilizing obj.a, obj["a"], obj[0], obj["0"], you can also do:

var a = 0;
obj[a]; // 0

Your application is encountering issues because a has not been defined yet, and you're trying to use it now.

This behavior is expected.
The content within the brackets isn't considered a "part" of the object -- it's a method of requesting "provide me with the value of the object associated with this key", where the key may be a number or string (or something that can be coerced into a string or number).

In the future, via maps and weakmaps, you will be able to utilize other objects/functions as keys too.

var obj  = new Map(),
    func = function () { },
    el   = document.getElementById("myId");

obj[func] = 1;
obj[el]   = 2;

Currently, these functionalities technically function... ...however, solely due to them being converted to their respective string values... ...thus, if you had two functions that were identical (but essentially distinct objects), they would overwrite values at present.
Within a map, they would be treated as separate entities.

Presently, working with DOM elements poses even more challenges, especially when there's a need to store numerous elements and associate references to them without constant re-lookups... ...yet for now, one must assign a unique ID number/key to each one, store that, recall the keys, and then establish a subsidiary object to retain the desired information...

However, in the near future, with maps, one could accomplish the following:

var my_els = document.querySelector(".lots-of-els");

for (let el of my_els /* also the future */) {
    console.log( my_map_of_data[el].info );
}

Answer 6

Indeed, you are correct.

a serves as a token that the engine interprets as a variable.

If you input "a", JavaScript recognizes it as a string-primitive.
If you input 0, JavaScript recognizes it as a number-primitive.

Aside from utilizing obj.a, obj["a"], obj[0], obj["0"], you can also do:

var a = 0;
obj[a]; // 0

Your application is encountering issues because a has not been defined yet, and you're trying to use it now.

This behavior is expected.
The content within the brackets isn't considered a "part" of the object -- it's a method of requesting "provide me with the value of the object associated with this key", where the key may be a number or string (or something that can be coerced into a string or number).

In the future, via maps and weakmaps, you will be able to utilize other objects/functions as keys too.

var obj  = new Map(),
    func = function () { },
    el   = document.getElementById("myId");

obj[func] = 1;
obj[el]   = 2;

Currently, these functionalities technically function... ...however, solely due to them being converted to their respective string values... ...thus, if you had two functions that were identical (but essentially distinct objects), they would overwrite values at present.
Within a map, they would be treated as separate entities.

Presently, working with DOM elements poses even more challenges, especially when there's a need to store numerous elements and associate references to them without constant re-lookups... ...yet for now, one must assign a unique ID number/key to each one, store that, recall the keys, and then establish a subsidiary object to retain the desired information...

However, in the near future, with maps, one could accomplish the following:

var my_els = document.querySelector(".lots-of-els");

for (let el of my_els /* also the future */) {
    console.log( my_map_of_data[el].info );
}

Accessing properties in JavaScript using square brackets

Answer №1

Answer №2

Answer №3

Similar questions

Guide to accessing HTML elements and saving them in a JSON formatted text using JavaScript

methods for retrieving nested JSON data from an API endpoint

How can you optimize the storage of keys in JS objects?

Do I have to divide the small functions in my Node.js controller into smaller ones?

I made a mistake with my git repository. Should I try to fix it or just start fresh?

What is the best way to determine the dimensions of a KonvaJs Stage in order to correctly pass them as the height/width parameters for the toImage function

Preserve multiple selected values post form submission using PHP, HTML, and JavaScript

The JavaScript audio is not working for the first three clicks, but starts playing smoothly from the fourth click onwards. What could be causing this issue?

Event fails to trigger when attached to different elements

Page refreshing in Angular 5 consistently redirects to the home page instead of staying on the current page

Is the detailedDescription missing from the JSON-LD schema crawl?

Enhance the functionality of the kendo grid by incorporating additional buttons or links that appear when the

The Node.js express seems to be unable to fetch the css and js files

Verify JSON data from server using AngularJS

NextJs not processing Bootstrap form submissions

The issue of receiving an undefined JSON response persists in an AJAX file upload scenario

Excessive form inputs extend beyond the modal when utilizing Bootstrap 3

What is the best location in Backbone.js to store code unrelated to the view, such as ads and analytics?

What is the best way to send additional data with getServerSideProps() in Next.js?

What is the best way to remove a specific HTML section using a JavaScript function?