What is the reason behind value1.a[x] and value2.b[x] being returned as undefined even though a[x] and b[x] are properties of value1 and value2 objects in JavaScript?

Question

What is the reason behind value1.a[x] and value2.b[x] being returned as undefined even though a[x] and b[x] are properties of value1 and value2 objects in JavaScript?

let obj1 = {a:5, b:6}, obj2 = {a:8, b:7};
let keysObj1 = Object.keys(obj1), keysObj2 = Object.keys(obj2);
  for (let i = 0; i < keysObj1.length; i ++) { 
    if (keysObj1[i] === keysObj2[i] && obj1[keysObj1[i]] === obj2[keysObj2[i]]) {
      console.log(keysObj1[i], keysObj2[i], obj1[keysObj1[i]], obj2[keysObj2[i]]);
    }
  }
// -> a, a, undefined, undefined

P.S. I am aware of alternative methods to compare objects; I just wanted to investigate why this particular approach didn't yield the expected results.

javascript arrays

Answer 1

Answer №1

The notation being utilized is as follows:

value1.a[x]

It attempts to access the a property of value1 as if it were an array (or another indexable object like a string), using x as the indexer. However, since value1.a is a number, this will result in undefined.

To reference the property of value1 with the name a[x], you should use the following syntax instead:

value1[a[x]]

For instance:

value1 = {
  a: 5,
  b: 6
}, value2 = {
  a: 5,
  b: 7
};
let a = Object.keys(value1),
  b = Object.keys(value2);
for (let x = 0; x < a.length; x++) {
  if (a[x] === b[x] && value1[a[x]] === value2[b[x]]) {
    console.log(a[x], b[x], value1[a[x]], value2[b[x]]);
  }
}

It is important to note that if value1.a and value2.b are strings, the code provided will function (albeit producing unexpected outcomes). For example:

value1 = {
  a: 'abc',
  b: 6
}, value2 = {
  a: 5,
  b:  'abc'
};
let a = Object.keys(value1),
  b = Object.keys(value2);
for (let x = 0; x < a.length; x++) {
  if (a[x] === b[x] && value1.a[x] === value2.b[x]) {
    console.log(a[x], b[x], value1.a[x], value2.b[x]);
  }
}

Answer 2

The notation being utilized is as follows:

value1.a[x]

It attempts to access the a property of value1 as if it were an array (or another indexable object like a string), using x as the indexer. However, since value1.a is a number, this will result in undefined.

To reference the property of value1 with the name a[x], you should use the following syntax instead:

value1[a[x]]

For instance:

value1 = {
  a: 5,
  b: 6
}, value2 = {
  a: 5,
  b: 7
};
let a = Object.keys(value1),
  b = Object.keys(value2);
for (let x = 0; x < a.length; x++) {
  if (a[x] === b[x] && value1[a[x]] === value2[b[x]]) {
    console.log(a[x], b[x], value1[a[x]], value2[b[x]]);
  }
}

It is important to note that if value1.a and value2.b are strings, the code provided will function (albeit producing unexpected outcomes). For example:

value1 = {
  a: 'abc',
  b: 6
}, value2 = {
  a: 5,
  b:  'abc'
};
let a = Object.keys(value1),
  b = Object.keys(value2);
for (let x = 0; x < a.length; x++) {
  if (a[x] === b[x] && value1.a[x] === value2.b[x]) {
    console.log(a[x], b[x], value1.a[x], value2.b[x]);
  }
}

What is the reason behind value1.a[x] and value2.b[x] being returned as undefined even though a[x] and b[x] are properties of value1 and value2 objects in JavaScript?

Answer №1

Similar questions

Tips for getting information from firestore by implementing a where clause specific to a field within an object?

Utilizing the progress or meter tag in combination with a reactive value

Utilize a variable function in AngularJS

How to use Javascript to pause an HTML5 video when closed

Prevent jQuery toggle from animating content when toggling

An error occurred as the requested resource does not have the necessary 'Access-Control-Allow-Origin' header. The response code received was 403

Analyzing file to determine optimal size for HashTable compared to frequent resizing of Array and constant rehashing, along with other related inquiries

What does the concept of hydration entail when working with React?

Is your $http request causing an XML parsing issue?

When trying to manually trigger the firing of the autocomplete function to get a place using Google API

Can we utilize conditions to both select and deselect items using JavaScript and PHP together?

Sending an array to a component in Angular without the need for a controller

Is there a way to convert a PHP $_POST array into a string that can be used as a name attribute?

Please explain the purpose and scope of a JavaScript document

Is there a more efficient way to consolidate multiple functions like this into one cohesive function instead of having to define each one separately?

Tips for removing the default confirm action for onrowdelete in Reactjs:booleanIs there a way to eliminate the default onrowdelete confirm event

jQuery does not support animations for sliding up or down

By incorporating JavaScript, clicking on an image will trigger a shift in the position of a different element

How can we incorporate an algorithmic solution into an Angular brand carousel?

Is there a way to extract a particular value from a JSON URL and transfer it to a JavaScript variable?