de Ryan Yurkanin

Diabetul Syntactic Sugar și JavaScript

Diabetul Syntactic Sugar si JavaScript
Fie că este vorba de stres sau de programare, zahărul este întotdeauna acolo pentru mine. Fotografie de Greyson Jaralemon

Zaharul sintactic este o prescurtare pentru comunicarea unui gând mai mare într-un limbaj de programare.

Îmi place să îl compar cu acronimele în limbi naturale. La început, a vedea un nou acronim poate fi confuz, dar odată ce știi ce înseamnă, este mult mai rapid!

Cu zahăr sintactic – ca și cu acronimele – poți GTFAMLH! (mergi prea departe și îngreunează viața)

Am ieșit din facultate, făceam aplicații distractive la hackathons cu prietenii mei și într-o plimbare cu JavaScript începător. am simțit de neoprit. Am înțeles toate exemplele Codecademy, am pus în memorie fiecare întrebare de interviu front-end. am privit „Ce este … JavaScript?” de atâtea ori încât, dacă o maimuță furioasă țipă cu linii aleatorii de cod într-o consolă, știam la ce ar evalua.

ad-banner

Era timpul să intru pe GitHub și să împărtășesc darul meu cu lume. Am deschis primul proiect pe care l-am putut găsi și am început să citesc. Arăta cam așa:

function init(userConfig) {
  const DEFAULT_CONFIG = {
    removeSpaces: false,
    allowHighlighting: true,
    priority: "high",
  }
  
  const config = { ...DEFAULT_CONFIG, ...userConfig };
}

Momente mai târziu …

Diabetul Syntactic Sugar si JavaScript
Când cauți ca și cum ai încerca cu disperare să nu pierzi o rundă de Pictionary, ai probleme.

Confuz și învins, am închis fila browserului și am renunțat pentru ziua respectivă. Acest lucru ar începe un lanț de a face următoarele:

  1. Descoperiți o linie de cod care la acea vreme era doar hieroglifică JavaScript.
  2. Nu știu cum să puneți întrebările corecte și să creați, probabil, cele mai proaste căutări pe Google cunoscute de omenire.
  3. Deranjează dezvoltatorii aleatori până când cineva ar putea „Explica ca și cum aș fi 5 ani”, dar în cele din urmă, fiind totuși confuz de ce ar scrie cineva așa ceva. Sadism, probabil.

4. Făcându-l clic, obținând de ce este util, înțelegând ce problemă rezolvă și înțelegând ce au făcut oamenii în trecut pentru a rezolva problema. A fost doar un mod mai concis de a scrie cod! Este doar zahăr!

5. Uneori, folosindu-l în felul acesta prea mult și îngreunând subiectiv codul meu.

6. Găsirea echilibrului și adăugarea unui instrument excelent în setul meu de instrumente JavaScript. ?

5. Clătiți și repetați de aproximativ 20 de ori.

Acum sunt aici pentru a încerca să-l descompun pur și simplu pentru tine! Pentru fiecare truc zaharat, voi include o poveste de fundal, o problemă pe care ar putea să o rezolve, cum ați putea să o realizați înainte de zahărul sintactic și situații în care este posibil să nu doriți să îl utilizați! ?

Operator ternar

Operatorul ternar este unul dintre cei mei preferați pentru a începe atunci când vorbesc despre zahăr în JavaScript, deoarece este foarte ușor să mergi prea departe. În mod normal, ia forma x ? a : b. Iată un exemplu mai realist:

const amILazy = true;
const dinnerForTonight = amILazy ? "spaghetti" : "chicken";

Problemă: Am o variabilă care depinde de faptul că unele condiții sunt adevărate sau false.

Soluție dietetică: Acesta este în esență doar o modalitate foarte scurtă de a face un if/else!

const amILazy = true;
let dinnerForTonight = null;

if(amILazy) { dinnerForTonight = "spaghetti"; }
else { dinnerForTonight = "chicken"; }

Când nu îl utilizați: Ternarii sunt o modalitate foarte simplă de a exprima căi de ramificare. În opinia mea subiectivă, cel mai rău lucru despre ei este că sunt infinit cuibărite. Deci, dacă sunteți un fan al securității locului de muncă, ați putea scrie acest topitor de creier.

const canYouFireMe = someCondition1 ?
  (someCondition2 ? false : true) : false

Exemplu clasic de diabet JavaScript. Mai puțin cod nu înseamnă cod mai concis.

Răspândirea obiectelor

Ah, exemplul de la început care mi-a frânt inima. În Javascript, când vezi ..., în funcție de context va fi Object / Array Spread sau Object / Array Rest. Vom acoperi Restul puțin, așa că hai să punem asta pe arzătorul din spate.

Răspândirea înseamnă practic luarea unui singur obiect, scoaterea tuturor perechilor cheie / valoare și punerea lor într-un alt obiect. Iată un exemplu de bază de răspândire a două obiecte într-un obiect nou:

const DEFAULT_CONFIG = {
  preserveWhitespace: true,
  noBreaks: false,
  foo: "bar",
};

const USER_CONFIG = {
  noBreaks: true, 
}

const config = { ...DEFAULT_CONFIG, ...USER_CONFIG };
// console.log(config) => {
//   preserveWhitespace: true,
//   noBreaks: true, 
//   foo: "bar",
// }

Problemă: Am un obiect și vreau să fac un alt obiect care are toate aceleași chei, cu toate aceleași valori. Poate că vreau să fac asta cu mai multe obiecte și, dacă există chei duplicate, alegeți cheile obiectului care câștigă.

Soluție dietetică: Ai putea folosi Object.assign() la obține un efect similar. Ia orice număr de obiecte ca argumente, acordă prioritate celor mai multe obiecte din dreapta când vine vorba de chei și sfârșește prin mutarea primului obiect dat. O eroare obișnuită nu este trecerea unui obiect gol ca prim argument și mutarea accidentală a unui argument la care nu ați vrut.

Dacă acest lucru este greu de urmat, veți fi fericiți să știți că Object Spread face acest lucru imposibil. Iată un exemplu care reproduce versiunea sintactică de zahăr.

const DEFAULT_CONFIG = {
  preserveWhitespace: true,
  noBreaks: false,
  foo: "bar",
};

const USER_CONFIG = {
  noBreaks: true, 
}

// if we didn't pass in an empty object here, config
// would point to DEFAULT_CONFIG, and default config would be
// mutated
const config = Object.assign({}, DEFAULT_CONFIG, USER_CONFIG);

Răspândirea obiectelor elimină șansa unei mutații accidentale. Așadar, ați putea face lucruri, cum ar fi actualizarea statului Redux, fără teama de a păstra accidental o referință care să provoace eșecul comparației superficiale.

? Primă ? Arrăspândirea razelor funcționează foarte similar! Dar, din moment ce nu există chei în matrici, doar o adaugă la noua matrice ca un Array.Prototype.concat apel.

const arr1 = ['a', 'b', 'c'];
const arr2 = ['c', 'd', 'e'];
const arr3 = [...arr1, ...arr2];
// console.log(arr3) => ['a', 'b', 'c', 'c', 'd', 'e']

Destructurarea obiectelor

Pe acesta îl văd destul de frecvent în sălbăticie. Acum, avem noul nostru obiect de configurare din exemplul anterior și dorim să-l folosim în codul nostru. Este posibil să vedeți așa ceva împrăștiat în baza codului.

const { preserveWhiteSpace, noBreaks } = config;

// Now we have two new variables to play around with!
if (preservedWhitespace && noBreaks) { doSomething(); };

Problemă: A fi nevoit să scrieți întreaga cale către o cheie dintr-un obiect poate deveni destul de greu și poate bloca o mulțime de cod. Pentru a fi mai concis, ar fi mai bine să creați o variabilă din valoare pentru a menține codul curat.

Soluție dietetică: O poți face oricând la modă veche! Ar arăta cam așa.

const preserveWhitespace = config.preserveWhitepsace;
const noBreaks = config.noBreaks;
// Repeat forever until you have all the variables you need

if (preservedWhitespace && noBreaks) { doSomething(); };

Când nu îl utilizați: Puteți distruge de fapt un obiect dintr-un obiect și puteți continua să distrugeți din ce în ce mai adânc! Destructurarea nu este singura modalitate de a scoate o cheie dintr-un obiect. Dacă vă regăsiți doar folosind destructurarea pentru chei de două sau trei straturi adânci, este posibil să faceți mai mult rău decât bine proiectului.

? Primă ? Tablourile au și ele destructurare, dar funcționează pe baza indexului.

const arr1 = ['a', 'b']
const [x, y] = arr1
// console.log(y) => 'b'

Odihna obiectului

Object Rest merge mână în mână cu Object Destructuring și este foarte ușor de confundat cu Object Spread. Încă o dată folosim ... operator, cu toate acestea contextul este diferit. De data aceasta, apare în timpul destructurării și este destinat să adune cheile rămase într-un singur obiect. ?

const { preserveWhiteSpace, noBreaks, ...restOfKeys } = config;

// restOfKeys, is an object containing all the keys from config
// besides preserveWhiteSpace and noBreaks
// console.log(restOfKeys) => { foo: "bar" }

Problemă: Doriți un obiect care are un subset de chei de la un alt obiect.

Soluție dietetică: Ai putea să-l folosești pe vechiul nostru prieten Object.assign și șterge oricare dintre tastele de care nu aveți nevoie! ?

Când nu îl utilizați: Folosirea acestuia pentru a crea un obiect nou cu taste omise este un caz de utilizare obișnuit. Rețineți doar că tastele pe care le omiteți în destructură plutesc încă și pot ocupa memoria. Dacă nu sunteți atent, acest lucru ar putea provoca o eroare. ?

const restOfKeys = Object.assign({}, config);
delete restOfKeys.preserveWhiteSpace
delete restOfKeys.noBreaks

? Primă ? Ghici ce? Tablourile pot face ceva similar și funcționează exact la fel!

const array = ['a', 'b', 'c', 'c', 'd', 'e'];
const [x, y, ...z] = array;
// console.log(z) = ['c', 'c', 'd', 'e']
1611238627 858 Diabetul Syntactic Sugar si JavaScript
Diabetul sau efectele secundare ale citirii acestui articol întreg?

Înfășurându-se

Zahărul JavaScript este minunat și înțelegerea modului de citire vă va permite să introduceți baze de coduri mai diverse și să vă extindeți mintea ca dezvoltator. Amintiți-vă asta este un act de echilibrare între a fi de fapt concis și a face codul tău lizibil pentru alții și viitorul tău sine.

Deși s-ar putea simți minunat să arăți noul tău instrument strălucitor, treaba noastră ca programatori este să lăsăm bazele de cod mai ușor de întreținut decât erau atunci când am intrat în ele.

Iată o colecție de documente MDN despre ceea ce am acoperit dacă doriți să faceți o lectură suplimentară. ?