Regálate acceso ilimitado a todos los cursos por 1 año a precio especial de Navidad 🎄

Antes: $199

Currency
$149/año
regístrate

termina en:

16D
14H
51M
8S

ES6: let y const, y arrow functions

5/38
Recursos

En ECMAScript 6 (ES6 o ES2015) fueron publicadas varias características nuevas que dotaron de gran poder al lenguaje, dos de estas son una nueva forma de declaración de variables con let y const, y funciones flechas.

La nueva forma para declarar variables con let y const

Hasta ahora aprendiste a declarar variables con var, sin embargo, a partir de la especificación de ES6 se agregaron nuevas formas para la declaración de variables.

Las nuevas palabras reservadas let y const resuelven varios problemas con var como el scope, hoisting, variables globales, re-declaración y re-asignación de variables.

Variables re-declaradas y re-asignadas

La re-declaración es volver a declarar una variable, y la re-asignación es volver a asignar un valor. Entonces cada palabra reservada tiene una forma diferente de manejar variables:

  • Una variable declarada con var puede ser re-declarada y re-asignada.
  • Una variable declarada con let puede ser re-asignada, pero no re-declarada.
  • Una variable declarada con const no puede ser re-declarada, ni re-asignada. Su declaración y asignación debe ser en una línea, caso contrario habrá un error.

En conclusión, si intentas re-declarar una variable declarada con let y const habrá un error de “variable ya declarada”; por otro lado, si intentas re-asignar una variable declarada con const existirá un “error de tipo”.

En los demás casos, JavaScript lo aceptará como válidos, algo problemático con var, por eso deja de utilizarlo.

Ejemplo de declaración y asignación en diferentes líneas

// Declaración de variables
var nameVar 
let nameLet

// Asignación de variables
nameVar= "soy var"
nameLet = "soy let"

Aunque realmente lo que pasa si no asignas un valor en la declaración, JavaScript le asigna un valor undefined.

Ejemplo de declarar y asignar con const en diferentes líneas de código

const pi  // SyntaxError: Missing initializer in const declaration.
pi = 3.14

Ejemplo de re-declaración de variables

var nameVar = "soy var"
let nameLet = "soy let"
const nameConst = "soy const"

// Re-declaración de variables
var nameVar = "var soy" 
console.log(nameVar) // 'var soy'

let nameLet = "let soy" // SyntaxError: Identifier 'nameLet' has already been declared.

const nameConst = "const soy" //SyntaxError: Identifier 'nameConst' has already been declared.

Ejemplo de re-asignación de variables

var nameVar = "soy var"
let nameLet = "soy let"
const nameConst = "soy const"

// Re-asignación de variables
nameVar = "otro var"
console.log(nameVar) // 'otro var'

nameLet = "otro let"
console.log(nameVar) // otro let'

nameConst = "otro const" //TypeError: Assignment to constant variable.

Ten en cuenta que los errores pararán la ejecución de tu programa.

Scope

En el tema del scope, let y const tienen un scope de bloque y var no.

{
var nameVar = "soy var"
let nameLet = "soy let"
}

console.log(nameVar) // 'soy var'
console.log(nameLet) // ReferenceError: nameLet is not defined

Todo el tema de Scope tiene su propio curso que deberías haber tomado: Curso de Closures y Scope en JavaScript

Objeto global

En variables globales, let y constno guardan sus variables en el objeto global (window, global o globalThis), mientras que var sí los guarda.

var nameVar = "soy var"
let nameLet = "soy let"
const nameConst = "soy const"

globalThis.nameVar   // 'soy var'
globalThis.nameLet   // undefined
globalThis.nameConst  // undefined

Esto es importante para que no exista re-declaración de variables.

Funciones flecha

Las funciones flecha (arrow functions) consiste en una función anónima con la siguiente estructura:

//Función tradicional
function nombre (parámetros) {
    return valorRetornado
}

//Función flecha
const nombre = (parámetros) => {
    return valorRetornado
}

Se denominan función flecha por el elemento => en su sintaxis.

Omitir paréntesis en las funciones flecha

Si existe un solo parámetro, puedes omitir los paréntesis.

const porDos = num => {
    return num * 2
}

Retorno implícito

Las funciones flecha tienen un retorno implícito, es decir, se puede omitir la palabra reservada return, para que el código sea escrito en una sola línea.

//Función tradicional
function suma (num1, num2) {
    return num1 + num2
}

//Función flecha
const suma = (num1, num2) => num1 + num2

Si el retorno requiere de más líneas y aún deseas utilizarlo de manera implícita, deberás envolver el cuerpo de la función entre paréntesis.

const suma = (num1, num2) => (
    num1 + num2
)

Contribución creada por Andrés Guano (Platzi Contributor).

Aportes 21

Preguntas 11

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Resúmen de las diferencias puntuales entre let, const y var

Desde que conozco las arrow functions no las quiero dejar de utilizar 😁 #TeamArrowFunctions

Esta imagen siempre me ayuda a ver esas diferencias de forma básica

ES6 (2015)

A partir de esta versión se hace referencia a “El gran cambio”

let & const

Nuevas palabras reservadas para guardar variables. Antes solo existía var.

// Acá estamos declarando y asignando el valor
var lastName = 'David';
// Acá reasignamos el valor de la variable lastName
lastName = 'David';

// Declaramos y asignamos fruta pero con let
let fruit = 'Apple';
// Reasignamos el valor de fruta
fruit = 'Kiwi';

Let permite la reasignación de valores de una variable, con la particularidad de que solo tiene un alcance de bloque, mientras que var tiene un alcance global.
Sin embargo con const el valor no puede ser reasignado y también tiene alcance de bloque.

Todo lo que sea un bloque es lo que está entre llaves {}

Arrow Functions

Es una alternativa compacta para declarar una function.

su sintaxis es de la siguiente manera:

const nombreFunction = (parametros) => {
	bloque de funcionalidad
}

Para la gente curiosa que al igual que yo, les llamo la atención tener el símbolo de la flecha => al igual que Oscar, en su editor de texto, les dejo este enlace en donde varios usuarios explican como hacerlo!

https://stackoverflow.com/questions/59617766/what-is-the-vscode-extension-theme-symbolset-used-to-display-formatted-actually

Se trata de una fuente especialmente creada para desarrolladores llamada “Fira Code”, lo único que tienen que hacer es instalar la fuente en su dispositivo, seleccionarla como font-family en la configuración de su Visual Studio Code, y a su vez activar algo llamado “editor.fontLigatures” = true (editando el settings.JSON de vscode)

Todo esta explicado en el enlace, échenle un ojo si les agrada

var, let y const resumidos:

este tema me confunde acerca de los parametros y los argumentos nuevamente, si (num) no tiene valor aun, porque la llama argumento durante todo el video, y tambien porque en la pagina de mozzilla hacen lo mismo? no deberian estar llamandolo parámetro?

Hola [email protected] dejo mi codigo espero les sirva. 😃
ES6

  • LET Y CONST
//Declarar la variable lastName y esta siendo asignada a David//
var lastName = "David";
//Reasignar el valor que originalmente habiamos agregado ya que var es global//
lastName = "Oscar";
console.log(lastName);

// Declarando y asignando //
let fruit = "apple";
// Reasignamos ya que let tiene un alcanze de bloque //
fruit = "kiwi";
console.log(fruit);


const animal = "dog";
// No se puede reasignar un valor con const//
animal = "cat";
console-log(animal);


const fruits = () => {
    if(true) {
        var fruit1 = "Apple"; // function scope
        let fruit2 = "kiwi";  // block scope
        const fruit3 = "banana"; // block scope
    }
    console.log(fruit1);
    console.log(fruit2);
    console.log(fruit3);
}
fruits();
  • ARROW FUNCTIONS
function square(num) {
    return num * num;
}

const square = (num) => {
    return num * num;
}
// simplifica el codigo //
const square = num => num + num;

Esta info sobre Arrow Functions puede ayudar,
Cuándo usarlas y cuándo no:

Las funciones flecha o Arrow Functions no son solo una azúcar sintáctica para hacer mas fácil/elegante la declaración de función ordinaria. Hay considerables diferencias entre ambas que pueden hacer que un programa no funcione como se espera y no son intercambiables para muchos casos.

Por esto supongo que la pregunta completa es ¿cuando usarlas y cuando no?

¿Cuando usar Arrow Functions?
Sintaxis reducida de funciones puras.
En el siguiente bloque, son intercambiables por que son funciones puras (que su resultado no depende de una variable externa). En cuando performance, son prácticamente iguales.

// declaracion de funcion
var nombres = personas.map(function§{ return p.nombre });
// funcion flecha, este es un buen caso de uso
var nombres = personas.map(p => p.nombre);
Cuando quires que la función flecha se ejecute en el mismo lexical scope que la función contenedora:
Las funciones flecha se evalúan como parte del lexical scope que las contiene, por esto this y arguments no son instancias propias de la función flecha sino que son las instancias de la función contenedora. Este tipo de funciones no son intercambiables, deberás reescribir partes del cuerpo de la función si quieres cambiar de una sintaxis a la otra.

Considera este otro bloque:

// ECMAScript 5, usando una declaración de función.
function contadorDeSegundos() {
var that = this;
this.contar = 0;
setInterval(function() {
that.contar++;
}, 1000);
}

/// ECMAScript 2015, con arrow functions
function contadorDeSegundos() {
this.contar = 0;
setInterval(() => { this.contar++ }, 1000);
}
Como ves aquí otra vez el código es mas compacto, pero el comportamiento de this es muy diferente.

¿Cuando NO usar Arrow Functions?
Cuando necesites argumentos dinámicos:
Como ya se estableció, la funciones flecha no exponen el objeto arguments, por lo tanto si necesitas acceso al mismo no puedes utilizarlas. Ten en cuenta que si la función flecha la declaras dentro de otra función, estarías accediendo al arguments de la función contenedora (si hubiese una). Por eso se dice las funciones flecha utilizan lexical arguments. Es decir, que ven el objeto arguments que esta en el lexical scope.

A nivel global:

var f = () => { console.log(arguments.length) }
f();
// produce: Uncaught ReferenceError: arguments is not defined(…)
var f2 = function() { console.log(arguments.length) }
f2();
// produce: 0
En funciones generador:
La palabra clave yield no esta permitida en funciones flecha. Estas funciones no pueden ser funciones generador (sin embargo pueden contener funciones generador).

No había entendido las arrow functions inicialmente, así que fui a ver un par de videos, que tampoco entendí, fui a dormir, reposé un día y ahora que volví a ver la explicación me pareció muy sencillo.
A veces es necesario descansar para seguir aprendiendo amigos 😃

Recomendado; crear las funciones con const

ES6: let, const y arrow functions

  • Junio del 2015

Las variables son espacios en memoria en los cuales podemos guardar tipos de datos, funciones, objetos arrays y muchas más cosas.

Originalmente se usaba la palabra reservada, pero ya no es tan recomendable usarla por temas de scope o alcance

var

Por lo tanto en ES6 se implementaron nuevas formas de declarar variables y no solo variables si no también constantes.

Cuando usábamos var podíamos re-asignar una variable normalmente

var lastName = 'David';
lastName = 'Oscar';

Si hacemos lo mismo con let podemos tener el mismo resultado

let fruit = 'Apple';
fruit = 'Kiwi';

Pero mira lo que pasa cuando intentamos hacer esto con const

const animal = 'Dog';
animal = 'Cat'; // ERROR!

Es precisamente por que const es especialmente para valores que se mantendrán tanto con el mismo tipo de dato y el mismo valor.

Por lo cual no podemos alterar una constante por que es un valor que no cambia con el tiempo, como por ejemplo el nombre de una persona.

Hagamos un ejemplo en el cual vamos a entrar en varios bloques de código, recuerda que el scope de las variables se refiere en que ámbito se declara si es global o local

const fruits = () => {
	if (true) {
		var fruit1 = 'Apple';
		let fruit2 = 'Kiwi';
		const fruit3 = 'Banana';
	}
}

Ahora tenemos 2 variables declaradas 1 una constante vamos a mostrarlas en consola para ver los resultados

const fruits = () => {
	if (true) {
		var fruit1 = 'Apple';
		let fruit2 = 'Kiwi';
		const fruit3 = 'Banana';
	}
	console.log(fruit1);
	console.log(fruit2);
	console.log(fruit3);
}

Si ejecutas esta función tendrás un resultado en la consola primero diciendo “Apple” porque var no está en un contexto local sino global por lo cual se mostrará en consola, pero con let y const no veras un resultado si no un error diciendo que “fruit2 y fruit3” no están definidos porque let y const son de contexto bloque.

ReferenceError: fruit2 is not defined

Esta es una de las razones por las cuales var no se emplea mucho porque puede generar algunos errores y confusiones en tu código, para esto específicamente fueron introducidas let y const.

Arrow functions

Las arrow functions o funciones flecha tienen una sintaxis como esta

const nombre = (texto) => {
	return texto
};
nombre('Holap');

La sintaxis anterior es lo mismo que hacer esto

function nombre (texto) {
	return texto
};
nombre('Holap');

Parece un poco más larga no? pero ya verás como su sintaxis se irá haciendo más escalable y cómoda para nosotros, pero tienes que tener en cuenta que las funciones flecha no incluyen algunas funcionalidades que tienen las funciones declaradas con function.

Veamos algunas funciones extras de las arrow functions

  • Retorno directo

Cuándo quieres retornar solo 1 cosa y no tienes un bloque de código puedes retornar valores automáticamente de esta forma

const nombre = (texto) => texto;
nombre('Holap'); // Holap

La flecha se usa como valor de retorno directo de la función, así mismo lo hacemos en React cuando queremos retornar JSX solamente.

  • 1 solo parámetro

Cuando tienes 1 solo parámetro no es necesario poner los paréntesis por lo cual la sintaxis se reduce mas

const nombre = texto => texto;

nombre('Hoalp'); // Holap

Aquí les dejo un excelente video sobre las arrow function que te aclararan todas las dudas que tengas:

https://www.youtube.com/watch?v=c3LMuRmMonk&t=439s



//Las nuevas palabras reservadas para generar variables en JS 
//con el ecmascript6 introdujo cons y var

//Declarar, asignar y reasignar veremos que implica en cada uno. 

var lastname = "Lovelace"; //Declaramos e inicializamos(le asignamos un valor inicial).
lastname = "Camelo"; //Aquí lo que hacemos es reasignar. 
console.log(lastname);  //Output: Camelo

//Utilizamos let
let fruit = "apple"; 
fruit = "watermelon"; //Con let podemos reasignar pero dentro del mismo scope
console.log(fruit); //Output: watermelon

//Utilizamos const
const animal = "Lion"
animal = "Tiger" //Si reasignamos con la palabra reserveda const nos saldrá un error
console.log(animal); //Output TypeError: Assignment to constant variable.


Repositorio github del profe → Archivos manejados en la clase:

Para los que quieren el mismo color de letras, color de fondo y fuentes (más que todo en las flechas) de vscode que tiene nuestro buen profe oscar, es con la extensión de SynthWave '84, y para las flechas es mirando el repositorio de GitHub "Fira Code" (lean la documentación, en la parte de como instalar y como configurar en vscode)

https://github.com/tonsky/FiraCode

Principal ventaja de las arrow function

  1. Pueden ser más cortas
 function getRandomId(max){
    return Math.floor(Math.random() * (max - 1) + 1);
}

<code> 
const getRandomId = (max) =>  Math.floor(Math.random() * (max - 1) + 1)
<code> 

Apunte en Notion

Por que a veces debemos retornar una función así.() => { }
Y otras veces con () => ()

De qué depende esto ?

Con las llaves "{}" no regresas nada, solo puedes hacer lógica y tienes que poner un return explícito

Mientras que con los paréntesis ya estás retornando lo que pases por ahí

Un claro ejemplo son los componentes de react que puedes retornarlos con una estructura definida

Ejemplo

/* Tenemos un array */
let arr = [1,2,3,4]

/* Solo hacemos  logica  no tenemos un return */
let newArr  = arr.map((num) => {
  num * 2
})

// Esto no te retornaría nada, mientras que lo siguiente sí (con el return explicito)

let newArr  = arr.map((num) => {
 return num * 2
})

// Y lo anterior es lo mismo que lo siguiente 👇🏻

let newArr  = arr.map((num) => num * 2) 

Aprendiendo de los mejores

function square(num){
    return num * num;
}

const square = (num) => {
    return num * num;
}

const square = num => num * num;