6 características de JavaScript que probablemente nunca hayas usado

Nube Colectiva

hace 5 años

En esta página:

Demo

Javascript es un Lenguaje de Programación muy extenso, cuenta con muchas características que permiten al Desarrollador crear desde tareas muy simples hasta tareas bastantes complejas y este Lenguaje es fortalecido por Frameworks, Paquetes y Librerías que permiten desarrollar proyectos de manera ágil y profesional, pero hay características puras de Javascript que probablemente nunca hayas usado, en este Post te las compartiré.

Entre las características que te compartiré en este Post se encuentran operadores, palabras claves, constructores, etc. cada uno puede ser empleado para un determinado requerimiento.

Operador de Coma

El operador Coma ( , ) separa expresiones y devuelve la ultima expresión de un string, por ejemplo en el siguiente código:


let datos = (45, 35, 25, 'hola')
console.log(datos) // Devuelve: hola

let datos = (45, 35, 25, 'hola')

console.log(datos) // Devuelve: hola

Puedes ver que tengo 4 expresiones dentro de la variable datos, cuando imprimo la variable datos me devuelve la última expresión: hola.

Podemos ver esto en bucles:


for(let i = 0, ii = 1; i< 10; i++, ii--) { ... }

for(let i = 0, ii = 1; i< 10; i++, ii--) { ... }

Esto es útil cuando queremos escribir funciones lambdas cortas:


const lambda = (a, b, arr) => (arr.push(a*b), a*b)

const lambda = (a, b, arr) => (arr.push(a*b), a*b)

En el código anterior existen 2 afirmaciones, la primera empuja el resultado de la multiplicación a la matriz arr y la segunda multiplica a y b. El resultado de esta segunda multiplicación es lo que el usuario obtiene.

in

Esta es una palabra clave en Javascript y se utiliza para verificar si una propiedad se encuentra en un objeto. Muchos Desarrolladores lo han usado en un bucle for … in sin haberse dado cuenta que in es una palabra clave.

La palabra clave in devuelve el valor booleano true si una propiedad esta presente en un objeto y devuelve el valor booleano false si la propiedad no lo esta, por ejemplo en el siguiente código:


const dato = {
    prop: 90
}
console.log("prop" in dato) // Devuelve: true

const dato = {

prop: 90

}

console.log("prop" in dato) // Devuelve: true

Puedes ver que tengo una variable llamada dato y dentro de ella una propiedad prop: 90, entonces cuando verifico si prop: 90 se encuentra en la variable dato, la consola me devuelve el valor true.

Constructor de Array

Por si no lo sabias en Javascript podemos definir un Array sin el método tradicional:


const miarray = [13, 46, 69]

const miarray = [13, 46, 69]

Haciendo uso de un constructor new Array():


const miarray = new Array(13, 46, 69)

const miarray = new Array(13, 46, 69)

Entonces la ubicación de cada parámetro formará la base de sus indices, es decir el valor 13 será el índice 0, el valor 46 será el valor 1 y el valor 69 será el indice 3:


arr [0] // 13 
arr [1] // 46 
arr [2] // 69

arr [0] // 13

arr [1] // 46

arr [2] // 69

Hacer uso de new Array(…) es lo mismo que usar el arra literal.

Constructor de Funciones

En Javascript podemos definir una función haciendo uso del constructor de funciones. Normalmente en Javascript podemos definir funciones de las siguientes maneras:


const miFuncion = (a, b) => a * b

// o

function miFuncion(a, b) {
    return a * b
}

// o

const miFuncion = function(a, b) {
    return a * b
}

const miFuncion = (a, b) => a * b

// o

function miFuncion(a, b) {

return a * b

}

// o

const miFuncion = function(a, b) {

return a * b

}

Pero también podemos crear una función haciendo uso del constructor de Funciones new Function():


const miFuncion = new Function("a", "b", "return a * b")

const miFuncion = new Function("a", "b", "return a * b")

Los parámetros pasados en Function forman los argumentos y el cuerpo de la función. La variable miFuncion se convierte en el nombre de la función.

Para llamar a la función miFuncion, escribimos el nombre de la variable con corchetes “miFuncion(…)” pasando los parámetros:


const miFuncion = new Function("a", "b", "return a * b")

console.log(miFuncion(3, 4)) // miFuncion multiplica los 2 valores y devuelve: 12

const miFuncion = new Function("a", "b", "return a * b")

console.log(miFuncion(3, 4)) // miFuncion multiplica los 2 valores y devuelve: 12

Argumentos

Solemos pasar arguments a una función y lo bueno de esto es que podemos hacer que los argumentos pasen una función con el objeto de argumentos sin definir explícitamente las variables de argumentos en la función:


function miFuncion() {
    arguments[0] // 28
    arguments[1] // 39
}

miFuncion(28, 39)

function miFuncion() {

arguments[0] // 28

arguments[1] // 39

}

miFuncion(28, 39)

El objeto de argumentos esta indexado en matriz, es decir, las propiedades son números y por lo tanto se puede acceder a ellas a través de referencias clave.

El objeto arguments se instancia de la clase Argumentos que tiene algunas propiedades interesantes.

Por ejemplo arguments.calle.name hace referencia al nombre de la función que se llama actualmente, le estoy pasando la propiedad calle que es una propiedad local de arguments la cual permite a funciones anónimas referirse a ellas mismas, lo cual es necesario en funciones anónimas recursivas.


function miFuncion() {
    console.log(arguments.callee.name) // miFuncion
}

miFuncion(28, 39)

function miFuncion() {

console.log(arguments.callee.name) // miFuncion

}

miFuncion(28, 39)

Y arguments.callee.caller.name hace referencia al nombre de la función que llamó a la función que se esta ejecutando actualmente:


function miFuncion() {
    console.log((arguments.callee.name)) // miFuncion
    console.log((arguments.callee.caller.name)) // otraFuncion
}

(function otraFuncion() {
    miFuncion(28, 39)
})()

function miFuncion() {

console.log((arguments.callee.name)) // miFuncion

console.log((arguments.callee.caller.name)) // otraFuncion

}

(function otraFuncion() {

miFuncion(28, 39)

})()

Estoy pasandole la propiedad caller que retorna la función que llamó a la función especificada.

Saltar los Paréntesis

También en Javascript podemos prescindir de los paréntesis ( ) al crear instancias de un objeto, por ejemplo:


class Gelatina {
    logger() {
        console.log("Gelatina")
    }
}

// Normalmente, hacemos esto: 
(new Gelatina()).logger() // Gelatina

// Pero podemos omitir el Paréntesis ():
(new Gelatina).logger() // Gelatina
// Y funciona sin problemas

class Gelatina {

logger() {

console.log("Gelatina")

}

// Normalmente, hacemos esto:

(new Gelatina()).logger() // Gelatina

// Pero podemos omitir el Paréntesis ():

(new Gelatina).logger() // Gelatina

// Y funciona sin problemas

Los Paréntesis ( ) son opcionales, incluso en clases integradas:


(new Date).getDay()
(new Date).getMonth()
(new Date).getYear()

(new Date).getDay()

(new Date).getMonth()

(new Date).getYear()

Conclusión

Hemos conocido características que existían en Javascript, algunos Desarrolladores ya las conocen, eso es bueno y algunos recién las están conociendo por medio de este Artículo.

No olvides ponerlas en practica cuando empieces a escribir código Javascript, de esta manera lograrás dominarlas y sacarle el jugo al máximo.

Nota(s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Algunas características mencionadas en este artículo pueden dejar de existir o continuar en el futuro, esto no depende de nosotros si no de los Desarrolladores que dan Soporte a Javascript.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.