Bloques en JavaScript

Autor: | Última modificación: 15 de julio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

Algunos de nuestros reconocimientos:

Premios KeepCoding

JavaScript es un lenguaje de programación para la web que nos permite desarrollar tanto para el frontend como para el backend. Dentro de este lenguaje, existen distintos elementos que componen su sintaxis y que pueden organizarse usando bloques. En este post, te enseñaremos cómo funcionan los bloques en JavaScript y cómo usarlos para dar orden a tu código.

¿Qué son los bloques en JavaScript?

Los bloques en JavaScript pueden definirse como cualquier conjunto de instrucciones que esté escrito dentro de llaves { }. Esto quiere decir que todo el contenido dentro de estos símbolos se considera un bloque.

Los bloques en JavaScript además pueden encontrarse uno dentro de otro. Entonces, por ejemplo, podemos tener un bucle do-while que conforma un bloque y dentro contiene un elemento switch que crea su propio bloque. A continuación, te mostramos un ejemplo de código con varios bloques uno dentro de otro:

let run = true

while (run) {

for (let language of instructor.languages) {

if (language = ‘Spanish’) {

console.log (‘Hola amigo!’)

} else {

switch (language) {

case «English»:

console.log (‘Hello my friend’);

break;

case ‘Galician’:

console.log («Hola meu amigo»)

break

default:

console-log (‘Hello my friend using ${language}’)

break;

}

}

}

En este ejemplo estamos automatizando el saludo de nuestra página web según el idioma usado por el usuario. Esto lo hacemos con palabras clave como while, for, if, else, switch, default, case y break. Además, utilizamos el comando console.log para definir qué se pinta en la pantalla. Para diferenciar las distintas secciones y funciones de esta programación, usamos los bloques introducidos por las llaves. Al final, todos los bloques creados se cierran, por eso encontramos tres llaves seguidas.

¿Qué hacen los bloques en JavaScript?

La creación de bloques no solo nos permite agrupar contenidos, sino que también define cómo se comportan ciertas declaraciones dentro de nuestro código. Por ejemplo, la declaración de variables con las palabras clave var o let se diferencia principalmente en cómo estas se relacionan con los bloques.

Aquellas variables declaradas con la palabra clave var pueden modificarse en cualquier momento sin importar el bloque en el que se encuentren. La razón detrás de este comportamiento es que se definen como function-scoped. Esto quiere decir que la variable actuará desde el momento en el que está escrita dentro del código, pues tiene un impacto a nivel general. Entonces, si declaramos una variable con var en un bloque, podemos acceder a ella y modificarla desde el siguiente bloque con resultados directos en nuestro código.

Por otro lado, las variables declaradas usando la palabra clave let son de tipo block scoped. Esto quiere decir que, una vez definidas dentro de un bloque, no son accesibles desde otro bloque y no pueden modificarse. Si tienes dudas sobre cómo impacta esto en los resultados de nuestro código, te invitamos a leer nuestro post sobre la declaración de variables en JavaScript, donde encontrarás un ejemplo más específico.

Por su relación con los bloques en JavaScript, te sugerimos usar las palabras clave let y const si quieres declarar variables que sean inmutables. De este modo evitas la interferencia entre ellas y creas secciones más definidas dentro de tu código. Además, puedes utilizarlas para crear funciones que se mantengan estables a lo largo de tu proceso de desarrollo.

¿Cuál es el siguiente paso?

Ahora que sabes cómo funcionan los bloques en JavaScript y cómo nos ayudan a organizar distintas funciones, ha llegado el momento de que los uses dentro de tus propias líneas de código. Por ello, es la ocasión perfecta para empezar a formar parte de Desarrollo Web Full Stack Bootcamp. Allí, no solo aprenderás todo lo necesario para desarrollar tus propios productos con JavaScript, sino que, además, aprenderás cómo utilizar otros lenguajes de programación, como HTML. Así, en pocos meses, te convertirás en un experto. ¿A qué esperas para dar el siguiente paso en tu camino hacia el desarrollo web? ¡Te esperamos!

Posts Relacionados

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado