ECMAScript 6 (ES6)

ECMAScript 6 (ES6) 1
¿Qué aprenderás? 2
Introducción 2
Alcance de variables declaradas let y var 3
Ejercicio guiado: Alcance de variables 6
Ejercicio propuesto (5) 8
Función Arrow 9
Ejercicio guiado: Arrow Functions 10
Ejercicio propuesto (6) 12
Comparativa entre ES5 y ES6 12

¡Comencemos!

_ 1

www.desafiolatam.com
¿Qué aprenderás?

● Desarrollar una rutina utilizando variables locales y globales para controlar

adecuadamente el alcance de la información en un programa.

● Desarrollar una función utilizando la notación de flecha de acuerdo al lenguaje ES6

para resolver un problema.

Introducción

La palabra ECMA es el acrónimo de European Computer Manufacturers Association y en el

año 1997 se creó un comité para estandarizar JavaScript desde entonces ECMAScript es el
estándar que nos indica cómo usar JavaScript. Hoy en día utilizamos la versión 6 (desde el
2015), pero la versión 5 estuvo tantos años que se convirtió en la versión más usada y tiene
un alto porcentaje de compatibilidad, al principio no todos los sistemas y plataformas
soportaban ES6 por lo que los transpiladores fueron de mucha ayuda.

Hoy en día gran parte de los sistemas y plataformas que existen soportan ES6. En el
siguiente capítulo, aprenderás algunas de las características implementadas en ES6 como el
alcance de las variables declaradas y las funciones flecha, que nos permiten tener un mejor
control de nuestro código y optimizar la legibilidad del mismo

_ 2

www.desafiolatam.com
Alcance de variables declaradas let y var

Antes de ES6 sólo se podían declarar variable usando var las cuales al momento de ser
usadas dejaban a nuestras variables disponibles fuera del contexto o bloque donde son
declaradas, debido a que var tiene ambiente de función, esto significa que cuando se
ejecuta el código y se detecta una variable var, JavaScript la "eleva" (hoisting), ¿qué quiere
decir esto? mejor veámoslo con un ejemplo.

Si tenemos el siguiente bloque de código:

for(var i = 0; i < 5; i++) {

console.log(i);
}

El interpretador de JavaScript al encontrarse con var i = 0 dentro del for la eleva dejando
el código así:

var i;
for(i = 0; i < 5; i++) {
console.log(i);
}

Por esta razón sucede lo que veremos a continuación:

for(var i = 0; i < 5; i++) {

console.log(i);
}
console.log(i + 2);

Veamos el resultado entregado:

0
1
2
3
4

_ 3

www.desafiolatam.com
Si observas el último console.log nos retornó 7, lo que significa que la variable i sigue
disponible fuera del contexto del ciclo for donde fue declarada.

Veamos qué pasa entonces cuando ejecutamos un ciclo for anidado. ¿Qué pasa con los
valores de la variable i?:

for (var i = 0; i <= 2; i++) {

console.log("Ciclo externo " + i);
for (var i = 0; i <= 2; i++) {
console.log("Ciclo interno " + i);
}
}

Al ejecutar este código esperaríamos la siguiente respuesta:

Ciclo externo 0
Ciclo interno 0
Ciclo externo 1
Ciclo interno 1
Ciclo externo 2
Ciclo interno 2

Pero la realidad es esta:

Ciclo externo 0
Ciclo interno 0
Ciclo interno 1
Ciclo interno 2

Esto sucede porque la variable i al terminar el ciclo interior con i=2 se mantiene con el
mismo valor en la siguiente iteración del ciclo externo.

Con ES6 nace la definición de variables con la palabra protegida let que permite definir
variables que solo existen dentro del contexto o bloque donde se declaró. Revisemos los
mismos ejemplos anteriores pero usando let en vez de var y veamos la diferencia en sus
resultados.

for(let i = 0; i < 5; i++) {

console.log(i);
}

_ 4

www.desafiolatam.com
 console.log(i + 2);

Veamos el resultado usando let:

0
1
2
3
4

ReferenceError: i is not defined

Si observas bien, ahora el console.log fuera del ciclo for indica que "la variable i no se ha
definido" y esto es por que sólo existe dentro del contexto del ciclo for y no fuera de él.
Veamos otro ejemplo implementando la variable de tipo let con un ciclo for anidado (uno
dentro de otro), en donde se muestra mediante un “console.log()” la variable declarada en el
primer ciclo for como ciclo externo y luego mediante un “console.log()” la variable i
declarada en el for como ciclo interno .

for (let i = 0; i <= 2; i++) {

console.log("Ciclo externo " + i);
for (let i = 0; i <= 2; i++) {
console.log("Ciclo interno " + i);
}
}

Al utilizar let, el valor se mantiene dentro del contexto donde se encuentra. Por lo tanto, al
revisar el resultado del código anterior, encontraríamos lo siguiente:

Ciclo externo 0
Ciclo interno 0
Ciclo interno 1
Ciclo interno 2
Ciclo externo 1
Ciclo interno 0
Ciclo interno 1
Ciclo interno 2
Ciclo externo 2
Ciclo interno 0
Ciclo interno 1
Ciclo interno 2

_ 5

www.desafiolatam.com
Como se puede observar en el resultado, la variable i del primer ciclo for no interviene en la
variable i del segundo ciclo for, por esta razón, el implementar variables con let nos
garantiza que dichas variables sólo serán válidas en su contexto y no tendrán injerencia en
otro contexto, como por ejemplo, otro ciclo anidado.

Veamos si quedó claro e intenta predecir el resultado de los console.log().

function probando() {
var i = 10;
if(true) { // siempre entrará dentro del if por ser true su condición
let i = 30;
console.log(i)
}
console.log(i);
}
probando()

¿Cuál crees que es la respuesta y por qué? Veamos si respondiste correctamente, para eso
antes revisemos el resultado:

30
10

El primer console.log() corresponde al let i = 30 y el segundo corresponde al var i =

10. Los valores definidos se respetaron ya que el i dentro del if fue declarado como let,
entonces sólo existe dentro de ese contexto y no sobrescribe la variable ya definida, por más
que esta haya sido declarado como var.

Usar let o var depende de cada situación y problema a resolver ya que en algunos casos no
importará si la variable se mantiene fuera del bloque, pero hay otros en que sí y en ese caso
debemos usar let para definir.

Ejercicio guiado: Alcance de variables

Desarrollar un código en JavaScript que permita calcular la suma y la resta de dos números
por funciones separadas, pero manteniendo el mismo nombre de las variables en ambas
operaciones.
Además, los datos ingresados por el usuario se deben guardar en variables separadas
dentro de cada función con el mismo nombre para las variables. Sigamos los siguientes
pasos:

_ 6

www.desafiolatam.com
 ● Paso 1: En el archivo funciones.js, se debe armar la estructura de las funciones, una
para la suma y otra para la resta, ambas funciones no van a recibir ningún tipo de
datos, por lo tanto, en la función para la suma se crearán dos variables con “let”
(num1 y num2) para guardar los números solicitados al usuario (variables locales),
así mismo se realizará la suma de ambos números y se retornará con el resultado.
La variable para almacenar el resultado de la suma y resta debe ser inicializada fuera
de las funciones con var (siendo una variable global), quedando la función de suma
de la siguiente forma:

function suma() {
let num1 = prompt("Ingrese un primer número para al suma");
let num2 = prompt("Ingrese un segundo número para al suma");
resultado = parseInt(num1) + parseInt(num2);
return resultado;
};

● Paso 2: Realizada la función de la suma, pasemos a realizar la función de la resta la

cual es muy parecida, lo único que se debe considerar es que esta vez se restan los
dos valores ingresados por el usuario, como se muestra a continuación:

function resta() {
let num1 = prompt("Ingrese un primer número para al resta");
let num2 = prompt("Ingrese un segundo número para al resta");
resultado = parseInt(num1) - parseInt(num2);
return resultado;
};

● Paso 3: Para finalizar el ejercicio, solo se debe crear la variable para el resultado de
manera global y hacer el respectivo llamado a ambas funciones:

function suma() {
let num1 = prompt("Ingrese un primer número para al suma");
let num2 = prompt("Ingrese un segundo número para al suma");
resultado = parseInt(num1) + parseInt(num2);
return resultado;
};

function resta() {
let num1 = prompt("Ingrese un primer número para al resta");
let num2 = prompt("Ingrese un segundo número para al resta");

_ 7

www.desafiolatam.com
 resultado = parseInt(num1) - parseInt(num2);
return resultado;
};
var resultado;
document.write(`El resultado de la suma es: ${suma()} <br>`);
document.write(`El resultado de la resta es: ${resta()}`);

Al ejecutar el código anterior, el resultado obtenido dependerá del valor ingresado por el
usuario. Por ejemplo, si el usuario ingresa los números 4 y 6 para la suma, mientras que para
la resta ingresa 5 y 11 el resultado sería:

El resultado de la suma es: 10

El resultado de la resta es: -6

Por ende, se puede apreciar que hemos utilizado la variable “resultado” con un “var” fuera de
la función y la podemos referenciar dentro de las funciones sin la necesidad de volver a
declararla, pero en cambio, las variables num1 y num2 dentro de las funciones sí se deben
volver a declarar.

Ejercicio propuesto (5)

Lee los siguientes códigos, y sin ejecutarlo, interpreta ¿cuál es el valor de i al ejecutarse la
sentencia console.log(i) al final del código?

Luego, ejecuta el código para comparar tus resultados.

let i = 0;
while(i < 10) {
i++;
}
console.log(i)

function recorrer() {
let i = 0;
while(i < 10) {
i++;
}
}
recorrer();

_ 8

www.desafiolatam.com
 console.log(i)

Función Arrow

Con ES6 también nacen las arrow functions que es una forma simplificada de escribir o
definir una función, incluso el poder tener una función en una sola línea de código. Veamos
unos ejemplos:

Hasta el momento hemos definido funciones de la siguiente manera:

function miFuncionSumar(a,b) {
return a + b;
}

console.log(miFuncionSumar(1,2))

Resultado:

Ahora con ES6 podemos escribir funciones eliminando la palabra function y usando =>, esto
transformaría la función del ejemplo anterior en:

let miFuncionSumar = (a,b) => {

return a + b;
}

console.log(miFuncionSumar(1,2));

Resultado:

Para practicar, escribe una función de la forma tradicional y luego conviértela a una arrow
function. Por ejemplo, la función anterior denominada miFuncionSumar la podemos
reescribir de la siguiente manera, implementando ES6 arrow functions:

_ 9

www.desafiolatam.com
 let miFuncionSumar = (a,b) => a + b;

El ejemplo anterior es similar a:

let miFuncionSumar = (a,b) => { a + b };

Pero al ser una función de una sola sentencia podemos omitir las { }.

Para profundizar el concepto de arrow functions, puedes consultar el documento Material

Apoyo Lectura - Funciones Flecha, ubicado en “Material Complementario”. En este
documento podrás revisar en detalle aspectos teóricos y prácticos de este contenido.

Ejercicio guiado: Arrow Functions

En el siguiente código, se solicita al usuario ingresar un número entero para enviarlo como
argumento en el llamado a la función y recibirlo como parámetro para poder comparar el
valor mediante una estructura condicional.
Realizar la transformación a funciones flecha o arrow de ES6

var num = prompt("Ingrese un numero entero");

var resultado = 0;

function verificar(numero) {
if (numero > 0) {
resultado = "positivo";
} else if (numero < 0) {
resultado = "negativo";
} else if (numero === 0) {
resultado = "nulo";
} else {
resultado = "no es un número";
}
return resultado
}

alert(`El numero ingresado es: ${verificar(parseInt(num))}`);

_ 10

www.desafiolatam.com
 ● Paso 1: Para transformar el código anterior a funciones arrow de ES6, lo primero que
debemos observar es la estructura actual, en este caso, la función tiene parámetros y
distintos procesos dentro de ella, por lo tanto, se deben utilizar los paréntesis
“(parametro1...)” y las llaves “{proceso}” para separar los procesos dentro de la
función original, agregando la flecha después del parámetro:

var num = prompt("Ingrese un numero entero");

var resultado = 0;

let verificar = (numero) => { // cuerpo de la función donde debe ir

todo el proceso
}

● Paso 2: Agregamos toda la estructura condicional if-else-if dentro de la función,

almacenando el mensaje correspondiente en la variable global y retornando el
resultado dentro de esa variable:

var num = prompt("Ingrese un numero entero");

var resultado = 0;

let verificar = (numero) => {

if (numero > 0) {
resultado = "positivo";
} else if (numero < 0) {
resultado = "negativo";
} else if (numero === 0) {
resultado = "nulo";
} else {
resultado = "no es un número";
}
return resultado
}

alert(`El numero ingresado es: ${verificar(parseInt(num))}`);

Siendo el resultado para el valor -5:

El numero ingresado es: negativo

Como se puede observar en el código anterior, la mayor modificación está en la

inicialización de la función. Quitando la palabra reservada “function” y agregando la flecha
correspondiente ”=>”. En el caso del return, cuando el cuerpo de la función es más de una

_ 11

www.desafiolatam.com
línea, es decir, se trabaja con las llaves, el return debe ir dentro de la función
obligatoriamente si se desea retornar algún valor.

Ejercicio propuesto (6)

Realizar un programa en JavaScript mediante el uso de funciones flecha que solicite al

usuario ingresar su nombre, edad y retorne un saludo con el nombre, la edad e indicando si
es mayor o menor de edad.

Comparativa entre ES5 y ES6

A continuación, veremos una tabla con las principales diferencias entre la versión ES5 y ES6.

Característica ES5 ES6

Retornar un número function retornaNum() let retonarNum = () =>

{ 3;
return 3
}

Retornar un número de una function sumarDos(num) let sumarDos = (num) =>

función con parámetros { num + 2;
return num + 2;
}

Alcance de bloque (let) No existe. let numero = 1;

Template string let miNombre = "Jon let miNombre = "Jon

Doe" Doe"
let cadena = "Hola " + let cadena = `Hola
miNombre; ${miNombre}`;
Tabla 1. Comparativa entre ES5 y ES6
Fuente: Desafío Latam

Cuando estamos desarrollando, es importante conocer si los navegadores soportan la

versión del lenguaje que estamos utilizando, sobretodo si es nueva. Para conocer cómo
validar esta información y profundizar tu conocimiento sobre compatibilidad, puedes
consultar el documento Material Apoyo Lectura - Transpiladores y compatibilidad, ubicado
en “Material Complementario”.

_ 12

www.desafiolatam.com