Fyra eleganta Javascript-trick đŸ‘©â€đŸ’»

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!