Forem: Steven Lozano

Métodos de arrays en Javascript Parte 1

Steven Lozano — Tue, 01 Aug 2023 20:12:46 +0000

Una vez se entiende el funcionamiento principal de los arrays, surgen otros interrogantes y necesidades, como por ejemplo: ¿Cómo agrego un elemento al final del array? ¿Cómo ordeno un array? ¿Cómo busco un elemento que cumpla con una condición? Debido a que estas necesidades son recurrentes a la hora de desarrollar un programa, la mayoría de lenguajes de programación disponen de métodos por defecto para realizar estas tareas de forma simple y óptima. Javascript incluye muchos métodos por defecto, que se deben conocer para encontrar soluciones adecuadas a los requerimientos del programa. En esta primera parte se describirán algunos de estos métodos con ejemplos prácticos.

Método `push()`

Generalmente no es necesario que los arrays lleven un orden y simplemente se necesita agregar nuevos elementos al final de un array existente. Para este tipo de casos el push() cumple con esa función y permite tener un código limpio y legible. El método push() recibe uno o varios elementos como parámetro, los añade al final del array y adicionalmente retorna la cantidad de elementos después de la adición.

const sports = ['⚽', '🏀', '🏈'];

// Se agrega un deporte al final del array
// Se guarda el nuevo total de elementos en 'total'
const total = sports.push('🏐');
console.log(total); // 4
console.log(sports); // ['⚽', '🏀', '🏈', '🏐']

// Se agregan dos deportes al final del array
// Se guarda el nuevo total de elementos en 'total2'
const total2 = sports.push('⚾', '🎾');
console.log(total2); // 6
console.log(sports); // ['⚽', '🏀', '🏈', '🏐', '⚾', '🎾']

Método `unshift()`

No siempre se busca agregar elementos al final del array, sino que por el contrario se necesita agregarlos al principio. Javascript también dispone de un método para hacer esto llamado unshift(), este método también recibe uno o varios elementos como parámetro y devuelve la nueva cantidad de elementos, pero al contrario del push(), este los agrega al principio. Veamos el mismo ejemplo anterior pero implementado con unshift().

const sports = ['⚽', '🏀', '🏈'];

// Se agrega un deporte al principio del array
// Se guarda el nuevo total de elementos en 'total'
const total = sports.unshift('🏐');
console.log(total); // 4
console.log(sports); // ['🏐', '⚽', '🏀', '🏈']

// Se agregan dos deportes al principio del array
// Se guarda el nuevo total de elementos en 'total2'
const total2 = sports.unshift('⚾', '🎾');
console.log(total2); // 6
console.log(sports); // ['⚾', '🎾', '🏐', '⚽', '🏀', '🏈']

Método `find()`

Los arrays tienden a crecer en tamaño y en variedad de elementos que tiene almacenados, perdiendo relativamente el control de en que índice está guardado cierto elemento o incluso saber si el elemento existe dentro del array. El método find() facilita la búsqueda elementos dentro de un array. Este método recibe como parámetro una función con una condición y devuelve el primer elemento que cumpla con esta, aunque si no encuentra el elemento devolverá undefined. En este ejemplo usaremos un array de números para facilitar la comprensión del método.

const numbers = [4, 6, 12, 23, 58, 6];

// Buscamos un elemento que sea mayor que 12
// El método devolverá el primer elemento que cumpla con la condición
const greaterThan12 = numbers.find( (number) => number > 12 );
console.log(greaterThan12); // 23

// Ahora buscamos un elemento que sea igual a 6
const equalTo6 = numbers.find( (number) => number === 6 );
console.log(equalTo6); // 6

// Buscamos un elemento que sea mayor que 100
// Como ningún elemento cumple con la condición, devuelve undefined
const greaterThan100 = numbers.find( (number) => number > 100 );
console.log(greaterThan100); // undefined

Intencionalmente el array tiene dos elementos repetidos, porque pese a que existen dos elementos con el mismo valor 6, al buscarlo con el find() nos retornará el primero que encuentre y el otro se ignora por completo, esto quiere decir que el método detiene la búsqueda una vez encuentre el elemento que cumpla con la condición.

Método `findIndex()`

Si se quiere conocer el índice de un elemento para posteriormente modificarlo, el método findIndex() cumple con esa función. Este método tiene una funcionalidad parecida al find(), con la diferencia que en este caso no se devuelve el elemento sino el índice de este. Igualmente recibe una función como parámetro con una condición y devuelve el índice del primer elemento que cumpla con esta, pero si no encuentra ningún elemento retorna -1. Usando el mismo ejemplo con los números.

const numbers = [4, 6, 12, 23, 58, 6];

// Buscamos un elemento que sea mayor que 10
// El método devolverá el índice del primer elemento que cumpla con la condición
const greaterThan10Index = numbers.findIndex( (number) => number > 10 );
console.log(greaterThan10Index); // 2

// Con el índice, se puede modificar el valor de esa posición en el array
numbers[greaterThan10Index] = 10;
console.log(numbers); // [4, 6, 10, 23, 58, 6]

// Buscamos un elemento que sea mayor que 100
// Como ningún elemento cumple con la condición, devuelve -1
const greaterThan100Index = numbers.findIndex( (number) => number > 100 );
console.log(greaterThan100Index ); // -1

Estos solo son algunos métodos de los que dispone Javascript para manipular y buscar en arrays. La idea es hacer un par de post adicionales con método útiles y que se usan mucho en el día a día como desarrollador de Javacript.

Hasta una próxima!

Arrays en Javascript

Steven Lozano — Sun, 18 Jun 2023 17:03:54 +0000

Los arrays o en español "arreglos", es una estructura de datos fundamental no solo en Javascript, sino que también en la mayoría de lenguajes de programación.

En este post se explicará y se realizarán ejemplos que faciliten de forma práctica el entendimiento de los conceptos fundamentales y de su implementación en Javascript. Si eres principiante o simplemente quieres reforzar tus conocimientos, te invito a que continúes leyendo este post, seguro te será de mucha utilidad.

¿Qué es un array?

Antes de revisar como se implementan los arrays en Javascript, debemos respondernos la pregunta ¿Qué es un array? Un array es un conjunto o colección de elementos, agrupados en una sola variable y que es accesible en cualquier momento que se necesite. Este concepto es el mismo para todos los lenguajes de programación y no está ligado exclusivamente a Javascript.

Para entender mejor el concepto podemos encontrar similitudes con una estantería de libros, en donde se van agregando libros a medida que se van adquiriendo y que se ponen uno al lado de otro. Así mismo pasa con los arrays, tienes una estantería que es la variable que guarda el array y tienes libros que son el conjunto de elementos que contiene el array.

La idea principal de los arrays es agrupar elementos homogéneos, que tengan características similares para facilitar el orden y la limpieza del código. En una estantería puedes guardar solo libros, aunque también puedes poner otros objetos, pero esto se evita en lo posible porque dificultaría el orden y el acceso a los libros, así mismo pasa con los arrays, puedes agrupar números o texto u objetos, pero no sería recomendable agruparlos todos en un mismo array porque rompería con el orden y dificultaría el entendimiento del código.

Los arrays cuentan con algunos conceptos claves que se deben entender antes de utilizarlos.

Elemento

Un elemento es el espacio ocupado dentro del array, con un valor preferiblemente homogéneo al resto de elementos. Este elemento posee una posición que lo identifica y que permite acceder a su valor fácilmente a este e inclusive modificarlo o eliminarlo. Un elemento puede ser un número, un texto, un boolean o un objeto. Volviendo al ejemplo de la estantería, cada libro es un elemento que ocupa un espacio dentro de la estantería.

Índice

Los elementos ocupan un espacio y tienen una posición que los identifica, a esta posición se le llama índice. El índice es un valor numérico entero que identifica a los elementos de un array. Este índice en Javascript siempre comienza desde 0, es decir, el primer elemento que se agrega al array siempre tiene índice 0. El índice va incrementando su valor secuencialmente por cada elemento que se agregue, por ejemplo, si se tiene un array de 5 elementos, el índice del último elemento es 4, teniendo en cuenta de que se comienza desde 0. Este índice facilita el acceso a un dato específico del array, así como también modificarlo o inclusive eliminarlo.

Tamaño

Un array puede tener tantos elementos como recursos que se tenga para almacenarlos. Esta característica hace que un array pueda tener 10, 20, 30 o 5000 elementos y que contarlos manualmente pueda ser una tarea caótica. La mayoría de lenguajes facilitan este proceso, disponiendo de una propiedad llamada length que contiene el valor numérico entero del tamaño total del array, es decir, cuantos elementos tiene el array al momento de consultar la propiedad.

Como crear un array en Javascript

Ahora que ya se tienen los conceptos básicos de lo que es un array, podemos comenzar con crear un array en Javascript. Esta forma de crear un array es la más utilizada en general, posteriormente habrá ejemplos de alternativas para crear un array.

const estanteria = ['📗', '📘', '📙', '📓', '📔', '📕'];

Esta forma es la más sencilla de crear un array, simplemente se agregan los elementos dentro de un par de corchetes ([]), se separa cada elemento con una coma (,) y se asignan a una variable. En este ejemplo guardamos 6 objetos que representan libros, en una variable llamada estanteria.

Aunque la anterior forma sea la más sencilla y más utilizada, no quiere decir que sea la única forma. En Javascript se puede crear un array a partir del constructor Array().

const estanteria = new Array('📗', '📘', '📙', '📓', '📔', '📕');

El resultado es el mismo: Se crea un array de 6 elementos, que se guardan en una variable llamada estanteria. Aunque el resultado es el mismo, la sintaxis y el proceso cambia un poco.

El constructor Array() posee otra característica que se debe tener en cuenta para evitar efectos no deseados en el programa.

const estanteria = new Array(2);

Esta forma de crear arrays, pasando un número al constructor, lo que hace es crear un array con una cantidad de espacios vacíos de acuerdo al número suministrado, en el caso del ejemplo se suministró el número 2, por lo que se creó un array con 2 posiciones vacías y se guardó en la variable estanteria.

Otra alternativa para crear un array es el método Array.of(), que a diferencia del constructor Array() si se pasa solo un elemento de tipo número como parámetro, se crea un array solo con ese elemento.

const espaciosVacios = new Array(2); // Array con dos posiciones vacías
const elementoNumerico = Array.of(2); // Array solo con el elemento 2: [2]

Con el ejemplo anterior se identifica claramente la diferencia entre ambas formas de crear arrays. En la variable espaciosVacios con el constructor Array() se creó un array con 2 espacios vacíos, mientras que en elementoNumerico se creó un array con un solo elemento de valor 2. Estas opciones son alternativas, pero en general es más simple utilizar los corchetes ([]).

Como obtener un elemento del array

Un array es una estructura que guarda muchos elementos, pero ¿Cómo se obtiene un elemento? Un elemento se obtiene con la sintaxis nombreVariable[índice], aquí es donde el índice juega un papel importante como identificador del elemento dentro del array, esto facilita el acceso y la manipulación de los elementos del array. Siguiendo con el mismo ejemplo de la estantería de libros.

const estanteria = ['📗', '📘', '📙', '📓', '📔', '📕'];
const libroVerde = estanteria[0];
const libroAzul = estanteria[1];
console.log(libroVerde); // '📗'
console.log(libroAzul); // '📘'

Como acceder al último elemento del array sin conocer su posición

Para finalizar, cuando se usan arrays muchas veces es necesario acceder al último elemento, pero al ser un tamaño dinámico, no se puede saber con certeza cuál es su índice. El array comienza su índice en 0 y el tamaño es el conteo de elementos, por lo tanto, el elemento final siempre será el tamaño del array menos 1. La sintaxis es igual que para obtener un elemento nombreVariable[nombreVariable.length - 1], pero el índice se obtiene restando 1 al tamaño del array.

const estanteria = ['📗', '📘', '📙', '📓', '📔', '📕'];
const ultimoLibro = estanteria[estanteria.length - 1];
console.log(ultimoLibro); // '📕'

En conclusión

Los arrays son una estructura muy usada en los lenguajes de programación, es normal encontrarse con uno cada día y es fundamental para entender la mayoría del código de una aplicación. Los siguientes posts estarán enfocados en los arrays, con conceptos básicos e intermedios como el ordenamiento, métodos para manipularlos, inmutabilidad, entre otros.

Espero que este post haya sido de gran ayuda, escríbeme en los comentarios si tienes alguna duda. ¡Hasta la próxima!

Mí primer empleo como desarrollador

Steven Lozano — Tue, 02 Aug 2022 12:54:00 +0000

Luego de algunas semanas con poco tiempo para dedicarme a escribir, por fin puedo ajustar mis horarios para hacerlo. Entré hace ya un par de meses a la universidad y me costó un poco volver al ritmo de estudiar y trabajar, pero creo que ya puedo sacar unos espacios para continuar escribiendo.

Primer encuentro con la programación

Mi inicio en el mundo del desarrollo comenzó hace ya unos 7 años, donde pude entrar a una institución pública en Colombia llamada Servicio Nacional de Aprendizaje en la carrera de tecnología en análisis y desarrollo de sistemas de información, con una duración de 2 años. El aprendizaje se enfocó en torno a un proyecto que fue desarrollado durante toda la carrera, siguiendo casi todos los pasos de desarrollo de software, desde el levantamiento de requerimientos hasta las pruebas del producto final. La metodología me pareció muy buena, pero hubo un error que considero importante y fue que las bases de programación la enseñaron casi al final de la carrera, haciendo que no se desarrollara muy bien esa habilidad de tomar un problema, pensar una solución y transmitirlo en un lenguaje de programación.

Me gradué y ¿ahora qué sigue?

Luego de esos 2 años de estudio, tuve una temporada más o menos de 3 años trabajando en empleos sin ninguna relación al desarrollo de software, pero seguí con mi obstinación de primero aprender bien a programar y segundo conseguir mi primer empleo. Esto me llevó a seguir cursos gratuitos de bases de programación, donde pude realmente entender muchas cosas en las cuales tenía problemas y que no me permitían avanzar más allá de copiar un código de internet e intentar de que funcione. Luego de comenzar a entender un poco más estos conceptos, me aventuré a comprar un curso de angular el cual pude culminar y después hice un pequeño proyecto de práctica aplicando lo aprendido, que considero me ayudó mucho a seguir fortaleciendo mis bases de programación.

Segundo encuentro con la programación

Pasan estos 3 años entre trabajo y destellos aprendizaje autónomo, pero seguía sintiendo que no sabía suficiente, que me faltaba algo. Esto me llevó a inscribirme en mi primer universidad a estudiar ingeniería de sistemas, en la cual cursé 4 semestres y considero que al tener ya cierto conocimiento previo, me permitió aprender de manera mucho más fácil la programación orientada a objetos y también las estructuras de datos, logrando así llevarme un poco más adelante y darme ciertas herramientas que antes no tenía. En los últimos 2 semestres me pude dedicar completamente al estudio, porque por motivos de pandemia me quedé sin empleo que al final de cuentas me dio más tiempo para seguir aprendiendo, por ejemplo si no entendía en clase que era polimorfismo, pues luego iba y buscaba documentación y videos para así no dejar el concepto sin entender. Ya que tenía mucho tiempo libre, también me compré un curso de react porque me llamaba mucho la atención y comencé aprenderlo en paralelo junto con lo que aprendía en la universidad. Y una vez terminado el curso, decidí aplicar los conocimientos adquiridos desarrollando una pokédex con la api de pokémon, este era un proyecto que quería hacer para practicar hasta conseguir empleo y no echar a la basura todo lo aprendido(Solo pude terminar un módulo porque conseguí empleo y no pude continuar con el resto).

Primer empleo

Buscando empleos, ví uno que pedía un ingeniero desarrollador con tecnologías que yo sabía y sin ninguna duda envíe mi CV, aún sabiendo que no cumplía con el requisito de ser ingeniero, pero siempre pensé que lo peor que podía pasar era que simplemente no me contestaran y debía seguir enviando CV. De este empleo me llamaron porque también requerían un perfil de desarrollador junior y después de un proceso de selección, pude entrar a la empresa y es en la cual trabajo hasta el día de hoy después de 14 meses.

A mi yo del pasado le diría

Para concluir, quiero poner algunos consejos que no considero como verdad absoluta, pero que si me hubiese servido que alguien me los hubiera dicho al empezar en este camino de aprendizaje:

No existe un camino único para aprender a programar, intenta siempre ir adaptándolo teniendo en cuenta tu modo de aprendizaje, capacidad económica y tiempo disponible.
No te desmotives si llevas tiempo tratando de conseguir un empleo como desarrollador, sigue aprendiendo y fortalece todas tus habilidades.
Aplica a un empleo, no importa si no cumples con algún requisito, es muy probable que te acepten y te enseñen lo que te haga falta.
Concéntrate en aprender las bases de programación en un lenguaje que te llame la atención.
Aplica todo lo que aprendes en un proyecto personal y experimenta tratando de descubrir cosas nuevas.

¿Qué consejo le darías a tu yo que recién empieza?

Mi primer blog

Steven Lozano — Tue, 21 Jun 2022 16:46:00 +0000

En este primer post quiero dar a conocer un poco de mí en cuanto al ámbito profesional, contando que hago, donde trabajo, en que tecnologías tengo experiencia y cuales estoy estudiando actualmente. Y por último, explicar las razones por las cuales decidí realizar este blog y en que dirección lo quiero enfocar.

Presentación

Me presento, mi nombre es Steven Lozano Astudillo, soy desarrollador junior en Salud Electrónica. Estudié hace aproximadamente 5 años una tecnología en análisis y desarrollo de sistemas de información en una institución pública de Colombia llamada SENA, donde me gradué, pero tuve dificultades para encontrar mi primer empleo como desarrollador, me pasé prácticamente 4 años intentándolo, hasta que apliqué a una oferta publicada por mi actual empresa y comencé por fin a trabajar como desarrollador desde hace 1 año. Para la historia de cómo encontré mi primer empleo, voy a realizar un post solo para eso.
Durante este año he trabajado tanto frontend con angular, como backend con nodejs. También llevo buen tiempo estudiando y practicando react por mi parte.

Motivaciones

Lo que me llevó a comenzar este blog no fue una sino varias razones:

La principal razón es enseñar para aprender. Desde hace mucho tengo claro que la mejor forma de aprender es enseñando ya que debes entender muy bien el tema para poder transmitirlo y que las personas te entiendan. Con esto consigo dos cosas importantes: aprender mejor y compartir mi conocimiento.
Mejorar mi capacidad de escribir es otro motivo importante. Como bien sabemos en este mundo digital, escribir se vuelve una skill necesaria. Probablemente en este primer post tengo mil errores, pero por eso lo hago, para aprender y mejorar día a día.
Mi aprendizaje en nextjs. Actualmente estoy haciendo mi web personal y no quería simplemente poner mi información y ya, sino ir más allá e integrar un blog. Esto lo veo como un ejercicio interesante, que me va a permitir mejorar mis skills con la tecnología.

Dirección

Inicialmente la dirección que voy a darle al blog, va a ser el compartir lo que sé y lo que iré aprendiendo en el camino, relacionado al desarrollo de software y todo lo que deriva de este. Tal vez en un futuro considere agregar posts relacionados a videojuegos, pero es algo que a corto plazo no pienso hacer.

Eso es todo lo que quería abarcar en este blog, el siguiente posiblemente sea el cómo encontré mi primer empleo como desarrollador y todo el recorrido desde que comencé a estudiar.

Muchas gracias por leer este post. Hasta una próxima ocasión.