Variables en Javascript y constantes

Javascript variables and constants

Variables

One of the most used elements are variables in Javascript. We can describe variables in Javascript as boxes to hold information, which we label so that we can find that information easily. This label is the name of the variable and the box is the space used in RAM.

Variables y constantes, cajas que guardan información
Variables and constants, boxes that store information

This is what variables are like in Javascript, and in fact in any programming language. You can also store any datatype, whether they are numbers, text strings, functions or any type of object.

There are two ways to declare a variable. One is using let and the other using var.

//Variables de tipo String
var name = 'Jaime';
let last name = "Cervantes"

The shape var It is the one that has always existed since the origin of language, then in 2015 it appeared let in order to mitigate certain deficiencies of var. For this reason, the recommendation is to use letIn any case, it is important to know well var because you will come across a lot of code that still uses var.

How are variables used in Javascript?

The name or identifier of a variable, it cannot start with a number, it must start with some letter (including _ and $), and Javascript is also case-sensitive. Is not the same name and Name, these are two different variables.

Variables are defined in two ways:

With a single let:

let name = 'Jaime',
    last name = 'Cervantes',
    mother's last name = 'Velasco';

a single var:

var name = 'Jaime',
    last name = 'Cervantes',
    mother's last name = 'Velasco';

Now with a let for each variable:

let name = 'Jaime';
let last name = 'Cervantes';
let mother's last name = 'Velasco';

With a var for each variable.

var name = 'Jaime';
var last name = 'Cervantes';
var mother's last name = 'Velasco';

In the previous example we define variables of type string (text strings), but remember that you can store any type of data.

It is advisable to put each variable on its own line because it is faster to understand for the “you” of the future and your colleagues who have not touched your code. For example, DO NOT define the variables like this:

let name = 'Jaime', last name = 'Cervantes', mother's last name = 'Velasco'; edad = 32, sexo = 'H'

Let's try numbers.

let edad = 32.9;
let hijos = 1;
var edad = 32.9
var hijos = 1;

Boolean data only stores false or true.

let esHombre = true;
let esAlto = false;
var esHombre = true;
var esAlto = false;

As its name says, its value can be variable, therefore you can reassign a new value to your variable:

var name = 'Jaime';
name = 'Pepito';
name = 'Menganito';
console.log(nombre); // 'Menganito'

Variable scopes in Javascript, let vs var

The main difference between variables defined with let and var is the scope they reach when they are declared:

  • With let you have block scope {}.
  • With var you have scope of function function() but not block.

Example of block scope.

if (true) {
  let name = 'James';
}
console.log(nombre); // Uncaught ReferenceError: nombre is not defined

Because let has block scope, when wanting to access the variable name Javascript shows:

Uncaught ReferenceError: name is not defined

Try to use block scope with var.

if (true) {
  var name = 'Jaime';
}
console.log(nombre); // 'Jaime';

In this example the variable name If it can be accessed from outside the blocks, this is because it is not inside any function.

Now we are going to declare the variable with var inside a function.

functions setearNombre() {
  var name = 'Jaime';
}
setearNombre();
console.log(nombre); // Uncaught ReferenceError: nombre is not defined

Let's see what happens with let when we try to use function scope.

functions setearNombre() {
  let name = 'Jaime';
}
setearNombre();
console.log(nombre); // Uncaught ReferenceError: nombre is not defined

If we define a variable with let inside a function, we can't access it from outside either, because the function definition itself uses blocks {}.

Constants in Javascript

Constants are in the same way as variables, labeled boxes to store information, with the only difference that they cannot be reassigned to any other value.

const name = "Jaime";
name = "Pepito"; // Uncaught TypeError: Assignment to constant variable 

Let's not forget to declare each constant on its own line to improve the readability of our code.

const name = "Jaime";
const last name = "Cervantes";
const mother's last name = 'Velasco';
const name = 'Jaime',
    last name = 'Cervantes',
    mother's last name = 'Velasco';

Same rules as variables with let

Constants follow the same block scope rules as variables in Javascript with let.

As well as let, const has block scope, so if you define a variable with var and has the same name as a constant, the following error will be thrown:

{
  const name = "Jaime";
  var name = "Pepito"; // Uncaught SyntaxError: Identifier 'nombre' has already been declared
}

Constants in javascript read-only and mutable

Constants are read-only, which is why they cannot be reassigned a value. Even so, these saved values continue to preserve the behavior of their data type.

For example, if you create a constant for an object, you can change the properties of that object.

An object literal in JavaScript is nothing more than a set of values identified with a name or key, like the following:

const James = {
  name: "Jaime",
  last name: "Cervantes",
  mother's last name: "Velasco"
};
James.name = "Pepito"; // todo bien, se puede cambiar una propiedad
James = {}; // Uncaught Type Error: Assigment to constant variable

The reference to the object is read-only, but it does not mean that the value is immutable. As seen in the example, you can change the property, but not reassign a new value to the constant James as we can see in the last line of the example.

How to name variables and constants in Javascript?

Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

Martin Fowler

The main objective of naming variables and constants is to immediately understand what we are storing in them. It is important to correctly describe the content of the variables, because this makes life easier for the next person who needs to read and modify our code.

This next person is very often “you” from the future, and unless you are a robot, you won't be able to remember every detail of your code.

Most of the time spent by a programmer is reading and understanding code, we don't want to spend a lot of time deciphering the content of them, as programmers we are happier creating new things.

For this reason we should not be surprised by the importance in naming our variables and constants, it is one of the best ways to not waste our time and the time of our colleagues.

Recommendations:

  • Take enough time to name a variable. It's like organizing your room, the tidier it is, the faster it will be to find the other sock (it happens to me a lot when I don't organize mine) xd.
  • The name must be very semantic and explain its context. Avoid names like data either info because they don't say much about the context, it is obvious that they are data and information, but for what? or what?.
  • Agree with your colleagues on how to name variables, especially those that are closely related to the business. For example, for a user's registration data, it can be “UserRegistration”, “CustomerRegistration”, “VisitorRegistration”, all three forms can be valid (it depends a lot on the context), but it is better to follow a convention through an agreement.
  • Avoid very short names like “u1”, “a2”, “_”, “_c”
  • Avoid abbreviations, prefixes, suffixes and infixes. These are difficult to understand. For example pmContentWhat is “pm”?
  • If the variable or constant has a very small scope, that is, it is used in nearby lines, then the name can be short.
  • If the variable or constant is used in a large scope, that is, it is referenced over a distance of many lines, then the name must be very descriptive, and therefore it is normal that it can be long.

Related posts

https://www.pensemosweb.com/introduccion-javascript/
https://www.pensemosweb.com/javascript-scheme-self-java/
Javascript Event Loop, concurrencia y asíncrono

Javascript Event Loop, concurrencia y asíncrono

Javascript es secuencial

“Event loop”, tal vez lo has escuchado. Esto es porque javascript tiene modelo de ejecución de código donde utiliza un ciclo de eventos (event loop), que una vez entendiendo su funcionamiento, se puede crear código mucho más eficiente, y resolver problemas rápidamente, que a simple vista no son tan obvios. Es la base de la concurrencia y el asincronismo.

Para comenzar:

  • Javascript se ejecuta en un solo hilo de ejecución, como se ejecuta un solo hilo, su ejecución es secuencial, no es como JAVA donde se pueden lanzar otros hilos.
  • Existen ambientes huéspedes donde se ejecuta javascript que tienen su propia API, ejemplo:
    • Navegador web
    • Node.js
  • Este funcionamiento secuencial es el mismo, no cambia por estar relacionado con un ambiente huésped.
  • La concurrencia se logra a través de invocaciones asíncronas a la API del ambiente huésped, esto evita que el funcionamiento se bloquee y provoque lentitud de las aplicaciones.

Elementos para la concurrencia

Veamos con más detalle los elementos que hacen funcionar Javascript en los ambientes huéspedes.

  1. Call Stack – Pila de ejecuciones
  2. Callback Queue – Cola de retrollamadas, tambien llamado Task Queue
  3. Event Loop – Ciclo de eventos
  4. Host Environment – Funcionalidad del ambiente huésped
Event loop, ciclo de eventos javascript
Event loop, ciclo de eventos javascript

Calls Stack, heap y motor de javascript

Del lado izquierdo tenemos al motor de javascript, este motor se encarga de ejecutar nuestro código. A veces es llamado máquina virtual, porque se encarga de interpretar nuestro código a lenguaje máquina y ejecutarlo. Solo puede ejecutar una línea de código a la vez. Tiene un Heap para guardar objetos y demás datos en memoria que el código pueda generar.

Pero también tenemos una Pila de llamadas (Call Stack). Los elementos de la pila son objetos y datos de memoria, pero tienen una estructura especifica. Tienen un orden y el último elemento en entrar es el primero en salir, se le llama LIFO (Last-in, First-out).

Cada elemento de la pila es un trozo de código Javascript y guarda las referencias del contexto y variables utilizadas. La pila ejecuta el trozo de código en turno hasta quedar vacía.

Callbacks Queue

Abajo tenemos Callbacks Queue, es una estructura de datos y guarda pedazos de código que el motor de javascript puede ejecutar. Es una cola, y como la cola de las tortillas el primero en formarse, es el primero en salir (FIFO, First-in, First-out).

Un callback, es una función que se pasa por parámetro a otra, de tal manera que esta última ejecuta el callback en un punto determinado, cuando las condiciones y/o los datos cumplen una cierta regla de invocación.

Event loop

Event Loop, este elemento nos permite mover la siguiente callback del Callbacks Queue al Call Stack. Como es un ciclo, en cada iteración toma un solo callback.

Ambiente huésped

Del lado derecho tenemos El ambiente huésped, el ambiente huésped es el lugar donde corremos Javascript, los más comunes son el Navegador web and Node.js. Las tareas que ejecuta el ambiente huésped son independientes de los demás componentes. En el navegador web tiene sus propias API como fetch, setTimeout, alert. Node.js también cuenta con su propia API como net, path, crypto.

¿Cómo es posible?, ¿Y la concurrencia? ¿Puedo hacer muchas cosas a la vez en un sitio web?

Todo el trabajo de poner un temporizador, renderizar contenido como texto, imágenes, animaciones, o ver videos, están a cargo del ambiente huesped. Lo que pasa es que las APIs del navegador web generan callbacks cuando su tarea ya está completada y los agrega al Callbacks Queue para que el event loop las tome y las mueva al Call stack.

Javascript se comunica con el ambiente huésped a través de su API, mas adelante vamos a utilizar un ejemplo basado en el diagrama de arriba, donde se utiliza window.setTimeout, la cual es una función del navegador web.

Concurrencia

Home es la función principal, con la que se inicia el proceso de ejecución en el call stack. Dentro de inicio tenemos cuatro setTimeout de dos segundos. La función setTimeout es propia del ambiente huésped, y a los cuatro setTimeouts le pasamos un callback, estos son, cb1, cb2, cb3 y cb4.  

Los temporizadores setTimeout se ejecutan en la parte de la funcionalidad del ambiente huésped dejando tiempo de ejecución para el call stack. He aquí la concurrencia, mientras el ambiente huésped ejecuta un temporizador, el call stack puede continuar ejecutando código.

Después de los primeros dos segundos, el ambiente huésped, a través del primer setTimeout pasa cb1 al callback queue, pero durante estos dos segundos se pueden realizar otras operaciones en el ambiente huésped, en el caso del navegador, un ejemplo seria que el usuario puede seguir escribiendo dentro de un textarea. De nuevo, he aquí la concurrencia.

Tras el primer setTimeout, el segundo setTimeout pasa cb2 al callback queue y así sucesivamente hasta el cb4. Mientras los callbacks se pasan al callback queue. He event loop nunca deja de funcionar, por lo que en alguna iteración el event Loop pasa cb1 al call stack y se empieza a ejecutar el código de cb1 y esto mismo sucede con cb2, cb3 and cb4.

Event loop en acción

Aquí abajo esta el ejemplo del que hablamos, el temporizador genera los callbacks en el orden que aparecen los setTimeouts más dos segundos. El Event Loop toma un callback en cada iteración, por lo que cada cb de setTimeout se invocan uno después del otro, y no exactamente después de dos segundos, pues entre que se posicionan los callbacks en la cola y se mueven al call stack de ejecución transcurre más tiempo. Esto sin contar el tiempo que trascurre entre cada invocación de setTimeout.

Si en los cuatro callbacks se indica el mismo tiempo en milisegundos. Presiona el botón RERUN, Te darás cuenta de que los tiempos no son iguales y que pueden pasar más de dos segundos.

Conclusion

  1. Las APIs huéspedes reciben callbacks que deben insertar en la callback queue cuando el trabajo que se les encomienda esta hecho, por ejemplo un callback de una petición ajax se pasa a la callback queue solo cuando la petición ya obtuvo la respuesta. En el ejemplo que describimos arriba con setTimeout, cuando pasan dos segundos, se inserta el callback al callback queue.
  2. Mientras el ambiente huésped realiza sus tareas, en este caso, los demás temporizadores, el call stack de ejecución de javascript puede ejecutar el código que el event loop le puede pasar desde el callback queue.
  3. He Event loop es un ciclo infinito que mientras existan callbacks en el callback queue, pasara cada callback, uno por uno, al call stack.
  4. He call stack no puede ejecutar más de un código a la vez, va ejecutando desde el último elemento hasta el primero, en nuestro caso hasta la terminación de la función inicio que dio origen a todo el proceso. Es una estructura de datos tipo Pila.

Gracias a que los callbacks se ejecutan hasta que un trabajo específico esté terminado, proporciona una manera asíncrona de ejecutar tareas. Las tareas pueden realizarse en el ambiente huésped sin afectar la ejecución del call stack. En la pila solo se ejecuta código que recibe el resultado de las tareas realizadas por el ambiente huésped.

en_USEN