[Duda] diferencia entre variable y referencia

Cuando hablamos de pasar una variable por valor y por referencia, nos referimos a pasar una variable usando un valor primitivo o un valor no primitivo. Los tipos primitivos en JavaScript son aquellos valores que no son un objeto y tampoco tienen métodos. Además, los tipos primitivos son valores inmutables (no se pueden modificar).

Tipo de Valores Primitivos en JS ( undefined, null, number, string, boolean )

Entonces, pasar una variable por valor se refiere a asignarle uno de los siete elementos con valores primitivos de JavaScript. Por su parte, pasar una variable por referencia quiere decir que estamos asignándole un elemento con un valor no primitivo, sea un objeto, un array o una función.

La diferencia entre pasar una variable por valor y por referencia en JavaScript es su relación con lo que sucede dentro y fuera de la función. Cuando pasamos una variable por referencia, lo que "ocurre" dentro de la función "repercute" fuera de ella. Mientras tanto, cuando pasamos una variable por valor, lo que "ocurre" dentro de la función, "se queda" en la función, sin alterar el resto del código.

Un ejemplo es cuando generamos un codigo usado valores primitivos, (le pasamos un valor).

let numero = 21;

const funcionValor = (value) => {

value = value * 10;

console.log (‘Dentro de la función, value es ${value}’);

}

funcionValor (numero);

console.log (‘Fuera de la función, value es ${numero}’);

Entonces, como hemos pasado la variable value por un valor primitivo (es decir, por valor), lo que suceda dentro de la función "se queda" dentro de ella y no afecta lo que se pinta fuera de la misma. Dentro de la funcion vale 210 y fuera de la funcion 21

Ahora, una función con una variable pasada por referencia. Un array funciona como referencia.

let arrNumeros = [numero]

const funcionReferencia = (value) => {

value [0] * 10;

console.log (‘Dentro de la función, value [0] es ${value[0]}’);

}

funcionReferencia (arrNumeros)

console.log (‘Fuera de la función, arrNumeros [0] es ${arrNumeros [0]}’);

Como esta variable ha sido pasada por un array (es decir, por referencia), lo que sucede dentro de la función repercute en lo que se pinta fuera de ella

Dentro de la funcion, value [0] es 210Fuera de la funcion [0] es 210