15

Resumen (y Guía con marcadores) de todos los puntos claves del Curso Básico de JS

Curso Básico de JavaScript

Instruido por el gran: Diego De Granda

1. ¿Qué es JavaScript?

0:19 ¿Qué es Javascript?

1:40 Es un lenguaje: Interpretado, Orientado a objetos, Débilmente tipado y Dinámico.

1:57 ¿Por que es Orientado a Objetos?

3:02 ¿Por qué es débilmente tipado?

5:32 ¿Por qué es dinámico?

5:49 ¿A qué nos referimos con Compilación?

7:27 ¿Realmente JS es un lenguaje interpretado? Aquí explica porque se considera Compilado

10:42 ¿Qué significa Backwards & Forwards? específicamente en relación a JS. Todos los módulos de JS son Backwards.

11:58 BABEL: Es un compilador de JS que permite usar nuevas versiones o módulos de JS (cómo EMACScript 6, 7, 8 o 9). Babel traduce la versión nueva de JS a una versión vieja de js que el navegador puede entender.

2. ¿Por qué JavaScript?

Marcadores a los puntos claves de la presentación:

0:40 Introducción de WebAssembly cómo estándar en la W3C.

1:15¿Por qué aprender JavaScript? 1) Para Desarrollo Web.

1:30 2) Posee un ecosistema inmenso de FrameWorks y librerías que te ayudarán a hacer productos Web de forma más rápida y eficiente.

1:50 3) React Native para crear aplicaciones nativas de Android e iOS.

2:05 4) Electron aplicaciones para escritorio que puedan correr en mac y windows.

2:15 5) Backend y IOT.

3. Elementos de un Lenguaje de Programación: Variables, Funciones y Sintaxis

0:03 Elementos de un lenguaje de programación. Dos componentes principales: 1) Data que guardamos en memoria. 2) Tareas (funciones) que haremos con esa data.

0:56 Instalación de VSCode.

2:34 Creando carpeta para archivos.

4:11Valores primitivos y sus tipos: 1) Número

4:32Valores primitivos y sus tipos: 2) Texto o cadenas de texto “” (String)

5:27Valores primitivos y sus tipos: 3) Booleanos (true or false). Creados por George Boole.

6:08Valores primitivos y sus tipos: 4) Empty values: null, undefined. Conocidos como valores place holder, reservados para algún tipo de valor faltante.

7:22Valores NO primitivos o de tipo Objetos: 5) Tipo Array [1,2,3] casi siempre valores primitivos. 6) Tipo Objeto {nombre: “Diego”}. Ambos son tipo Objetos.

8:46 Comprobando los tipos de valores en el inspector de elementos o Dev Tools.

11:19 De las cosas raras que tiene JS: El valor null es de tipo objeto.

12:14 Resumen de la clase.

Comentarios valiosos de la comunidad: 1, 2

4. Variables

0:22¿Qué es una Variable? Es la representación en memoria de un valor.

0:50 Ejemplos de var

3:02 Declarando una Variable.
![](declarandovariable.png

3:58 Inicializando la Variable.
![](declararinicializar.png

5:31 Generando Variables de Array. Declarando e inicializando la variable en la misma sentencia.
![](declarararray.png

6:30 El símbolo de = es el operador que se usa para asignar un valor.

6:59 Generando una Variable tipo Objeto. La estructura se asemeja a la de CSS.
![](declaraobjeto.png

Comentarios valiosos de la comunidad: 1, 2, 3

5. Funciones

0:04¿Qué son las funciones y cómo las podemos utilizar? Son un conjunto de sentencias que se pueden utilizar para generar acciones con los Valores que ya hemos guardado en Variables.

0:46¿Cómo las vamos a utilizar?Funciones Declarativas. Se declara con la palabra reservada de “funtion”.
![](funciondeclarativa.png

2:30Funciones de Expresión. Se inicializan directamente en una Variable. Se guarda todo el Valor de una función en una Variable.
![](funcionexpresion.png

3:48 Parámetros para funciones.

5:10Resumen de cómo se generan las funciones Declarativas vs. las de Expresión.

5:16 Las de Expresión también se conocen como funciones Anónimas ¿por qué?, porque la función no tiene nombre, sino que se genera una Variable que contiene como valor a una función.

5:30 Las Declarativas no pueden ser anónimas porque a la función se le está colocando un nombre.

6:35Ejemplos de funciones un poco más complejas. Directamente en la consola Dev Tools.

10:47 Obteniendo resultados de una función sin el console.log. Creando una variable con el resultado de la operación que queremos hacer. O usando return.

13:53Resumen de la clase.

Comentarios valiosos de la comunidad: 1, 2, 3. 4

6. ¿Cuándo utilizar una función declarativa y una expresiva?

Marcadores a los puntos claves de la presentación:
Cuando hablamos de funciones en JavaScript, tenemos dos tipos de funciones: Funciones Declarativas (function declaration / function statement) y Expresiones de función (function expression / funciones anónimas).

Funciones Declarativas:
En las funciones declarativas, utilizamos la palabra reservada function al inicio para poder declarar la función:

functionsaludar(nombre) {
	console.log(`Hola ${nombre}`);
}

saludar('Diego');

Expresión de función:
En la expresión de función, la declaración se inicia con la palabra reservada var, donde se generará una variable que guardará una función anónima.

var nombre = function(nombre){
    console.log(`Hola ${nombre}`)
}

nombre(‘Diego’);

En la expresión de función, la función podría o no llevar nombre, aunque es más común que se hagan anónimas.

Diferencias:
A las funciones declarativas se les aplica hoisting, y a la expresión de función, no. Ya que el hoisting solo se aplica en las palabras reservadas var y function.

Lo que quiere decir que con las funciones declarativas, podemos mandar llamar la función antes de que ésta sea declarada, y con la expresión de función, no, tendríamos que declararla primero, y después mandarla llamar.

Comentarios valiosos de la comunidad: 1, 2, 3, 4

7. Scope

Marcadores a los puntos claves de la presentación:

0:19¿Qué es el Scope? Es el alcance que tienen las variables.

0:49Ejemplos en Slides.

1:02Tipos de Scope: Global y Local.

3:30Ejemplos en la Consola de Dev Tools.

5:45 La Metáfora de la hormiga.

6:45Resumen de la clase.

Comentarios valiosos de la comunidad: 1, 2, 3, 4

8. Hoisting

Marcadores a los puntos claves de la presentación:

0:25¿Qué es Hoisting? Es cuando las variables y funciones se declaran antes de cualquier tipo de código. Hoisting solo aplica para var y funtion. Esto solo ocurre de ECMAScript 5 y anteriores. De la 6 en adelante ya no sucede debido a la introducción de 2 nuevas variables Const y Let

1:36Ejemplo de cómo se genera un Hoisting y cómo aprender a evitarlo si estamos usando ECMAScript 5 o anteriores.

1:45 Diferencia de Hoisting vs Hosting.

5:31jit Compiler se refiere a esta parte de la clase 1 (¿Qué es JavaScript?) 5:32

8:20 Hoisting con las funciones.

Comentarios valiosos de la comunidad: 1, 2, 3

9. Coerción

Marcadores a los puntos claves de la presentación:

0:43 Hay 2 tipos de Coerción: Implicitas y Explicitas.

0:49Coerción Implícita: es cuando el lenguaje nos ayuda y cambia un valor de un tipo a otro valor de otro tipo.

1:17Coerción Explícita: es la forma en que nosotros obligamos a que un valor de un tipo cambie a otro tipo. (string a number o viceversa)

1:31Ejemplo Coerción Implícita

3:21Ejemplo de Coerción Explícita

4:41Ejemplo de Coerción Explícita. Usando el método String() para convertir un número en texto.

6:52Ejemplo de Coerción Explícita. Usando el método Number() para convertir un texto a número.

7:27Caso de uso en la vida real: cuando usamos las etiquetas de <input> en html. JS regresa esos valores como strings. Si queremos tratarlos cómo números toca transformarlos con number().

8:28Resumen

Comentarios valiosos de la comunidad: 1

10. Valores: Truthy y Falsy

Marcadores a los puntos claves de la presentación:

0:11 Truthy y Falsy los vamos a ocupar cuando comencemos a generar condiciones en JS para validar si algo es verdadero o falso.

0:25 Primero entenderemos que valores por default son falsos y cuales son verdaderos.

0:34Ejemplos de Boolean que devuelve Falso:

Boolean(); //false  Boolean(0); //false  Boolean(null); //false Boolean(NaN); //false Boolean(undefined); //false  Boolean(false); //false  Boolean(""); //false

3:33Ejemplos de Boolean que devuelve Verdadero:

Boolean(1); //true o cualquier número diferente de cero (0) Boolean("a"); //true para cualquier caracter o espacio en blanco Boolean([]); //true array aunque esté vacío Boolean({}); //true objeto aunque esté vacío Boolean(function(){}); //true para cualquier función es verdadera también

4:39 Resumen

Comentarios valiosos de la comunidad: 1

11. Operadores: Asignación, Comparación y Aritméticos.

Marcadores a los puntos claves de la presentación:

0:42Operadores de Operación(+, -, *, /), que nos ayudan a realizar operaciones matemáticas. También conocidos como operadores Binarios.

1:37 Usando el operador + para concatenar strings.

2:31 Operador unitario (!). Se usa para negar un valor.

3:06 Operadores de Asignación (=). Asigna un valor a una variable.

3:34 Operador Comparativo (== y ===).
== compara valores, ej: 3 == “3”; true.
=== compara tipos de datos, ej: 3 === “3”; false.

5:07 Operador Comparativo (>, <, >=, <=)

6:13 Operador Comparativo (&&, ||).
&& equivale a una compuerta AND, solo valida si ambas condiciones se cumplen.
|| equivale a una compuerta OR, y valida si una de las condiciones se cumple.

7:55Caracteres para usar con Variables:++ para incrementar valores en 1. +=2 incrementa el valor en 2.

8:57 Resumen.

Comentarios valiosos de la comunidad: 1, 2

12. Condicionales: If, Else, else if

Marcadores a los puntos claves de la presentación:

0:37¿Qué son las Condicionales?. Son reglas para validar si algo es verdadero o falso. if valida por defecto si la condición es verdadera.

2:20else si la condición del if no es verdadera entonces salta a else.

3:35else if cuando queremos evaluar más de una condición.

4:29Ejemplo de validación de edad para votar en elecciones.

9:23Operador Ternario. Equivale a generar un if y else en una sola línea. condition ? true : false;

12:34Resumen

12:48Reto: hacer juego de Piedra, Papel o Tijera.

Comentarios valiosos de la comunidad: 1, 2, 3, 3

13. Switch

Marcadores a los puntos claves de la presentación:

0:06 ¿Qué es el Switch?

0:31 El Switch genera condiciones igual que un if pero con casos (case).

1:01Sintaxis del Switch:

switch (condición a validar) { 
       case 1ra-condición-a-comparar: 
       acción-si-se-valida
       break
       case 2da-condición-a-comparar: 
       acción-si-se-valida
       break
       default:
       acción-si-ningún-caso-anterior-es-validado
}

5:41¿Qué sucede al no colocar el break? El break sirve de freno en las validaciones. Si no se coloca el break todas las validaciones pasan y se imprimen.

6:25 Resumen de la clase.

6:33Nuevo reto de Piedra, Papel o Tijera, pero usando el swicth.

Comentarios valiosos de la comunidad: 1, 2, 3

14. Arrays

Marcadores a los puntos claves de la presentación:

0:26¿Qué es una Array? es un objeto que guarda más de un valor dentro de si. Genera una estructura de datos y puede contener todos los tipos de datos: números, strings, objetos e incluso otros arrays.

1:10Ejemplos de Arrays:

1:51¿Cómo se crea un Array?. Forma sintáctica literal para escribir un array: var nombre-variable = [];

4:25¿Cómo saber cuantos elementos hay en un array?. nombre-variable.length

5:09¿Cómo acceder a cada elemento dentro del array?. nombre-variable[número-de-posición]

6:35Métodos para mutar el array: Introducción al tema.

7:24Método push() para agregar más elementos al array: nombre-variable.push() Empuja un nuevo elemento dentro del array. Al final del mismo.

9:07Método pop() para eliminar elementos del array: nombre-variable.pop() Extare el elemento y lo elimina.

10:21Método unshift() para agregar un elemento al principio del array: nombre-variable.unshift()

12:14Método shift() para eliminar el primer elemento de un array: nombre-variable.shift()

13:55Método indexOf() para saber la posición de un elemento dentro del array: nombre-variable.inexOf() Retorna el número de la posición que ocupa.

15:21Resumen de la clase

15. Loops: For y For…of

Marcadores a los puntos claves de la presentación:

0:09¿Qué es un Ciclo?. Es una manera rápida y sencilla de poder hacer que una tarea pueda repetirse sin que tengamos que hacerlo de forma manual.

0:39 Comenzando ejemplos de loops de los tipos existentes.

1:53 Antes de comenzar el loop debemos hacer la tarea (función) que queremos invocar desde el loop.

3:03 Iniciando el loop for. Su sintaxis casi siempre ocupa una variable inicial de valor cero (0) for(var i = 0; validación; incrementador de variable) {lo que se desea ejecutar mientras se cumpla la validación}

9:19Otra forma de hacerlo, loop for…of: Sintaxis for(var nombre-singular of nombre-plural) {función(nombre-singular)}

11:22Resumen de la clase

Comentarios valiosos de la comunidad: 1

16. Loop: While

Marcadores a los puntos claves de la presentación:

0:15 Generando el array para luego ejecutar el while

0:46 Generando la función que se va a ejecutar dentro del while

1:34 Creando el while. Sintaxis while(a) {b}. Mientras a sea true el loop seguirá ejecutando b, y se detendrá cuando la condicón a ya no se cumpla, es decir sea falso.

3:46 Creando un console.log() para que se aprecie cómo el array esta siendo modificado por el método .shift

4:55Resumen de la clase

Comentarios valiosos de la comunidad: 1

17. Objetos

Marcadores a los puntos claves de la presentación:

0:05 Entendiendo que es un Objeto de JS. Llevando un objeto del mundo físico al paradigma de objetos de JS.

1:34 Sintaxis de un Objeto en JS. Lo primero es definir una variable: var objeto = {};

2:21 Agregando propiedades al objeto. Es una combinación entre palabras clave y valores. Las propiedades de un objeto se separan con coma “,”.

4:15¿Cómo podemos acceder a un valor específico de un Objeto?: nombre-variable.palabra-clave

5:36Agregando una Función como propiedad de un Objeto

7:37Forma de acceder al método que esta dentro de nuestro Objeto: nombre-variable.palabra-clave-que-contiene-la-función();

8:07¿Qué es el this?: Es una variable que hace referencia a su objeto padre. this en otros contextos puede tener valores diferentes.

9:36Resumen de la clase

Comentarios valiosos de la comunidad: 1, 2, 3, 4, 4

18. Objects: Función constructora

Marcadores a los puntos claves de la presentación:

2:01 Creando template de nuestra función constructora.
![](funciontemplate.png

4:56 Creando un nuevo Objeto a partir de nuestro template. var nombre-variable = new nombreFunción(propiedades-del-objeto);
![](funcionconstructora.png

9:29Reto: Usando los conocimientos adquiridos hasta ahora, genera una función constructora + un loop para crear una lista de objetos de 30 autos que se construya sola.

Comentarios valiosos de la comunidad: 1

19. Métodos de recorridos de Arrays

Marcadores a los puntos claves de la presentación:

0:51 Primero lo primero, generando el array de objetos.

3:59Métodos para recorrer el contenido del array: Método filter. nombre-variable.filter(funtion(variable-que-contiene-array){return nombre-variable.nombre-palabra-clave operador valor-a-validar}). Regresa 1 array con los objetos que cumplen la validación(Todo el objeto)
![MétodoFilter](métodoFilter.png

6:24Metodo Map: nombre-variable.map(funtion(variable-que-contiene-array){return nombre-variable.nombre-palabra-clave}). Regresa un array con solo la lista de elementos asociados a la palabra clave.
![MétodoMap](métodoMap.png8:25Resumen de la clase Método filter: nos ayuda a filtrar objetos de un array. Y el método map nos ayuda a extraer elementos dentro de los objetos y generar un nuevo array sin objetos adentro.

20. Recorriendo Arrays con .find(), .forEach() y .some()

Marcadores a los puntos claves de la presentación:

0:13Método find() este método valida un true o un false. Si un artículo existe o no existe dentro del array de objetos.
![](métodoFind.png

3:02Método forEach() no genera un nuevo array, solo filtra los elementos de un array de objetos sin modificar el array. var nombre-variable._forEach(funtion(nombre-variable){función-a-ejecutar});
![](métodoforEach.png

5:27Método some(): Regresa una validación de true o false. Genera un nuevo array. Y solo retorna el valor true o false.

![](métodosome.png

8:24Resumen de la clase

Comentarios valiosos de la comunidad: 1, 2, 3, 4, 5

21. Despedida

Marcadores a los puntos claves de la presentación:

0:12 Los cursos que recomienda para continuar:

-Fundamentos de JavaScript
-V8 y el navegador
-ECMAScript 6+

- Puedes acceder al resumen de marcadores de todo el curso en este Tutorial

Cuéntame en los comentarios del Tutorial si te ha gustado este formato de resumen, y dale 💚 si quieres más de estos para la comunidad 😁🙌

![](why-dont-you-hit-that-like-button.jpg

Escribe tu comentario
+ 2
Ordenar por:
1
6098Puntos

Me encantó el resúmen ayuda mucho, gracias

1

Muy util para repasar los temas que aun tengamos dudas