JavaScript representa uno de los tres pilares de Internet, junto con HTML y CSS, proporcionando la estructura y el estilo respectivamente, mientras que JavaScript da vida a las páginas web. JavaScript es el lenguaje utilizado por más del 95% de los sitios web. Todos a bordo del tren de JS. 🧑🏻💻
En este post, vamos a hablaros de cuatro de los conceptos más importantes de JavaScript que todo desarrollador web debe saber.
IIFE
Las IIFE, también conocidas como Expresiones de Función Inmediatamente Invocadas, son funciones de JavaScript definidas como expresiones que se invocan inmediatamente y se ejecutan tan pronto como se definen. Las variables que se declaran dentro de una IIFE no pueden ser accedidas externamente, evitando así la contaminación del ámbito global. Como tal, la razón principal para incorporar IIFE es la ejecución inmediata del código y la privacidad de los datos resultante.
La sintaxis para definir un IIFE podéis verla en el siguiente ejemplo:
(function(a,b){
return a + b;
})(10,20);
También puede utilizar una función de flecha en la definición de un IIFE:
(() => {
//…
})();
Scope
Scope se refiere al acceso a las variables, a las que tienes -o no tienes- acceso en diferentes contextos. En JavaScript, el ámbito por defecto es el ámbito de la ventana, también conocido como el ámbito raíz. El ámbito puede visualizarse como una caja de límites para las variables, objetos y funciones que incluye restricciones sobre las variables y determina si puedes acceder a la variable o no. Esto limita tanto la visibilidad como la accesibilidad de las variables a otras partes de tu código.
Tener un buen conocimiento de este concepto es esencial para un desarrollador. El alcance puede ser local o global. El alcance local permite el acceso a todo lo que está dentro de los límites, mientras que el alcance global es todo lo que está fuera de estos límites. El ámbito global no puede acceder a las variables definidas dentro del ámbito local, ya que está encerrado dentro de los límites, a menos que sea devuelto.
Por ejemplo, digamos que tienes una función en la que defines una variable
function sayHello() {
let greeting = «Hello»;
}
sayHello();
console.log(greeting); //a ReferenceError is returned stating that ‘greeting’ is not defined
Este ReferenceError se devuelve porque ‘greeting’ está definido dentro del ámbito local de la función sayHello, por lo que es imposible acceder a la variable fuera de la función.
Closures
Closure es una función dentro de otra función que puede acceder a las variables definidas dentro de la función externa. Esta función interna es técnicamente el cierre y de nuevo es capaz de acceder a las variables definidas dentro de la función padre, así como a las variables definidas dentro de su propio ámbito y a las variables globales. Sin embargo, la función padre no tiene acceso a las variables de la función interna.
Los cierres son útiles para emplear cuando se desea pasar variables, matrices o métodos de una función externa a una función interna con el fin de extender el comportamiento.
Hoisting
Sin el conocimiento de Hoisting, muchos desarrolladores experimentan resultados inesperados de su código JavaScript. Dentro de JavaScript, es posible llamar a una función antes de que esté definida sin recibir un ReferenceError. Esto se debe a que el intérprete de JavaScript mueve las declaraciones de variables y funciones a la parte superior del ámbito actual, ya sea local o global, antes de la ejecución. Esto se llama Hoisting.
Un ejemplo:
onePlusOne();
function onePlusOne(){
console.log(1 + 1);
}
//2 is returned in console
¿Te gustaría aprender más sobre JavaScript?
Es uno de los pilares que trabajamos en nuestra formación estrella, Bootcamp Full Stack Web Developer. Además, cada jueves nuestro Director y Profesor Carlos Yáñez realiza una clase gratuita sobre primeros pasos con JavaScript.
¡No te pierdas nuestras redes sociales para estar enterarte de todo!
