values and references in javascript

a very important concept that every javascript developer should know is values ​​and value references, If you are a javascript developer, here is this question for you: If I declare a variable named name1 and assign the value jhon and then create another variable with name name2 and assign it the value of name1, is a link created between these two variables? Or what happens if I then change the value of name1, will it affect name2?
example

let name1 = "jhon";
let name2 = name1; // "jhon"
let name1 = "jhon doe";
name2 // ??

the first thing where we must start knowing the two groups in which we can divide the data in javascript: primitive values and objects.

within the primitive values ​​we have:

• string: to represent text strings

const dog = "woff";

• number: to represent both integer values ​​as well as decimal or floating point values ​​and other data that are considered of type number.

const intValue = 10;
const floatValue = 3.14;
// others that are evaluated as type number
NaN
Infinity+, Infinity- 

• booleans: this represent two value true or false

const on = true;
const off = false;

• null: is used to represent that a variable is empty or has no value.

const myNull = null;

• undefined: undefined is a special data that represents a non-existent data, and it is the value that is assigned to a variable when we define it and we do not add a value to it and it is also the data that returns a function that does not return anything.

let name;

name // undefined 

• symbol: symbols allow us to create unique, immutable and unrepeatable values.

const symb1 = Symbol("foo");
const symb2 = Symbol("foo");

symb1 === symb2 // false

• bigInt: and in the latest versions of the language, the bigInt data type is incorporated to represent integer values ​​as large as we want.

const big = 10n;
const normal = 10;

big === normal // false

within the object values ​​we have:

• literal object: this represents a data set in key and value.

const car = {
 color: "red",
 model: "tesla",
 year: 2020
}

• arrays: These represent a set of data organized according to its position

const arr = [true, 10, "hello", [], { name: "jhon" }];

arr[0] // true

• functions: functions in javascript are objects, but note that when using the typeof operator it will return Function as the data type

const myFun = () => true;

function App() {
  return true;
}

typeof App // "Function"

Having said all this I think we can start

When we work with primitive data and assign it from one variable to another javascript makes a copy of this.

let foo = 10;

let bar = foo;

foo = 20;

bar // 10

Even if we change the value of foo, the variable bar will still have the value 10, since it does not even know that the variable foo was changed in value.

but with non-primitive data javascript behaves in a different way. with non-primitive data javascript instead of making a copy of the data as it happens with the primitive data, javascript passes a reference of this.

let person1 = { name: "john" };

let person2 = person1;

person2.name = "carl";

person1.name // carl

in this case javascript passes a reference which points to the memory space in which the data is stored (as if it were a pointer) so if the value of person1 is modified it will be reflected in person2 and in the same way if person2 Modify the data of the object this will also be reflected in person1 since both variables are pointing to the same reference of the data.

so when we are working with primitive data and objects in javascript we must take into account the aforementioned, this will help to better understand how javascript works and helps us find bugs and errors more quickly.