JavaScript Tips & Tricks
Best JavaScript tricks and tips
Pubblicato:Aggiungi in modo condizionale proprietà all'oggetto
Possiamo usare lo spread operator ... per aggiungere in modo dinamico proprietà a un oggetto.
const condition = true;
const player = {
id: 1,
name: 'Super Mario',
...(condition && { age: 25 }),
};
console.log(player); // { id: 1, name: 'Super Mario', age: 25 }
L'operatore && in JavaScript restituisce il secondo operando solo se il primo è valutato come vero. Quindi, se condition è vero, viene aggiunta all'oggetto player la proprietà { age: 25 }. Se condition fosse stato falso, non sarebbe stato aggiunto nulla.
Controllare se esiste una proprietà in un oggetto
Possiamo usare la keyword in per verificare se una proprietà è presente in un oggetto.
const jobAdvertisement = { company: 'google', workLocation: 'Milan' };
console.log('workLocation' in jobAdvertisement); // returns true
console.log('ral' in jobAdvertisement); // returns falseClonare oggetti e array
In JavaScript, la clonazione può essere eseguita in due modi: clonazione superficiale shallow copy e clonazione profonda deep copy.
La shallow copy copia solo il livello più alto delle proprietà. Se l'originale contiene riferimenti a oggetti o array nidificati, la copia avrà riferimenti agli stessi elementi, non copie indipendenti.
La deep copy crea una copia completa, copiando tutti i livelli di proprietà. Questo significa che ogni riferimento a un oggetto o array nidificato viene copiato ricorsivamente, risultando in una copia completamente indipendente.
Shallow copy
const person = {
name: "Walter",
job: "teacher",
};
//nuovo oggetto
const newPerson = { ...person }; // {name: 'Walter', job: 'teacher'}
// possiamo anche modificare proprietà o aggiungerle
const newPersonTwo = { ...person, job: "cook" };
// {name: 'Walter', job: 'cook'}
const newPersonThree = { ...person, age: 50 };
// {name: 'Walter', job: 'teacher', age: 50}
const numbers = [1, 2, 3, 4, 5, 6, 7];
const newNumbers = [...numbers]; // [1, 2, 3, 4, 5, 6, 7];
Nell'esempio sopra, utilizziamo lo spread operator ... per creare una clonazione superficiale dell'oggetto person e dell'array numbers. Qualsiasi modifica all'originale o alla copia non influenzerà l'altro.
Deep copy
const person = {
name: "Walter",
job: "teacher",
address: {
country: "New Mexico",
city: "Albuquerque",
},
};
//metodo 1
const clonedPerson = JSON.parse(JSON.stringify(person));
//metodo 2
const clonedPersonTwo = structuredClone(person);
const arrayWithObjects = [
{ id: 1, value: 'a' },
{ id: 2, value: 'b' },
{ id: 3, value: 'c' },
];
const clonedArray = JSON.parse(JSON.stringify(arrayWithObjects));
const clonedArrayTwo = structuredClone(arrayWithObjects);
Nell'esempio sopra, utilizziamo JSON.parse(JSON.stringify(person)) per creare una clonazione profonda dell'oggetto person. In alternativa, possiamo usare structuredClone, che è un metodo più moderno e diretto per clonare profondamente gli oggetti. In entrambi i casi, ogni livello dell'oggetto viene copiato, producendo una copia completamente indipendente.
Unire array e oggetti
In JavaScript, possiamo usare lo spread operator ... per unire oggetti e array in modo semplice e leggibile.
const person = {
name: "Walter",
job: "teacher",
};
const address = {
state: "New Mexico",
city: "Albuquerque",
};
// Unire due oggetti
const personAddress = { ...person, ...address };
console.log(personAddress);
// Output: {name: 'Walter', job: 'teacher', state: 'New Mexico', city: 'Albuquerque'}
const numbers = [1, 2, 3, 4, 5, 6, 7];
const someNumber = [8, 9, 10];
// Unire due array
const newArrayNumbers = [...numbers, ...someNumber];
console.log(newArrayNumbers);
// Output: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
Utilizzare il destructuring per estrarre valori dagli oggetti
Il destructuring in JavaScript permette di estrarre valori da oggetti in modo semplice e leggibile.
const player = {
name: "Mario",
age: 25,
occupation: "plumber"
};
// Estrazione dei valori usando il destructuring
const { name, age, occupation } = player;
console.log(name); // Mario
console.log(age); // 25
console.log(occupation); // plumber
// Puoi anche mettere valori di default
const { name, age, occupation, lastname = "Super", isBig = true } = player;
console.log(lastname); // Super
console.log(isBig); // true
Utilizzare il destructuring per estrarre valori dagli Array
Il destructuring può essere utilizzato anche per estrarre valori dagli array in modo simile.
const players = ["Mario", "Luigi"];
// Estrazione dei valori usando il destructuring
const [firstPlayer, secondPlayer] = players;
console.log(firstPlayer); // Mario
console.log(secondPlayer); // Luigi
// Si possono anche dare valori di default
const [firstPlayer, secondPlayer, thirdPlayer = "Peach"] = players;
console.log(firstPlayer); // Mario
console.log(secondPlayer); // Luigi
console.log(thirdPlayer); // Peach
Impostare nomi dinamici alle proprietà degli oggetti
In JavaScript, è possibile assegnare dinamicamente nomi alle proprietà degli oggetti utilizzando le parentesi quadre [].
const dynamic = 'age';
const person = {
name: 'Jack',
[dynamic]: 38
};
console.log(person); // { name: 'Jack', age: 38 }
Possiamo usare lo stesso trucco per recuperare il valore di una proprietà usando una chiave dinamica:
const keyName = 'age';
console.log(person[keyName]); // returns 38
Passare oggetti come argomenti
Si possono passare oggetti come argomenti alle funzioni per migliorare la leggibilità del codice e rendere i parametri più chiari.
const createPlayer = ({ name, age, job }) => {
// some logic
console.log(`Name: ${name}, Age: ${age}, Job: ${job}`);
}
createPlayer({
name: 'Mario',
job: 'plumber',
age: 25,
});
Come ciclare oggetti
const person = { name: 'Jack', age: 38, job: 'doctor' };
// Con for...of e Object.entries
for (const [key, value] of Object.entries(person)) {
console.log(`Key: ${key}, Value: ${value}`);
}
// Con Object.keys e forEach
Object.keys(person).forEach(key => {
const value = person[key];
console.log(`Key: ${key}, Value: ${value}`);
});
// Con Object.entries e forEach
Object.entries(person).forEach(([key, value]) => {
console.log(`Key: ${key}, Value: ${value}`);
});
// Output dei tre metodi
// Key: name, Value: Jack
// Key: age, Value: 38
// Key: job, Value: doctor
Ordinare un array in ordine alfabetico
const array = ["Banana", "apple", "Cherry", "date"];
array.sort((a, b) => a.localeCompare(b));
console.log(array); // ["apple", "Banana", "Cherry", "date"]Usare Boolean per controllare se un valore è true
const array = [null, 'Apple', undefined, false, true, 0];
// Filtrare i valori falsy
const filtered = array.filter(Boolean);
console.log(filtered); // returns ['Apple', true]
// Controllare se almeno un valore è truthy
const someTrue = array.some(Boolean);
console.log(someTrue); // returns true
// Controllare se tutti i valori sono truthy
const everyTrue = array.every(Boolean);
console.log(everyTrue); // returns false
Usare map e Number per un casting veloce
const numbers = ["0", "123", "3.14", "-256", "6323.1431"];
const newNumbers = numbers.map(Number);
console.log(newNumbers); // [0, 123, 3.14, -256, 6323.1431];
Rimuovere i duplicati da un array con set
Possiamo usare Set per rimuovere i duplicati da un array. Un oggetto Set in JavaScript permette di memorizzare valori unici di qualsiasi tipo.
const numbers = [0, 0, 1, 2, 2, 3, 3, 4, 5, 6, 7, 7, 8, 8, 9];
const players = ["Mario", "Mario", "Luigi", "Luigi", "Toad"];
const uniqueNumbers = [...new Set(numbers)];
const uniquePlayers = [...new Set(players)];
console.log(uniqueNumbers); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(uniquePlayers); // ["Mario", "Luigi", "Toad"]
Convertendo un array in un oggetto Set, vengono automaticamente eliminati i duplicati. Utilizzando l'operatore spread [...new Set(array)], possiamo convertire il Set di nuovo in un array con solo valori unici.
Usare il Nullish Coalescing Operator ??
Il Nullish Coalescing Operator ?? in JavaScript è utilizzato per fornire un valore di default quando l'operando sinistro è null o undefined.
const userName = null ?? "Default User";
console.log(userName); // Output: "Default User"
// Se userName è null, viene assegnato "Default User"
const userStatus = undefined ?? "Guest";
console.log(userStatus); // Output: "Guest"
// Se userStatus è undefined, viene assegnato "Guest"
const userAge = 0 ?? "Age not specified";
console.log(userAge); // Output: 0
// Se userAge è 0, viene mantenuto 0 perché 0 è un valore valido (non null o undefined)
const userMessage = "" ?? "No message provided";
console.log(userMessage); // Output: ""
// Se userMessage è una stringa vuota,
// viene mantenuta la stringa vuota perché è un valore valido (non null o undefined)
Attenzione a usare || perché potresti avere risultati inaspettati.
L'operatore OR ritorna il primo operando "truthy" che trova, il che significa che considera valori come 0, "", false come "falsy" e li sostituisce con il valore di default fornito.
const number = 0 || "new number";
console.log(number); // Output: "new number"
// 0 è considerato "falsy", quindi viene sostituito da "new number"
const string = "" || "new string";
console.log(string); // Output: "new string"
// "" è considerato "falsy", quindi viene sostituito da "new string"
Usare Optional Chaining ?.
L'Optional Chaining Operator ?. permette di accedere in modo sicuro a proprietà e metodi di oggetti che potrebbero essere null o undefined senza lanciare errori, rendendo il codice più pulito e leggibile.
const user = {
name: "Alice",
address: {
city: "Wonderland",
zip: "12345"
},
greet: function() {
return "Hello!";
}
};
const cityName = user?.address?.city;
console.log(cityName); // Output: "Wonderland"
const countryName = user?.address?.country;
console.log(countryName); // Output: undefined
const greeting = user?.greet?.();
console.log(greeting); // Output: "Hello!"
const farewell = user?.farewell?.();
console.log(farewell); // Output: undefined
const users = [
{ name: "Charlie" },
null,
{ name: "Hurley" }
];
const firstUserName = users[0]?.name;
console.log(firstUserName); // Output: "Charlie"
const secondUserName = users[1]?.name;
console.log(secondUserName); // Output: undefined
// Esempio: Uso in combinazione con Nullish Coalescing Operator
const settings = {
preferences: {
theme: null
}
};
const userTheme = settings?.preferences?.theme ?? "default theme";
console.log(userTheme); // Output: "default theme"
Casting in boolean con !!
Il doppio operatore di negazione !! viene utilizzato per convertire qualsiasi valore in un booleano in JavaScript. È un metodo rapido e conciso per effettuare il casting a booleano.
Valori Falsi
const value1 = null;
const value2 = undefined;
const value3 = 0;
const value4 = "";
console.log(!!value1); // Output: false
console.log(!!value2); // Output: false
console.log(!!value3); // Output: false
console.log(!!value4); // Output: false
Valori come null, undefined, 0 e stringhe vuote "" sono considerati falsy in JavaScript, e quindi vengono convertiti in false quando applicati con !!.
Valori Veri
const value1 = 1;
const value2 = "Hello";
const value3 = [];
const value4 = {};
console.log(!!value1); // Output: true
console.log(!!value2); // Output: true
console.log(!!value3); // Output: true
console.log(!!value4); // Output: true
Valori come numeri diversi da zero, stringhe non vuote, array e oggetti sono considerati truthy in JavaScript, e quindi vengono convertiti in true quando applicati con !!.
Ternary Operator
L'operatore ternario è un modo conciso per scrivere un'istruzione if-else.
const age = 20;
const canVote = age >= 18 ? "Yes" : "No";
console.log(canVote); // Yes
Usare il rest parameter
function somma(...numeri) {
return numeri.reduce((accumulatore, corrente) => accumulatore + corrente, 0);
}
console.log(somma(1, 2, 3)); // 6
console.log(somma(4, 5, 6, 7)); // 22
console.log(somma(10)); // 10
function saluta(primo, ...resto) {
console.log(`Saluta ${primo}!`);
console.log('Saluti anche a:', resto.join(', '));
}
saluta('Antonio', 'Bob', 'Charlie', 'Dave');
// Output:
// Saluta Antonio!
// Saluti anche a: Bob, Charlie, Dave
Misurare le performance con console.time
console.time("test")
let value = 1;
for (let i = 0; i < 100_000_000; i++) {
value += i;
}
console.timeEnd("test")
Stampare con console.table
const players = ["Mario", "Luigi", "Toad"];
const player = {
name: "Mario",
age : 25
}
console.table(player);
console.table(players);
Applicare stile al console.log
const styles = `padding: 50px;
background-color: blue;
color: white;
font-size:50px;
`;
console.log("%c Ciaoooooo !!!", styles);
