Section 2: JavaScript Refresher

Question 1

Understanding “let” and “const”

Answer 1

Let y Const son formas diferentes de crear una variable. Var era la primera forma de variable en Javascript pero con el ES6 se introdujeron Let y Const (son la forma recomendada de trabajar variables); Const para valores constantes y Let para valores mutables.

Question 2

Arrow Functions

Answer 2

Con el ArrowFunction puedo omitir el paréntesis del argumento de la función, siempre y cuando la función tenga un solo argumento.
Si el ArrowFunction solo retorna una línea simple de código, puedo omitir los paréntesis.  Ej: const printMyName = name => console.log(name);

Question 3

Exports and Imports

Answer 3

Export e import son palabras reservadas que me permiten modular el código, exportándolo desde un documento e importándolo hacia otro.

Si solo hay un elemento en el archivo.js, se convierte automáticamente en nuestro export default. Default es otra palabra reservada para esta tarea.

Question 4

NAMED EXPORTS

Answer 4

Para hacer exports específicos desde un archivo, hacemos named exports señalando los elementos a exportar por su nombre, entre curly brackets (de esta forma puedo exportar funciones, objetos, etc)

Ej: import { baseData } from ‘from ‘./utility.js’

También puedo exportar múltiples elementos que estén en un mismo archivo:
Ej: import { baseData, clean } from ‘from ‘./utility.js’

También puedo asignar un apodo al elemento que estoy exportando con la palabra reservada AS.

Ej: import { baseData as bD } from ‘from ‘./utility.js’

Question 5

Exportar todos los elementos

Answer 5

Por otro lado, puedo exportar todos los elementos del archivo js con el caracter especial: * y asignar un apodo al archivo importado:

Ej: import { * as paquete } from ‘from ‘./utility.js

Question 6

¿Qué es una clase?

Answer 6

Las Clases son plantillas que nos permiten hacer modelos de objetos.

Question 7

Clases y herencia

Answer 7

Las Clases pueden heredar propiedades y métodos de otras clases, para ese fin existe la palabra reservada extends que nos permite indicar función.

Ej: class Person extends Human(){};

Question 8

Super Constructor

Answer 8

SUPER CONSTRUCTOR
Si estoy extendiendo una clase y estoy usando en ella el método constructor, entonces tengo que añadir el método super() al constructor para inicializar el parent constructor.

Ej: 
class Person extends Human{
  constructor( ){
    super();
      this.name ="jesus";
  }
  printMyName(){
    console.log(this.name);
  }
}

Question 9

SYNTAX PARA INCIALIZAR PROPIEDADES

Answer 9

Forma antigua (ES6) para inicializar propiedades:

constructor (){
this.myProperty = ‘value’
}

Forma moderna (ES7) para inicializar propiedades:

myProperty = ’value’

Question 10

SYNTAX PARA INCIALIZAR MÉTODOS

Answer 10

Forma antigua (ES6) para inicializar métodos:

myMethod(){…}

Forma moderna (ES7) para inicializar métodos:

myMethod = () => { … }

Question 11

The Spread & Rest Operator [DEFINICIÓN]

Answer 11

Realmente es un mismo operador y se escribe así:
… (tres puntos)
y se convierte en Spread o en Rest dependiendo de en dónde lo utilicemos.

Question 12

The Spread Operator

Answer 12

Spread: Es usado para separar elementos de arreglo o propiedades de objetos.
Ej1: const newArray = [...oldArray, 1, 2];

En el ejemplo anterior, el Spread Operator trae todos los elementos del oldArray al newArray, mientras que a su vez, puedo añadir más elementos.

Lo mismo con los objetos: const newObject = (…oldObject, newProp: 5)

NOTA: si había elementos repetidos en el arreglo o en el objeto anterior, serán sobreescritos en el nuevo arreglo u objeto al que se extraen estos elementos.

Question 13

The Rest Operator

Answer 13

Rest: se usa para combinar el grupo de argumentos de una función en un arreglo.

EJ: 
function sortArgs(...args) {
	return args.sort()
}

Question 14

Destructuring

Answer 14

Mientras Spread toma todos los elementos y los devuelve en un nuevo objeto o arreglo, DESTRUCTURING permite asignarle una variable a los elementos de un arreglo y a las propiedades de un objeto.

EJ: [A, B]=[‘Ernesto’, ‘Fidel’] o {name} = {name: ‘Max’, age: 28}

Question 15

Reference and Primitive Types

Answer 15

Numbers, strings, booleans son conocidos como tipos primitivos. Siempre que reasigno o almaceno una variable en otra variable, la nueva variable copiará el valor.

Por otro lado, objetos y arreglos son tipos de referencia.

Question 16

MÉTODOS PARA ARRAY FUNCTIONS

Answer 16

map() => El método map() crea un nuevo arreglo poblado con los resultados del CallBack Function que se le asignó, en cada elemento del arreglo al que se aplicó el método.

reduce() => El método reduce() ejecuta un CallBack Function tipo Reducer en cada elemento del arreglo, pasando el valor retornado por el cálculo, al siguiente elemento. El resultado final de correr el reducer a través de todos los elementos del arreglo es un solo valor. (Ej, la suma de todos los elementos del arreglo).

concat() => El método contact() se emplea para combinar dos o más arreglos. Este método no cambia el arreglo existente, sino que crea un nuevo arreglo.

find() => Devuelve el valor del primer elemento que cumpla las condiciones del testing function que se le pase como argumento, de lo contrario devuelve undefined.

findIndex() => Devuelve el index del primer elemento en el arreglo, que cumpla las condiciones del testing function que se le pase como argumento, de lo contrario devuelve -1 indicando que ningún elemento pasó la prueba.

filter() => Crea un nuevo arreglo con todos los elementos que pasen las condiciones del testing function que se le provea.

slice() => devuelve una copia “superficial” de una porción de un arreglo en un nuevo objeto arreglo seleccionado de principio a fin (final no incluído). donde principio y fin representan el index de elementos en el arreglo. El arreglo original no será modificado.

splice() => Cambia el contenido de un arreglo removiendo o reemplazando elementos existentes y/o añadiendo nuevos elementos en su lugar.