Fyra eleganta Javascript-trick 👩‍💻

10 Mar Fyra eleganta Javascript-trick 👩‍💻

Alla dessa trick löser vanliga problem på ett elegant och enkelt sätt.
Om du kan Javascript känner du troligtvis redan till något eller några av dem, men förhoppningsvis är några nya!

1. every / some
Båda dessa funktioner kan förenkla koden avsevärt. Låt oss börja med every som används avgöra om samtliga element i en array möter ett kriteria. Låt oss titta på ett exempel.

const random_numbers = [ 13, 2, 37, 18, 5 ]
const more_random_numbers = [ 0, -1, 30, 22 ]
const isPositive = (number) => {
return number > 0
}
random_numbers.every(isPositive); // returns true
more_random_numbers.every(isPositive); // returns false

every returnerar en boolean (true/false). Bara om samtliga element möter kriteriat returneras “true”. Det räcker met att ett element returnerar “false” för att every ska returnera false.

Koden ovan kan även skrivas som:

random_numbers.every((number) => {
return number > 0
})

Funktionen some fungerar nästan på samma sätt, men testar bara om något element möter kriteriat – inte samtliga.

Om vi byter ut every från det tidigare exemplet mot some så får vi nedan resultat istället!

const random_numbers = [ 13, 2, 37, 18, 5 ]
const more_random_numbers = [ 0, -1, 30, 22 ]
const isPositive = (number) => {
return number > 0
}
random_numbers.some(isPositive); // returns true
more_random_numbers.some(isPositive); // returns true

2. Sätta en variabel baserat på kriteria
Ett elegant sätt att undvika if-satser är att sätta variabler baserat på kriteria.

const timezone = user.language || 'sv-SE'

I exemplet ovan sätts timezone till user.language om det är satt annars till ‘sv-SE’

3. Ändra datatyp i en array
Variabeln selected_values nedan innehåller värden från ett multi-select -fält i HTML. Värdena motsvarar nummer som man senare vill genomföra någon form av kontroll av.

let selected_values = [ '1', '5', '8' ]

Vi kan inte bara jämföra selected_values[1] === 5 eftersom strängen ‘5’ inte är samma som numret 5 ! Ett elegant sätt att omvandla datatyperna i arrayen är:

selected_values = selected_values.map(Number) // [ 1, 5, 8 ]

Nu ändras datatypen för samtliga poster i arrayen till nummer! ?
Det fungerar dessutom lika bra med Boolean!

4. Destructa objekt
Objekt är ett supersmidigt sätt att transporttera data både inom och mellan applikationer.
Med det här tricket blir det ännu enklare att hantera objekt!

const user = {
name: 'Yoomi',
age: 31,
gender: 'F',
member: true
}
const name = user.name
const gender = user.gender

Ovan ser vi objektet user och ett vanligt sätt att hämta ut värden från objektet till variabler.
Det går dock att göra på ett mycket enklare sätt.

const {
name,
age,
gender,
member
} = user;
console.log(name) // Yoomi
console.log(age) // 31
console.log(gender) // F
console.log(member) // true

Det som sker i exemplet ovan är att nycklarna name, age, gender och member destructas till egna variabler.

De första sex radena går dessutom att skriva på en rad, vilket gör det ännu elegantare! ?

const {name, age, gender, member } = user;

Lämna gärna dina egna bästa tips i kommentarsfältet!