Designating a variable as an array target in Javascript (how does it affect mutability?)

Question

Designating a variable as an array target in Javascript (how does it affect mutability?)

I am struggling with managing 5 arrays in JavaScript based on a variable called "x". I'm having difficulty understanding how to properly use and update these variables in my code. Here is an overview of what I'm trying to achieve...

//Arrays to hold IDs of nodes
nodeOne = [];
nodeTwo = [];
nodeThree = [];
nodeFour = [];
nodeFive = [];

//Mapping buttons to node arrays
var nodesButtonToNode = {pn_btn_1:"nodeOne", pn_btn_2:"nodeTwo", pn_btn_3:"nodeThree", pn_btn_4:"nodeFour", pn_btn_5:"nodeFive"};

x = "pn_btn_1"; 

nodesButtonToNode.x.push("I am supposed to go into nodeOne")

In essence, the value of "x" determines which array should be filled according to the key in nodesButtonToNode. For instance, if x = “pn_btn_1”, then data should be added to the nodeOne array. However, I keep encountering undefined errors and can't pinpoint where I'm making a mistake.

Any advice or insights would be greatly appreciated. Thank you!

javascript arrays mutability

Answer 1

Answer №1

To efficiently store and access data, consider using an object where the array names serve as keys allowing you to retrieve values using bracket notation such as obj[var]:

//Assigning IDs to node arrays
const nodes = {
  nodeOne: [],
  nodeTwo: [],
  nodeThree: [],
  nodeFour: [],
  nodeFive: []
};

var nodesButtonToNode = {
  pn_btn_1: "nodeOne",
  pn_btn_2: "nodeTwo",
  pn_btn_3: "nodeThree",
  pn_btn_4: "nodeFour",
  pn_btn_5: "nodeFive"
};

x = "pn_btn_1";

nodes[nodesButtonToNode[x]].push("I am supposed to go into nodeOne");

console.log(nodes);

Answer 2

To efficiently store and access data, consider using an object where the array names serve as keys allowing you to retrieve values using bracket notation such as obj[var]:

//Assigning IDs to node arrays
const nodes = {
  nodeOne: [],
  nodeTwo: [],
  nodeThree: [],
  nodeFour: [],
  nodeFive: []
};

var nodesButtonToNode = {
  pn_btn_1: "nodeOne",
  pn_btn_2: "nodeTwo",
  pn_btn_3: "nodeThree",
  pn_btn_4: "nodeFour",
  pn_btn_5: "nodeFive"
};

x = "pn_btn_1";

nodes[nodesButtonToNode[x]].push("I am supposed to go into nodeOne");

console.log(nodes);

Answer 3

Answer №2

Ensure that your nodesButtonToNode function references the actual arrays, not just their names.

var nodesButtonToNode = {
    pn_btn_1: nodeOne,
    pn_btn_2: nodeTwo,
    pn_btn_3: nodeThree,
    pn_btn_4: nodeFour,
    pn_btn_5: nodeFive
};

This approach allows for direct updates to the arrays.

It's important to note that x should be assigned the value of pn_btn_1 in your mapping.

//Arrays containing IDs of each node
nodeOne = [];
nodeTwo = [];
nodeThree = [];
nodeFour = [];
nodeFive = [];

var nodesButtonToNode = {
    pn_btn_1: nodeOne,
    pn_btn_2: nodeTwo,
    pn_btn_3: nodeThree,
    pn_btn_4: nodeFour,
    pn_btn_5: nodeFive
};

x = "pn_btn_1"; 

nodesButtonToNode[x].push("Inserting content into nodeOne");

console.log(JSON.stringify(nodeOne));

Answer 4

Ensure that your nodesButtonToNode function references the actual arrays, not just their names.

var nodesButtonToNode = {
    pn_btn_1: nodeOne,
    pn_btn_2: nodeTwo,
    pn_btn_3: nodeThree,
    pn_btn_4: nodeFour,
    pn_btn_5: nodeFive
};

This approach allows for direct updates to the arrays.

It's important to note that x should be assigned the value of pn_btn_1 in your mapping.

//Arrays containing IDs of each node
nodeOne = [];
nodeTwo = [];
nodeThree = [];
nodeFour = [];
nodeFive = [];

var nodesButtonToNode = {
    pn_btn_1: nodeOne,
    pn_btn_2: nodeTwo,
    pn_btn_3: nodeThree,
    pn_btn_4: nodeFour,
    pn_btn_5: nodeFive
};

x = "pn_btn_1"; 

nodesButtonToNode[x].push("Inserting content into nodeOne");

console.log(JSON.stringify(nodeOne));

Answer 5

Answer №3

There are a few mistakes in the way you've written your code snippet. Here's an example of how it should look:

const firstNode = [];
const secondNode = [];
const thirdNode = [];
const fourthNode = [];
const fifthNode = [];

const nodeButtonMapping = {
  btn_1: firstNode,
  btn_2: secondNode,
  btn_3: thirdNode,
  btn_4: fourthNode,
  btn_5: fifthNode
};

const key = "btn_1"; 

nodeButtonMapping[key].push("This should be added to firstNode");

console.log(nodeButtonMapping);

Answer 6

There are a few mistakes in the way you've written your code snippet. Here's an example of how it should look:

const firstNode = [];
const secondNode = [];
const thirdNode = [];
const fourthNode = [];
const fifthNode = [];

const nodeButtonMapping = {
  btn_1: firstNode,
  btn_2: secondNode,
  btn_3: thirdNode,
  btn_4: fourthNode,
  btn_5: fifthNode
};

const key = "btn_1"; 

nodeButtonMapping[key].push("This should be added to firstNode");

console.log(nodeButtonMapping);

Designating a variable as an array target in Javascript (how does it affect mutability?)

Answer №1

Answer №2

Answer №3

Similar questions

Securing Your Vue.js Application Against Copy and Paste Issues

JavaScript - Placing Image Caption and Details within a Box

Something is amiss with the PHP email validation functionality

Diagnosing the character count error in an ASP.NET text box

Avoid using @2x images on iPad 3 when rendering in HTML5 Canvas

Tips on confirming the completion of my form when the next button is pressed

"Can you explain the process by which React grabs the props using the code `const props = this.props

Dynamically including and deleting classes upon clicking using React

Navigating through the world of WebSQL data entry

Aligning text to the right in Bootstrap 5 input fields

Is there a way to display a multidimensional array according to the key?

Turn off the annoying right-click context menu in Firefox

Is there a reason why angularJS doesn't provide the exact error location directly, opting instead to just offer a link to their website that provides a generic explanation?

Is there a variation in IE6 versions depending on the operating system used?

How can I utilize regex to change the background color of a specific character in a react/typescript application?

Utilizing Jquery for efficient event delegation across various elements and events

Bubblesort algorithm is effective for sorting a 2D array in only one direction

Tips for ensuring a div stays centered while resizing the window

Divide a NumPy array into sections

Transferring HTML variables to an Angular Component