DEV Community

Cover image for values and references in javascript
Erick Sosa Garcia
Erick Sosa Garcia

Posted on

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 // ??
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode
  • 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- 
Enter fullscreen mode Exit fullscreen mode
  • booleans: this represent two value true or false
const on = true;
const off = false;
Enter fullscreen mode Exit fullscreen mode
  • null: is used to represent that a variable is empty or has no value.
const myNull = null;
Enter fullscreen mode Exit fullscreen mode
  • 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 
Enter fullscreen mode Exit fullscreen mode
  • symbol: symbols allow us to create unique, immutable and unrepeatable values.
const symb1 = Symbol("foo");
const symb2 = Symbol("foo");

symb1 === symb2 // false
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode
  • arrays: These represent a set of data organized according to its position
const arr = [true, 10, "hello", [], { name: "jhon" }];

arr[0] // true
Enter fullscreen mode Exit fullscreen mode
  • 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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)