When initializing b, it appears that the array data is being copied from a instead of referencing it, as originally intended:
let a = [0,1];
let b = [a[0], 2];
a[0]=3;
console.log(b);The resulting output is 0,2.
3,2?b[0] be set to reference a[0] in order to reflect changes made to a?To ensure that changes made to variable b are reflected in variable a and the array [0, 1], you need to assign by reference. This means that both a and b will point to the same array. When you modify either a or b, the array contents will be updated accordingly:
let a = [0, 1];
let b = a;
a[0] = 3;
b[1] = 2;
Here's an example demonstrating this concept:
let a = [0, 1];
let b = a;
a[0] = 3;
b[1] = 2;
document.querySelector("div").innerText = b;<div></div>For more information on the topic of value vs. reference, check out Value vs. Reference
UPDATE:
If you want to edit a specific value in an array, you can use the indexOf method to locate the value in the array and update it by index:
let a = [0, 1];
let b = [a[0], 2];
let index = b.indexOf(a[0]);
let valueToSet = 3;
a[0] = valueToSet;
b[index] = valueToSet;
console.log(`a is`, a);
console.log(`b is`, b);When it comes to copying values in programming, primitive values like numbers, booleans, and strings are duplicated by value since they are unchangeable, whereas objects, arrays, and functions are duplicated by reference.
For more information, you can visit: Primitive
An easy demonstration of this concept can be seen in the following example:
let a = [{foo: 0},{bar: 1}];
let b = [a[0], 2];
a[0].foo = 3;
console.log(b);If you intend to duplicate by reference, it's necessary to duplicate the entire array, rather than just the individual values.
When adding the value of a variable into an array, it only copies the value and not the reference.
In technical terms, when you add the value of a[0] into array b, you are not duplicating its reference, only the value. Therefore, if you make changes to the elements in array a, it will not impact the values in array b.
This process is similar to using a variable, as shown with elem below:
let a = [0,1];
let elem = a[0]; // value type, not copying the reference
let b = [elem, 2];
a[0]=3;
document.querySelector("div").innerText = b;<div></div>Hopefully, this explanation clarifies things for you!
It appears that
let b = [a[0], 2];
is initializing b with a copy of the Number in a rather than referencing it, causing changes to the original item not to be reflected in b.
Surprisingly, this behavior is not documented in the MDN JavaScript reference at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures. Refer to StepUp's answer for more information.
I am optimistic that there might be a solution (maybe involving Pointers in JavaScript??).
For now, redefining the variable(s) ("updating", "redefining") is a simple workaround - it's not ideal, but it's the easiest way to update multiple related variables:
let a = [0,1];
let b = [a[0], 2];
a[0]=3;
b = [a[0], 2];
console.log(b); // [3,2]This example can be encapsulated in a function (return b;) to streamline the process of redefining multiple variables.
Currently, I am faced with the challenge of creating a stored procedure in Postgres. The data that I have in Postgres is structured as JSON, as shown below. { "identifiers": [ { "identifierType": ...
I'm having trouble making the accordion open both when the user has typed something into the search bar and when someone clicks to open it. I can get them to work individually, but not together. If I use this code: <accordion-group is-open="statu ...
I came across this tutorial on FormData, but I'm still trying to grasp how the formData object functions. Input Form Example: https://i.stack.imgur.com/h5Ubz.png <input type="file" id="file-id" class="w300px rounded4px" name="file" placeholder=" ...
Imagine having the following code: var $element = $('<div/>'); $element.css("margin-left", "2cm"); console.log($element.css("margin-left")); When tested in Chrome, it doesn't return anything, but Firefox shows "75.5833px". Any sugges ...
Looking for a simple solution to change a List<int> into a string array. Here's what I currently have: var my_list = new List<int>(); my_list.Add(1); my_list.Add(2); my_list.Add(3); string[] my_array = new string[my_list.Count]; for(var ...
Express.js offers a wide range of middlewares that replace built-in functions. One example is body-parser, which parses HTTP request bodies, replacing the built-in function express.bodyParser. body-parser replaces the built-in function express.bodyParse ...
Currently, I am in the process of refactoring a codebase but have hit a roadblock. My main aim is to update the state when the onChange event of a select box occurs. Specifically, the parameter searchCriteria in my handleFilterChange function is set to in ...
While there have been many inquiries regarding how to create a ping command for a discord.js bot, my question stands out because I am attempting to develop this command for interaction rather than message. I attempted utilizing Date.now() - interaction.cre ...
I am currently working on a function that displays real-time dates based on user input. Currently, when the user enters the input, it is displayed in the front end as follows: 28.10.2018 10:09 However, I would like the date to change dynamically based on ...
I can't seem to identify the main cause of this error. I consistently see a green underline below the word angular in my javascript file. I'm not sure why. (Using Visual Studio Code) HTML <html ng-app="myapp"> <head> ...
Here is my current folder structure. /app.js /src /routes /controllers Within the routes folder, there are multiple javascript files that all require the passport.js package like so: const passport = require('passport'); Is it possible to c ...
I'm currently working on creating a chart using chart.js. I have php code that retrieves datetime data through an ajax call. However, the chart is not displaying any data and there are no visible errors. I've checked the php code using console.lo ...
I'm struggling with handling an array of 8 cubes, each only 1 pixel tall. When a button is pressed, I want them to smoothly animate to a new height using a while loop. Here's my current implementation: if (buttonPressed) { console.log(' ...
Comparing Arrays - const source = [1, 1, 1, 3, 4]; const target = [1, 2, 4, 5, 6]; Initializing Arrays - const matches1 = []; const matches2 = []; const unmatches1 = []; Array Matching Process - for (const line of source) { const line2Match = target.fi ...
I was working with JSON data and converted it into an array of objects. Then, I assigned that array to another array using the .slice(0) method. However, I encountered an issue where when I tried to remove an element from the assigned array, it also remov ...
Utilizing the following api: I am able to retrieve country, city, and real IP address in localhost (127.0.0.1) successfully. However, when I implement this code on my website, it displays the server's address instead of the client's. How can I r ...
I came across an interesting tutorial that showcases the implementation of a tooltip directive in Angular: CASE A: Tooltip without brackets <p tooltip="Tooltip from text">Tooltip from text</p> CASE B: Tooltip with brackets <p [toolt ...
$.colorbox({ href:"/check.html", transition:"elastic", speed: 150, innerWidth:"910", iframe:true, fastIframe:false, fixedPosition:fixedPos, onComplete:function(){ var $ ...
I'm currently working on a project that involves a scrollable div with arrows above and below. My goal is to have the arrow above only appear after the div has reached a certain height. Below is the code I've been using... $("#scrolldivup").hid ...
Implementing a "higher order component" without types can be achieved as shown below: const Themeable = (mapThemeToProps) => { return (WrappedComponent) => { const themedComponent = (props, { theme: appTheme }) => { return <Wrapped ...