EMCAScript es un versión estandarizada de JavaScript con el objeto de unificar las especificaciones y características del lenguaje. Como todos los principales navegadores y tiempos de ejecución de JavaScript siguen esta especificación, el término ECMAScript es intercambiable con el término JavaScript.

La mayoría de los desafíos en freeCodeCamp utilizan la especificación ES5 del lenguaje, finalizada en 2009. Pero JavaScript es un lenguaje de programación en evolución. A medida que se agregan características y se realizan revisiones, se lanzan nuevas versiones del lenguaje para uso de los desarrolladores.

La versión estandarizada más reciente se llama ES6, lanzada en 2015. Esta nueva versión del lenguaje agrega algunas características poderosas que se cubrirán en esta sección de desafíos, que incluyen:

• Arrow functions
• Classes
• Modules
• Promises
• Generators
• let y const

Nota: No todos los navegadores son compatibles con las funciones de ES6. Si usa ES6 en sus proyectos, es posible que necesite usar un programa (transpiler) para convertir su código ES6 en ES5 hasta que los navegadores admitan ES6.

Upcoming Lessons

• Explore Differences Between the var and let Keywords
• Compare Scopes of the var and let Keywords
• Declare a Read-Only Variable with the const Keyword
• Mutate an Array Declared with const
• Prevent Object Mutation
• Use Arrow Functions to Write Concise Anonymous Functions
• Write Arrow Functions with Parameters
• Set Default Parameters for Your Functions
• Use the Rest Parameter with Function Parameters
• Use the Spread Operator to Evaluate Arrays In-Place
• Use Destructuring Assignment to Extract Values from Objects
• Use Destructuring Assignment to Assign Variables from Objects
• Use Destructuring Assignment to Assign Variables from Nested Objects
• Use Destructuring Assignment to Assign Variables from Arrays
• Use Destructuring Assignment with the Rest Parameter to Reassign Array Elements
• Use Destructuring Assignment to Pass an Object as a Function's Parameters
• Create Strings using Template Literals
• Write Concise Object Literal Declarations Using Object Property Shorthand
• Write Concise Declarative Functions with ES6
• Use class Syntax to Define a Constructor Function
• Use getters and setters to Control Access to an Object
• Create a Module Script
• Use export to Share a Code Block
• Reuse JavaScript Code Using import
• Use * to Import Everything from a File
• Create an Export Fallback with export default
• Import a Default Export
• Create a JavaScript Promise
• Complete a Promise with resolve and reject
• Handle a Fulfilled Promise with then
• Handle a Rejected Promise with catch

Uno de los mayores problemas al declarar variables con la palabra clave var es que puede sobrescribir las declaraciones de variables sin un error.

var camper = 'James';
var camper = 'David';
console.log(camper);
// logs 'David'

Como puede ver en el código anterior, la variable camper se declara originalmente como James y luego se invalida cono David. En una aplicación pequeña, es posible que no se encuentra con este tipo de problema, pero cuando su código se hace más grande, puede sobrescribir accidentalmente una variable que no pretendía sobre escribir. Debido a que este comportamiento no arroja un erro, buscar y corregir errores se vuelve más difícil.

Se introdujo una nueva palabra clave let en ES6 para resolver este problema potencial con la palabra clave var. Si reemplazara var con let en la declaraciones de variables del código anterior, el resultado sería un error.

let camper = 'James';
let camper = 'David'; // throws an error

Este error se puede ver en la consola de su navegador. Entonces, a diferencia de var, cuando se usa let, una variable con el mismo nombre solo se puede declarar una vez. Tenga en cuenta el use strict. Esto habilita el Modo Estricto, que detecta errores de codificación comunes y acciones "inseguras". Por ejemplo:

"use strict";
x = 3.14; // throws an error because x is not declared

Actualice el código para que solo use la palabra clave let.

El código con la solución se encuentra aquí:Download

Cuando declara una variable con la palabra clave var, se declara globalmente o localmente si se declara dentro de una función.

La palabra let se comporta de manera similar, pero con algunas características adicionales. Cuando declara una variable con la palabra let dentro de un bloque, declaración o expresión, su alcance se limita a ese bloque, declaración o expresión.

Por ejemplo:

var numArray = [];
for (var i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3

Con la palabra clave var, se declara globalmente. Entonces, cuando se ejecuta i++, actualiza la variable global. Este código es similar al siguiente:

var numArray = [];
var i;
for (i = 0; i < 3; i++) {
  numArray.push(i);
}
console.log(numArray);
// returns [0, 1, 2]
console.log(i);
// returns 3

Este comportamiento causará problemas si crea una función y la almacena para su uso posterior dentro de un bucle for que usa la variable i. Esto se debe a que la función almacenada siempre se referirá al valor de la variable global i actualizada.

var printNumTwo;
for (var i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 3

Como puede ver, printNumTwo() imprime 3 y no 2. Esto se debe a que el valor asignado a i se actualizó y printNumTwo () devuelve el i global y no el valor que tenía cuando se creó la función en el bucle for. La palabra clave let no sigue este comportamiento:

'use strict';
let printNumTwo;
for (let i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
// returns 2
console.log(i);
// returns "i is not defined"

i no está definido porque no se declaró en el ámbito global. Solo se declara dentro de la instrucción for loop, printNumTwo() devolvió el valor correcto porque tres palabras clave son diferentes con valores únicos (0,1 y 2) fueron creadas por la palabra clave let dentro de la instrucción de bucle.

Arregle el código para que declare en la instrucción if es una variable separada de lo que declare en la primera línea de la función. Asegúrese de no usa la palabra clave var en ningún lugar de su código.

Este ejercicio está diseñado para ilustrar la diferencia entre cómo var y let y el alcance de su declaración. Al programar una función similar a la utilizada en este ejercicio, a menudo es mejor usar diferentes nombres de variables para evitar confusiones.

El código con la solución se encuentra aquí:Download

La palabra clave let no es la única forma nueva de declarar variables. En ES6, también puede declarar variables utilizando la palabra clave const

const tiene todas las características increíbles que tiene, con la ventaja adicional de que las variables declaradas usando const son solo de lectura. Son un valor constante, lo que significa que una vez que una variable se asigna con const, no puede reasignar.

"use strict";
const FAV_PET = "Cats";
FAV_PET = "Dogs"; // returns error

Como puede ver, intentar reasignar una variable declarada con const arrojará un error. Siempre debe nombrar las variables que no desea reasignar utilizando la palabra clave const. Esto ayuda cuando accidentalmente intenta reasignar una variable que debe mantenerse constante. Una práctica común al nombrar constantes es usar todas las letras mayúsculas, con palabras separadas por un guión bajo.

Nota: Es común que los desarrolladores usen identificadores de variables en mayúsculas para valores inmutables y minúculas o camelCase para valores mutables (objetos y matrices). En un desafío posterior, verá un ejemplo de un identificador de variable en minúsculas que se utiliza para una matriz.

Cambie el código para que todas las variables se declaren usando let o const. Use let cuando quiera que cambie la variable, y const cuando quiera que la variable permanezca constante. Además, cambie el nombre de las variables declaradas con const para cumplir con las prácticas comunes, lo que significa que las constantes deben estar en mayúsculas.

El código con la solución se encuentra aquí:Download

La declaración const tiene muchos casos de uso en JavaScript moderno.

Algunos desarrolladores prefieren asignar todas sus variables usando const por defecto, a menos que sepan que necesitarán reasignar el valor. Solo en ese caso, usan let.

Sin embargo es importante comprender que los objetos (incluidas matrices y funciones) asignados a una variable usando const todavía son mutables. El uso de la declaración const solo evita la reasignación del identificador de variable.

"use strict";
const s = [5, 6, 7];
s = [1, 2, 3]; // throws error, trying to assign a const
s[2] = 45; // works just as it would with an array declared with var or let
console.log(s); // returns [5, 6, 45]

Como puede ver, puede mutar el objeto [5, 6, 7] y la variable todavía apuntará a la matriz alterada [5, 6, 45]. Al igual que todas las matrices, los elementos de la matriz en s son mutables, pero debido a que se usó conts, no puede usar el identificador de variable s para apuntar a una matriz diferentes usando el operador de asignación.

Una matriz se declara como const s = [5, 7, 2]. Cambie la matriz a [2, 5, 7] usando varias asignaciones de elementos.

El código con la solución se encuentra aquí:Download

Como se vio en el desafío anterior, la declaración const por sí sola realmente no protege sus datos de la mutación. Para garantizar que sus datos no cambien, JavaScript proporciona una función Object.freeze para evitar la mutación de datos.

Una vez que el objeto está congelado, ya no puede agregar, actualizar o eliminar propiedades del mismo. Cualquier intento de cambiar el objeto será rechazado sin un error.

let obj = {
  name:"FreeCodeCamp",
  review:"Awesome"
};
Object.freeze(obj);
obj.review = "bad"; // will be ignored. Mutation not allowed
obj.newProp = "Test"; // will be ignored. Mutation not allowed
console.log(obj); 
// { name: "FreeCodeCamp", review:"Awesome"}

En este desafío, usará Object.freeze para evitar que las constantes matemáticas cambien. Debe congelar el objeto ´´MATH_CONSTANTS`` para que nadie pueda alterar el valor de PI, agregar o eliminar propiedades.

El código con la solución se encuentra aquí:Download

En JavaScript, a menudo no necesitamos nombrar nuestras funciones, especialmente al pasar una función como argumento a otra función. En cambio, creamos funciones en línea. No necesitamos nombrar estas funciones porque no las reutilizaremos en ningún otro lugar.

Para lograr esto, a menudo usamos la siguiente sintaxis:

const myFunc = function() {
  const myVar = "value";
  return myVar;
}

ES6 nos proporciona el azúcar sintáctico para no tener que escribir funciones anónimas de esta manera. En su lugar, puede usar la sintaxis de la función de flecha.

const myFunc = () => {
  const myVar = "value";
  return myVar;
}

Cuando no hay un cuerpo de función, y solo un valor de retorno, la sintaxis de la función de flecha le permite omitir el return, así como los corchetes que rodean el código. Esto ayuda a simplificar funciones más pequeñas en declaraciones de una línea:

const myFunc = () => "value";

Este código aún devolverá value por defecto.

Vuelva a escribir la función asignada a la variable magic que devuelve una nueva Date() para usar la sintaxis de flecha. También asegúrese de que no se defina nada con var.

El código con la solución se encuentra aquí:Download

Al igual que una función normal, puede pasar argumentos a una función de flecha.

// doubles input value and returns it
const doubler = (item) => item * 2;

Si una función de flecha tiene un argumento único, los paréntesis que encierran el argumento pueden omitirse.

// the same function, without the argument parentheses
const doubler = item => item * 2;

Es posible pasar más de un argumento a una función de flecha.

// multiplies the first input value by the second and returns it
const multiplier = (item, multi) => item * multi;

Vuelva a escribir la función myContact que agrega el contenido de arr2 a arr1 para que la función usa la sintaxis de la función de flecha.

El código con la solución se encuentra aquí:Download

Para ayudarnos a crear funciones más flexibles, ES6 presenta parámetros predeterminados para las funciones.

Mira este código:

const greeting = (name = "Anonymous") => "Hello " + name;

console.log(greeting("John")); // Hello John
console.log(greeting()); // Hello Anonymous

El parámetro predeterminado se activa cuando el argumento no está especificado ( no está definido). Como puede ver en el ejemplo anterior, el name del parámetro recibirá su valor predeterminado "Anonymous" cuando no proporcione un valor para el parámetro. Puede agregar valores predeterminados para tantos parámetros como desee.

Modifique el increment de la función agregando parámetros predeterminados para que agregue 1 al number si value no se especifica.

El código con la solución se encuentra aquí:Download

Para ayudarnos a crear funciones más flexibles, ES6 introduce el parámetro rest para parámetros de función. Con el parámetro rest (son los ... ), puede crear funciones que toman un número variable de argumentos. Estos argumentos se almacenan en una matriz a la que se puede acceder más tarde desde el interior de la función.

Mira este código:

function howMany(...args) {
  return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2)); // You have passed 3 arguments.
console.log(howMany("string", null, [1, 2, 3], { })); // You have passed 4 arguments.

El parámetro rest elimina la necesidad de verificar la matriz de args y nos permite aplicar map(), filter () y reduce() en la matriz de parámetros.

Modifique la función sum usando el parámetro rest de tal manera que la suma de la función pueda tomar cualquier número de argumentos y devolver su suma.

El código con la solución se encuentra aquí:Download

ES6 presenta el operador spread , que nos permite expandir matrices y otras expresiones en lugares donde se esperan múltiples parámetros o elementos.

El siguiente código de ES5 utiliza apply() para calcular el valor máximo en una matriz:

var arr = [6, 89, 3, 45];
var maximus = Math.max.apply(null, arr); // returns 89

Tuvimos que usar Math.max.apply (null, arr) porque Math.max (arr) devuelve NaN. Math.max () espera argumentos separados por comas, pero no una matriz. El operador spread hace que esta sintaxis sea mucho mejor para leer y mantener.

const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr); // returns 89

...arr devuelve una matriz desempaquetada. En otras palabras, extiende la matriz. Sin embargo, el operador de propagación solo funciona en el lugar, como en un argumento a una función o en una matriz literal. El siguiente código no funcionará:

const spreaded = ...arr; // will throw a syntax error

Copie todo el contenido de arr1 en otra matriz arr2 utilizando el operador spread (propagación).

El código con la solución se encuentra aquí:Download

La Destructuring Assignment es una sintaxis especial introducida en ES6, para asignar cuidadosamente los valores tomados directamente de un objeto.

Considere el siguiente código ES5:

const user = { name: 'John Doe', age: 34 };

const name = user.name; // name = 'John Doe'
const age = user.age; // age = 34

Aquí hay una declaración de asignación equivalente utilizando la sintaxis de desectructuración ES6:

const { name, age } = user;
// name = 'John Doe', age = 34

Aquí hay variables de name y age se crearán y se asignarán los valores de sus valores respectivos del objeto de usuario. Puedes ver cuánto más limpio es esto.

Puede extraer tantos o pocos valores del objeto como desee.

Reemplace las dos asignaciones con una asignación de desestructuraciones equivalente. Todavía debe asignar las variables today y tomorrow los valroes de today y tomorrow del objeto HIGH_TEMPERATURES.

El código con la solución se encuentra aquí:Download

La desestructuración le permite asignar un nuevo nombre de variable al extraer valores. Puede hacer esto colocando el nuevo nombre después de dos puntos al asignar el valor.

Usando el mismo objeto del último ejemplo:

const user = { name: 'John Doe', age: 34 };

Aquí le mostramos cómo puede asignar nuevos nombres de variables en la asignación:

const { name: userName, age: userAge } = user;
// userName = 'John Doe', userAge = 34

Puede leerlo como "obtener el valor de user.name y asignarlo a una nueva variable llamada userName" y así sucesivamente.

Reemplace las dos asignaciones con una asignación de desestructuración equivalente. Todavía debe asignar a las variables highToday y highTomorrow los valores de hoy y mañana del objeto HIGH_TEMPERATURES.

El código con la solución se encuentra aquí:Download

Puede usar los mismo principios de las dos lecciones anteriores para desestructurar los valores de los objetos anidados.

Usando un objeto similar a los ejemplos anteriores:

const user = {
  johnDoe: { 
    age: 34,
    email: '[email protected]'
  }
};

Aquí le mostramos cómo extraer los valores de las propiedades de los objetos y asignarlos a variables con el mismo nombre:

const { johnDoe: { age, email }} = user;

Y así es como puede asignar los valores de las propiedades de un objeto a variables con diferentes nombres:

const { johnDoe: { age: userAge, email: userEmail }} = user;

Reemplace las dos asignaciones con una asignación de desestructuración equivalente. Todavía debe asignar a las variables lowToday y highToday los valores de today.low y today.high del objeto LOCAL_FORECAST.

El código con la solución se encuentra aquí:Download

ES6 hace que las matrices de desestructuración sean tan fáciles como los objetos de desestructuración.

Una diferencia clave entre los operadores extendido (spread) y la desestructuración de la matriz es que el operador extendido desempaquetada todo el contenido de una matriz en una lista separada por comas. En consecuencia, no puede elegir qué elementos deseas asignar a las variables.

Desestructurar una matriz nos permite hacer exactamente eso:

const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b); // 1, 2

A la variable a se le asigna el primer valor de la matriz, y a b se le asigna el segundo valor de la matriz. También podemos acceder al valor en cualquier índice en una matriz con desestructuración mediante el uso de comas para alcanzar el índice deseado:

const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c); // 1, 2, 5

Utilice la asignación de desestructuración para intercambiar los valores de a y b para que a reciba el valor almacenado en b y b reciba el valor almacenado en a .

El código con la solución se encuentra aquí:Download

En algunas situaciones que involucran la desestructuración que involucran la desesctucturación de la matriz, es posible que queramos recopilar el resto de los elementos en una matriz separada.

El resultado es similar a Array.prototype.slice() como se muestra a continuación:

const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
console.log(a, b); // 1, 2
console.log(arr); // [3, 4, 5, 7]

Las variables a y b toman los valores primero y segundo de la matriz. Después de eso, debido a la presencia del parámetro rest, arr obtiene el resto de los valores en forma de matriz. El elemento resto solo funciona correctamente como la última variable en la lista. Como no puede usar el parámetro rest para capturar una submatriz que omita el último elemento de la matriz original.

Use la asignación de desestructuración con el parámetro rest para realizar un Array.prototype.slice() efectivo de modo que arr sea una sub-matriz de la fuente de la matriz original con los dos primeros elementos omitidos.

const source = [1,2,3,4,5,6,7,8,9,10];
function removeFirstTwo(list) {
  "use strict";
  // change code below this line
  const [a,b, ...arr]= source; // change this
  // change code above this line
  return arr;
}
const arr = removeFirstTwo(list);
console.log(arr); // should be [3,4,5,6,7,8,9,10]
console.log(source); // should be [1,2,3,4,5,6,7,8,9,10];

El código con la solución se encuentra aquí:Download

En algunos casos, puede desestructurar el objeto en un argumento de función en sí.

Considere el siguiente código:

const profileUpdate = (profileData) => {
  const { name, age, nationality, location } = profileData;
  // do something with these variables
}

Esto efectivamente destruye el objeto enviado a la función. Esto también se puede hacer en el lugar:

const profileUpdate = ({ name, age, nationality, location }) => {
  /* do something with these fields */
}

Esto elimina algunas líneas adicionales y hace que nuestro código se vea ordenado. Esto tiene el beneficio adicional de no tener que manipular un objeto completo en una función: solo los campos que se necesitan se copian dentro de la función.

Utilice la asignación de desestrucutaración dentro del argumento a la función half para enviar solo max y min dentro de la función.

El código con la solución se encuentra aquí:Download

Una nueva característica de ES6 es la template literal plantilla literal. Este es un tipo especial de cadena que facilita la creación de cadenas complejas.

Los literales de plantilla le permiten crear cadenas de varias líneas y utilizar funciones de interpolación de cadenas para crear cadenas.

Considere el siguiente código:

const person = {
  name: "Zodiac Hasbro",
  age: 56
};

// Template literal with multi-line and string interpolation
const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;

console.log(greeting); // prints
// Hello, my name is Zodiac Hasbro!
// I am 56 years old.

Muchas cosas sucedieron allí. En primer lugar, el ejemplo usa comillas invertidas (`), no comillas (' o "), para ajustar la cadena. En segundo lugar, observe que la cadena es de varias líneas, tanto en el código como en la salida. Esto ahora la inserción de /n dentro de las cadenas. La sintaxis `` ${variable} utilizada anteriormente es un marcador de posición. Básicamente, ya no tendrá que usar la concatenación con el operador ``+``. Para agregar variables a las cadenas, simplemente suelte la variable en una cadena de plantilla y envuélvela con ``${ y }`` . Del mismo modo, puede incluir otras expresiones en su literal de cadena, por ejemplo ``${a + b}``. Esta nueva forma de crear cadenas le brinda más flexibilidad para crear cadenas robustas.

Utilice la sintaxis literal de la plantilla con comillas inversas para mostrar cada entrada de la matriz de failure del objeto resultante. Cada entrada debe estar envuelta dentro de un elemento li con la text-warning de atributo de clase, y listada dentro del resultDisplayArray.

Use un método iterador (cualquier tipo de bucle) para obtener la salida deseada.

El código con la solución se encuentra aquí:Download

ES6 agrega un buen soporte para definir fácilmente literales de objeto.

Considere el siguiente código:

const getMousePosition = (x, y) => ({
  x: x,
  y: y
});

getMousePosition es un función simple que devuelve un objeto que contiene dos propiedades. ES6 proporciona el azúcar sintáctico para eliminar la redundancia de tener que escribir x: x. Simplemente puede escribir x una vez, y se convertirá en x: x (o algo equivalente) debajo del capó. Aquí está la misma función de arriba reescrita para usar esta nueva sintaxis:

const getMousePosition = (x, y) => ({ x, y });

Use la propiedad de objeto abreviada con literales de objeto para crear y devolver un objeto con propiedades de name, age, y gender.

El código con la solución se encuentra aquí: Download

Al definir dentro de objetos en ES5, tenemos que usar la function de la siguiente manera:

const person = {
  name: "Taylor",
  sayHello: function() {
    return `Hello! My name is ${this.name}.`;
  }
};

Con ES6, puede eliminar la palabra clave function y los dos puntos al definir funciones en los objetos. Aquí hay un ejemplo de esta sintaxis:

const person = {
  name: "Taylor",
  sayHello() {
    return `Hello! My name is ${this.name}.`;
  }
};

Refactorice la función setGear dentro de la bicycle de objetos para usar la sintaxis abreviada descrita anteriormente.

El código con la solución se encuentra aquí:Download

ES6 proporciona una nueva sintaxis para crear objetos, utilizando la palabra clave class.

Cabe destacar que la sintaxis de class es solo una sintaxis, y no una implementanción basada en la clase completa de un paradigma orientado a objetos, a diferencia de lenguajes como Java, Python, Ruby, etc.

En ES5 , generalmente definimos una función de constructor y usamos la palabra new para instanciar un objeto.

var SpaceShuttle = function(targetPlanet){
  this.targetPlanet = targetPlanet;
}
var zeus = new SpaceShuttle('Jupiter');

La sintaxis de class simplemente reemplaza la creación de la función del constructor:

class SpaceShuttle {
  constructor(targetPlanet) {
    this.targetPlanet = targetPlanet;
  }
}
const zeus = new SpaceShuttle('Jupiter');

Cabe señalar que la palabra class declara una nueva función, a la que se agrega un constructor. Este construcor se invoca cuando se llama a new para crear un nuevo objeto.

Notas:

• UpperCamelCase debe usarse por convención para los nombres de clase ES6, como en SpaceShuttle usando anteriormente.
• El método constructor es un método especial para crear e inicializar un objeto creado con una clase. Aprenderá más sobre esto en la sección de Object Oriented Programming section of the JavaScript Algorithms And Data Structures Certification.

Use la palabra class y escriba un constructor para crear la clase Vegetable.

La clase Vegetable, le permite crear un objeto vegetable con un nombre de propiedad que se pasa al constructor.

El código con la solución se encuentra aquí:Download

Puede obtener valores de un objeto y establecer el valor de una propiedad dentro de un objeto.

Estos se llaman clásicamente getters y setters.

Las funciones de getters están destinadas a devolver (get) el valor de la variable privada de un objeto al usuario sin que el usuario acceda directamente a la variable privada.

Las funciones setter están destinadas a modificar (set) el valor de la variable privada de un objeto en función del valor pasado a a función setter. Este cambio podría involucrar cálculos, o incluso sobrescribir completamente el valor anterior.

class Book {
  constructor(author) {
    this._author = author;
  }
  // getter
  get writer() {
    return this._author;
  }
  // setter
  set writer(updatedAuthor) {
    this._author = updatedAuthor;
  }
}
const lol = new Book('anonymous');
console.log(lol.writer);  // anonymous
lol.writer = 'wut';
console.log(lol.writer);  // wut

Observe la sintaxis utilizada para invocar el getter y setter. Ni siquiera parecen funciones. Los getters y setters son importantes porque ocultan detalles de implementación internos.

Nota: Es una convención preceder el nombre de una variable privada con un guión bajo (_). Sin embargo, la práctica es sí no hace que una variable sea privada.

Use la palabra class para crear una clase Thermostat. El constructor acepta una temperatura en Fahrenheit .

Ahora cree un getter y un setter en la clase, para obtener la temperatura en grados Celsius.

Recuerde que C = 5/9 * (F - 32) y F = C * 9.0 / 5 + 32, donde F es el valor de la temperatura en Fahrenheit , y C es el valor de la misma temperatura en Celsius.

Nota: Cuando implemente esto, hará un seguimiento de la temperatura dentro de la clase en un escala, Fahrenheit o Celsius.

Este es el poder de un getter y un setter. Está creando una API para otro usuario, que puede obtener el resultado correcto independientemente de cuál rastree.

En otras palabras, está abstrayendo los detalles de implementación del usuario.

El código con la solución se encuentra aquí:Download

JavaScript comenzó con un pequeño papel que desempeñar en una web que en su mayoría es HTML. Hoy en día es enorme y algunos sitios web se crean casi por completo con JavaSript. Para que JavaScript sea más modular, limpio y fácil de mantener; ES6 introdujo una forma de compartir fácilmente el código entre archivos JavaScript. Esto implica exportar partes de un archivo para su uso en uno o más archivos e importar las partes que necesita, donde las necesita. Para aprovechar esta funcionalidad, debe crear un script en su documento HTML con un tipo de module. Aquí hay un ejemplo:

<script type="module" src="filename.js"></script>

Un script que usa este tipo de module ahora puede usar las características de import y export que aprenderá en los próximos desafíos.

Agregue un script al documento HTML del módulo de tipo y dele el archivo fuente de index.js.

El código con la solución se encuentra aquí:Download

Imagine un archivo llamado math_functions.js que contiene varias funciones relacionadas con operaciones matemáticas. Uno de ellos se almacena en una variable, add, que toma dos números y devuelve su suma. Desea utilizar esta función en varios archivos JavaScripts diferentes. Para compartirlo con estos otros archivos, primero debe export exportarlo.

export const add = (x, y) => {
  return x + y;
}

Lo anterior es una forma común de exportar una sola función, pero puede lograr lo mismo de esta manera:

const add = (x, y) => {
  return x + y;
}

export { add };

Cuando exporta una variable o función, puede importarla en otro archivo y usarla sin tener que volver a escribir el código. Puede exportar varias cosas repitiendo el primer ejemplo para cada cosa que desea exportar, o colocándolas todas en la declaración de exportación del segundo ejemplo, así:

export { add, subtract };

Hay dos funciones relacionadas con cadenas en el editor. Exporte ambos utilizando el método que elija.

El código con la solución se encuentra aquí:Download

import le permite elegir qué partes de un archivo o módulo cargar. En la lección anterior, los ejemplos exportados se agregan desde el archivo ``math_functions.js_. Así es como puede importarlo para usarlo en otro archivo.

import { add } from './math_functions.js';

Aquí import encontrará add en math_functions.js, importe solo esa función para que la use e ignore el resto. El ./ le dice a la importación que busque el archivo math_functions.js en la misma carpeta que el archivo actual. La ruta relativa del archivo (./) y la extensión (.js) son necesarias cuando se utiliza la importación de esta manera.

Puede importar más de un elemento del archivo agregándolos en la declaración de importación de esta manera:

import { add, subtract } from './math_functions.js';

Agregue la instrucción import adecuada que permitirá que el archivo actual use las funciones uppercaseStrings y lowercaseString que exportó en la lección anterior. Estas funciones están en un archivo llamado string_functions.js, que se encuentra en el mismo directorio que el archivo actual.

El código con la solución se encuentra aquçi:Download

Suponga que tiene un archivo y desea importar todo su contenido al archivo actual. Esto se puede hacer con import * as. Aquí hay un ejemplo donde el contenido de un archivo llamado math_functions.js se importa a un archivo en el mismo directorio:

import * as myMathModule from "./math_functions.js";

La declaración de import anterior creará un objeto llamado myMathModule Este es solo un nombre de variable, puede nombrarlo como quiera. El objeto contendrá todas las exportaciones de math_function.js, para que pueda acceder a las funciones como lo haría con cualquier otra propiedad de objeto. Aquí se explica cómo puede usar las funciones de add y substract que se importaron:

myMathModule.add(2,3);
myMathModule.subtract(5,3);

El código en este archivo requiere el contenido del archivo: string_functions.js que está en el mismo directorio que el archivo actual. Use import * as para importar todo desde el archivo a un objeto llamado stringFunctions.

El código con la solución se encuentra aquí:Download

En la lección de export, aprendió sobre la sintaxis denominada exportación con nombre. Esto le permitió hacer múltiples funciones y variables disponibles para su uso en otros archivos.

Hay otra sintaxis de export que necesita conocer, conocida como exportación predeterminada. Por lo general, utilizará esta sintaxis si solo se exporta un valor desde un archivo. También se usa para crear un valor de reserva para un archivo o módulo.

A continuación se muestran ejemplos que utilizan export default:

// named function
export default function add(x, y) {
  return x + y;
}

// anonymous function
export default function(x, y) {
  return x + y;
}

Dado que el valor predeterminado de exportación se utiliza para declarar un valor de reserva para un módulo o archivo. Además, no puede utilizar el valor predeterminado de exportación con var, ler o const.

La siguiente función debe ser el valor de reserva para el módulo. Agregue el código necesario para hacerlo.

El código con la solución se encuentra aquí: Download

En el último desafío, aprendió sobre el valor predeterminado de exportación y sus usos. Para importar una exportación predeterminada, debe usar una sintaxis de importación diferente. En el siguiente ejemplo. add es la exportación predeterminada del archivo math_functions.js. Aquí está como importarlo:

import add from "./math_functions.js";

La sintaxis difiere en un lugar clave. El valor importado, add, no está rodeado de llaves, ({}) add aquí es simplemente un nombre de variable para cualquiera que sea la exportación predeterminada del archivo math_functions.js. Puede usar cualquier nombre aquí al importar un valor predeterminado.

En el siguiente código, importe la exportación predeterminada desde el archivo math_functions.js que se encuentra en el mismo directorio que este archivo. Dele a la importación el nombre substract.

El código con la solución se encuentra aquí:Download

Una promesa en JavaScript es exactamente lo que parece, la usa para hacer una promesa de hacer algo, generalmente de forma asincrónica. Cuando finaliza la tarea, cumple su promesa o no lo hace. promise es una función constructora, por lo que debe usar la palabra new para crear una. Toma una función, como argumento, con dos parámetros: resolve y reject. Estos son métodos utilizados para determinar el resultado de la promesa. La sintaxis se ve así:

const myPromise = new Promise((resolve, reject) => {

});

Cree una nueva promesa llamada makeServerRequest. Pase una función con parámetros resolve y reject al constructor.

El código con la solución se encuentra aquí:Download

Una promesa tiene tres estado: pending, fulfilled y ``rejected´´. La promesa que creó en el último desafío está atascada para siempre en el estado pendiente porque no agregó una forma de completar la promesa. Los parámetros de resolve y reject dados al argumento de promise se utilizan para hacer esto, resolve se usa cuando quiere que su promesa tenga exito, y reject se usa cuando quiere que falle. Estos son métodos que toman un argumento, como se ve a continuación.

const myPromise = new Promise((resolve, reject) => {
  if(condition here) {
    resolve("Promise was fulfilled");
  } else {
    reject("Promise was rejected");
  }
});

El ejemplo anterior usa cadenas para el argumento de estas funciones, pero realmente puede ser cualquier cosa. A menudo, podría ser un objeto del que usaría datos para colocar en su sitio web o en otro lugar.

Haga que promise maneje el éxito y el fracaso, si responseFromServer es verdadero, llama al método resolve para completar con éxito la promesa. Para resolve una cadena los datos de valor We got the data. Si responseFromServer es falso, utilice el método de reject y pase la cadena Data not received.

El código con la solución se encuentra aquí:Download

Las promesas son más útiles cuando tiene un proceso que requiere una cantidad de tiempo desconocida en su código ( es decir, algo asíncrono), a menudo una solicitud del servidor. Cuando realiza una solicitud de servidor, lleva cierto tiempo y , una vez que se completa, generalmente desea hacer algo con la respuesta del servido. Esto se pude lograr utilizando el método then. El método then se ejecuta inmediatamente después de que su promesa se cumpla con resolve. Aquí un ejemplo:

myPromise.then(result => {
  // do something with the result.
});

result proviene del argumento dado al método resolve.

Agregue el método then a su promise. Utlice el result como el parámetro de su función de resolución de llamada y registre el result en la consola.

El código con la solución se encuentra aquí:Download

catch es el método utilizado cuando su promesa ha sido rechazada. Se ejecuta inmediatamente después de que se llama al método de reject de una promesa. Aquí está la sintaxis:

myPromise.catch(error => {
  // do something with the error.
});

error es el argumento pasado al método de reject.

Nota: los métodos then y catch se pueden encadenar a la declaración de promesa si lo desea.

Agregue el método de catch a su promesa. Use el error como parámetro de función de devolución de llamada y registre el error en la consola.

El código con la solución se encuentra aquí:Download