Declaraciones VS expresiones

Hola a tod@s, el otro día viendo un video en Twitch sobre programación se habló sobre un articulo que hablaba de lo que es una declaración y su diferencia con expresión en programación.

Me pareció muy interesante ya que son unos términos básicos pero en muchas formaciones no se explica. Por esta razón quiero explicarlo en el blog.

Los códigos que voy a compartir para la explicación son en JavaScript pero los términos de DECLARACIÓN y EXPRESIÓN sirven para cualquier lenguaje de programación.

¿Qué es una expresión?

Esencialmente, una expresión es un trozo de código que produce un valor.

Por ejemplo, todo estos códigos son expresiones:


  1 -> produce 1
  'hola' -> produce 'hola'
  5 * 10 → produce 50
  num > 100 → produce verdadero o falso
  isHappy ? "🙂" : "🙁" → produce un emoji
  [1, 2, 3].pop() → produce el número 3

Hay que tener en cuenta que una expresión puede tener varias expresiones como puede ser el siguiente código


  (5 + 1) * 2

La suma entre paréntesis es una expresión porque da el número 6. También tiene la multiplicación por 2 que seria otra expresión ya que daría el número 12. A parte de que cada número por si mismo ya es una expresión.

¿Qué es una declaración?

La declaración por contra, son las sentencias del lenguaje de programación que no dan un resultado en si mismo.

Por ejemplo, todo estos códigos son declaraciones:


  let hi = 5;

  if (hi > 10) {
    // More statements here
  }

Las declaraciones son la parte más grande de la programación ya que es la parte central de la programación. Mientras que las expresiones indican los detalles de la visualización de la programación.

Las declaraciones suele tener partes donde hay que poner expresiones que ayudan a seguir un código u otro. Por ejemplo la declaración if() donde pones expresiones entre paréntesis para que se ejecute un código o no.

Algunos ejemplos serian los siguientes:


  let hi = 1;
  let hi = "hola";
  let hi = 5 * 10
  let hi = num > 100;
  let hi = isHappy ? "🙂" : "🙁";
  let hi = [1, 2, 3].pop();

Estaréis viendo que los ejemplos son los mismos que hemos puesto al principio en las expresiones con la única diferencia es que la expresión está declarada en una variable. De esta forma, ya no es una expresión porque hasta que no se utilice la variable no se produce ningún valor.

Hay que tener en cuenta que en las declaraciones que utilizan expresiones se podrían crear bucles infinitos por lo que hay que tener disponer de una salida.

Un ejemplo de ello seria lo siguiente:


  while ("hola") {
    // Como "hola" nunca cambia, este bucle se
    // se ejecutará una y otra vez hasta que el script se cuelgue.
    // Sintácticamente válido, pero aún así problemático.
  }

Mas …

Hay que tener en cuenta que una expresión por si solo no hace nada, se necesita que la expresión esté asociada a una declaración para que se pueda producir la respuesta (visualización) del código.

También hay que indicar que si utilizas REACT en la parte del JSX se puede utilizar las llaves {} para ejecutar código JavaScript. Pero hay que tener en cuenta que en esas llaves solo se puede ejecutar expresiones. Si intentas poner una declaración te indicará un error.

En conclusión…

… hay que diferenciar entre expresión y declaración aunque unas dependen de otra para su funcionamiento.

Tener en cuenta que aunque no he traducido y copiado exactamente del post que os he comentado al principio (solo los ejemplos), os dejo el post original que está en ingles.

https://www.joshwcomeau.com/javascript/statements-vs-expressions/

Tambien os dejo el canal de twitch que sigo de programación FrontEnd ya que el chico que lo hace es un crack.

https://www.twitch.tv/midudev

Deja un comentario