DEV Community: Joseph León

Dibujando y animando con CustomPainter en Flutter

Joseph León — Wed, 26 Jan 2022 01:04:22 +0000

Hola! Recientemente en la empresa donde trabajo me enfrenté al reto de animar un icono de localización (📍) con el propósito de darle feedback al usuario de que la app se encuentra en el estado de "loading" al momento de obtener la ubicación por gps.

Lo primero que hice fue investigar si Flutter ya trae animaciones en iconos, y si! 🤙🏻 Flutter tienen un widget específico para esto llamado AnimatedIcon. Lamentablemente este widget tiene animaciones limitadas para algunas acciones específicas dentro de una app 😕 y nada para el icono de localización.

Seguí investigando y encontré opciones como Rive o Lottie para incluir animaciones, pero esto sonaba innecesario para sólo una pequeña animación de loading, sin hablar del conocimiento extra de diseño que requieren 🤷🏻‍♂️.

La opción que me quedaba era utilizar CustomPaint. Honestamente desde el principio quería evitar utilizar esto porque pensaba que era extremadamente difícil dominarlo, pero para mi sorpresa, me divertí mucho utilizándolo.

¿Qué es CustomPaint?

Es un Widget que nos provee un canvas (un "lienzo") donde podemos dibujar.
Por lo tanto podemos definir un dibujo para cada "frame" de nuestra aplicación.

¿Cómo se usa?

Lo primero que tenemos que hacer es agregar CustomPaint Widget al árbol de widgets de nuestra app y definir el tamaño del lienzo.

...
@override
Widget build(BuildContext context) {
  return CustomPaint( // CustomPaint.
    size: Size(100, 100), // Tamaño del lienzo.
  );
}

Importante: Si no definimos el tamaño del lienzo, este tomará todo el tamaño que le sea posible.

Este canvas sigue un modelo cartesiano, lo que quiere decir es que las distancias se miden desde un punto de origen, en nuestro caso, la esquina superior izquierda.

Ahora, nuestro CustomPaint necesita que le definamos la propiedad más importante, el painter. Esta clase se encargará de definir los dibujos dentro del lienzo.

...
@override
Widget build(BuildContext context) {
  return CustomPaint(
    size: Size(100, 100),
    painter: MyPainter(), // Definimos el painter.
  );
}

Ahora vamos a definir la clase MyPainter y la vamos a extender de la clase CustomPainter, esto nos obligará a sobre escribir dos métodos y nos quedaría así:

class MyPainter() extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // ...
  }

  @override
  void shouldRepaint(CustomPainter old) {
    // ...
  }
}

El método paint sirve para definir el dibujo en nuestro lienzo y el método shouldRepaint nos permitirá especificar cuándo queremos que nuestro lienzo se refresque y vuelva a pintar (esto es algo parecido a game loop en el desarrollo de videojuegos).

Pequeño ejemplo

Vamos a dibujar esto en nuestro lienzo:

Básicamente, tenemos que dibujar un rectángulo de 60x100 a partir del punto (20, 50), veamos...

...
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: const Size(200, 200),
      painter: MyPainter(), // Definimos el painter.
    );
  }
} // Este el final del widget.

//Ahora aquí definimos nuestro painter...
class MyPainter() extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Necesitamos un lápiz para dibujar
    final paint = Paint()
      ..color = Color(0xFFF) // Definimos color (negro)
      ..style = PaintingStyle.stroke // Sólo líneas, sin relleno.
      ..strokeWidth = 2; // Grosor de la línea

    // Vamos a crear un path, para indicarle al lápiz por dónde dibujar.
    final path = Path();

    path.moveTo(20, 50); // Nos movemos al punto inicial
    path.lineTo(80, 50); // →
    path.lineTo(80, 150); // ↓
    path.lineTo(20, 150); // ←
    path.lineTo(20, 50); // ↑

    canvas.drawPath(path, paint); // Le decimos al lápiz que dibuje en el lienzo con la ruta que definimos! ✐
  }

 // Por ahora dejemos esto siempre retornando verdadero.
  @override
  void shouldRepaint(CustomPainter old) => true;
}

Y listo! Deberíamos estar viendo esto:

Como ves, CustomPaint es muy intuitivo y permite no solo dibujar trazos o arcos a través de la clase Path, sino formas geométricas, puntos y demás a través de la clase Canvas. La idea es que explores todas las posibilidades que CustomPaint te da.

Ahora que ya sabes como usar CustomPaint, te contaré como solucioné el problema de el icono de localización animado.

Dibujando el icono de localización.

Lo que vamos a dibujar es lo siguiente...

Necesitamos dibujar el arco de un círculo sólo conociendo el punto C (centro del la circunferencia) y el punto P que es el vértice inferior del icono.

Aquí esto se convierte en un problema matemático, ya que hay que hallar los puntos tangenciales de la circunferencia con respecto al punto P y a continuación encontrar el ángulo α. No voy a detallar mucho este proceso pero mostraré como se dibuja con CustomPaint.

Vamos a montar un lienzo de 200x200 en nuestra app

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomPaint(
          size: const Size(200, 200),
          painter: LocalizationPainter(), // Le pasamos el painter.
        ),
      ),
    );
  }
}

// Definimos nuestro painter.
class LocalizationPainter extends CustomPainter {
  @override
  paint(Canvas canvas, Size size) {}

  // Esto por ahora siempre retornando verdadero.
  @override
  bool shouldRepaint(LocalizationPainter _) => true;
}

Dentro de nuestra clase LocalizationPainter definimos dos métodos para obtener los puntos C y P respectivamente:

// En centro de las circunferencias a la mitad del eje x y en la primera tercera parte del eje y.
Offset _getC(Size size) {
  return Offset(size.width / 2, size.height / 3);
}

// El vértice del icono a una distancia h del punto C en el eje y.
Offset _getP(Offset c, double h) {
  return Offset(c.dx, c.dy + h);
}

Ahora vamos a trabajar en el método paint

@override
paint(Canvas canvas, Size size) {
  // Lapiz que que rellena la forma.
  final paintFill = Paint()
    ..color = Colors.blue
    ..style = PaintingStyle.fill;

    // Lapiz que solo delinea.
  final paintStroke = Paint()
    ..strokeWidth = 5.0
    ..color = Colors.blue
    ..style = PaintingStyle.stroke;

  // Hallamos punto C
  final c = _getC(size);
  // Hallamos punto P
  final p = _getP(c, 30);
  // Radio de la circunferencia exterior.
  const smallRadio = 15.0;
  // Radio de la círculo interior.
  const bigRadio = 30.0;

  final path = Path();

  // Hallamos ALFA:
  final alpha = acos(bigRadio / (bigRadio + (p.dy - c.dy)));    
  // Dibujamos la circunferencia exterior
  path.addArc(Rect.fromCircle(center: c, radius: bigRadio), pi / 2 + alpha, 2 * (pi - alpha));  
  // Tangente derecha hacia el punto P
  path.lineTo(c.dx, c.dy + bigRadio + (p.dy - c.dy));

  // Tangente izquierda desde el punto P
  path.lineTo(c.dx - bigRadio * sin(alpha), c.dy + bigRadio * cos(alpha));

  // Dibujamos el círculo interior con el lapiz con relleno:
  canvas.drawCircle(c, smallRadio, paintFill);

  // Por último dibujamos nuestro path con el lapiz sin relleno:
  canvas.drawPath(path, paintStroke);
}

El resultado es este:

Animando el icono de localización

Por último (y la razón por lo que empezamos todo esto) vamos a a animar el icono, lo que vamos a hacer es que el círculo interior titile.

Para esto necesitamos que el widget que envuelve al CustomPaint (lo llamaremos MyIcon) sea un StatefulWidget y la clase de estado debemos añadirle el mixin SingleTickerProviderStateMixin.

class MyIcon extends StatefulWidget {
  const MyIcon({Key? key}) : super(key: key);

  @override
  State<MyIcon> createState() => _MyIconState();
}

class _MyIconState extends State<MyIcon> with SingleTickerProviderStateMixin{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomPaint(
          size: const Size(200, 200),
          painter: LocalizationPainter(),
        ),
      ),
    );
  }
}
...

Luego dentro de _MyIconState definimos:

// Para variar la opacidad de nuestro circulo (255 ~ 0).
final IntTween _opacityTween = IntTween(begin: 255, end: 0);
// Definimos una animación.
late Animation animation;
// Definimos un controlador para la animación.
late AnimationController _animationController;

Ahora definimos toda la "magia" en el método initState

  @override
  void initState() {
    super.initState();

    // Definimos nuestro controlador con una duración de 800ms, pueden variar esto a placer.
    _animationController = AnimationController(
      vsync: this, 
      duration: const Duration(milliseconds: 800),
    );

    // Creamos nuestro animación a partir de _opacityTween con una curva Ease In Out que le dará un toque profesional.
    animation = _opacityTween.animate(CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeInOut,
    ));

    // Especificamos que Flutter repinte este widget para cada frame de la animación.
    animation.addListener(() => setState(() {}));

    // Si es que la animación termina, la reproducimos al revés, y en viceversa.
    animation.addStatusListener((status) {
      setState(() {});
      if (status == AnimationStatus.completed) {
        _animationController.reverse();
      } else if (status == AnimationStatus.dismissed) {
        _animationController.forward();
      }
    });

    // Corremos la animación una vez.
    _animationController.forward();
  }

Pasamos la animación a nuestro painter para que este pinte de acuerdo a ella.

...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomPaint(
          size: const Size(200, 200),
          // Pasamos la animación como parámetro.
          painter: LocalizationPainter(animation),
        ),
      ),
    );
  }
}

class LocalizationPainter extends CustomPainter {
  // Definimos la animación como propiedad de la clase.
  final Animation animation;

  // La recibimos como parámetro.
  LocalizationPainter(this.animation);

  @override
  paint(Canvas canvas, Size size) {
    final paintFill = Paint()
      // Utilizamos la propiedad value de la animación (0 ~ 255) para darle opacidad al color.
      ..color = Colors.blue.withAlpha(animation.value)
      ..style = PaintingStyle.fill;
...

Y ya por último modificamos el método shouldRepaint para que solo refresque el lienzo cuando los valores de la animación varía (esto podría mejorar el rendimiento de nuestra app).

@override
bool shouldRepaint(LocalizationPainter oldDelegate) => oldDelegate.animation.value != animation.value ;

Y tendremos como resultado...

Aquí el código completo:

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyIcon(),
    );
  }
}

class MyIcon extends StatefulWidget {
  const MyIcon({Key? key}) : super(key: key);

  @override
  State<MyIcon> createState() => _MyIconState();
}

class _MyIconState extends State<MyIcon> with SingleTickerProviderStateMixin {
  final IntTween _opacityTween = IntTween(begin: 255, end: 0);
  late Animation animation;
  late AnimationController _animationController;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 800),
    );

    animation = _opacityTween.animate(CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeInOut,
    ));

    animation.addListener(() => setState(() {}));

    animation.addStatusListener((status) {
      setState(() {});
      if (status == AnimationStatus.completed) {
        _animationController.reverse();
      } else if (status == AnimationStatus.dismissed) {
        _animationController.forward();
      }
    });

    _animationController.forward();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomPaint(
          size: const Size(200, 200),
          painter: LocalizationPainter(animation),
        ),
      ),
    );
  }
}

class LocalizationPainter extends CustomPainter {
  final Animation animation;

  LocalizationPainter(this.animation);

  @override
  paint(Canvas canvas, Size size) {
    // Lapiz que que rellena la forma.
    final paintFill = Paint()
      ..color = Colors.blue.withAlpha(animation.value)
      ..style = PaintingStyle.fill;

    // Lapiz que solo delinea.
    final paintStroke = Paint()
      ..strokeWidth = 5.0
      ..color = Colors.blue
      ..style = PaintingStyle.stroke;

    // Hallamos punto C
    final c = _getC(size);
    // Hallamos punto P
    final p = _getP(c, 30);
    // Radio de la circunferencia exterior.
    const smallRadio = 15.0;
    // Radio de la círculo interior.
    const bigRadio = 30.0;

    final path = Path();

    // Hallamos ALFA:
    final alpha = acos(bigRadio / (bigRadio + (p.dy - c.dy)));

    // Dibujamos la circunferencia exterior
    path.addArc(Rect.fromCircle(center: c, radius: bigRadio), pi / 2 + alpha,
        2 * (pi - alpha));

    // Tangente derecha hacia el punto P
    path.lineTo(c.dx, c.dy + bigRadio + (p.dy - c.dy));

    // Tangente izquierda desde el punto P
    path.lineTo(c.dx - bigRadio * sin(alpha), c.dy + bigRadio * cos(alpha));

    // Dibujamos el círculo interior con el lapiz con relleno:
    canvas.drawCircle(c, smallRadio, paintFill);

    // Por último dibujamos nuestro path con el lapiz sin relleno:
    canvas.drawPath(path, paintStroke);
  }

  @override
  bool shouldRepaint(LocalizationPainter _) => true;

  Offset _getC(Size size) {
    return Offset(size.width / 2, size.height / 3);
  }

  Offset _getP(Offset c, double h) {
    return Offset(c.dx, c.dy + h);
  }
}

Gracias por leerme!

JavaScript Moderno #3 | Objetos Literales.

Joseph León — Sun, 07 Nov 2021 02:32:29 +0000

En esta serie de posts repasaremos features modernas del lenguaje de programación JavaScript que harán de tu vida como programador mucho más fácil, pero antes te dejo las otras entregas de esta serie:

Vayamos al tema de hoy. Lo primero que tenemos que entender, es que no hay una sola forma de utilizar objetos en JavaScript, en este post vamos a ver cómo utilizar objetos literales y cómo estos nos permiten trabajar con POO de manera muy rápida y nada verbosa.

Crear un objeto literal es muy sencillo, se comienza con la definición e inicialización de una variable o constante (mi post anterior trata sobre esto), así:

const desarrollador = {} // Si, eso es todo 👀

Esto es muy parecido a lo que en otros lenguajes se le llama diccionario, mapa o incluso podríamos pensar que esto es un JSON, pero observa lo que sucede cuando imprimimos esto por consola:

Como ya te diste cuenta, no solo se trata de una estructura de datos, sino de un objeto "literalmente" creado, y que hereda el comportamiento (métodos y propiedades) de la clase Object nativa de JavaScript.

Definamos ahora, algunas propiedades y métodos a nuestro objeto...

const desarrollador = {
   nombre: 'Joseph León', // 1️⃣
   edad: 25, // 2️⃣
   techStack: [ 'Flutter', 'ReactJS', 'Laravel', 'NodeJS'], // 3️⃣
   bio: function() {
      console.log(`Soy ${this.nombre}, desarrollador en ${this.techStack[0]}, ${this.techStack[1]}, ${this.techStack[2]}, etc.`);
   }, // 4️⃣
}

1️⃣: Propiedad de texto.
2️⃣: Propiedad numérica.
3️⃣: Array como propiedad.
4️⃣: Función como propiedad (método)

Vemos en el fragmento de código que podemos acceder a las propiedades del objeto desde él mismo utilizando la palabra reservada this ya que esta apunta a sí mismo. Podemos utilizar this para acceder a cualquier propiedad desde el mismo objeto (ya sea un "método" o una propiedad).

También podemos acceder al las propiedades del un objeto literal desde fuera de este.

const desarrollador = {
   nombre: 'Joseph León',
   edad: 25,
   techStack: [ 'Flutter', 'ReactJS', 'Laravel', 'NodeJS'],
   bio: function() {
      console.log(`Soy ${this.nombre}, desarrollador en ${this.techStack[0]}, ${this.techStack[1]}, ${this.techStack[2]}, etc.`);
   },
}

console.log(desarrollador.nombre);   // Joseph León
console.log(desarrollador.edad);     // 25 
console.log(desarrollador.techStack);  // [...]
desarrollador.bio(); // Soy Joseph, desarrollador en Flutter, ReactJS, etc.

A esto se le conoce como notación de punto pero también podemos acceder mediante la notación de corchete.

console.log(desarrollador['nombre']);   // Joseph León
console.log(desarrollador['edad']);     // 25 
console.log(desarrollador['techStack'nota]);  // [...]
desarrollador['bio'](); // Soy Joseph, desarrollador en Flutter, ReactJS, etc.

Como puedes ver las dos notaciones nos brindan los mismo resultados, pero por razones obvias, se suele utilizar la primera opción.

Modificación de objetos

Podemos añadir, modificar o eliminar propiedades de un objeto literal de la siguiente manera:

const ciudad = {
   nombre: 'Trujillo',
   poblacion: 1000000,
}

// Adición de propiedades:
ciudad.apodo = "Ciudad de la eterna primavera."

// Modificación de propiedades:
ciudad.poblacion = 1000001

 // Modificación de propiedades:
delete ciudad.poblacion
console.log(ciudad.poblacion) // undefined

Gracias a la notación de punto podemos operar sobre las propiedades de un objeto literal de manera muy sencilla.

Conclusiones

Utiliza objetos literales para encapsular y organizar información.
Los objetos literales son fáciles, legibles y claros de representar con JavaScript (a comparación de las clases).

JavaScript Moderno #2 | Template String.

Joseph León — Fri, 22 Oct 2021 05:42:26 +0000

En esta serie de posts aprenderemos features modernas del lenguaje de programación JavaScript que harán de tu vida como programador mucho más fácil, pero antes te dejo las otras entregas de esta serie:

#1 Variables y Constantes

Vayamos al tema de hoy. Primero, ¿Qué es el "template string" 🤔?. En la mayoría de lenguajes que se utilizan para el desarrollo web es necesario tener un sistema que permita inyectar datos en una plantilla de texto, PHP, JAVA, .NET, Dart etc., tienen soluciones (en librerías o de manera integrada) para esto y JavaScript no se podía quedar atrás.

Entendamos esto con un caso de prueba, imaginemos el siguiente requerimiento:

La aplicación debe saludar cordialmente al usuario por su nombre, apellido e indicar cuántos días faltan para su cumpleaños.

Si necesitáramos implementar una función para preparar el saludo sin utilizar template string haríamos lo siguiente

const obtenerSaludo = (nombre, apellido, diasParaCumpleaños) => {
   return "¡Hola " + nombre + " " + apellido + ", faltan " + diasParaCumpleaños + " días para tu cumpleaños 😁!"
}

console.log(obtenerSaludo("Joseph", "León", 45))

/* Output:
   "¡Hola Joseph León, faltan 45 días para tu cumpleaños 😁!"
*/

Es ridículamente horrible hacer todas esas concatenaciones para elaborar un pequeño saludo 😣; afortunadamente si usamos JavaScript Moderno podemos contar con nuestro querido template string...

const obtenerSaludo = (nombre, apellido, diasParaCumpleaños) => {
   return `¡Hola ${nombre} ${apellido}, faltan ${diasParaCumpleaños} días para tu cumpleaños 😁!`
}

console.log(obtenerSaludo("Joseph", "León", 45))

/* Output:
   "¡Hola Joseph León, faltan 45 días para tu cumpleaños 😁!"
*/

¿Notas la gran diferencia? No solamente nuestro código es mas simple de escribir, sino también es mucho más legible. Para usar esta característica debemos tener en cuenta lo siguiente:

No servirá si utilizas ' o ", debes utilizar las tildes invertidas.
Para inyectar un dato en tu plantilla de texto debes utilizar ${} colocando el dato dentro de las llaves.

Ahora imaginemos que el requerimiento cambias así:

La aplicación debe saludar cordialmente al usuario por su nombre, apellido, y en la siguiente línea indicar cuántos días faltan para su cumpleaños restando un día.

Sin template string...

const obtenerSaludo = (nombre, apellido, diasParaCumpleaños) => {
   return "¡Hola " + nombre + " " + apellido + ". \n Faltan " + (diasParaCumpleaños - 1) + " días para tu cumpleaños 😁!"
}

console.log(obtenerSaludo("Joseph", "León", 45))

/* Output:
   "¡Hola Joseph León.
   Faltan 44 días para tu cumpleaños 😁!"
*/

Ah! pero con template string...

const obtenerSaludo = (nombre, apellido, diasParaCumpleaños) => {
   return `¡Hola ${nombre} ${apellido}.
           Faltan ${diasParaCumpleaños - 1} días para tu cumpleaños 😁!`
}

console.log(obtenerSaludo("Joseph", "León", 45))

/* Output:
   "¡Hola Joseph León.
   Faltan 44 días para tu cumpleaños 😁!"
*/

Como ya nostaste, template string soporta:

Saltos de línea.
Operaciones con variables, constantes o valores explicitos.
Expresiones JavaScript en general.

Conclusiones

No concatenes con cadenas de texto con +.
Utiliza ' o " para textos estáticos.
Template string no solo te ayuda a ti, sino al que tenga que leer tu código.

JavaScript Moderno #1 | Variables y Constantes.

Joseph León — Sun, 17 Oct 2021 02:16:05 +0000

En esta serie de posts, voy a compartir y ejemplificar algunas características "modernas" de JavaScript; ya que desde mi punto de vista, el conocer las features modernas de este lenguaje te hacen la vida mucho más fácil.

En esta primera entrega vamos a ver un tema básico: Variables y Constantes.

Variables

JavaScript fue creado en un mundo completamente distinto al que vivimos actualmente (tecnológicamente hablando), tenía otros propósitos y no fue inicialmente diseñado para soportar todo lo que actualmente le delegamos. Es por eso que JavaScript ha ido evolucionando con el tiempo y naturalmente en esa "evolución" han ido quedando vestigios de su antiguo yo, un ejemplo de esto es el uso de la palabra reservada var.

var se utiliza en JavaScript para declarar una variable (un espacio en memoria para almacenar un dato), pero no respeta las nuevas características del nuevo JavaScript, como el scope de variables, o la declaración estricta de las mismas. Entonces, ¿cómo declaramos variables sin var? Javascript permite declarar variables a través de la palabra reservadas let.

var nombre = "Joseph" // ❌ Manera incorrecta y anticuada 😫
// ---
let nombre = "Joseph León" // ✅ Forma correcta y moderna 😎

Esto significa que la variable identificada como "nombre" tiene un espacio en memoria reservado para el dato que le queramos asignar, y no vamos a poder declarar otra variable con el mismo identificador.

let nombre = "Joseph" // ✅ Declaro una variable "nombre"

let nombre = "Joseph León" // ❌
// Declaro otra variable con el mismo identificador 
//(Esto produce un error de JavaScript).

Es importante entender que una "variable" representa a un dato que va a mutar con el tiempo; o sea, en algún momento, en tiempo de ejecución de nuestro programa, este va a cambiar con respecto a su valor inicial.

let nombre = "Joseph" // ✅ Declaración de variable "nombre".

// -- Mucho código---

if (necesitaApellido) { // Alguna condición.
    nombre = "Joseph León" // ✅ Modificación del valor de la variable.
}
console.log(nombre) // Joseph León.

Ahora, ¿qué pasa con los datos que no se modificación durante toda la ejecución de mi programa? Estaremos tentados a seguir usando var; es más, esto funcionaría sin problemas, pero no es lo mejor...

Constantes

Las constantes en JavaScript con técnicamente variables con una particularidad: Su valor no pues cambiarse a través de la reasignación.
Esto es muy útil, su uso permite al intérprete de JavaScript optimizar memoria y ayuda al desarrollador a identificar errores lógicos.

const nombre = "Joseph" // ✅ Declaración de una constante.
nombre = "Joseph León" // ❌ Reasignación de una constante.
//(Esto produce un error de JavaScript).

Es necesario inicializar la constante, no es posible declararla sin asignar ningún valor.

const nombre // ❌ Costante no inicializada.
//(Esto produce un error de JavaScript).

Scope de variables o constantes

Si declaramos variables con let o const podemos disfrutar de una magnífica característica añadida a JavaScript que otros lenguajes ya tienen: el scope.

El scope de variables permiten que podamos declarar una variable o constante que exista dentro de un bloque de código (dentro de un for, while, if, etc.).

Veamos un ejemplo utilizando var

var texto = "Hola mundo..." // Declaramos una variable y la inicializamos.

// -- Mucho código---

if (tieneComentarios) {
   var texto = "Me gusta el texto" // Declaramos otra variable para guardar el comentario.
   console.log(texto) // Imprimimos el comentario.
}

console.log(texto) // Imprimimos el texto.

/* Output:
   Me gusta el texto (✅ Se imprime el comentario. correctamente).
   Me gusta el texto (❌ Se imprime el comentario nuevamente.
   Pero qué rayos! 🤬.
*/

Como puedes ver, las variables declaradas con var no respetan el scope de un determinado bloque (en este caso if) modificando la variable text global.

Veamos el mismo caso utilizando const.

const texto = "Hola mundo..." // Declaramos una constante y la inicializamos.

// -- Mucho código---

if (tieneComentarios) {
   const texto = "Me gusta el texto" // Declaramos otra constante para guardar el comentario.
   console.log(texto) // Imprimimos el comentario.
}

console.log(texto) // Imprimimos el texto.

/* Output:
   Me gusta el texto (✅ Se imprime el comentario. correctamente).
   Hola mundo... (✅ Se imprime el texto)
*/

Ahora el programa funciona como queremos, ya que la constante texto que se encuentra dentro de la estructura de control if solo existe en ese ámbito y no modifica a la variable global del mismo nombre. Cabe resaltar que esto funcionaría de la misma manera su hubiésemos utilizado let, utilizar const o let depende exclusivamente de la mutabilidad o inmutabilidad del dato.

Conclusiones

No utilices var.
const para constantes.
letpara variables.
Ahora disfruta del scope!