JavaScript

Es un lenguaje de programación ligero, interpretado, o compilado justo-a-tiempo (just-in-time) con funciones de primera clase. Es conocido como un lenguaje de scripting (secuencias de comandos) para páginas web, aunque también es usado en muchos entornos fuera del navegador, tal como Node.js

• La compilación en tiempo de ejecución (just-in-time), es una técnica para mejorar el rendimiento de sistemas de programación que compilan a bytecode, consistente en traducir el bytecode a código máquina nativo en tiempo de ejecución.
• Un lenguaje de programación se dice que tiene Funciones de primera clase cuando las funciones en ese lenguaje son tratadas como cualquier otra variable.

Versiones de JavaScript

ECMAScript es la especificación donde se mencionan todos los detalles de cómo debe funcionar y comportarse Javascript. De esta forma, los diferentes navegadores (Chrome, Firefox, Opera, Edge, Safari…) saben como deben desarrollar los motores de Javascript para que cualquier código o programa funcione exactamente igual, independientemente del navegador que se utilice.

ECMAScript suele venir acompañado de un número que indica la versión o revisión de la que hablamos (algo similar a las versiones de un programa). En cada nueva versión de ECMAScript, se añaden nuevas funcionalidades, manteniendo Javascript vivo y con novedades que lo hacen un lenguaje de programación moderno y cada vez mejor preparado.

Teniendo esto en cuenta, debemos saber que los navegadores web intentan cumplir la especificación ECMAScript al máximo, pero no todos ellos lo consiguen. Por lo tanto, pueden existir ciertas discrepancias. Por ejemplo, pueden existir navegadores que cumplan la especificación ECMAScript al 80% y otros que sólo la cumplan al 60%. Esto significa que pueden haber características que no funcionen en un navegador específico (y en otros sí).

Declaración e Iniciación de variables

Una variable es un contenedor para un valor, como un número que podríamos usar en una suma, o una cadena que podríamos usar como parte de una oración. Pero una cosa especial acerca de las variables es que los valores que contienen pueden cambiar.

Para usar una variable, primero debes crearla o dicho de otra manera, declarar la variable. Para hacerlo, escribimos la palabra clave var o let seguida del nombre con el que deseas llamar a tu variable:

myName = "Rodrigo";
myProgrammingLanguage = "JavaScript";

Constantes en JavaScript

En JavaScript moderno, tenemos la palabra clave const, que nos permite almacenar valores que nunca se pueden cambiar:

const DAYS_IN_WEEK = 7;
const HOURS_IN_DAY = 24;

const funciona exactamente de la misma manera que let, excepto que a const no le puedes dar un nuevo valor. En el siguiente ejemplo, la segunda línea arrojará un error:

const DAYS_IN_WEEK = 7;
DAYS_IN_WEEK = 8;

Diferencias entre var, let y const

• var: Es la forma antigua de declarar variables en JavaScript. Las variables declaradas con var pueden ser reasignadas y su alcance es la función en la que se declaran o el objeto global (si se declaran fuera de una función). Esto significa que las variables var pueden ser accedidas y modificadas desde cualquier parte del código.

var nombre = "Hola";
console.log(nombre); // Hola
var nombre = "Hello";
console.log(nombre); // Hello

function saludar() {
  var nombreASaludar = "nombresito";
  console.log("Hola " + nombreASaludar); // Hola nombresito
}
console.log(nombreASaludar); // Error

saludar();

• let: Fue introducido en la versión ES6 de JavaScript y es una forma más moderna de declarar variables. Las variables declaradas con let también pueden ser reasignadas, pero su alcance está limitado al bloque de código en el que se declaran (por ejemplo, dentro de una función o un bucle). Esto significa que las variables let no pueden ser accedidas fuera de su bloque de código.

let pais = "es";
function saludar() {
  console.log(pais); // es
  pais = "pt-BR";
  let nombre = "Nombre";
  console.log(nombre); // Nombre
}
saludar();
console.log(nombre); // Error

if (true) {
  console.log(pais); // pt-BR
  let edad = 52;
  console.log(edad); // 52
}
console.log(edad); // Error

• const: también fue introducido en la versión ES6 de JavaScript y es una forma de declarar variables que no pueden ser reasignadas después de su inicialización. Las variables declaradas con const deben ser inicializadas al momento de su declaración y su alcance está limitado al bloque de código en el que se declaran.

const saludo = "Hola";
saludo = "Adiós"; // Error

function saludar() {
  console.log(saludo); //Hola
  const nombre = "Nombre";
  console.log(nombre); // Nombre
}
console.log(nombre); // Reference Error

if (true) {
  console.log(saludo); //Hola
  const edad = 52;
  console.log(edad); // 52
}
console.log(edad); // Reference Error

Scope de las Variables

Introducción

El scope (alcance) en JavaScript define el contexto de ejecución actual en el cual los valores y expresiones son “visibles” o pueden ser referenciados. Si una variable o expresión no está en el scope actual, no estará disponible para su uso. Los scopes pueden ser jerárquicos, permitiendo que los scopes hijos tengan acceso a los scopes padres, pero no al revés [1].

Tipos de Scope

Scope Global

• Definición: Es el scope predeterminado para todo el código que se ejecuta en modo de script.
• Accesibilidad: Las variables globales pueden ser accedidas desde cualquier parte del programa JavaScript [2].

Scope de Módulo

• Definición: Es el scope para el código que se ejecuta en modo de módulo.
• Accesibilidad: Las variables declaradas en un módulo solo son accesibles dentro de ese módulo.

Scope de Función

• Definición: Se crea con una función, lo que significa que una variable definida exclusivamente dentro de la función no puede ser accedida desde fuera de la función o dentro de otras funciones [1].
• Ejemplo:

function exampleFunction() {
  const x = "declared inside function"; // x solo puede ser usado en exampleFunction
  console.log("Inside function");
  console.log(x);
}

console.log(x); // Causa error

Scope de Bloque

• Definición: Se crea con un par de llaves (un bloque). Las variables declaradas con let o const dentro de un bloque solo son accesibles dentro de ese bloque [1].
• Ejemplo:

{
  const x = 1;
}
console.log(x); // ReferenceError: x is not defined

Scope de Argumentos de Función

• Definición: Los argumentos de función funcionan como variables locales dentro de las funciones [2].

Diferencias entre var, let y const

• var: Tiene un ámbito de función y puede ser accesible fuera de la función si se declara globalmente.
• let y const: Tienen un ámbito de bloque, lo que significa que solo son accesibles dentro del bloque de código en el que se declaran.

Vida de las Variables en JavaScript

• Variables Locales: Son eliminadas cuando la función se completa.
• Variables Globales: En un navegador web, son eliminadas cuando se cierra la ventana o pestaña [2].

Modo Estricto

• Definición: Todos los navegadores modernos soportan ejecutar JavaScript en “Modo Estricto”. En este modo, las variables no declaradas no son automáticamente globales [2].

Videos

Video Scope Javascript

Bloques de código

Si una variable se declara dentro de un bloque de código js{...}, solo es visible dentro de ese bloque.

{
  // hacer un trabajo con variables locales que no deberían verse fuera
  let message = "Hello"; // solo visible en este bloque
  alert(message); // Hello
}

alert(message); // Error: el mensaje no se ha definido (undefined)

Podemos usar esto para aislar un fragmento de código que realiza su propia tarea, con variables que solo le pertenecen a él:

{
  // ver mensaje
  let message = "Hello";
  alert(message);
}

{
  // ver otro mensaje
  let message = "Goodbye";
  alert(message);
}

Tengamos en cuenta que, sin bloques separados, habría un error si usáramos ‘let’ con el nombre de la variable existente

Para if, for, while y otros, las variables declaradas dentro de js{...} también son solo visibles en su interior:

if (true) {
  let phrase = "Hello!";

  alert(phrase); // Hello!
}

alert(phrase); // ¡Error, no hay tal variable!

Funciones anidadas

Una función se llama “anidada” cuando se crea dentro de otra función.

Podemos usarlo para organizar nuestro código:

function sayHiBye(firstName, lastName) {
  // función anidada auxiliar para usar a continuación
  function getFullName() {
    return firstName + " " + lastName;
  }

  alert("Hello, " + getFullName());
  alert("Bye, " + getFullName());
}

Aquí la función anidada getFullName() se hace por conveniencia. Puede acceder a las variables externas y, por lo tanto, puede devolver el nombre completo. Las funciones anidadas son bastante comunes en JavaScript.

Lo que es mucho más interesante, es que puede devolverse una función anidada: ya sea como propiedad de un nuevo objeto o como resultado en sí mismo. Luego se puede usar en otro lugar. No importa dónde, todavía tiene acceso a las mismas variables externas.

function makeCounter() {
  let count = 0;

  return function () {
    return count++;
  };
}

let counter = makeCounter();

alert(counter()); // 0
alert(counter()); // 1
alert(counter()); // 2

En este ejemplo, nos podremos dar cuenta de que el número va aumentando, lo cual quiere decir que va recordando el valor anterior, como puede recordar el valor que tiene anteriormente es lo que nos podemos preguntar, es aquí donde entra otro termino de JavaScript

Closure

Existe un término general de programación “closure” que los desarrolladores generalmente deben conocer.

Un closure es una función que recuerda sus variables externas y puede acceder a ellas. En algunos lenguajes, eso no es posible, o una función debe escribirse de una manera especial para que suceda. Pero como se explicó anteriormente, en JavaScript todas las funciones son closures naturales (solo hay una excepción, que se cubrirá en La sintaxis “new Function”).

Es decir: recuerdan automáticamente dónde se crearon utilizando una propiedad oculta [[Environment]], y luego su código puede acceder a las variables externas.

Cuando en una entrevista un desarrollador frontend recibe una pregunta sobre “¿qué es una closure?”, una respuesta válida sería una definición de closure y una explicación de que todas las funciones en JavaScript son closures, y tal vez algunas palabras más sobre detalles técnicos: la propiedad [[Environment]] y cómo funcionan los entornos léxicos.

Hoisting

Introducción

Hoisting es un comportamiento en JavaScript que mueve las declaraciones de variables y funciones al inicio de su ámbito (función o global) durante la fase de compilación. Aunque conceptualmente se puede pensar que las declaraciones son físicamente movidas al comienzo del código, en realidad, las declaraciones son asignadas en memoria durante la fase de compilación, pero permanecen en la posición en la que se escribieron en el código [2].

Hoisting de Variables

Con var

• Sintaxis: var nombreVariable;
• Comportamiento: Las variables declaradas con var son elevadas al inicio de su ámbito y se inicializan con undefined. Esto significa que puedes referenciar una variable var antes de su declaración en el código, pero su valor será undefined hasta que se le asigne un valor [2][3].

Con let y const

• Sintaxis: let nombreVariable; o const nombreVariable;
• Comportamiento: Las variables declaradas con let y const también son elevadas, pero no son inicializadas. Si intentas acceder a una variable let o const antes de su declaración, obtendrás un error de referencia. Este comportamiento se conoce como la Temporal Dead Zone (TDZ) [4].

Ejemplo de Hoisting con var

console.log(x); // undefined
var x = 5;

Ejemplo de Hoisting con let y const

console.log(y); // ReferenceError: y is not defined
let y = 10;

Hoisting de Funciones

• Sintaxis: function nombreFuncion() {...}
• Comportamiento: Las declaraciones de funciones son elevadas al inicio de su ámbito, permitiendo llamar a la función antes de que se declare en el código. Sin embargo, esto no se aplica a las funciones expresadas o funciones flecha [3].

Ejemplo de Hoisting de Funciones

miFuncion(); // "Hola Mundo"

function miFuncion() {
  console.log("Hola Mundo");
}

Videos

Video hoisting