Sintaktički šećer i JavaScript dijabetes

Sintaktički šećer stenografija je za širenje veće misli u programskom jeziku.

Volim ga uspoređivati ​​s akronimima u prirodnim jezicima. U početku vidjeti novu kraticu može biti zbunjujuće, ali kad znate što to znači, to je puno brže!

Sa sintaktičkim šećerom - kao i sa skraćenicama - možete GTFAMLH! (idi predaleko i otežaj život)

Bio sam tek na faksu, s prijateljima sam pravio zabavne aplikacije na hackathonovima i u Newbie JavaScript uzbuđenju. Osjećao sam se nezaustavljivo . Razumio sam sve primjere Codecademy-a, svako pitanje s intervjua upamtio sam u sjećanje. Gledao sam "Što ... JavaScript?" toliko puta da sam, ako je besni majmun vrisnuo ubacio slučajne crte koda u konzolu, znao što će procijeniti.

Bilo je vrijeme da uđem na GitHub i podijelim svoj dar sa svijetom . Otvorio sam prvi projekt koji sam mogao pronaći i počeo čitati. Izgledalo je otprilike ovako:

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

Nekoliko trenutaka kasnije ...

Zbunjen i poražen zatvorio sam karticu preglednika i dao otkaz za taj dan. Ovo bi započelo lanac koji radim sljedeće:

  1. Otkrijte liniju koda koja je u to vrijeme bila samo JavaScript hijeroglifi.
  2. Ne znajući postavljati prava pitanja i izraditi vjerojatno najgora Googleova pretraživanja poznata čovječanstvu.
  3. Uznemiravajući slučajne programere dok netko ne može "Objasniti da imam 5 godina", ali na kraju, još uvijek zbunjen zašto bi netko napisao nešto takvo. Sadizam, vjerojatno .

4. Ako klikneš, saznaš zašto je to korisno, razumiješ koji problem rješava i razumiješ što su ljudi u prošlosti radili na rješavanju problema. Bio je to samo sažetiji način pisanja koda! To je samo šećer!

5. Ponekad, koristeći ga na načinpreviše i pogoršavajući moj kod subjektivno.

6. Pronalaženje ravnoteže i dodavanje izvrsnog alata u moj JavaScript alat. ?

5. Isperite i ponovite oko 20 puta.

Sada sam ovdje da pokušam to razbiti samo za vas! Za svaki slatki trik uvrstit ću nekoliko prošlih priča, problem koji bi mogao riješiti, kako biste to mogli postići prije sintaksičkog šećera i situacije u kojima ga možda ne želite koristiti! ?

Ternarni operater

Ternary Operator jedan je od mojih najdražih za početak kada govorim o šećeru u JavaScript-u, jer je stvarno lako pretjerati. Obično ima oblik x ? a : b. Evo realističnijeg primjera:

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

Problem: Imam varijablu koja ovisi o tome je li neko stanje istinito ili netačno.

Dijetno rješenje: Ovo je u osnovi samo stvarno stenografski način za napraviti if/else!

const amILazy = true; let dinnerForTonight = null; if(amILazy) { dinnerForTonight = "spaghetti"; } else { dinnerForTonight = "chicken"; }

Kada ga ne koristiti: Ternariji su vrlo jednostavan način za izražavanje razgranatih putova. Po mom subjektivnom mišljenju, najgora stvar kod njih je što su beskrajno nestabilni. Dakle, ako ste ljubitelj sigurnosti posla, potencijalno biste mogli napisati ovaj topionik mozga.

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

Klasični primjer JavaScript dijabetesa. Manje koda ne znači sažetiji kôd.

Širenje predmeta

Ah, primjer s početka koji mi je slomio srce. U Javascriptu, kada vidite ..., ovisno o kontekstu to će biti Object / Array Spread ili Object / Array Rest. Malo ćemo pokriti Odmor, pa stavimo to na stražnji plamenik.

Širenje je u osnovi uzimanje jednog predmeta, izvlačenje svih njegovih parova ključ / vrijednost i stavljanje u drugi objekt. Evo osnovnog primjera širenja dvaju objekata u novi objekt:

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: Imam objekt i želim napraviti drugi objekt koji ima sve iste ključeve, sa svim istim vrijednostima. Možda to želim učiniti s više objekata, a ako postoje duplicirani ključevi, odaberite ključevi kojih objekata pobjeđuju.

Dijetno rješenje: Mogli biste koristiti Object.assign()za postizanje sličnog učinka. Uzima bilo koji broj objekata kao argumente, daje prednost najdesnijim objektima kada su u pitanju ključevi i na kraju mutira prvi zadani objekt. Uobičajena pogreška je ne predavanje praznog objekta kao prvog argumenta i slučajno mutiranje argumenta na koji niste mislili.

Ako je to teško slijediti, sa zadovoljstvom ćete znati da Object Spread to čini nemogućim. Evo primjera koji ponavlja sintaksičku verziju šećera.

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);

Širenje predmeta uklanja mogućnost slučajne mutacije. Tako biste mogli raditi stvari, poput ažuriranja Redux State-a, bez straha da ćete slučajno zadržati referencu zbog čega će plitka usporedba propasti.

? Bonus? Ar zračni namaz djeluje vrlo slično! No, budući da u poljima nema niti jedne tipke, on je jednostavno dodaje u novi niz poput Array.Prototype.concatpoziva.

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

Destrukturiranje objekata

Ovu vidim prilično često u divljini. Sada imamo naš novi konfiguracijski objekt iz prethodnog primjera i želimo ga koristiti u našem kodu. Možda ćete vidjeti nešto poput ovog razbacano o bazi kodova.

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

Problem: Morate zapisati čitav put do ključa u objektu može postati prilično težak i začepiti velik dio koda. Da bismo bili sažetiji, bilo bi bolje napraviti varijablu od vrijednosti kako bi kôd bio uredan.

Dijetno rješenje: Uvijek to možete učiniti na staromodan način! To bi izgledalo otprilike ovako.

const preserveWhitespace = config.preserveWhitepsace; const noBreaks = config.noBreaks; // Repeat forever until you have all the variables you need if (preservedWhitespace && noBreaks) { doSomething(); };

Kada ga ne koristiti: Zapravo možete destrukturirati objekt iz objekta i nastaviti ga sve dublje! Destrukturiranje nije jedini način izvlačenja ključa iz objekta. Ako se odlučite za destrukturiranje samo za tipke duboke dva ili tri sloja, velika je vjerojatnost da projektu nanosite više štete nego koristi.

? Bonus? Nizovi također imaju destrukturiranje, ali rade prema indeksu.

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

Objekt odmor

Object Rest ide ruku pod ruku s Destrukturiranjem objekata i vrlo ga je lako zbuniti s Object Spread. Još jednom koristimo ...operator, međutim kontekst je drugačiji . Ovaj se put pojavljuje tijekom destrukturiranja i namijenjen je prikupljanju ostataka ključeva u jedan objekt. ?

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: Želite objekt koji ima podskup ključeva od drugog objekta.

Dijetno rješenje: Možete koristiti našeg starog druga Object.assigni izbrisati bilo koji ključ koji vam nije potreban! ?

Kada ga ne koristiti: Upotreba za stvaranje novog objekta s izostavljenim tipkama uobičajeni je slučaj upotrebe. Samo imajte na umu da tipke koje izostavljate u destrukturi i dalje lebde okolo i potencijalno zauzimaju memoriju. Ako niste oprezni, to bi moglo uzrokovati pogrešku. ?

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

? Bonus? Pogodi što? Nizovi mogu učiniti nešto slično i djeluje potpuno isto!

const array = ['a', 'b', 'c', 'c', 'd', 'e']; const [x, y, ...z] = array; // console.log(z) = ['c', 'c', 'd', 'e']

Završavati

JavaScript sugar is great, and understanding how to read it will allow you to enter more diverse code bases and expand your mind as a developer. Just remember that it’s a balancing act between actually being concise, and making your code readable for others and your future self.

While it might feel awesome showing off your shiny new tool, our job as programmers is to leave codebases more maintainable then they were when we entered them.

Here’s a collection of the MDN Documents on what I covered if you want to do some further reading. ?

  • Ternary Operator
  • Spread Syntax
  • Destructuring Assignment
  • Rest Parameters