Una de las convenciones que hemos tenido desde hace años para el uso de constantes, es simplemente definir una variables en mayúsculas, indicándonos que el valor de esa variable no debería ser modificado. Pero realmente nunca hemos tenido la sintaxis para crear una verdadera constante, hasta ahora!

¡En la versión ES2015 ya podemos definir constantes! Se ha introducido una nueva sintaxis que nos permite declarar constantes cuyo valor no puede ser alterado. Para poder hacer uso de esta nueva característica necesitamos usar la sentencia const seguido del identificador, así de sencillo.

const test = "This is a test";

test = "New value!"; //SyntaxisError

En el ejemplo anterior definimos la constante test, al intentar asignarle un nuevo valor se ocasiona un error de sintaxis.

Ahora bien, si intentamos usar un objeto o un arreglo como constante, eso significa que la asignación de un nuevo objeto o arreglo no podrá ser efectuada. Pero si podremos modificar el contenido del objeto o del arreglo, por ejemplo.

const collection = [];

collection.push("This is a new element");
collection.push("One more element");

console.log(collection);

Como se puede observar, podemos modificar el contenido de una constante de tipo array, pero si intentamos cambiar la referencia hacia un nuevo arreglo, entonces se generará un error. Lo mismo sucede con los objetos.

const obj = {};

obj.x = 5;
obj.y = 10;

console.log(obj);

Ahora bien, si observamos el código transpilado por Babel veremos que está definiendo los objetos con un simple var, esto significa que podremos asignarle una nueva referencia a nuestra constante. Algo importante de mencionar es que cuando Babel transpila a ES5, hace una revisión de nuestro código, si encuentra que en algún momento se le asigna un nuevo valor a la constante, entonces nos arrojará un error al tiempo que hace la transpilación.

Ahora la pregunta es, ¿Cuando usar constantes? Personalmente me gusta usar constantes cuando se que el valor de una variable no debería cambiar, por ejemplo en React JS cuando defino un Stateless Component, (que básicamente es una función que regresa JSX unicamente) prefiero utilizar una constante para referenciar a la función para luego poder asignarle los props y exportarla, por ejemplo.

const MyComponent = function(props){ //<= aquí usaría un Arrow Function, pero todavía no vemos este tema xD
    const title = props.title;

    return (
      <div>
        <h1>{title}</h1>
      </div>
    );
}

MyComponent.propTypes = {
    title: PropTypes.string.required
};

export default MyComponent; //<= más adelante veremos como exportar/importar módulos con ES2015

Aquí la idea es definir una constante porque de esta manera estoy indicando que la referencia de MyComponent no debería ser cambiada más adelante. Lo mismo con la propiedad title.

Algo que debemos recordar  y tener siempre presente es que escribimos código para otras personas, por lo tanto al utilizar una constante estamos documentando que determinados valores no serán alterados.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso JavaScript Next, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!