Синтаксички шећер и ЈаваСцрипт дијабетес

Синтаксички шећер је стенографија за саопштавање веће мисли у програмском језику.

Волим да је упоређујем са акронимима у природним језицима. У почетку виђење нове кратице може бити збуњујуће, али кад једном знате шта то значи, то је много брже!

Са синтаксичким шећером - као са скраћеницама - можете ГТФАМЛХ! (иди предалеко и отежај живот)

Био сам на факултету, правио забавне апликације на хацкатхоновима са пријатељима и на почетничкој ЈаваСцрипт узбудљивој вожњи. Осећао сам се незаустављиво . Разумео сам све примере Цодецадеми-а, свако питање за интервју на фронту упамтио сам. Гледао сам „Шта ... ЈаваСцрипт?“ толико пута да сам, ако је бесни мајмун вриснуо убацио случајне редове кода у конзолу, знао на шта бих то проценио.

Било је време да уђем на ГитХуб и поделим свој поклон са светом . Отворио сам први пројекат који сам могао да нађем и почео да читам. Изгледало је отприлике овако:

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

Неколико тренутака касније ...

Збуњен и поражен, затворио сам картицу прегледача и дао отказ за тај дан. Ово би започело ланац који радим следеће:

  1. Откријте линију кода која је у то време била само ЈаваСцрипт хијероглифи.
  2. Не знајући како да поставим права питања и правећи вероватно најгоре Гоогле претраге које је човечанство познато.
  3. Узнемиравајући случајне програмере док неко не би могао да „објасни да имам 5 година“, али на крају, и даље збуњен зашто би неко написао тако нешто. Садизам, вероватно .

4. Ако кликнете, сазнате зашто је то корисно, разумете који проблем решава и разумете шта су људи у прошлости радили на решавању проблема. Био је то само сажетији начин писања кода! То је само шећер!

5. Понекад, користећи га на начинпревише и субјективно погоршава мој код.

6. Проналажење равнотеже и додавање одличног алата у мој ЈаваСцрипт алат. ?

5. Исперите и поновите око 20 пута.

Сада сам овде да покушам да га разбијем само за вас! За сваки шећерни трик уврстићу неке претходне приче, проблем који би могао решити, како бисте то могли постићи пре синтаксичког шећера и ситуације у којима можда не желите да га користите! ?

Тернарни оператер

Тернари Оператор је један од мојих најдражих почетака када говорим о шећеру у ЈаваСцрипт-у, јер је заиста лако претјерати. Обично има облик x ? a : b. Ево реалистичнијег примера:

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

Проблем: Имам променљиву која зависи од тога да ли је неко стање тачно или нетачно.

Дијетално решење: Ово је у основи само стварно скраћеница if/else!

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

Када га не користити: Тернарији су врло једноставан начин за изражавање гранања. По мом субјективном мишљењу, најгоре код њих је то што су бескрајно нестабилни. Дакле, ако сте љубитељ сигурности посла, потенцијално бисте могли да напишете овај топионик мозга.

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

Класичан пример ЈаваСцрипт дијабетеса. Мање кода не значи и сажетији код.

Ширење предмета

Ах, пример с почетка који ми је сломио срце. У Јавасцрипту, када видите ..., у зависности од контекста то ће бити Објецт / Арраи Спреад или Објецт / Арраи Рест. Мало ћемо покрити Одмарање, па ставимо то на задњи пламеник.

Ширење је у основи узимање једног предмета, извлачење свих његових парова кључ / вредност и њихово стављање у други објекат. Ево основног примера ширења два објекта у нови објекат:

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

Проблем: Имам објекат и желим да направим још један објекат који има све исте кључеве, са свим истим вредностима. Можда то желим да урадим са више објеката, а ако постоје дупликати кључева, одаберите кључеви којих објеката ће победити.

Дијетално решење: Могли бисте Object.assign()да постигнете сличан ефекат. Као аргументе узима било који број објеката, даје приоритет најдеснијим објектима када су у питању кључеви и на крају мутира први дати објекат. Уобичајена грешка је не предавање празног објекта као првог аргумента и случајно мутирање аргумента на који нисте мислили.

Ако је то тешко пратити, биће вам драго да знате да Објецт Спреад то чини немогућим. Ево примера који понавља синтаксичку верзију шећера.

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

Ширење предмета уклања шансу за случајну мутацију. Тако бисте могли да радите ствари, попут ажурирања Редук Стате-а, без страха да ћете случајно задржати референцу и проузроковати неуспех плитког поређења.

? Бонус? Ар- ширење делује врло слично! Али пошто у низовима нема кључева, он га једноставно додаје новом низу попут Array.Prototype.concatпозива.

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

Деструктурирање објеката

Ову видим прилично често у дивљини. Сада имамо наш нови конфигурациони објекат из претходног примера и желимо да га користимо у нашем коду. Можда ћете видети нешто попут овог раштркано по кодној бази.

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

Проблем: Ако морате исписати целу путању до кључа у објекту, може бити прилично тешко и заглавити велики део кода. Да бисмо били сажетији, било би боље направити променљиву од вредности како би код био уредан.

Дијетално решење: Увек то можете да урадите на старомодан начин! То би изгледало отприлике овако.

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

When not to use it: You can actually destructure an object out of an object, and continue to destructure deeper and deeper! Destructuring isn’t the only way to get a key out of an Object. If you find yourself only using destructuring for keys two or three layers deep, chances are you are doing more harm than good to the project.

? Bonus ? Arrays also have destructuring, but they work based off index.

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

Object Rest

Object Rest goes hand in hand with Object Destructuring, and is very easy to confuse with Object Spread. Once again we use the ... operator, however the context is different. This time, it shows up while destructuring and is intended to gather leftover keys into one object. ?

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: You want an object that has a subset of keys from another object.

Diet Solution: You could use our old pal Object.assign and delete any of the keys that you don’t need! ?

When not to use it: Using it to create a new object with omitted keys is a common use case. Just be aware that the keys you are omitting in the destructure are still floating around and potentially taking up memory. If you’re not careful, this could cause a bug. ?

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

? Bonus ? Guess what? Arrays can do something similar and it works exactly the same!

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

Wrapping up

ЈаваСцрипт шећер је сјајан, а разумевање његовог читања омогућиће вам да унесете разноврсније базе кода и проширите свој ум као програмер. Само запамтите да је то балансирање између тога да заправо будете концизни и да ваш код буде читљив другима и вашем будућем себи.

Иако би се могло осећати сјајно приказивати ваш сјајни нови алат, наш посао програмера је да базе кода оставимо одрживијима него што су биле када смо их ушли.

Ево колекције МДН докумената о ономе што сам обрадио ако желите да прочитате даље. ?

  • Тернарни оператер
  • Спреад Синтак
  • Задатак за деструктурирање
  • Параметри за одмор