Resumen curso de Closures y Scope (con MARCADORES!)

25299

1. Introducción y bienvenida al curso

2. Qué es el Scope y cómo funciona el Global Scope

0:03 ¿Qué es el Scope?. Se define como el alcance que va a tener tu variable dentro de tu código. Scope al español se traduce cómo Ámbito.

4:53 Declarando VAR, LET y CONST como variables globales (fuera de cualquier scope local de alguna función). En el ejemplo probamos como los 3 tipos de variable pueden ser accedidos desde el scope local de una función.

6:57 Demostrando cómo NO se puede redeclarar un valor a una variable de tipo LET ni CONST. Estas variables no permiten la redeclaración. Las variables VAR si lo permiten.

8:32 Principales errores que podemos cometer en la declaración de variables. 1) Crear una variable sin asignar la palabra reservada VAR, LET o CONST. Aunque es posible, se considera una mala práctica, ya que crea una variable de tipo VAR de alcance Global en el scope local de la función.

9:48 Otro error que debemos evitar cometer es la doble asignación de variable, ya que también ocasiona la creación de una variable de tipo global incurriendo en el error establecido en el punto anterior.

3. Local Scope

0:43 Creando una función que llamaremos HelloWorld. Dentro establecemos una variable con un string. Luego lo llamaremos de forma global para demostrar que no podremos acceder a él.

const helloWorld = () => {
	const hello = “Hello World”;
	console.log(hello);
};

helloWorld(); //Imprime sin problema el resultado
console.log(hello); //falla al no encontrar la variable en el ámbito de la función

3:06 Segundo caso para ejemplificar el alcance de una función.

var scope = “i am global”;const funtionScope = () => {
	var scope = “i am just a local”;constfunc = () => {return scope
}
console.log(func());
funtionScope(); //devuelve “i am just a local”. porque retorna la variable scope que está dentro de la función invocada.
console.log(scope); //devuelve “i am global”. porque está invocando a la variable que está en su ámbito (global)

La variable scope (global) en ningún momento se le reasigna el valor. La función funtionScope tiene definida internamente otra variable con el mismo nombre. A esto se le conoce cómo Ámbito Léxico. Más información en Wikipedia.
Aclaratoria: una variable LET no puede ser redefinida más si puede ser reasignado su valor.

let fruit = "apple";
fruit = "banana";

console.log(fruit); // banana

4. Funtion Scope

0:32 Demostrando con otro ejemplo cómo una variable dentro de una función NO puede ser accedida desde afuera del contexto de la función.

const fruits = () => {
	var fruit = “apple”;
	console.log(fruit); 
};
fruits(); //devuelve apple
console.log(fruit); //error porque no encuentra la variable en el scope

2:08 A esta otra función le pasaremos nuevos valores para ver cómo se comporta

const anotherFuntion = () => {
var x = 1;
var x = 2;
let y = 1;
console.log(x); //imprime 2console.log(y); //Imprime 1
};
anotherFuntion();

3:33 Demostrando cómo las variables LET no pueden ser redeclaradas. A diferencia de VAR que si lo redefine y reasigna el nuevo valor.

const anotherFuntion = () => {
var x = 1;
var x = 2;
let y = 1;
let y = 2;
console.log(x); //imprime 2console.log(y); //Arroja error porque no puede ser redefinida una variable LET.
};
anotherFuntion();

5. Block Scope

0:28 Entendiendo el scope dentro de una función con un bloque de código en su interior.

2:19 definiendo var dentro del scope de la función y obteniendo un resultado. Esto significa que puede ser accedido por todos los elementos de la función.

const fruits = () => {
	if (true) {
		var fruits1 = `apple`;
		var fruits2 = `banana`;
		var fruits3 = `kiwi`;
	}
	console.log(fruits1); //devuelve appleconsole.log(fruits2); //devuelve bananaconsole.log(fruits3); //devuelve kiwi
}
fruits(); //devuelve apple, banana, kiwi

2:57 Cambiando var a let y const. resultado se pierde el acceso porque la función que esta llamando esta fuera de ese scope.

const fruits = () => {
	if (true) {
		var fruits1 = `apple`;
		let fruits2 = `banana`;
		const fruits3 = `kiwi`;
	}
	console.log(fruits1); //devuelve appleconsole.log(fruits2); //devuelve errorconsole.log(fruits3); //devuelve error
}
fruits(); //devuelve apple y error que no existe fruits2 y fruits3

3:41 Accediendo a los elementos desde los ámbitos correspondientes. resultado se muestran todas las consultas correctamente.

4:30 Entendiendo mejor con otro ejemplo. Demostrando cómo el valor de x se transfiere de forma global.

let x = 1;
{
let x = 2;
console.log(x); //devuelve 2
}
console.log(x); //devuelve 1

6:37 Otro ejemplo para probar el funcionamiento con VAR. Obteniendo resultado 10 veces 10 (asignación del scope que nos da VAR)

const anotherFuntion = () => {
	for (var i = 0; i < 10; i++) {
		setTimeout(() => {
			console.log(i);
		}, 1000)
	}
};
anotherFuntion(); //devuelve 10, 10, 10, 10, 10, 10, 10, 10, 10, 10

8:44 Iterando con LET y obteniendo resultado del 1 al 10

const anotherFuntion = () => {
	for (let i = 0; i < 10; i++) {
		setTimeout(() => {
			console.log(i);
		}, 1000)
	}
};
anotherFuntion(); //devuelve 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

6. ¿Qué es closure?

0:60 Haciendo una función que nos permita mostrar lo que vamos ir agregando a nuestra alcancía. Esta función la haremos sin closure para posteriormente demostrar cómo con closure podemos establecer la función recuerda para generar la lógica de alcancía que estamos buscando.

const moneyBox = (coins) => {
	var saveCoins = 0;
	saveCoins += coins;
console.log(`MoneyBox: $${saveCoins}`);
}
moneyBox(5); //imprime 5
moneyBox(10); //Imprime 10

3:14 No se están guardando los elementos. solo imprime los valores que le estamos pasando, por ende, no estamos generando un closure.

3:29 ¿Cómo funciona un closure?. Un closure (cierre) permite acceder al ámbito de una función exterior desde una función interior. En JavaScript, las clausuras se crean cada vez que una función es creada.

3:39 Creando la misma función pero con una estructura de un Closure. Esto nos permitirá hacer que nuestra función recuerde.

const moneyBox = () => {
	var saveCoins = 0;
	const countCoins = (coins) => {
		saveCoins += coins;
console.log(`MoneyBox: $${saveCoins}`);
	}
	return countCoins;
};

let myMoneyBox = moneyBox();

myMoneyBox(4); //4
myMoneyBox(6); //10
myMoneyBox(10); //20

7. Ámbito léxico en closures

0:44 Construyendo una función con closure para ver cómo podemos asignar valores y cómo podemos reasignar o construir nuevos elementos a partir de este mismo y cómo van a recordar el valor que presentan según cada uno de los llamados que estamos haciéndole.

const buildCount = (i) => {  //nos permite manejar valores que vamos a estar contando dentro de esta función
	let count = i; //asignando el valorconst displayCount = () => { //generando constante que es la función dentro de nuestra función, con la cual damos vida al closure
		console.log(count++); //imprimimos el valor y sumamos 1
	};
	return displayCount;
}
const myCount = buildCount(1);
myCount(); //1
myCount(); //2
myCount(); //3const myCount = buildCount(10); //esta función crea un nuevo closure (un nuevo ámbito o alcance). El parámetro 10 hace que la cuenta comience en ese valor.
myCount(); //10
myCount(); //11
myCount(); //12

2:48 Explicación del profe: “El Ámbito Léxico es las funciones que se ejecutan utilizando la cadena del alcance donde estaba vigente en su momento. Lo que significa, que podemos acceder a count que está en la función padre”. 😵

4:47 Con const myCount = buildCount(10); creamos una nueva constante con la misma función pero pasando el valor 10 cómo parámetro. Esto hace que la cuenta comience en el valor indicado: 10, 11, 12, etc.

8. Cómo crear variables privadas con closures

0:43 Creando función person que tendrá métodos internos por medio de los cuales podremos obtener la información de una variable o asignarle algún valor a esta variable. Pero nunca podremos acceder desde afuera.

1:25 Creando los métodos getName y setName que serán retornados (return) por la función person. getName es una función que retorna el valor que está en saveName.

2:02 Creando el método setName. Le asignamos el valor name a la variable saveName y al método. Hasta aquí ya tenemos la función que “protege” a la variable saveName. Convertimos a saveName en una variable privada.

const person = () => {
	var saveName = “Name”;
	return {
		getName: () => {
			return saveName;
		},
		setName: (name) => {
			saveName = name;
		},
	};
};

newPerson = person();
console.log(newPerson.getName());
newPerson.setName(“Oscar”);
console.log(newPerson.getName());

2:45 Ejecutando, por medio de nuestro closure, los métodos por medio de los cuales vamos a poder asignar o traer los valores de saveName.

3:53 Mostrando el resultado del código y explicación del profesor.

9. Loops

Explica lo mismo pero no entendí nada. La pregunta del ¿por qué? no es respondida.

const anotherFuntion = () => {
	for (var i = 0; i < 10; i++) {
		setTimeout(() => {
			console.log(i);
		}, 1000)
	}
};
anotherFuntion(); //devuelve 10, 10, 10, 10, 10, 10, 10, 10, 10, 10

Explica lo mismo pero no entendí nada

10. ¿Qué es el hoisting?

1:11 Ejemplo con variables VAR

a = 2;
var a;
console.log(a); //imprime 2
------------------------------------------------------
console.log(a); //imprime undefined porque la variable se crea pero no se le asigna ningún valor, sino hasta después
var a = 2;

3:11 Ejemplo con Funciones

function nameOfDog(name) {
	console.log(name);
}
nameOfDog(“Elmo”); // imprime Elmo
-----------------------------------------------------
nameOfDog(“Elmo”); // imprime Elmo igualmente
function nameOfDog(name) {
	console.log(name);
}