Section 2: JavaScript Refresher Flashcards
Understanding “let” and “const”
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.
Arrow Functions
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);
Exports and Imports
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.
NAMED EXPORTS
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’
Exportar todos los elementos
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
¿Qué es una clase?
Las Clases son plantillas que nos permiten hacer modelos de objetos.
Clases y herencia
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(){};
Super Constructor
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);
}
}
SYNTAX PARA INCIALIZAR PROPIEDADES
Forma antigua (ES6) para inicializar propiedades:
constructor (){
this.myProperty = ‘value’
}
Forma moderna (ES7) para inicializar propiedades:
myProperty = ’value’
SYNTAX PARA INCIALIZAR MÉTODOS
Forma antigua (ES6) para inicializar métodos:
myMethod(){…}
Forma moderna (ES7) para inicializar métodos:
myMethod = () => { … }
The Spread & Rest Operator [DEFINICIÓN]
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.
The Spread Operator
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.
The Rest Operator
Rest: se usa para combinar el grupo de argumentos de una función en un arreglo.
EJ:
function sortArgs(...args) {
return args.sort()
}
Destructuring
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}
Reference and Primitive Types
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.
MÉTODOS PARA ARRAY FUNCTIONS
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.
