Ámbito local o de función

Clase 9 de 24 • Curso de Clean Code y Buenas Prácticas con JavaScript

Elcira Ibarra

student•

Cómo usaría una variable global y una local?

Por ejemplo en un ciclo while, la variable inicial declaramos por fuera del bloque, porque necesitamos actualizar su valor, sino sería un ciclo infinito.

let age = 0; // variable global
while(age < 18) {
    age = age + 1;
	if(age != 18) {
		console.log('Hoy es mi cumpleaños número: ', age);
	} else {
		console.log(`Hoy cumplo: ${age} años así que ya soy mayor de edad`);
	}
}

// OUTPUT 👇

Hoy es mi cumpleaños número:  1
Hoy es mi cumpleaños número:  2
Hoy es mi cumpleaños número:  3
Hoy es mi cumpleaños número:  4
Hoy es mi cumpleaños número:  5
Hoy es mi cumpleaños número:  6
Hoy es mi cumpleaños número:  7
Hoy es mi cumpleaños número:  8
Hoy es mi cumpleaños número:  9
Hoy es mi cumpleaños número:  10
Hoy es mi cumpleaños número:  11
Hoy es mi cumpleaños número:  12
Hoy es mi cumpleaños número:  13
Hoy es mi cumpleaños número:  14
Hoy es mi cumpleaños número:  15
Hoy es mi cumpleaños número:  16
Hoy es mi cumpleaños número:  17
Hoy cumplo: 18 años así que ya soy mayor de edad

Otro ejemplo de uso de variable global:

let users = ['Petra', 'Carla']; // variable global
console.log('initial users: ', users)

function newUser(name) {
	users.push(name);
	console.log('modified users:', users);
}

newUser('Elcira');

// OUTPUT 👇

initial users:
Array [ "Petra", "Carla" ]

modified users:
Array(3) [ "Petra", "Carla", "Elcira"]

Un ejemplo de uso de variable local:

function orderBreakfast(...menu) {
	let order = menu; // variable local
	console.log('Your breakfast', order)
}

orderBreakfast('coffee','toast','eggs');

// OUTPUT 👇

Your breakfast
Array(3) [ "coffee", "toast", "eggs" ]

Irving Juárez

student•

Cada que se ejecuta un script en Node o en el navegador, se crea un Contexto de ejecución global, donde se almacenan las variables definidas dentro de este. . Cuando una función se crea, también se crea un contexto de ejecución, pero para esta función en particular, así que todas las variables que se declaran e inicializan dentro de este nuevo Contexto de Ejecución, se van a "guardar" ahí, sin poder ser accesadas desde otros contextos de ejecución, tanto global como otros contextos locales. . Cuando se quiere acceder a una variable dentro de un contexto local y no la encuentra, como en el ejemplo de abajo:

function greet() {
  console.log(greeting)
}

Lo que el engine de JS va a hacer, es buscar la variable en un ámbito más afuera del suyo hasta llegar al ámbito global. Si en el ámbito global no encuentra la variable, arroja un error. Pero si sí encontro la variable en el ámbito local, se va a quedar con esa variable. Eso es lo que se le conoce como el Scope Chain en JavaScript

Xavier Flores

student•

gracias por el dato. esto abre las posibilidades de llamar algo no deseado.

Irving Juárez

student•

Tambien puede ser usado para tu beneficio, pudiendo cambiar una variable desde diferentes scopes locales. Aunque esto puede llegar a ser problematico, por lo que las buenas practicas nos dicen que cada variable debe estar dentro de un scope especifico y si se quiere usar una variable global dentro de un scope local, se debe pasar a través de los argumentos de la función

Elcira Ibarra

student•

Las variables declaradas en el ámbito local o de función solo van a existir dentro de esa función.

Reinaldo Mendoza

student•

Esto puede causar side effects

karen Meyhuay Zarzosa

student•

Las variables de ámbito global se pueden leer en cualquier parte del código, mientras que las variables de ámbito local no, solo en la función en las que fueron creadas.

Eugenio Condori

student•

Es preferible usar el ámbito local o de función siempre que sea posible, antes que usar el ámbito global?

Sandra Rosa Arroyo Paredes

student•

yo entiendo que si, dado que resultarian en funciones predecibles (concepto de funciones puras) y por tanto tambien testeables.

giovanni.sayago

student•

Hacer seguimiento de los valores de variables globales en códigos complejos es bastante difícil.

Ana Rotela Cabrera

student•

Resumen de la clase

BinaryTreeCode

student•

Si te interesa el tema de los diferentes ámbitos en los que habitan las variables te recomiendo el curso de scope de gndx

Joan Alexander Valerio Rodríguez

student•

Las variables de son declaradas en un ámbito local tienen la característica que puedes acceder a ellas en cualquier bloqué o lugar en nuestro código. Sin embargo, como bien explica Alex, en el caso de las variables declaradas en un ámbito local, solo podrán ser utilizadas en el bloque de código donde fueron creadas.

Donovan RM

student•

Only Class Code

function greet() {
    let greeting = "Hello World";
    console.log(greeting);
}

greet();//> Hello World
console.log(greeting);//> Error

Camilo Taborda

student•

Scope Global : variable asignada fuera de una funcion que puede ser utilizada dentro de cualquier otra funcion.

Scope Local: variable asignada dentro de una funcion en especifico solo para ser utilizada dentro de dicha funcion

Jonathan Meixueiro

student•

Un ejemplo de como usamos una variable local muy seguido es con los ciclos for

for (let index = 0; index < 10; index++) {
	// conjuro mágico
}

Para usar una variable global con un índice, por ejemplo tomando el nombre de una lista de usuarios, almacenaría el índice del array de dicho usuario en una variable global para así poder usarlo en una iteración.

const handsomeUsers = ['Jonathan', 'Elcira', 'Reinaldo'];

const mostHandsomeUser = handsomeUsers[2];

for (let index = 0; index < mostHandsomeUser.length; index++) {
	console.log(mostHandsomeUser[index])
}

Output:
R
e
i
n
a
l
d
o

let age = 0; // variable global
while(age < 18) {
    age = age + 1;
	if(age != 18) {
		console.log('Hoy es mi cumpleaños número: ', age);
	} else {
		console.log(`Hoy cumplo: ${age} años así que ya soy mayor de edad`);
	}
}

// OUTPUT 👇

Hoy es mi cumpleaños número:  1
Hoy es mi cumpleaños número:  2
Hoy es mi cumpleaños número:  3
Hoy es mi cumpleaños número:  4
Hoy es mi cumpleaños número:  5
Hoy es mi cumpleaños número:  6
Hoy es mi cumpleaños número:  7
Hoy es mi cumpleaños número:  8
Hoy es mi cumpleaños número:  9
Hoy es mi cumpleaños número:  10
Hoy es mi cumpleaños número:  11
Hoy es mi cumpleaños número:  12
Hoy es mi cumpleaños número:  13
Hoy es mi cumpleaños número:  14
Hoy es mi cumpleaños número:  15
Hoy es mi cumpleaños número:  16
Hoy es mi cumpleaños número:  17
Hoy cumplo: 18 años así que ya soy mayor de edad

let users = ['Petra', 'Carla']; // variable global
console.log('initial users: ', users)

function newUser(name) {
	users.push(name);
	console.log('modified users:', users);
}

newUser('Elcira');

// OUTPUT 👇

initial users:
Array [ "Petra", "Carla" ]

modified users:
Array(3) [ "Petra", "Carla", "Elcira"]

function orderBreakfast(...menu) {
	let order = menu; // variable local
	console.log('Your breakfast', order)
}

orderBreakfast('coffee','toast','eggs');

// OUTPUT 👇

Your breakfast
Array(3) [ "coffee", "toast", "eggs" ]

const handsomeUsers = ['Jonathan', 'Elcira', 'Reinaldo'];

const mostHandsomeUser = handsomeUsers[2];

for (let index = 0; index < mostHandsomeUser.length; index++) {
	console.log(mostHandsomeUser[index])
}

Ámbito local o de función

Introducción al Clean Code

Deuda técnica y refactorización de código

Reglas del diseño simple

Qué es Clean Code

Nombre y uso de las variables

Uso correcto de var, let y const

Reglas para la nomenclatura

Cómo nombrar según el tipo de dato

Nombres de Variables y Funciones Correctos en JavaScript

Ámbito de las variables

Ámbito global

Ámbito local o de función

Ámbito de bloque

Ámbito estático

Hoisting

Funciones

Declaración y expresión de funciones

Parámetros y argumentos

Funciones de flecha y el this

Clases

POO con ES6 (constructores, métodos y herencia)

Herencia en JavaScript

Tamaño reducido (responsabilidad única)

Organización

Optimizaciones

Cuándo usar comentarios

Formato coherente (codear en equipos)

Principio DRY

Tipos de Algoritmos y Complejidad Big O en JavaScript

Cierre

Sigue aprendiendo JavaScript