Szintaktikus cukor és JavaScript cukorbetegség

A szintaktikus cukor rövidítés egy nagyobb gondolat programozási nyelven történő közléséhez.

Szeretem összehasonlítani a természetes nyelvű rövidítésekkel. Eleinte egy új betűszó látása zavaró lehet, de ha már tudja, mit jelent, az sokkal gyorsabb!

A szintaktikus cukorral - akárcsak a rövidítésekkel - GTFAMLH lehet! (túl messzire menni és megnehezíteni az életet)

Frissen vettem részt az egyetemen, szórakoztató alkalmazásokat készítettem a hackatonokon a barátaimmal, és egy újonc JavaScript izgalmas úton. Megállíthatatlannak éreztem magam . Megértettem a Codecademy összes példáját, minden elülső interjú kérdését emlékezetemnek szenteltem. Megnéztem „Mi a… JavaScript?” annyiszor, hogy ha egy tomboló majom véletlenszerű kódsorokat csap össze egy konzolba, tudtam, mit fog értékelni.

Itt volt az ideje, hogy bekerüljek a GitHub-ba, és megosszam az ajándékomat a világgal . Kinyitottam az első projektet, amit találtam, és elkezdtem olvasni. Valahogy így nézett ki:

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

Néhány pillanattal később ...

Zavartan és legyőzve bezártam a böngésző lapot, és kiléptem a napból. Ez megkezdené egy olyan láncolatot, amely a következőket teszi:

  1. Fedezzen fel egy olyan kódsort, amely akkoriban csak JavaScript hieroglifák voltak.
  2. Nem tudni, hogyan kell feltenni a megfelelő kérdéseket, és kidolgozni az emberiség által ismert legrosszabb Google-kereséseket.
  3. A véletlenszerű fejlesztők kínzása addig, amíg valaki meg nem tudja magyarázni, hogy "5 éves vagyok", de végül még mindig zavarodott, miért ír valaki ilyesmit. Szadizmus, valószínűleg .

4. Ha rákattint, megtudja, miért hasznos, megérteni, hogy milyen problémát old meg, és megérteni, mit tettek az emberek a múltban a probléma megoldása érdekében. Csak egy tömörebb módszer volt a kódírásra! Ez csak cukor!

5. Néha, így használvatúl sok, és szubjektíve rosszabbá teszi a kódomat.

6. Megtalálni az egyensúlyt, és hozzáadni egy nagyszerű eszközt a JavaScript eszköztáramhoz. ?

5. Öblítse le és ismételje meg körülbelül 20-szor.

Most azért vagyok itt, hogy megpróbáljam lebontani egyszerűen neked! Minden cukros trükkhöz mellékelek egy kis háttértörténetet, egy problémát, amellyel megoldódhat, hogyan érhetné el a szintaktikus cukor előtt, és azokat a helyzeteket, amikor nem akarja használni! ?

Ternary Operator

A Ternary Operator az egyik kedvencem, amellyel kezdhetem, amikor a cukorról beszélek a JavaScript-ben, mivel nagyon könnyű túl messzire menni. Rendszerint ez a formája x ? a : b. Íme egy reálisabb példa:

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

Probléma: Van egy változóm, amely attól függ, hogy valamely feltétel igaz vagy hamis.

Fogyókúrás megoldás: Ez alapvetően csak egy nagyon gyors módja annak if/else!

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

Mikor nem szabad használni: A terernáriumok nagyon egyszerű módszerek az elágazó utak kifejezésére. Szubjektív véleményem szerint a legrosszabb bennük az, hogy végtelenül fészkelhetőek. Tehát, ha rajongsz a munkabiztonságért, akkor írhatod ezt az agyolvasztót.

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

Klasszikus példa a JavaScript Diabetes-re. A kevesebb kód nem jelent tömörebb kódot.

Object Spread

Ah, az a példa a kezdetektől, amely összetört a szívem. A Javascriptben, amikor látja ..., a kontextustól függően az Object / Array Spread vagy az Object / Array Rest lesz. Kicsit lefedjük a Pihenést, ezért tegyük ezt a hátsó égőre.

A terjesztés alapvetően egyetlen objektumot vesz ki, az összes kulcs / érték párját kihúzza, és egy másik objektumba helyezi. Íme egy alapvető példa két objektum új objektumba történő terjesztésére:

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", // }

Probléma: Van egy objektumom, és szeretnék egy másik objektumot készíteni, amelynek ugyanazok a kulcsai vannak, ugyanazokkal az értékekkel. Talán ezt több objektummal szeretném megtenni, és ha vannak duplikált kulcsok, válassza ki, hogy melyik objektum kulcsa nyer.

Diétás megoldás: Használhat Object.assign()hasonló hatás eléréséhez. Bármennyi objektumot vesz fel argumentumként, elsőbbséget ad a jobb szélső objektumoknak, amikor kulcsokról van szó, és végül a legelső megadott objektumot mutálja meg. Gyakori hiba, ha nem egy üres objektumot adunk meg első argumentumként, és véletlenül mutálunk egy olyan argumentumot, amelyet nem akart.

Ha ezt nehéz követni, akkor örömmel fogja tudni, hogy az Object Spread ezt lehetetlenné teszi. Itt van egy példa, amely megismétli a szintaktikus cukor verziót.

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

Az objektumterjesztés megszünteti a véletlenszerű mutáció esélyét. Tehát olyan dolgokat tehet, mint például a Redux State frissítés, anélkül, hogy attól tartana, hogy véletlenül megtart egy referenciát, ami a sekély összehasonlítást meghiúsítja.

? Bónusz? Az Ar ray spread nagyon hasonlóan működik! De mivel nincsenek tömbökben kulcsok, csak egyfajta módon adja hozzá az új tömbhöz, mint egy Array.Prototype.concathívás.

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

Objektum szerkezetátalakítása

Ezt látom elég gyakran a vadonban. Most megvan az előző példában szereplő új config objektum, és szeretnénk használni a kódunkban. Valami ilyesmit láthat szétszórva a kódbázisról.

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

Probléma: Ha egy objektumban ki kell írnia a kulcs teljes útját, az eléggé megnehezülhet, és eltömítheti a kód nagy részét. Hogy tömörebb legyen, jobb lenne egy változót készíteni az értékből, hogy a kód rendben maradjon.

Fogyókúrás megoldás: Mindig megteheti régimódi módon! Valami ilyesmi lehet.

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

Mikor ne használja: Valójában egy objektumot roncsolhat egy objektumból, és folytathatja a bontást egyre mélyebbre! A szerkezetátalakítás nem az egyetlen módja annak, hogy kulcsot nyerjünk ki egy objektumból. Ha csak a két vagy három réteg mélységű kulcsok rombolását használja, akkor valószínű, hogy többet árt, mint használ a projektnek.

? Bónusz? A tömbök is rendelkeznek szerkezetátalakítással, de az indexen kívül működnek.

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

Object Rest

Az Object Rest együtt jár az Object Destructure-vel, és nagyon könnyen összetéveszthető az Object Spread-rel. Ismét az ...operátort használjuk , azonban a kontextus más . Ezúttal rombolás közben jelenik meg, és célja a megmaradt kulcsok összegyűjtése egy objektumba. ?

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

Probléma: Olyan objektumot szeretne, amelynek kulcsainak részhalmaza van egy másik objektumból.

Fogyókúrás megoldás: Használhatja régi haverunkat, Object.assignés törölheti azokat a kulcsokat, amelyekre nincs szüksége! ?

Mikor nem szabad használni: Használata új objektum létrehozására kihagyott kulcsokkal gyakori eset. Csak vegye figyelembe, hogy a kulcsok, amelyeket kihagy a destruktúrában, még mindig lebegnek és potenciálisan memóriát foglalnak el. Ha nem vagy óvatos, ez hibát okozhat. ?

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

? Bónusz? Találd ki? A tömbök képesek valami hasonlót csinálni, és pontosan ugyanúgy működik!

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

Csomagolás

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