{"id":14198,"date":"2024-10-01T19:35:16","date_gmt":"2024-10-01T17:35:16","guid":{"rendered":"https:\/\/xn--nicols-tta.es\/?p=14198"},"modified":"2024-10-01T19:35:16","modified_gmt":"2024-10-01T17:35:16","slug":"javascript-moderno","status":"publish","type":"post","link":"https:\/\/nicolas.cat\/blogdnicolas\/2024\/10\/01\/javascript-moderno\/","title":{"rendered":"JavaScript Moderno"},"content":{"rendered":"\n

JavaScript Moderno Gu\u00eda Definitiva<\/h2>\n\n\n\n

JavaScript Moderno \u2013 Imports, Exports, Let, Const, y Promesas en ES6+<\/h3>\n\n\n\n\n\n\n\n
\"\"<\/figure>\n\n\n\n

Durante los \u00faltimos a\u00f1os han habido muchas actualizaciones en el lenguaje de JavaScript. Siendo estas muy \u00fatiles para los que buscan mejorar como programador.<\/p>\n\n\n\n

Mantenerse al d\u00eda con los nuevos desarrollos del lenguaje es realmente importante. Puede ayudarte a conseguir un trabajo mejor remunerado, mantenerte actualizado con las ultimas tendencias, mejorar la calidad de tu c\u00f3digo, y sobresalir en tu trabajo actual.<\/p>\n\n\n\n

Y sin lugar a dudas necesitas conocer las funcionalides m\u00e1s recientes si est\u00e1s tratando de aprender una librer\u00eda de JavaScript como React o un framework como Angular o Vue.<\/p>\n\n\n\n

Recientemente, el lenguaje de JavaScript ha recibido muchas adiciones \u00fatiles, como encadenamiento opcional<\/strong>, promesas<\/strong>, async\/await<\/strong>, desestructuraci\u00f3n<\/strong>, y m\u00e1s.<\/p>\n\n\n\n

Hoy veremos algunos de estos conceptos, los cuales todo desarrollador de JavaScript deber\u00eda conocer.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

\u00a1Empecemos!<\/p>\n\n\n\n

Let y const en JavaScript<\/strong><\/h2>\n\n\n\n

Antes de ES6, JavaScript usaba la palabra clave var<\/code> la cual solo cuenta con un \u00e1mbito global o funcional. El \u00e1mbito de bloque no exist\u00eda.<\/p>\n\n\n\n

Con la adici\u00f3n de let<\/code> y const<\/code> JavaScript incorpor\u00f3 este \u00faltimo.<\/p>\n\n\n\n

Como usar let en JavaScript<\/strong><\/h3>\n\n\n\n

Cuando declaramos una variable usando la palabra clave let<\/code>, podemos asignar <\/strong>m\u00e1s tarde un nuevo valor a dicha variable, pero no podemos re-declararla<\/strong> con el mismo nombre.<\/p>\n\n\n\n

\/\/ C\u00f3digo ES5
var valor = 10;
console.log(valor); \/\/ 10

var valor = \u00abhola\u00bb;
console.log(valor); \/\/ hola

var valor = 30;
console.log(valor); \/\/ 30
<\/p><\/blockquote><\/figure>\n\n\n\n

Como puedes ver arriba, hemos vuelto a declarar la variable valor<\/code> usando la palabra clave var<\/code> repetidas veces.<\/p>\n\n\n\n

Antes de ES6, pudimos volver a declarar una variable que ya hab\u00eda sido declarada antes si esta no se usaba de manera significativa y en cambio causaba confusi\u00f3n.<\/p>\n\n\n\n

Pero, \u00bfy si ya tuvi\u00e9ramos una variable declarada con el mismo nombre en otro lugar y la volvemos a declarar sin darnos cuenta? Entonces podr\u00edamos sobrescribir el valor de la variable, causando algunos problemas dif\u00edciles de depurar.<\/p>\n\n\n\n

Usando la palabra clave let<\/code>, si intentas volver a declarar la variable con el mismo nombre obtendr\u00e1s un error \u2013 lo cual es bueno.<\/p>\n\n\n\n

\/\/ C\u00f3digo ES6
let valor = 10;
console.log(valor); \/\/ 10

let valor = \u00abhola\u00bb; \/\/ Uncaught SyntaxError: Identifier ‘valor’ has already been declared
<\/p><\/blockquote><\/figure>\n\n\n\n

Pero, el siguiente c\u00f3digo es v\u00e1lido:<\/p>\n\n\n\n

\/\/ C\u00f3digo ES6
let valor = 10;
console.log(valor); \/\/ 10

valor = \u00abhola\u00bb;
console.log(valor); \/\/ hola
<\/p><\/blockquote><\/figure>\n\n\n\n

No obtenemos un error en el c\u00f3digo anterior porque estamos re-asignando<\/strong> un nuevo valor a la variable valor<\/code>. Pero no <\/strong>estamos re-declarando<\/strong> valor<\/code> de nuevo.<\/p>\n\n\n\n

Ahora, observa el siguiente c\u00f3digo:<\/p>\n\n\n\n

\/\/ C\u00f3digo ES5
var esValido = true;
if(esValido) {
var numero = 10;
console.log(‘dentro:’, numero); \/\/ dentro: 10
}
console.log(‘fuera:’, numero); \/\/ fuera: 10
<\/p><\/blockquote><\/figure>\n\n\n\n

Como puedes ver en este c\u00f3digo, cuando declaramos una variable con la palabra clave var<\/code>, esta se encuentra disponible dentro y fuera del bloque if<\/code>.<\/p>\n\n\n\n

Ahora, observa el siguiente c\u00f3digo:<\/p>\n\n\n\n

\/\/ ES6 Code
let esValido = true;
if(esValido) {
let numero = 10;
console.log(‘dentro:’, numero); \/\/ dentro: 10
}

console.log(‘fuera:’, numero); \/\/ Uncaught ReferenceError: numero is not defined
<\/p><\/blockquote><\/figure>\n\n\n\n

Como puedes ver, al declarar la variable numero<\/code> usando la palabra clave let<\/code> esta solo es accesible dentro del bloque if<\/code>. No est\u00e1 disponible fuera del bloque, por lo que obtuvimos un error de referencia cuando intentamos acceder a ella fuera del bloque if<\/code>.<\/p>\n\n\n\n

Pero si hay una variable numero<\/code> fuera del bloque if<\/code>, funcionar\u00e1 como se muestra a continuaci\u00f3n:<\/p>\n\n\n\n

\/\/ C\u00f3digo ES6
let esValido = true;
let numero = 20;

if(esValido) {
let numero = 10;
console.log(‘dentro:’, numero); \/\/ dentro: 10
}

console.log(‘fuera:’, numero); \/\/ fuera: 20
<\/p><\/blockquote><\/figure>\n\n\n\n

En este caso tenemos dos variables numero<\/code> con un \u00e1mbito distinto. Por lo que fuera del bloque if<\/code>, el valor numero<\/code> ser\u00e1 20.<\/p>\n\n\n\n

Observa el siguiente c\u00f3digo:<\/p>\n\n\n\n

\/\/ C\u00f3digo ES5
for(var i = 0; i < 10; i++){
console.log(i);
}
console.log(‘fuera:’, i); \/\/ 10
<\/p><\/blockquote><\/figure>\n\n\n\n

Al usar la palabra clave var<\/code>, i<\/code> est\u00e1 disponible incluso fuera del bucle for<\/code>.<\/p>\n\n\n\n

\/\/ C\u00f3digo ES6
for(let i = 0; i < 10; i++){
console.log(i);
}

console.log(‘fuera:’, i); \/\/ Uncaught ReferenceError: i is not defined
<\/p><\/blockquote><\/figure>\n\n\n\n

En cambio al usar let<\/code>, esta no est\u00e1 disponible fuera del bucle.<\/p>\n\n\n\n

Entonces como pudiste ver en los ejemplos de c\u00f3digo anteriores, usar let<\/code> hace la variable accesible solo dentro de ese bloque y no desde fuera del mismo.<\/p>\n\n\n\n

Tambi\u00e9n podemos crear un bloque con un par de llaves como esta:<\/p>\n\n\n\n

let i = 10;
{
let i = 20;
console.log(‘dentro:’, i); \/\/ dentro: 20
i = 30;
console.log(‘i de nuevo:’, i); \/\/ i de nuevo: 30
}

console.log(‘fuera:’, i); \/\/ fuera: 10
<\/p><\/blockquote><\/figure>\n\n\n\n

Si recuerdas, coment\u00e9 que no podemos re-declarar una variable basada en let<\/code> en el mismo bloque, pero podemos re-declararla en otro bloque. Como puedes ver en el c\u00f3digo anterior, re-declaramos i<\/code> y asignamos un nuevo valor de 20<\/code> dentro del bloque. Una vez declarada, ese valor de la variable estar\u00e1 disponible solo en ese bloque.<\/p>\n\n\n\n

Fuera del bloque, cuando imprimimos esa variable, obtuvimos 10<\/code> en lugar de 30<\/code> que fue el valor previamente asignado, ya que fuera del bloque la variable interior i<\/code> no existe.<\/p>\n\n\n\n

Si no tenemos la variable i<\/code> declarada afuera, obtendremos un error como puedes ver en el siguiente c\u00f3digo:<\/p>\n\n\n\n

{
let i = 20;
console.log(‘dentro:’, i); \/\/ dentro: 20
i = 30;
console.log(‘i de nuevo:’, i); \/\/ i de nuevo: 30
}

console.log(‘fuera:’, i); \/\/ Uncaught ReferenceError: i is not defined
<\/p><\/blockquote><\/figure>\n\n\n\n

Como usar const en JavaScript<\/strong><\/h3>\n\n\n\n

La palabra clave const<\/code> funciona exactamente igual que la palabra clave let<\/code> en cuanto a su \u00e1mbito de bloque. As\u00ed que veamos c\u00f3mo se diferencian entre s\u00ed.<\/p>\n\n\n\n

Cuando declaramos una variable como const<\/code>, esta se considera una variable constante cuyo valor nunca cambiar\u00e1.<\/p>\n\n\n\n

En el caso de let<\/code>, podemos asignar mas adelante un nuevo valor a esa variable de esta manera:<\/p>\n\n\n\n

let numero = 10;
numero = 20;

console.log(numero); \/\/ 20
<\/p><\/blockquote><\/figure>\n\n\n\n

Pero no podemos hacer eso en el caso de const<\/code>:<\/p>\n\n\n\n

const numero = 10;
numero = 20; \/\/ Uncaught TypeError: Assignment to constant variable.
<\/p><\/blockquote><\/figure>\n\n\n\n

const numero = 20;
console.log(numero); \/\/ 20

const numero = 10; \/\/ Uncaught SyntaxError: Identifier ‘numero’ has already been declared
<\/p><\/blockquote><\/figure>\n\n\n\n

Ni siquiera podemos re-declarar<\/strong> una variable const<\/code>.<\/p>\n\n\n\n

Ahora, observa el siguiente c\u00f3digo:<\/p>\n\n\n\n

const arr = [1, 2, 3, 4];

arr.push(5);

console.log(arr); \/\/ [1, 2, 3, 4, 5]
<\/p><\/blockquote><\/figure>\n\n\n\n

Hemos dicho que la variable const<\/code> es una constante cuyo valor nunca cambiar\u00e1 \u2013 pero acabamos de hacer un cambio en un arreglo definido como constante. Entonces, \u00bfqu\u00e9 sentido tiene eso?<\/p>\n\n\n\n

\n

Nota: En JavaScript los arreglos son de tipo referencia y no de tipo primitivo.<\/p>\n<\/blockquote>\n\n\n\n

As\u00ed que lo que realmente se almacena en arr<\/code> no es el arreglo real, sino una referencia (direcci\u00f3n) de la ubicaci\u00f3n en la memoria donde se encuentra almacenado el arreglo real.<\/p>\n\n\n\n

Entonces haciendo arr.push(5);<\/code> no estamos cambiando la referencia a la que apunta arr<\/code>, pero estamos cambiando los valores almacenados en ella.<\/p>\n\n\n\n

Con objetos tenemos el mismo caso:<\/p>\n\n\n\n

const obj = {
nombre: ‘David’,
edad: 30
};

obj.edad = 40;

console.log(obj); \/\/ { nombre: ‘David’, edad: 40 }
<\/p><\/blockquote><\/figure>\n\n\n\n

Aqu\u00ed tampoco estamos cambiando la referencia donde apunta obj<\/code>, sino los valores almacenados en ella.<\/p>\n\n\n\n

De tal manera que el c\u00f3digo anterior funcionar\u00e1, pero el siguiente no.<\/p>\n\n\n\n

const obj = { nombre: ‘David’, edad: 30 };
const obj1 = { nombre: ‘Mike’, edad: 40 };
obj = obj1; \/\/ Uncaught TypeError: Assignment to constant variable.
<\/p><\/blockquote><\/figure>\n\n\n\n

El c\u00f3digo anterior no funciona porque estamos intentando cambiar la referencia a la que apunta la variable const<\/code>.<\/p>\n\n\n\n

As\u00ed que el punto clave a recordar cuando usamos const<\/code> es que, si declaramos la variable como constante, no podemos re-definirla. Tampoco podemos re-asignar esa variable, pero podemos cambiar los valores almacenados en la misma si esta es de tipo referencia.<\/p>\n\n\n\n

Por lo tanto, el siguiente c\u00f3digo no es v\u00e1lido porque le estamos reasignando un nuevo valor.<\/p>\n\n\n\n

const arr = [1, 2, 3, 4];
arr = [10, 20, 30]; \/\/ Uncaught TypeError: Assignment to constant variable.
<\/p><\/blockquote><\/figure>\n\n\n\n

Pero ten en cuenta que podemos cambiar los valores dentro del arreglo, como vimos anteriormente.<\/p>\n\n\n\n

El siguiente c\u00f3digo para re-definir una variable const<\/code> tambi\u00e9n es inv\u00e1lido.<\/p>\n\n\n\n

const nombre = \u00abDavid\u00bb;
const nombre = \u00abRaj\u00bb; \/\/ Uncaught SyntaxError: Identifier ‘nombre’ has already been declared
<\/p><\/blockquote><\/figure>\n\n\n\n

Resumen de let y const<\/strong><\/h3>\n\n\n\n
\n