Cargando



Fundamentos de CoffeeScript

En este tutorial vamos a ver los fundamentos para el desarrollo en CoffeeScript de forma que podamos entender cómo crear nuestros propios programas y así empezar a sacar provecho de esta gran herramienta de desarrollo.


feb 05 2015 06:10
Profesional
feb 05 2015 11:08
CoffeeScript es un lenguaje de programación en toda regla, nos permite expresar todas nuestras instrucciones en su sintaxis y luego al compilar tendremos un resultado, lo particular del caso es que este resultado que obtendremos es un nuevo archivo de código, el cual resulta ser instrucciones JavaScript.

Esta particularidad nos lleva a entender que CoffeeScript es una forma de programar en JavaScript con una sintaxis moderna y limpia facilitando así la lectura del código, pero compatible con lo existente en el mundo web ya que el archivo que resulta es JavaScript puro, lo mejor de todo es que es código optimizado y que cumple las mejores prácticas, por lo que si leemos los resultado obtendremos conocimientos de las mismas, así mejorando nuestra codificación en este último lenguaje.

Requisitos
Para el seguimiento de este tutorial y sus ejemplos vamos a necesitar una instalación funcional de CoffeeScript, un editor de textos como Sublime Text u otro de la preferencia de cada quien, y permisos en nuestro equipo para poder correr el compilador de CoffeeScript.

Variables


Las variables son asignaciones que hacemos de valores a espacios de memoria y que tienen un nombre único dentro de la ejecución del programa, para así saber qué valor tiene este espacio. Es uno de los conceptos más básicos en programación pero también uno de los más poderosos ya que son las que nos permitirán auxiliarnos a la hora de ejecutar nuestros algoritmos.

La asignación de variables en CoffeeScript es muy sencilla, únicamente le indicamos el nombre seguido de una igualdad y el valor de dicha variable. Los nombres pueden ser cualquier palabra o letra seguida de números o underscores, siempre recordando que sean diferentes de las palabras reservadas del lenguaje.

Un ejemplo sencillo es el siguiente:
marcador = 3
Vamos a ejecutar este ejemplo sencillo en nuestra consola de CoffeeScript, para ello accedemos a nuestra consola de comandos y escribimos coffee, veamos la respuesta de la consola al ejecutar nuestro ejemplo:

fundamentos-coffeescript.jpg


Como podemos notar la asignación nos imprime de vuelta el valor que hemos aplicado a la variable, donde luego al llamar a la misma se imprime su valor.

Ahora que sucede si queremos sumar varias variables y asignar el valor a una variable general, esto funciona de una manera similar a lo que acabamos de ver, por ejemplo:
a = 2b = 3c = a + b
Si imprimimos c deberíamos tener como resultado 5, veamos la respuesta de la consola:


fundamentos-coffeescript-2.jpg



Ahora que ya entendemos como la asignación de variables funciona en CoffeeScript veamos que nos puede resultar cuando compilamos, lo que haremos es crear un archivo de ejemplo llamado variables.coffee y luego vamos a compilarlo, de esta forma obtendremos un archivo variables.js que podremos analizar. En variables.coffee vamos a colocar lo siguiente:
a = 3 * 2b = 2c = a * bd = c - 1
Ahora veamos que resulta de compilar nuestro archivo al escribir en la consola: coffee -c variables.coffee.




En la imagen podemos ver el contenido del archivo variables.js, como vemos CoffeeScript transformó nuestras instrucciones en código JavaScript, donde apreciamos que lo primero que hizo fue inicializar las variables a utilizar con la palabra clave var, también notamos que cada instrucción finaliza con punto y coma (esto es algo que no es necesario en CoffeeScript a menos que queramos ejecutar dos instrucciones en la misma línea.

El bloque if


Hay ocasiones en que necesitamos hacer comparaciones, y según el resultado se ejecuta o no un código, para ello en primer lugar nos podemos valer del bloque if, donde podemos preguntar si una condición se cumple y en caso de hacerlo el set de instrucciones se ejecuta.

Funcionamiento en CoffeeScript
Una de las particularidades que tiene CoffeeScript es que no necesitamos utilizar llaves o paréntesis para hacer bloques condicionales, pero por esta ausencia necesitamos de forma imperativa utilizar la indentación, es decir, todo lo que es contenido de un bloque se necesita darle un espacio o tabulación para que no estén al mismo nivel de línea.

Veamos en este ejemplo una comparación simple:
if true == true console.log “Hemos hecho nuestro primer if”
Aquí podemos notar en primer lugar que no hay paréntesis para agrupar la condición, tampoco están las llaves para agrupar el bloque, en segundo orden la función console.log no está en el mismo nivel que la instrucción if, es la única forma que tiene CoffeeScript de saber que esta última está contenida en el bloque condicional, ya que si no, esta se ejecutaría independientemente de que la condición se cumpla o no.

Veamos un pequeño ejemplo para demostrar todo lo aprendido, en el siguiente código vamos a tener un bloque if con una condición y si esta se cumple se ejecuta una porción de código, tendremos una instrucción que se ejecutará independientemente de la condición, la única diferencia entre ambas instrucciones es que la que se ejecuta con la condición está indentada y la siguiente no, para ello vamos a crear un archivo llamado ejemplo_if.coffee y en el incluiremos las siguientes líneas de código:
a = 5b = 3if a > b console.log "a es mayor que b"console.log "esto se ejecuta sin importar la condicion"
Compilamos y en la siguiente imagen podemos ver el archivo .js resultante:


fundamentos-coffeescript-4.jpg



Podemos notar entonces como el bloque if agrupa con llaves lo que se ejecutará cuando se cumpla la condición, en cambio lo que se ejecuta independientemente de ella queda fuera de la agrupación. Para demostrar que todo esto es cierto vamos a modificar el código y vamos a indentar también la segunda instrucción, nuestro código quedaría de la siguiente forma:
a = 5b = 3if a > b console.log "a es mayor que b" console.log "esto se ejecuta sin importar la condicion"
Compilaremos una vez más y veamos el resultado en la siguiente imagen:


fundamentos-coffeescript-5.jpg



Queda demostrada así la importancia de la indentación, que además de darnos un código más legible, nos permite variar el contexto de la ejecución de nuestro programa.

Añadiendo else y else if


En el ejemplo anterior tenemos un caso particular, este es que si la condición no se cumple se ejecuta todo lo demás, pero si deseamos evaluar una segunda condición, o simplemente si no se cumple la condición ejecutar otra cosa y que luego siga nuestro programa. Para resolver este tipo de situaciones contamos con las instrucciones else y else if, su uso es muy similar a if, simplemente se debe colocar la condición luego de la palabra clave en la línea siguiente con una indentación.

Veamos el siguiente código de ejemplo, en el cual evaluaremos una condición y si se cumple imprimiremos algo, en caso contrario haremos una impresión diferente y luego continuará nuestro programa:
a = 5b = 3if a > b console.log "a es mayor que b"else console.log "a no es mayor que b"console.log "Esta linea se ejecuta siempre"
Procedemos a compilar nuestro programa y veremos el archivo .js resultante en la siguiente imagen:


fundamentos-coffeescript-6.jpg



En el siguiente ejemplo vamos a evaluar una segunda condición si la primera no se cumple, con ello tendremos ya el control total de esta herramienta de evaluación en su fase básica y veremos el funcionamiento del else if:
a = 5b = 7c = 8if a > b console.log "a es mayor que b"else if a > c console.log "a es mayor que c"else console.log "a no es mayor que b ni que c"console.log "Esta linea se ejecuta siempre"
Notamos entonces como se pueden evaluar diferentes condiciones y al final si ninguna se cumple ejecutar un código, notamos como la compilación resultante agrupa con una sintaxis perfecta de JavaScript nuestras instrucciones:


fundamentos-coffeescript-7.jpg



La forma unless


En CoffeeScript se incluye una nueva forma de evaluar y es con la palabra clave unless, esta evalúa en términos de verdadero o falso una expresión, por ejemplo se podría hacer una condición donde dijésemos “al menos que a sea mayor que b ejecuta lo siguiente” esto sin embargo es un poco complicado de ver de manera teórica, para ello veamos el código directamente:
a = 5b = 8unless a > b console.log "b es mayor que a"
Donde si compilamos este pequeño programa nos da como resultado el siguiente código JavaScript:


fundamentos-coffeescript-8.jpg



Vemos cómo hacemos una evaluación sobre la expresión de si no es verdadero, es un poco complejo de asimilar a primera vista, pero una vez que le hemos agarrado el hilo es una de las expresiones más útiles sobre todo cuando debemos hacer complejos condicionales.

Con esto podemos dar por finalizado este tutorial de fundamentos de desarrollo de CoffeeScript, por supuesto esto es solo la punta del iceberg en cuanto a desarrollo con este lenguaje, sin embargo es un inicio muy bueno para que podamos empezar a implementar varias cosas en nuestros programas e ir agarrando la vuelta de que se puede programar en JavaScript de una forma más limpia y legible.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X