Syntaktinen sokeri- ja JavaScript-diabetes

Syntaktinen sokeri on lyhenne suuremman ajatuksen kommunikoimiseksi ohjelmointikielellä.

Haluan verrata sitä luonnollisten kielten lyhenteisiin. Aluksi uuden lyhenteen näkeminen voi olla hämmentävää, mutta kun tiedät, mitä se tarkoittaa, se on paljon nopeampi!

Syntaktisella sokerilla - kuten lyhenteillä - voit GTFAMLH! (mene liian pitkälle ja tee elämästä vaikeampi)

Olin tuore yliopistosta, tekemällä hauskoja sovelluksia hackathoneilla ystävieni kanssa ja aloittelijan JavaScript-jännitysmatkalla. Tunsin pysäyttämätöntä . Ymmärsin kaikki Codecademy-esimerkit, sitoin kaikki etupäähaastattelukysymykset muistiin. Katsoin ”Mikä… JavaScript?” niin monta kertaa, että jos riehuva apina huutaa ja lyö satunnaisia ​​koodirivejä konsoliin, tiesin mihin se arvioisi.

Minun oli aika päästä GitHubiin ja jakaa lahjani maailmalle . Avasin ensimmäisen löytämäni projektin ja aloin lukea. Se näytti tältä:

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

Hetkiä myöhemmin…

Hämmentyneenä ja kukistettuna suljen selainvälilehden ja lopetin päivän. Tämä aloittaisi ketjun, jolla tekisin seuraavaa:

  1. Löydä koodirivi, joka oli tuolloin vain JavaScript-hieroglyfia.
  2. Tietämättömyys kysyä oikeita kysymyksiä ja valmistaa ihmiskunnan tuntemat pahimmat Google-haut.
  3. Hämmentää satunnaisia ​​kehittäjiä, kunnes joku pystyy "Selittämään, että olen 5-vuotias", mutta lopulta edelleen hämmentyneenä, miksi joku kirjoittaisi jotain sellaista. Sadismi, luultavasti .

4. Sen napsauttaminen, sen hyödyllisyyden selvittäminen, ongelman ratkaiseminen ja sen ymmärtäminen, mitä ihmiset tekivät aiemmin ongelman ratkaisemiseksi. Se oli vain suppeampi tapa kirjoittaa koodi! Se on vain sokeria!

5. Joskus käyttämällä sitä tavallaliikaa ja pahentamalla koodiani subjektiivisesti.

6. Löydät tasapainon ja lisäät upean työkalun JavaScript-työkalupakkiini. ?

5. Huuhtele ja toista noin 20 kertaa.

Nyt olen täällä yrittämässä hajottaa se yksinkertaisesti sinulle! Kuhunkin sokeriseen temppuun liitän joitain taustatarinoita, ongelman, jonka ratkaiseminen voi auttaa, kuinka voit saavuttaa sen ennen syntaktista sokeria, ja tilanteet, joissa et halua käyttää sitä! ?

Ternary Operaattori

Ternary Operator on yksi suosikkini aloittaa puhuessani sokerista JavaScriptissä, koska on todella helppo mennä liian pitkälle. Normaalisti se on x ? a : b. Tässä on realistisempi esimerkki:

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

Ongelma: Minulla on muuttuja, joka riippuu siitä, että jokin ehto on tosi tai väärä.

Ruokavalion ratkaisu: Tämä on pohjimmiltaan vain todella lyhyt tapa tehdä if/else!

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

Milloin sitä ei tule käyttää: Ternarit ovat hyvin yksinkertainen tapa ilmaista haarautumisreittejä. Subjektiivisen mielipiteeni mukaan pahin asia on se, että he ovat äärettömästi pesäkkeitä. Joten, jos olet työturvallisuuden fani, voit kirjoittaa tämän aivosulattajan.

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

Klassinen esimerkki JavaScript-diabeteksesta. Vähemmän koodia ei tarkoita suppeampaa koodia.

Kohteen levitys

Ah, esimerkki alusta alkaen, joka rikkoi sydämeni. Javascript, kun näet ..., tilanteen mukaan se tulee olemaan Object / Array Levitä tai Object / Array Rest. Aiomme peittää levon hieman, joten laitetaan se takapolttimeen.

Levitys on periaatteessa yhden objektin ottaminen, kaikkien sen avain / arvo-parien vetäminen ulos ja asettaminen toiseen objektiin. Tässä on esimerkki kahden objektin levittämisestä uudeksi objektiksi:

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

Ongelma: Minulla on objekti ja haluan tehdä toisen objektin, jolla on kaikki samat avaimet ja kaikki samat arvot. Ehkä haluan tehdä sen useilla objekteilla, ja jos kaksoisavaimia on, valitse minkä objektin avaimet voittavat.

Ruokavalion ratkaisu: Voit käyttää Object.assign()samanlaisen vaikutuksen saavuttamiseksi. Se ottaa minkä tahansa määrän objekteja argumentteina, asettaa etusijalle oikeanpuoleisimmat objektit avainten suhteen ja lopulta mutatoi aivan ensimmäisen annetun objektin. Yleinen virhe on, että tyhjää objektia ei syötetä ensimmäisenä argumenttina ja vahingossa mutatoidaan argumentti, jota et tarkoittanut.

Jos sitä on vaikea seurata, tiedät mielellämme, että Object Spread tekee sen mahdottomaksi. Tässä on esimerkki, joka jäljittelee syntaktisen sokerin versiota.

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

Kohteen leviäminen poistaa mahdollisuuden vahingossa tapahtuvaan mutaatioon. Joten voit tehdä asioita, kuten päivittää Redux State, ilman pelkoa vahingossa pitää viite aiheuttaa matalan vertailun epäonnistua.

? Bonus? Ar- levitys toimii hyvin samalla tavalla! Mutta koska taulukoissa ei ole avaimia, se vain tavallaan lisää sen uuteen ryhmään kuten Array.Prototype.concatpuheluun.

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

Kohteen uudelleenjärjestely

Tämän näen melko yleisesti luonnossa. Nyt meillä on uusi konfiguraatioobjektimme edellisestä esimerkistä ja haluamme käyttää sitä koodissamme. Saatat nähdä jotain tällaista hajallaan koodikannasta.

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

Ongelma: Koko polun kirjoittaminen objektin avaimeen voi tulla melko raskaaksi ja tukkia suuren osan koodista. Lyhyemmäksi sanottuna olisi parempi tehdä arvosta muuttuja pitämään koodi siistinä.

Ruokavalion ratkaisu: Voit aina tehdä sen vanhanaikaisella tavalla! Se näyttäisi tältä.

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

Milloin sitä ei pidä käyttää: Voit itse tuhota objektin esineestä ja jatkaa sen rakentamista yhä syvemmälle! Rakenneuudistus ei ole ainoa tapa saada avain objektista. Jos huomaat käyttävänsi vain kahden tai kolmen kerroksen syväavaimien hajotusta, teet todennäköisesti enemmän haittaa kuin hyötyä projektille.

? Bonus? Matriisit ovat myös tuhoavia, mutta ne toimivat indeksin ulkopuolella.

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

Kohteen lepo

Object Rest kulkee käsi kädessä Object Destructure -sovelluksen kanssa, ja se on helppo sekoittaa Object Spreadiin. Jälleen kerran käytämme ...operaattoria, mutta asiayhteys on erilainen . Tällä kertaa se näkyy hajotettaessa ja sen tarkoituksena on kerätä jäljellä olevat avaimet yhteen esineeseen. ?

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

Ongelma: Haluat objektin, jolla on osajoukko toisesta objektista.

Ruokavalion ratkaisu: Voit käyttää vanhaa kaveria Object.assignja poistaa kaikki avaimet, joita et tarvitse! ?

Milloin sitä ei pidä käyttää: Sen käyttäminen uuden objektin luomiseen ilman avaimia on yleinen tapa. Huomaa vain, että avaimet, jotka jätät pois tuhorakenteesta, kelluvat edelleen ja mahdollisesti vievät muistia. Jos et ole varovainen, se voi aiheuttaa virheen. ?

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

? Bonus? Arvaa mitä? Matriisit voivat tehdä jotain samanlaista ja se toimii täsmälleen samalla tavalla!

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

Käärimistä

JavaScript-sokeri on hieno, ja ymmärtäminen sen lukemisesta antaa sinun syöttää monipuolisempia koodipohjia ja laajentaa mielesi kehittäjänä. Muista vain, että se on tasapainottava tosiasiallisen ytimekkyyden ja koodin luettavuuden tekeminen muiden ja tulevan itsesi välillä.

Vaikka voi tuntua mahtavalta näyttää kiiltävää uutta työkalua, meidän tehtävämme ohjelmoijina on jättää kooditietokannat paremmin ylläpidettäviksi kuin he olivat, kun tulimme niihin.

Tässä on kokoelma MDN-asiakirjoja siitä, mitä käsittelin, jos haluat lukea lisää. ?

  • Ternary Operaattori
  • Levitä syntaksia
  • Uudelleenjärjestelytehtävä
  • Lepo-parametrit