DEV Community: Alejandra Melendez

El mundo de las Funciones en JavaScript

Alejandra Melendez — Sun, 22 Aug 2021 19:18:29 +0000

Si pudiera definir "JavaScript" con una sola palabra sería "versatilidad". Nosotros podemos crear código de maneras diferentes usando los recursos que este lenguaje nos ofrece. Un claro ejemplo son las diferentes maneras de declarar una función. Esto puede ser confuso cuando comienzas a programar en JavaScript, así que es hoy vamos a analizar algunas formas de declarar funciones y en qué casos es mejor usarlas.
Me tomé la libertad de no traducir ciertos conceptos y nombres porque sentí que sería más confuso, así que sorry por mi spanglish😋.

¿Qué es una función?🤔

Comenzamos con lo más importante, una función es un sub-programa que realiza una tarea específica, puede tomar una entrada, la cual llamamos parámetros y retornar una salida. En JavaScript, las funciones son objetos de primera clase (first-class objects). Estas pueden ser manipuladas y asignadas así como cualquier otro objeto. Por default, si tu no agregas un return, el cual es usado si quieres regresar algo, las funciones regresan el valor de "undefined".

Existen diferentes formas de declarar una función, en este caso, nosotros vamos a enfocar en 6 maneras, las cuales explicaré a continuación👇.

1. Function Declaration

La manera más común de definir una función es usando la palabra clave function seguida del nombre, los parámetros de entrada -los cuales son opcionales- entre paréntesis y separados por comas, así como las instrucciones encerradas en llaves {}.

Un punto importante de las Function Declaration es que se cargan antes de que se ejecute cualquier código, por lo que se pueden llamar incluso antes de su declaración😱. Este comportamiento es conocido como Hoisting.

¿Cuándo podemos usarlas?

Al ser la forma más fácil y común, es mi primer opción cuando quiero crear una función normal que necesita ser llamada una o más veces 😌.

2. Function Expression

La diferencia entre la forma anterior y ésta es que las function expression pueden ser asignadas a una variable y el nombre es opcional. Funciones que no tienen nombre son llamadas anonymous functions. Existe más de una forma de declararlas y esta es una de ellas.

¿Cuándo podemos usarlas?

Las function expressions son comunes cuando necesitamos pasar dicha función como un parámetro a otra función. Esto comúnmente se llama callback en JavaScript. También es común usarlas como closure, es decir, anidamiento de funciones que les da acceso a las definiciones dentro de la función externa.

3. Funciones de Flecha (Arrow Function)

Una de las nuevas características que nos trajo ES6 fueron las Arrow function. Al igual que las function expressions, éstas son funciones anónimas que pueden ser asignadas a una variable, la diferencia es que en las arrow functions, omitimos la palabra clave "function", por lo que lo primero que agregamos es la lista de parámetros, si no hay ninguno se indica con ( ). En caso de que solo haya un parámetro, los paréntesis no son necesarios. Luego ponemos el símbolo => y las llaves {}.

A diferencia de los casos anteriores, las arrow functions no crean su propio scope.

¿Cuándo podemos usarlas?

Puedes sacar el mejor provecho de las Arrow function cuando necesites crear funciones simples que devuelvan algo concreto, ya que ahorrarías líneas de código 💪. Del mismo modo, si requieres que tu función esté ligada al scope global y no necesitas que tenga su propio scope, las arrow function serán tus mejores amigas❤️.

4. IIFE (Immediately Invoked Function Expression)

Como su nombre lo indica, las funciones IIFE se ejecutan inmediatamente después de su declaración. Como son funciones anónimas sin estar asignadas a nada, no son accesibles para ser llamadas posteriormente. Para declararlas solo debemos crear una función anónima entre paréntesis () y seguida de ().

¿Cuándo podemos usarlas?

Si necesitas crear una función que no se usará en el futuro, para evitar contaminar tu scope global, puedes usar una IIFE. Al permanecer en el anonimato, éstas se usan y se olvidan.

5. Shorthand method definition

Nuestra siguiente forma es también una nueva característica de ES6 donde declaramos la función dentro de un objeto. No es necesario agregar la palabra clave de function, por lo que solo se requieren el nombre de la función, los parámetros y las llaves.

¿Cuándo podemos usarlas?

Este método es una manera fácil de agregar una función como propiedad de un objeto y, honestamente, se ve bastante bien, porque es ordenado y limpio 💁‍♀️.

6. Function constructor

Debido a que las funciones son objetos Function, podemos crearlas usando el operador new. Para declararlas debemos pasar nuestros parámetros como argumentos y nuestro código será el último argumento que reciba, todo en formato string.

¿Cuándo podemos usarlas? ¿O no? 😰

Honestamente, no recomiendo utilizar este método, ya que, al requerir que el cuerpo de la función sea de tipo string, puede causar problemas de optimización y una mayor probabilidad de errores ❌🐞.

Como vimos, existen diferentes formas de declarar funciones en JavaScript, cada una con sus ventajas 👍 y desventajas 👎, por lo que depende de nosotros analizar el propósito de nuestra función antes de crearla y así tomar la mejor decisión. Te invito a que te diviertas probándolas y espero esta información te sea de ayuda 🌟.

Referencias

Gracias por leer ❤️!

Twitter🌟	Medium📖	Github💻	Instagram💜

📦 Implementando grid y flex con frameworks y CSS puro

Alejandra Melendez — Sun, 23 May 2021 05:51:21 +0000

No sé si a ustedes les pasa, pero actualmente es muy común brincar entre framework CSS, todos son geniales ❤️, pero hay ocasiones que quieres variarle (o usar css puro para sentirte más pro 😎).

Al hacer esto tan seguido me topaba con elementos que ya había hecho con otros frameworks y, aunque variaban un poco, era básicamente lo mismo. Gracias a esto me llegó la idea de hacer mi pequeño acordeón de cómo implementar Grid y Flexbox tanto en mis frameworks favoritos, como en CSS puro.

No quise ser envidiosa así que se los comparto.

Conceptos Básicos

Primero lo primero:

Grid y Flexbox son propiedades dentro de CSS que nos ayudan a ubicar nuestros elementos dentro del DOM. Mientras Grid basa su sistema en un layout de dos dimensiones (rows y columns) basado en cuadriculas, Flexbox se enfoca en trabajar en una sola dimensión (o rows o columns) y te ayuda a distribuir los elementos dentro del padre.

Aquí les dejo la documentación de Flexbox y Grid super explicada 😉.

La mejor forma de trabajar con ellos (o al menos mi favorita) es combinarlos para tener lo mejor de los dos mundos.

Ahora, dos de los Frameworks más populares actualmente son Bootstrap en su versión 5 y Tailwind

Ambos frameworks cuentan con clases que ya implementan tanto Grid como Flexbox, algunas son iguales y otras varían en cosas muy pequeñas.

Basta de introducciones, veamos nuestro primer ejemplo:

Grid

Para implementar grid de diferentes formas, con n cantidad de columnas y alineaciones, creé este ejemplo que engloba las posibles formas en que lo podemos usar:

Para implementar este layout veamos como se hace primero con CSS puro:

Nuestro HTML:

<div class="container">
    <div class="grid grid-4">
        <div class="span-4">
            Fila completa
        </div>
        <div class="">
            Columna 1 de 4
        </div>
        <div class="">
            Columna 2 de 4
        </div>
        <div class="">
            Columna 3 de 4
        </div>
        <div class="">
            Columna 4 de 4
        </div>
    </div>
    <div class="grid grid-template-3">
        <div class="col1-1"> columna 1 con espacio al centro</div>
        <div class="col1-3">columna 2 con espacio al centro</div>
        <div class="col2-2">columna al centro</div>
    </div>
</div>

Como no usamos Frameworks, necesitamos nuestro CSS:

/* Inicializamos el grid*/
.grid {
    display: grid;
}

/* En Cuantas columnas se dividirá nuestro grid*/
.grid-4{
    grid-template-columns: repeat(4,minmax(0,1fr));
}
/* Cuantos espacios (en columnas )tomará nuestro div en el grid */
.span-4 {
    grid-column: span 4;
}

/* Otra forma de definir grid templates es especificando el nombre del div */
.grid-template-3 {
     grid-template-areas: 
        "col1-1 . col1-3" 
        ". col2-2 .";
}
/* Das el nombre a los divs */
.col1-1 {
    grid-area: col1-1;
}
.col2-2 {
    grid-area: col2-2;
}

.col1-3 {
    grid-area: col1-3;
}

Cómo ven usamos simplemente Grid.

Ahora, si queremos tener exactamente el mismo resultado tanto en Bootstrap como en Tailwind, afortunadamente ya cuentan con clases para eso y no tenemos que tocar el css para nada.
¡Dios bendiga a los frameworks 🙏!

Grid en Bootstrap

<div class="container mt-5">
    <div class="row">
        <div class="col">
            Fila completa
        </div>
    </div>

    <div class="row">
        <div class="col">
            Columna 1 de 4
        </div>
        <div class="col">
            Columna 2 de 4
        </div>
        <div class="col">
            Columna 3 de 4
        </div>
        <div class="col">
            Columna 4 de 4
        </div>
    </div>

    <div class="row">
        <div class="col-md-4"> Columna 1 con espacio al centro</div>
        <div class="col-md-4 offset-md-4">Columna 2 con espacio al centro</div>
    </div>
    <div class="row">
        <div class="col-md-4 offset-md-4">Columna al centro</div>
    </div>
</div>

Grid en Tailwind

<div class="container mt-7 mx-auto">
    <div class="grid grid-cols-4">
        <div class="col-span-4">
            Fila completa
        </div>
        <div class="">
            Columna 1 de 4
        </div>
        <div class="">
            Columna 2 de 4
        </div>
        <div class="">
            Columna 3 de 4
        </div>
        <div class="">
            Columna 4 de 4
        </div>
    </div>
    <div class="grid grid-cols-3">
        <div class="col-start-1 col-end-2"> columna 1 con espacio al centro</div>
        <div class="col-end-4">columna 2 con espacio al centro</div>
        <div class="col-start-2 col-end-3">columna al centro</div>
    </div>
</div>

Como ven no hay gran diferencia en la implementación salvo que Tailwind cuenta con clases más especificas para grid que Bootstrap, pero con ambos se puede tener el mismo resultado.

Flexbox

Siguiendo con Flexbox, como sólo podemos trabajar en una dirección, decidí enfocarme en columns creando este ejemplo:

Para implementar este layout veamos como se hace primero con CSS puro:

Nuestro HTML

<div class="container">
    <div class="flex flex-justify">
        <div class="">Columna 1 de 3</div>
        <div class="">Columna 2 de 3</div>
        <div class="">Columna 3 de 3</div>
    </div>
<!-- recuerda que para que funcione el centrado vertical el contenedor debe tener un tamaño estatico -->
    <div class="flex flex-center box-height-static">
        <div class="item-height-static">Columna en el centro horizontal y vertical</div>
    </div>
    <div class="flex box-3 box-height-static">
        <div class=" item-height-static">Columna 1 de 5</div>
        <div class=" item-height-static">Columna 2 de 5</div>
        <div class=" item-height-static item-bottom">Columna 3 de 5</div>
        <div class=" item-height-static">Columna 4 de 5</div>
        <div class=" item-height-static">Columna 5 de 5</div>
    </div>
</div>

Como no usamos Frameworks, necesitamos nuestro CSS

/* Agregamos flex */
.flex{
    display: flex;
}

.flex-justify{
    justify-content: space-between;
}

.flex-center{
    justify-content: center;
    align-items: center;
}

.box-3 {
    justify-content: space-between;
    align-items: flex-start;
}

.item-bottom {
    align-self: flex-end;
}

.item-height-static{
    height: 2rem;
}

.box-height-static {
    height: 250px;
}

No necesitamos otra cosa aparte de flex.

De igual manera, si queremos tener el mismo resultado en Bootstrap y Tailwind, estos frameworks ya cuentan con clases sin necesidad de editar nuestro CSS.

Flexbox en Bootstrap

<div class="container mt-5">
    <div class=" d-flex justify-content-between">
        <div class="">Columna 1 de 3</div>
        <div class="">Columna 2 de 3</div>
        <div class="">Columna 3 de 3</div>
    </div>
<!-- Al igual que con el ejemplo de CSS puro, se necesita un contenedor con tamaño estático para que algunas de las clases funcionen -->
    <div class="d-flex justify-content-center align-items-center box-height-static">
        <div class="">Columna en el centro horizontal y vertical</div>
    </div>
    <div class="d-flex justify-content-around align-items-baseline box-height-static gray">
        <div class="">Columna 1 de 5</div>
        <div class="">Columna 2 de 5</div>
        <div class="align-self-end">Columna 3 de 5</div>
        <div class="">Columna 4 de 5</div>
        <div class="">Columna 5 de 5</div>
    </div>
</div>

Flexbox en Tailwind

<div class="container mt-7 mx-auto">
    <div class="flex justify-between">
        <div class="">Columna 1 de 3</div>
        <div class="">Columna 2 de 3</div>
        <div class="">Columna 3 de 3</div>
    </div>
    <div class="flex justify-center items-center box-height-static">
         <div class="">Columna en el centro horizontal y vertical</div>
    </div>
    <div class="flex justify-around items-baseline h-48">
        <div class="">Columna 1 de 5</div>
        <div class="">Columna 2 de 5</div>
        <div class="self-end">Columna 3 de 5</div>
        <div class="">Columna 4 de 5</div>
        <div class="">Columna 5 de 5</div>
    </div>
</div>

La implementación de flexbox en ambos frameworks es casi la misma (a excepción de algunos nombres de clases), pero la idea se mantiene.

Para mantener un diseño más estético agregué clases extra, las cuales no afectan al resultado que estamos buscando, aún así puedes verlos en acción en Codepein.

Espero les sean de apoyo, recuerden que estas son notas que a mí me sirven, por lo que siéntanse libres de usarlas como gusten y si tú también cuentas con tu propio acordeón me encantaría que lo compartieras ❤️.