We Keep Coding

Declaring an array with const keyword Javascript

I have created an array - const cars = ["Saab", "Volvo", "BMW"];
Now if I try to reassign values at specific indexes, it works like - cars[0] = "Toyota"; cars[1] = "Honda"; cars[2] = "Hyundai";
but when I try to reassign it at single time like cars = ["Toyota" , "Honda" , "Hyundai"] , it throws an error. I am not able to understand the mutability vs reassigning concept here.

const str = 'abcd';
str = 'changed'; //error
const list = [1,2,3]; // Assume this array is created on memory loc 0x001 (imaginary)
list[0] = 200; // no error here the memory location remains constant but the content changes.
list = [6,4,2]; // error Here new assignment hence memory location changes so error
Arrays or objects are mapped by location and not value compared to strings/numbers.

The keyword const is a little misleading.
It does NOT define a constant value. It defines a constant reference to a value.
Because of this, we cannot change constant primitive values, but we can change the properties of constant objects.
read more: https://www.w3schools.com/js/js_const.asp
once const is declared it can only point to that specific data, you can change things within this data but you can't tell it to point elsewhere.
When you declare the variable as const it assigns it a place in memory and says "you may only look here for data!" it does not say "this is the only data you can read", thus you can change the data in that location but you can not give it a whole new set of data as this would exist somewhere else in memory.

When you are assigning to variable cars you are basically trying to change it's reference which violates const but when you are trying to modify a value(example cars[0]='some value') in cars it's reference is still the same, value is changed, you need to understand that reference of object cars still remains same.

javascript variable changing value after changes in original variable

I am having trouble maintaining the original value of a variable after making new changes to the original variable.
Code:
(...)
data = Illumination.calculate_N(data)
data = Illumination.calculate_pi(data)
data = Illumination.calculate_kwh(data)
data = Illumination.calculate_ca(data)
let data_base = data
let ca_base = data.ca
let kwh_base = data.kwh
let pi_base = data.pi
(...)
data = Illumination.calculate_N(data)
data = Illumination.calculate_pi(data)
data = Illumination.calculate_kwh(data)
data = Illumination.calculate_ca(data)
let data_proposto = data
let ca_proposto = data.ca
let kwh_proposto = data.kwh
let pi_proposto = data.pi
-----------------------------------
EXAMPLE:
static calculate_ai(data){
data.ai = data.areaTotal*data.au
return data
}
It was expected that the original variable (date) would have its values ​​changed, and this happens correctly, however, the variables data_base and data_proposto are not keeping their values
Both variables at the end of the calculation have the same values ​​as the variable date
The variables ca_proposto, ca_base, and the like store their values ​​correctly
Any idea?
The only interactions of the variables data_base and data_proposto were their creations with the data variable and their return of the function
OBS: If I use console.log () to view the value of the data_base variable before redoing the new calculations (Illumination.calculate_N (data)), the value of the variable appears correctly as it should, it is changed shortly after these calculations.

Because in both cases you are assigning not the object itself in the current state, but a reference to that object. What you need to do is to clone the object so the state is frozen at that point.
Simple Clone (Shallow Copy)
let data_base = Object.assign({}, data); //you get a clone of data
let data_proposto = Object.assign({}, data);
The limitation here is that it only does a shallow copy. See Deep Copy below for further explanation.
JSON Clone
This is a quick-and-dirty way to clone as it converts a JSON object to a string, and then back. i.e. you are no longer getting a reference, but a new object.
let data_base = JSON.parse(JSON.stringify(data));
let data_postero = JSON.parse(JSON.stringify(data));
But this won't work if your object is not JSON-safe.
Deep Copy
The least elegant method is probably safest. It deep copies the properties over into a new object. The key difference with Object.assign() is that it copies the values of nested properties, whereas Object.assign() copies the reference to nested objects.
So with Object.assign() any subsequent changes in your nested objects will affect all versions of your "clones". This won't happen if your clones only have property values of those nested objects at the time of cloning – these values are not affected by any changes to the nested objects.
const deepCopy = function(src) {
let target = {};
// using for/in on object also returns prototype properties
for (let prop in src) {
// .hasOwnProperty() filters out these prototype properties.
if (src.hasOwnProperty(prop)) {
target[prop] = src[prop]; //iteratively copies over values, not references
}
}
return target;
}
let data_base = deepCopy(data);
let data_postero = deepCopy(data);

#chatnoir Defined the problem very well, But I do not agree with his JSON serialization solution due to the below probleam:
You will lose any Javascript property that has no equivalent type in
JSON, like Function or Infinity. Any property that’s assigned to
undefined will be ignored by JSON.stringify, causing them to be missed
on the cloned object.
My suggestion to perform deep copy is to rely on a library that’s well
tested, very popular and carefully maintained: Lodash.
Lodash offers the very convenient clone and deepclone functions to perform shallow and deep cloning.
Lodash has this nice feature: you can import single functions separately in your project to reduce a lot the size of the dependency.
Please find the running sample code here: https://glitch.com/edit/#!/flavio-lodash-clone-shallow-deep?path=server.js:1:0

You are using the same variable data inside and outside functions.
ie; data is in the global scope.
static calculate_ai(data){
data.ai = data.areaTotal*data.au
return data
}
even though you are expecting the scope of the variable data inside the method calculate_ai to be limited to that method, it is not the case. data is in global scope and therefore, the value changes inside the method for the variable affects outside as well.
An effective solution is to use a different variable inside the method.

A variable is like an octopus tentacle, and not as a box (as it’s commonly described). In this analogy, the variable's name can be thought of as the name of a tentacle.
A variable (tentacle) holds on to a value in what’s called a binding. A binding is an association of a variable to a value: x = 1.
In JavaScript, if a variable b holds on to variable a, changing the value to which variable a holds onto, will change the value to which variable b holds onto, as b and a are referencing to the same value:
let a = {key: 1}
let b = a
console.log(`a: ${a.key}`) // -> 1
console.log(`b: ${b.key}`) // -> 1
a.key = 2
console.log(`a: ${a.key}`) // -> 2
console.log(`b: ${b.key}`) // -> 2
a = {key: 3} // This will point variable 'a' to a new object, while variable 'b' still points to the original object.
console.log(`a: ${a.key}`) // -> 3
console.log(`b: ${b.key}`) // -> 2

How can I prevent changes on the objects returned by the module functions from changing the module data itself in Javascript?

I am working with Node for the first time and I have two modules. One module defines an array of objects, and also has functions that are exported for use in the other module - including lookupbyID, lookupbyLastName, and addEmployee.
My issue is that when I call the functions from module 1 in module 2, which return objects from the original array and assign those objects to a variable, and then I modify that variable, it modifies the original data. Please see the following code:
Module 1:
const us = require('underscore')
var data = [
{id:1, firstName:'John', lastName:'Smith'},
{id:2, firstName:'Jane', lastName:'Smith'},
{id:3, firstName:'John', lastName:'Doe'},
]
exports.lookupByID = function (given_id) {
var found_id = us.findWhere(data, {id:given_id});
return found_id;
}
Module 2:
const employeeFunctions = require("./employeeModule");
var id_2_answer = employeeFunctions.lookupByID(2);
id_2_answer.firstName = 'Mary'
console.log(employeeFunctions.lookupByID(2))
As you can see, I changed the name of Jane to Mary. Even though I assigned the object to a variable, changing the variable changed the original object data, which I verified by printing the lookupbyID function a second time.
Can you help me understand why this happens? Can you help me understand possible ways to prevent this from happening? I would like to be able to assign the object to a variable, and be able to change the values within the variable without affecting the original data.
Thank you!

In js objects are assigned by reference so:
var foo = {bar:1};
var baz = foo;
baz.bar; // 1
baz.bar = 2;
foo.bar; // 2
Use Object.assign to clone objects instead:
var foo = {bar:1};
var baz = Object.assign({}, foo);
baz.bar; // 1
baz.bar = 2;
foo.bar; // 1

The short answer is that you can't - you've hit on a key aspect of programming: value vs reference. You can read more about it here but the long and short of it is that both of these variables point to the same object in memory, so changing it for one changes it for the other.
The solution will necessarily involve creating a new object - the neatest way is probably to use Object.assign to copy over values, but bear in mind that in your example, you'll probably need to delete your old entry too.

javascript primitives vs object references

I've been using JavaScript for years and this one has me stumped. As I understood things, when defining a var, one of two things will happen:
If the expression is a primitive, var is defined as a new instance of that primitive with no reference to the passed expression.
If the expression is an object literal, a new object is created.
If the expression is an existing object, var will reference the object and any future changes to the object will be reflected.
However, I've run into a situation where case 3 doesn't apply:
var obj = {body: {'a': 1, 'b': 2, 'c': 3}};
var ref = obj.body;
ref = JSON.stringify(ref);
console.log(typeof ref); // string
console.log(typeof obj.body); // object
Since ref is defined as the body property of obj, I thought redefining ref as a string also would affect obj.body. So what am I missing?

JSON.stringify is a method which takes an object and returns its string representation, it doesn't change anything. By doing ref = x you make ref point to another thing, it doesn't affect what was there before assignment.

That simply means, you are no more referencing obj.body.body and referencing to something else.
var ref = obj.body;
//ref holding obj.body now any changes to ref will effect obj.body.
ref = JSON.stringify(ref);
//ref holding a String returned by `stringify()` now any changes to ref will effect obj.body.
You see ?? You just changing the ref with different values. Not really changing anything on obj

Primitives are immutable. If there’s a difference in how they would behave compared to objects, you can’t observe that, so forget all that stuff about copying. Let’s talk instead in terms of “things”! Objects and primitives are both things. When you assign a thing to a variable, you are not copying the thing.
var x = literally any value;
var y = x;
x and y are both variables that contain the same thing. If you change the thing, it doesn’t matter where you access it from in the future; the thing changed. If you change the thing the variable contains, the thing it contained before is not affected.
var z = some other value;
y = z; // y now contains the same thing as z instead of the same thing as x
// only variables changed, and the things did not
There are a lot of answers that talk about this in other terms but I enjoy technical language.
tl;dr: For all intents and purposes, the distinction between objects and primitives in JavaScript is not a useful one.
ts;iwrse: This article about Python applies to JavaScript just as much.

Arrays in JavaScript

While reading a book about JavaScript I stumbled across an example:
var names = new Array("Paul","Catherine","Steve");
var ages = new Array(31,29,34);
var concatArray;
concatArray = names.concat(ages);
My question is, why doesn't the variable concatArray need to be define as a new Array() in order to store the concatenated data for both arrays name and ages , but when I try to treat the concatArray as an array by adding another line of code "document.write(concatArray[0])", it works just like an array and shows me the data stored in the first element. I just wonder why I'm not declaring the concatArray as a new array, yet it still works as one.

You are declaring concatArray as a new array but the declaration is implicit. The concat function returns a new array which contains concatenated copies of the original two arrays. The type of concatArray is inferred from the return type of the concat function.

Variable don’t have a specific data type in Javascript like in other languages. You can assign a variable every value you want.
That means var concatArray; declares the variable but the value is undefined:
var concatArray;
alert(typeof concatArray === "undefined");
Only when assigning the return value of names.concat(ages) (an array) to concatArray it get’s that type:
var names = new Array("Paul","Catherine","Steve");
var ages = new Array(31,29,34);
var concatArray;
alert(typeof concatArray === "undefined");
concatArray = names.concat(ages);
alert(concatArray.constructor === Array);

Javascript doesn't care what the contents of the var are when it is declared; that is why you can declare var concatArray without needing to specify it as an array. Once you assign it a value and a type (as the result of the concat() function) javascript treats the var as an array.

Simply put, w3schools says it pretty concisely:
The concat() method is used to join two or more arrays.
This method does not change the existing arrays, it only returns a copy of the joined arrays.
w3schools
Looks like Andrew and Matthew beat me to it anyway.

Because Javascript is dynamically typed. A variable doesn't have a specifuc type, and an array is an object that you can assign to any variable.
When you declare a variable without assigning it a value, it just exists with an undefined value:
var answer;
// now the variable exists, but it doesn't have a value
answer = 42;
// now the variable has the numerical value 42
answer = "hello";
// now the numerical value has been replaced with the string value "hello"
answer = [];
// now the variable contains an empty array
answer[0] = 1337;
// now the variable contains an array that contains an item with the value 1337
answer = -1
// now the array is gone and the variable contains the value -1

I would make an answer slightly different of Andrew's one.
JavaScript variables are not strongly typed. You can put a string, then a number, then an object in the same variable. When you use the variable, the interpreter checks its current type is suitable for the usage you try to make. If you write:
var a = 45;
alert(a[0]);
a = [ 5 ];
alert(a[0]);
you will get successively undefined then 5.