Comprehending the meaning behind the obj variable and the result of two bracket values being equivalent to {specific information within an object

Question

Comprehending the meaning behind the obj variable and the result of two bracket values being equivalent to {specific information within an object

There are times when even the most straightforward code seems puzzling. I recently stumbled upon a piece of JavaScript that has left me scratching my head. Despite adding a debugger to step through it, I'm still struggling to grasp its inner workings.

var obj = {};
var myID = 999;

var productID = 1;

var myModelID = 100;
var myCatID = 200;
    var addMe = 1; 

if (typeof obj[myCatID] == 'undefined') {
    obj[myCatID] = {};
}

var locationObj = {
    state: 'roch',
    city: '3',
    street: '2nd',
    houseNum: '101'
};

var qty = 1;

obj[myCatID][myModelID]={
    'location': locationObj,
    'quantity': qty,
    'prodID': productID,
    'id': myID
};

I find myself in doubt about what's happening here — `obj[myCatID][myModelID]`. It appears to involve two properties accessed using bracket notation for `obj`, followed by an object assignment. But, my understanding remains foggy.

The outcome, as shown by my alert and debugger: !https://i.sstatic.net/Sn2K5.jpg

!https://i.sstatic.net/VBRHh.jpg

If I were to inject an additional bracket value to transform `obj[myCatID][myModelID]` into `obj[myCatID][myModelID][addMe]`, why am I confronted with a debug error stating "uncaught TypeError: Cannot set property '1' of undefined" upon execution? I fail to discern how this differs from `myModelID` and its declaration. Your assistance in overcoming this hurdle is greatly appreciated.

javascript arrays object square-bracket

Answer 1

Answer №1

If you wish to interact with JavaScript objects, you can utilize bracket accessors.

var obj = {};  // create an empty object
obj['test'] = 'Hello World';  // add a property 'test' with the value 'Hello World'
console.info(object['test']);  // Hello World
console.info(object.test);  // Hello World

It is possible to reference an object's property using either obj['propertyName'] or obj.propertyName. The same principle applies when adding a new property: obj['newProperty'] = 42 is equivalent to obj.newProperty = 42.

If you want to nest inner objects within an outer object, you can achieve this using multiple bracket accessors or dots:

obj['prop1']['prop2']['prop3'] = 42

or obj.prop1.prop2.prop3 = 42.

Note: It is essential to initialize each inner object separately before attempting to access it! Otherwise, JavaScript will throw an error stating "Cannot set property of undefined" because the targeted object has not been initialized.

var obj = {};
obj['prop1'] = {};  // creates an inner object 'prop1'
obj['prop1']['prop2']['prop3'] = 42;  // This won't work as 'prop2' hasn't been created yet

In your scenario, accessing

obj[myCatID][myModelID][addMe]</code isn't feasible since the inner object "myModelID" has not been defined. Therefore, trying to call <code>undefined['prop3']

results in an error.

The solution is simple: Verify if each inner object has been initialized previously. This is demonstrated in your code with

if (typeof obj[myCatID] == 'undefined')

.

Answer 2

If you wish to interact with JavaScript objects, you can utilize bracket accessors.

var obj = {};  // create an empty object
obj['test'] = 'Hello World';  // add a property 'test' with the value 'Hello World'
console.info(object['test']);  // Hello World
console.info(object.test);  // Hello World

It is possible to reference an object's property using either obj['propertyName'] or obj.propertyName. The same principle applies when adding a new property: obj['newProperty'] = 42 is equivalent to obj.newProperty = 42.

If you want to nest inner objects within an outer object, you can achieve this using multiple bracket accessors or dots:

obj['prop1']['prop2']['prop3'] = 42

or obj.prop1.prop2.prop3 = 42.

Note: It is essential to initialize each inner object separately before attempting to access it! Otherwise, JavaScript will throw an error stating "Cannot set property of undefined" because the targeted object has not been initialized.

var obj = {};
obj['prop1'] = {};  // creates an inner object 'prop1'
obj['prop1']['prop2']['prop3'] = 42;  // This won't work as 'prop2' hasn't been created yet

In your scenario, accessing

obj[myCatID][myModelID][addMe]</code isn't feasible since the inner object "myModelID" has not been defined. Therefore, trying to call <code>undefined['prop3']

results in an error.

The solution is simple: Verify if each inner object has been initialized previously. This is demonstrated in your code with

if (typeof obj[myCatID] == 'undefined')

.

Comprehending the meaning behind the obj variable and the result of two bracket values being equivalent to {specific information within an object

Answer №1

Similar questions

"Encountering difficulties in displaying a local image through the use of require and

Declare the push method within the Countly.q array in a TypeScript declaration file

How can we ensure that the user's language preference is saved?

Convert HTML form input into a JSON file for safekeeping

Inability to successfully upload batch data within specified criteria using a keyword and conditional statement

Hyperlink to an HTML file located in a different directory and refresh the URL

Why does Angular Material's md-select truncate the background up to the content boundary?

Unable to smoothly animate object within OBJLoader

Utilizing precise data types for return values in React hooks with Typescript based on argument types

What is the best way to organize an array according to the positions of another array?

Dropzone.js: Creating a personalized file explorer to include files that have already been uploaded

I encountered a crash in my app because of an error in my Node.js backend code that was posting the accessories and slug into the database

What is the best way to pass around shared constants within NodeJS modules?

Axios is passing an array instead of a JSON object when making a POST request

Encountered a problem resolving the asynchronous component rendering with View-Router

Struggling to adjust the width of a div accurately following the population of AJAX content

Modifying color in CSS for an SVG that is dynamically animated using JSON

Use Javascript or Jquery to dynamically change the background color of cells in HTML tables based on their numerical

Steps for positioning one div below another:1. Set the position property

JS | How can we make an element with style=visibility:hidden become visible?