JavaScript es un lenguaje de programación popular usado por el 78% de los desarrolladores. Se puede construir casi cualquier cosa con JavaScript
En este artículo, cubriremos en profundidad arrays, strings y objetos de JavaScript para que pueda beneficiarse de algunos de los métodos estáticos y de instancia más efectivos que ofrece el lenguaje.
Esto es lo que cubriremos en esta guía:
- Métodos de instancia y de clase
- Cómo usar strings en JavaScript
- Cómo usar arrays en JavaScript
- Cómo usar objetos en JavaScript
Métodos de instancia y de clase
JavaScript es un lenguaje fuertemente orientado a objetos. Sigue un modelo basado en prototipos, pero también ofrece una sintaxis de clase para permitir paradigmas típicos de programación orientada a objetos (POO).
En JavaScript, los strings y los arrays son objetos, y cada objeto en JavaScript es una plantilla que tiene sus métodos y propiedades. Cada objeto hereda métodos y propiedades de su prototipo. En JavaScript, cada objeto tiene acceso al prototipo de objeto.
Los métodos estáticos son métodos que están disponibles en el nivel de clase, por ejemplo, el método Object.freeze(). Los métodos de instancia están disponibles en el nivel de instancia; por ejemplo, una instancia creada a partir de un objeto Array tiene acceso a los métodos de instancia como .join(), pero no a los métodos estáticos.
Cómo usar strings en JavaScript
Los strings se utilizan para contener datos que se pueden representar en forma de texto. Para crear un string, puede usar el constructor String() o un literal de cadena. Aquí hay un ejemplo de ambas formas:
// Usando un constructor
let string1 = String('String Creation');
// Usando un string literal
let string2 = 'String Creation';Ahora aprendamos más sobre los métodos de instancia. Hay muchos métodos de instancia, pero aquí se mostraran siete métodos que son los más importantes.
El método .charAt()
Muchas veces, cuando trabajamos con strings, queremos acceder a un carácter en un cierto índice del string. Puede hacer esto con el método charAt() o con la indexación, de la misma manera que tratamos una array.
// Digamos que queremos acceder al primer caracter de un string
let string = 'Hello World';
// usando indexación
let first1 = string[0]; // output 'H' (la indexación comienca en el 0)
// usando el método charAt()
let first2 = string.charAt(0); // output 'H'En JavaScript, el sistema de indexación comienza en 0; por ejemplo, el primer carácter de una cadena tiene un índice de 0 y así sucesivamente.
Los métodos .toUpperCase() y .toLowerCase()
Ahora digamos que queremos poner en mayúsculas o minúsculas un string. Puede hacer esto utilizando los métodos de instancia toUpperCase() y toLowerCase().
let string = 'Hello';
// Pasar string a minúsculas
let lowerCase = string.toLowerCase(); // output 'hello'
// Pasar el string a mayúsculas
let upperCase = string.toUpperCase(); // output 'HELLO'Puede usarlos para ver si dos strings contienen la misma palabra, por ejemplo, ‘Sam’ y ‘sam’. En realidad, ‘sam’ === ‘Sam’ se evalúa como falso, mientras que ‘sam’.toLowerCase() === ‘Sam’.toLowerCase() se evalúa como verdadero.
El método .concat()
A menudo es necesario unir strings en un programa para crear una nueva cadena de texto. Esto se llama concatenación.
Ahora, para la concatenación de strings, podemos usar el método concat(). Se parece a lo siguiente. Una nota importante es que este método devuelve una nueva cadena sin mutar la original.
let string = 'Hello';
// Concatenación de strings usando el método concat
let string1 = string.concat(' World'); // output 'Hello World'El método .indexOf()
Ahora, para encontrar el índice de un determinado carácter o un conjunto de caracteres de un string, podemos usar el método indexOf(). Esto devolverá el primer índice donde aparece el carácter o conjunto de caracteres pasados.
let string = 'Hello World';
// Encontrar el índice donde 'H' ocurre por primera vez
let firstH = string.indexOf('H'); // output 0
// Encontrar el primer índice donde 'World' ocurre por primera vez
let firstWorld = string.indexOf('World'); // output 6
// En el caso en el que un caracter o un set de caracteres
// no ocurra en el string el método retorna -1
let notThere = string.indexOf('Z'); // output -1El método .slice()
Un substring es un subconjunto o parte de otra cadena, o es una secuencia contigua de caracteres dentro de un string. Por ejemplo, «Substring» es un substring de «Substring en JavaScript».
Ahora digamos que queremos obtener una substring de una cadena dada. Podemos usar el método slice(). Slice es en realidad uno de los métodos de String más importantes. Se usa para obtener substrings y también para copiar strings.
Slice toma dos parámetros opcionales: el primero es donde queremos comenzar a cortar y el segundo es donde queremos terminar la operación de corte.
Supongamos que pasamos 1 y 10 como parámetros para el método Slice. Luego, el método devolverá un substring que comienza en el índice 1 y termina en el índice 9.
Esto significa que el substring nunca incluye el carácter en el índice final. Una nota importante es nunca pasar un índice final más alto que la longitud del string.
let string = 'Hello World';
// para chequear el largo del string podemos usar
// la propiedad de instancia length
let length = string.length; // output 11
// cortar par obtener el substring desde el index 1 -> 9
let string1 = string.slice(1 , 10); // output 'ello Worl'
// si no pasamos ningún parámetro se generará
// una copia del string original sin ninguna mutación
let copy = string.slice(); // output 'Hello World'El método .split()
El último método de string que cubriremos es el método split(). Este método toma un patrón como argumento y divide el string en varios substrings. El patrón describe dónde se producen las divisiones. Este método devuelve un array de estos substrings.
Es posible que utilice este método para analizar una URL o ciertos strings.
let string = 'Hello World';
// Dividir un string en palabras
// Esto se puede hacer cuando el patrón pasado en un espacio
let words = string.split(' '); // output ['Hello' , 'World']
// Cuando el parámetro pasado es un string vació, el arreglo
// de salida contendrá cada uno de los caracteres del
// string original
let chars = string.split('');
// output ["H","e","l","l","o"," ","W","o","r","l","d"]Hay muchos más métodos sobre string de los que se puede aprender, pero estos son con los que trabajará más. Puede obtener más información leyendo los documentos web oficiales de MDN.
Cómo usar arrays en JavaScript
Al igual que otros lenguajes de programación, los arrays de JavaScript le permiten almacenar una colección de datos en una variable. Pero a diferencia de C o C++, los arrays se pueden devolver a partir de llamadas a funciones.
Los arrays de JavaScript son dinámicos, por lo que puede agregar o eliminar elementos de un array. También puede tener elementos de múltiples tipos de datos en un solo array.
Hablemos de cómo crear arrays en JavaScript. Puede crear fácilmente un array asignando una variable a corchetes vacíos [] o utilizando el constructor Array().
// Creando un array con el constructor
let arr1 = Array();
// Método preferido
let arr2 = [];Ahora hablemos de siete métodos de clase e instancia de array que se consideran los más útiles.
El método .indexOf()
Para obtener el primer índice de un array dada donde aparece un elemento, podemos usar el método indexOf(). Se verá así. Si el argumento pasado a este método no aparece en el array, devolverá -1.
let array = [1, 2, 3];
// Encontrar el índice donde 1 ocurre por primera vez
let first1 = array.indexOf(1); // output 0
// Encontrar 4 en el array
let first4 = array.indexOf(4); // output -1Los métodos .push() y .pop()
Como se mencionó anteriormente, los arrays de JavaScript son dinámicas. Entonces podemos agregar elementos usando el método push() y eliminar el último elemento usando el método pop(). Una nota importante es que ambos métodos mutan el array original.
let array = [1, 2, 3];
// Agregar 4 al array
array.push(4)
console.log(array) // output [1, 2, 3, 4]
// Volver al array original
let removedElement = array.pop() // output 4
console.log(array) // output [1, 2, 3]Ahora discutiremos algunos métodos más avanzados, los introducidos por la actualización ES6.
El método .map()
Primero, supongamos que desea crear un array utilizando datos de otr array existente, por ejemplo, si tiene un array de objetos que representan a los empleados.
Cada objeto empleado tiene una propiedad de nombre. Y desea crear un array donde cada elemento sea el valor de la propiedad de nombre del objeto empleado en el mismo índice del array.
Aquí es donde entra en juego el método map(). Toma una función callback. Map crea un nuevo array y nunca muta el array original, y la función callback expresa lo que desea hacer con los datos del array original. Se verá así:
let arr= [{name : 'joe'} , {name : 'john'}];
// Lo preferible es usar una función arrow
let namesArr = arr.map(elem => elem.name); // output ['joe' , 'john']El método .forEach()
¿Está cansado de las habituales iteraciones for ? Son un poco aburridos, ciertamente. Afortunadamente, el método forEach() está aquí para ayudar.
Este método toma una función callback como argumento y no devuelve nada. Itera sobre el arreglo y ejecuta una determinada tarea en cada elemento del arreglo. La función callback expresa la tarea. El código para esto se verá así:
let arr= [1, 2, 3];
// mostrar cada elemento en consola
arr.forEach(elem => console.log(elem));
// output
// 1
// 2
// 3El método .filter()
Ahora digamos que tenemos un array de números y que queremos crear un array de solo los números que pasan una determinada condición.
En este caso, podemos usar el método filter() que también toma una función callback como argumento. La función callback devuelve un booleano: verdadero si el elemento pasa la prueba; de lo contrario, falso. Solo los elementos que pasen estarán en el array generado y la función callback expresa la prueba. Así es como funciona:
let arr = [1, 2, 3, 4, 5];
// Crear un array de números mayores a 3
let filteredArray = arr.filter(elem => elem > 3); // output [4, 5]Ell método .some()
Ahora digamos que tenemos un aray y queremos verificar si hay al menos un número que pasa una determinada prueba. Aquí viene el método some().
Este método toma una función callback como argumento y devuelve un valor booleano que es verdadero si al menos un elemento del array pasa la prueba y, de lo contrario, es falso. La función callback expresa la prueba y se verá de la siguiente manera:
let arr = [1, 2, 3, 4, 5];
// Verificar si al menos un elemento es mayor a 4
let bool = arr.some(elem => elem > 4); // output trueEl método .sort()
La ordenación es el proceso de organizar los datos en un orden significativo para que pueda analizarlos de manera más efectiva.
Cuando hablamos de arrays, tenemos que mencionar la ordenación. En JavaScript, el método sort() ordena los arrays en su lugar y devuelve la referencia al mismo array. Este método muta el array, el orden de ordenación predeterminado es ascendente.
Puede implementar su propia lógica de ordenación pasando una función callback que exprese una comparación entre dos elementos y devuelva un número. Si el número devuelto es positivo, el primero de los dos elementos comparados aparecerá primero en el array ordenado.
let arr = [1, 2, 4, 3];
// ordenando en orden ascendente
arr.sort();
console.log(arr); // [1, 2, 3, 4]
// usando un orden customizado para ordenar
// de manera descendente
arr.sort((elem1 , elem2) => elem2 - elem1);
console.log(arr); // output [4, 3, 2, 1]Hay muchos métodos de arrays interesantes que no se mencionaron y vale la pena invertir tiempo en aprenderlos. Si quiere hacerlo, puede visitar los documentos oficiales de MDN.
Cómo usar objetos en JavaScript
Si desea ser un buen desarrollador de JavaScript, realmente debe tener una comprensión decente de los objetos y la forma en que funcionan.
Casi todos los objetos que se crean en JavaScript heredan métodos del prototipo de objeto global que está disponible globalmente para cada objeto en JavaScript. Una excepción son los objetos prototipo nulos de los que no vamos a hablar. Todos los métodos de los que vamos a hablar son en su mayoría estáticos.
Primero, hablemos sobre cómo crear objetos usando un conjunto de llaves { } o el constructor de objetos. Esto es lo que parece:
// Creando un objeto con el constructor
let obj1 = Object();
// Creando un objeto con un conjunto de llaves
let obj2 = {};El método .assign()
Ahora digamos que queremos copiar un objeto. Aquí viene el método estático assign() para ayudarnos a hacer esto. Te mostraré cómo funciona esto y una mejor manera de hacerlo. También hablaré sobre algunos errores comunes que cometen muchos desarrolladores cuando intentan copiar objetos.
let obj = {age : 18};
// Copiando usando el método assign
let new1 = {};
Object.assign(new1 , obj);
console.log(new1); // output {age : 18}
// Se puede hacer lo mismo con el spread operator
let new2 = {...obj}; // output {age : 18}Un error común es asignar una variable a un objeto directamente. El problema con esto es que los objetos se asignan por referencia y no por valor. Entonces, cualquier cambio mutará el objeto original.
let obj = {age : 18};
let obj1 = obj;
obj1.age = 17;
console.log(obj); // output {age : 17}Los métodos .freeze() y .isFrozen()
Digamos ahora que queremos hacer un objeto inmutable. Para esto podemos usar el método estático freeze() que hace imposible agregar propiedades, modificar o eliminar cualquiera de los prototipos, métodos y propiedades del objeto congelado.
Para ver si un objeto está congelado, podemos usar el método estático isfrozen().
let obj = {age : 18};
Object.freeze(obj);
// Tratar de mutar el objeto
obj.age = 17; // Devuelve error en strict mode
let isFrozen = Object.isFreezed(obj); // output trueLos métodos .keys() y .values()
Ahora, para obtener una lista de ciertas propiedades del objeto, podemos llamar al método estático keys(). Para obtener una lista de los valores correspondientes a sus propiedades, podemos llamar al método estático values(). Una nota importante es que la lista es un array
let obj = {name : 'John Doe' ,age : 45};
let keys = Object.keys(obj); // output ['name', 'age']
let values = Object.values(obj); // output ['John Doe', 45]Puede consultar los documentos oficiales de MDN para profundizar en el tema.
Conclusión
En este tutorial, hablamos sobre arrays, strings y objetos, junto con los métodos que ofrecen.