Hallo codementor!
Ik begin deze serie waar ik in elk artikel hapklare weetjes van Javascript-coderingsgeweld zal delen om je repositories schoner en mooier te maken om naar te kijken. Genieten van!

Het is zo simpel:

const array = [1, 2, null, '', 4, 6, 22];
const fullArray = array.filter((a) => a);

Dit zal zich ontdoen van de null en '' elementen.
De (a) => a ruikt een beetje. U kunt echter gewoon dit doen:

const fullArray = array.filter(Boolean);

En het doet hetzelfde!
Pas op, 0 is een valse waarde en zou helaas ook worden verwijderd. Gebruik dit alleen als u weet dat uw gegevensbron u deze problemen niet zal geven.

Als u niet weet wat Array Destructuring is, kunt u werkelijk doen, vooral als je React Hooks gebruikt, omdat het ingebouwd is:

const [state, setState] = useState();

Dit vernietigt de retourwaarde van useState, wat een array is waarbij het eerste element een variabele is en ten tweede een functie. Het is de verkorte versie van zeggen:

const stateArray = useState();
const state = stateArray[0];
const setState = stateArray[1];

En u kunt zien hoeveel gemakkelijker het is om te coderen. Het is ook esthetisch aantrekkelijker naar mijn mening.
Maar laten we deze kracht naar een hoger niveau tillen. Stel dat u een aantal variabelen aan het begin van uw bereik moet instellen, zoals:

let principalValue = 0;
let term = 20;
let interestRate = 12.5;
let monthlyPayment = 5000;

Enzovoort. Ja, je kunt het als volgt afkorten:

let principalValue = 0,
  term = 20,
  interestRate = 12.5,
  monthlyPayment = 5000;

Maar je kunt dit OOK doen:

let [principalValue, term, interestRate, monthlyPayment] = [0, 20, 12.5, 5000];

Wat ik een stuk beknopter vind, en het heeft een aantal handige functies, zoals als je elke waarde op de een of andere manier moet transformeren, je dit niet hoeft te doen:

let principalValue = transform(0),
  term = transform(20),
  interestRate = transform(12.5),
  monthlyPayment = transform(5000);

Dit kun je gewoon doen:

let [principalValue, term, interestRate, monthlyPayment] = [
  0, 20, 12.5, 5000,
].map(transform);

en door meer variabelen toe te voegen, wordt je code niet opgeblazen! Wat als u voor elke waarde een andere transformatiefunctie wilt? gemakkelijk:

const transformMap = {
  0: transform,
  1: transform1,
  2: transform2,
  3: transform3,
};

let [principalValue, term, interestRate, monthlyPayment] = [
  0, 20, 12.5, 5000,
].map((value, index) => transformMap[index](value));

Hier maken we gebruik van de index argument van de kaartmethode om de waarde aan de juiste transformatiefunctie te koppelen.

Het vernietigen van objecten is net zo krachtig, vooral als u op zoek bent naar geneste waarden:

const {
  user: {
    firstName,
    lastName,
    mainInterest: {
      type,
      description,
      category: { name },
    },
  },
} = data;

Nu elke variabele name, type, description, firstName, lastName toegankelijk is. Zeker beats:

const name = user.mainInterest.category.name;
const description = user.mainInterest.description;

Samenvattend, ik ben helemaal weg van de kracht van destructie en wil het met je delen!

Deze gebruik ik dus altijd. Stel dat ik een array wil vormen, maar ik wil ook metadata uit die array halen. Een manier om dat te doen is:

const shapedUsers = users.map((user) => shape(user));
const activeUserCount = shapedUsers.filter((user) => user.isActive).length;
const underageUserCount = shapedUsers.filter((user) => user.age < 18).length;
const userDetails = shapedUsers.reduce(
  (details, user) => [...details, user.details],
  [],
);

Dit is leuk, maar als ik 100 gebruikers heb, moet ik de array 000 keer in kaart brengen en dit kan erg traag worden. Een betere manier om dit te doen (met behulp van array-destructurering zoals we hierboven hebben gezien!) is:

let [activeUserCount, underageUserCount, userDetails] = [0, 0, []];

const shapedUsers = users.map((user) => {
  activeUserCount += user.isActive ? 1 : 0;
  underageUserCount += user.age < 18 ? 1 : 0;
  userDetails.push(user.details);

  return shape(user);
});

Ik ga eenmaal door de array en bouw elke variabele op die ik nodig heb. Ik kan dan gemakkelijk mijn initiële waardearray toevoegen en aanpassen aan mijn behoeften.

We hebben een aantal leuke dingen geleerd bij het werken met arrays. Ik hoop dat je deze in je eigen code kunt implementeren en echt indruk kunt maken op degenen die je nodig hebt!

Tot de volgende keer, veel plezier met coderen!

~ Sean