1"use strict";(self.webpackChunkdmitri_pavlutin_blog=self.webpackChunkdmitri_pavlutin_blog||[]).push([[1136],{740:function(e,t,o){o.r(t),o.d(t,{default:function(){return f}});var n=o(7294),r=o(1151),s=o(9794);const a={annotations:s.ds,Code:s.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",theme:{name:"one-dark-pro",type:"dark",semanticHighlighting:!0,semanticTokenColors:{enumMember:{foreground:"#56b6c2"},"variable.constant":{foreground:"#d19a66"},"variable.defaultLibrary":{foreground:"#e5c07b"},"variable:dart":{foreground:"#d19a66"},"property:dart":{foreground:"#d19a66"},"annotation:dart":{foreground:"#d19a66"},"parameter.label:dart":{foreground:"#abb2bf"},macro:{foreground:"#d19a66"}},tokenColors:[{settings:{foreground:"#abb2bf",background:"#282c34"}},{scope:"meta.embedded",settings:{foreground:"#abb2bf"}},{name:"unison punctuation",scope:"punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison",settings:{foreground:"#e06c75"}},{name:"haskell variable generic-type",scope:"variable.other.generic-type.haskell",settings:{foreground:"#c678dd"}},{name:"haskell storage type",scope:"storage.type.haskell",settings:{foreground:"#d19a66"}},{name:"support.variable.magic.python",scope:"support.variable.magic.python",settings:{foreground:"#e06c75"}},{name:"punctuation.separator.parameters.python",scope:"punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python",settings:{foreground:"#abb2bf"}},{name:"variable.parameter.function.language.special.self.python",scope:"variable.parameter.function.language.special.self.python",settings:{foreground:"#e5c07b"}},{name:"variable.parameter.function.language.special.cls.python",scope:"variable.parameter.function.language.special.cls.python",settings:{foreground:"#e5c07b"}},{name:"storage.modifier.lifetime.rust",scope:"storage.modifier.lifetime.rust",settings:{foreground:"#abb2bf"}},{name:"support.function.std.rust",scope:"support.function.std.rust",settings:{foreground:"#61afef"}},{name:"entity.name.lifetime.rust",scope:"entity.name.lifetime.rust",settings:{foreground:"#e5c07b"}},{name:"variable.language.rust",scope:"variable.language.rust",settings:{foreground:"#e06c75"}},{name:"support.constant.edge",scope:"support.constant.edge",settings:{foreground:"#c678dd"}},{name:"regexp constant character-class",scope:"constant.other.character-class.regexp",settings:{foreground:"#e06c75"}},{name:"keyword.operator",scope:["keyword.operator.word"],settings:{foreground:"#c678dd"}},{name:"regexp operator.quantifier",scope:"keyword.operator.quantifier.regexp",settings:{foreground:"#d19a66"}},{name:"Text",scope:"variable.parameter.function",settings:{foreground:"#abb2bf"}},{name:"Comment Markup Link",scope:"comment markup.link",settings:{foreground:"#5c6370"}},{name:"markup diff",scope:"markup.changed.diff",settings:{foreground:"#e5c07b"}},{name:"diff",scope:"meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff",settings:{foreground:"#61afef"}},{name:"inserted.diff",scope:"markup.inserted.diff",settings:{foreground:"#98c379"}},{name:"deleted.diff",scope:"markup.deleted.diff",settings:{foreground:"#e06c75"}},{name:"c++ function",scope:"meta.function.c,meta.function.cpp",settings:{foreground:"#e06c75"}},{name:"c++ block",scope:"punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c",settings:{foreground:"#abb2bf"}}
1,{name:"js/ts punctuation separator key-value",scope:"punctuation.separator.key-value",settings:{foreground:"#abb2bf"}},{name:"js/ts import keyword",scope:"keyword.operator.expression.import",settings:{foreground:"#61afef"}},{name:"math js/ts",scope:"support.constant.math",settings:{foreground:"#e5c07b"}},{name:"math property js/ts",scope:"support.constant.property.math",settings:{foreground:"#d19a66"}},{name:"js/ts variable.other.constant",scope:"variable.other.constant",settings:{foreground:"#e5c07b"}},{name:"java type",scope:["storage.type.annotation.java","storage.type.object.array.java"],settings:{foreground:"#e5c07b"}},{name:"java source",scope:"source.java",settings:{foreground:"#e06c75"}},{name:"java modifier.import",scope:"punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java",settings:{foreground:"#abb2bf"}},{name:"java modifier.import",scope:"meta.method.java",settings:{foreground:"#61afef"}},{name:"java modifier.import",scope:"storage.modifier.import.java,storage.type.java,storage.type.generic.java",settings:{foreground:"#e5c07b"}},{name:"java instanceof",scope:"keyword.operator.instanceof.java",settings:{foreground:"#c678dd"}},{name:"java variable.name",scope:"meta.definition.variable.name.java",settings:{foreground:"#e06c75"}},{name:"operator logical",scope:"keyword.operator.logical",settings:{foreground:"#56b6c2"}},{name:"operator bitwise",scope:"keyword.operator.bitwise",settings:{foreground:"#56b6c2"}},{name:"operator channel",scope:"keyword.operator.channel",settings:{foreground:"#56b6c2"}},{name:"support.constant.property-value.scss",scope:"support.constant.property-value.scss,support.constant.property-value.css",settings:{foreground:"#d19a66"}},{name:"CSS/SCSS/LESS Operators",scope:"keyword.operator.css,keyword.operator.scss,keyword.operator.less",settings:{foreground:"#56b6c2"}},{name:"css color standard name",scope:"support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss",settings:{foreground:"#d19a66"}},{name:"css comma",scope:"punctuation.separator.list.comma.css",settings:{foreground:"#abb2bf"}},{name:"css attribute-name.id",scope:"support.constant.color.w3c-standard-color-name.css",settings:{foreground:"#d19a66"}},{name:"css property-name",scope:"support.type.vendored.property-name.css",settings:{foreground:"#56b6c2"}},{name:"js/ts module",scope:"support.module.node,support.type.object.module,support.module.node",settings:{foreground:"#e5c07b"}},{name:"entity.name.type.module",scope:"entity.name.type.module",settings:{foreground:"#e5c07b"}},{name:"js variable readwrite",scope:"variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node",settings:{foreground:"#e06c75"}},{name:"js/ts json",scope:"support.constant.json",settings:{foreground:"#d19a66"}},{name:"js/ts Keyword",scope:["keyword.operator.expression.instanceof","keyword.operator.new","keyword.operator.ternary","keyword.operator.optional","keyword.operator.expression.keyof"],settings:{foreground:"#c678dd"}},{name:"js/ts console",scope:"support.type.object.console",settings:{foreground:"#e06c75"}},{name:"js/ts support.variable.property.process",scope:"support.variable.property.process",settings:{foreground:"#d19a66"}},{name:"js console function",scope:"entity.name.function,support.function.console",settings:{foreground:"#61afef"}},{name:"keyword.operator.misc.rust",scope:"keyword.operator.misc.rust",settings:{foreground:"#abb2bf"}},{name:"keyword.operator.sigil.rust",scope:"keyword.operator.sigil.rust",settings:{foreground:"#c678dd"}},{name:"operator",scope:"keyword.operator.delete",settings:{foreground:"#c678dd"}},{name:"js dom",scope:"support.type.object.dom",settings:{foreground:"#56b6c2"}},{name:"js dom variable",scope:"support.variable.dom,support.variable.property.dom",settings:{foreground:"#e06c75"}},{name:"keyword.operator",scope:"keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational",settings:{foreground:"#56b6c2"}},{name:"C operator assignment",scope:"keyword.operator.assignment.c,
1keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp",settings:{foreground:"#c678dd"}},{name:"Punctuation",scope:"punctuation.separator.delimiter",settings:{foreground:"#abb2bf"}},{name:"Other punctuation .c",scope:"punctuation.separator.c,punctuation.separator.cpp",settings:{foreground:"#c678dd"}},{name:"C type posix-reserved",scope:"support.type.posix-reserved.c,support.type.posix-reserved.cpp",settings:{foreground:"#56b6c2"}},{name:"keyword.operator.sizeof.c",scope:"keyword.operator.sizeof.c,keyword.operator.sizeof.cpp",settings:{foreground:"#c678dd"}},{name:"python parameter",scope:"variable.parameter.function.language.python",settings:{foreground:"#d19a66"}},{name:"python type",scope:"support.type.python",settings:{foreground:"#56b6c2"}},{name:"python logical",scope:"keyword.operator.logical.python",settings:{foreground:"#c678dd"}},{name:"pyCs",scope:"variable.parameter.function.python",settings:{foreground:"#d19a66"}},{name:"python block",scope:"punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python",settings:{foreground:"#abb2bf"}},{name:"python function-call.generic",scope:"meta.function-call.generic.python",settings:{foreground:"#61afef"}},{name:"python placeholder reset to normal string",scope:"constant.character.format.placeholder.other.python",settings:{foreground:"#d19a66"}},{name:"Operators",scope:"keyword.operator",settings:{foreground:"#abb2bf"}},{name:"Compound Assignment Operators",scope:"keyword.operator.assignment.compound",settings:{foreground:"#c678dd"}},{name:"Compound Assignment Operators js/ts",scope:"keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts",settings:{foreground:"#56b6c2"}},{name:"Keywords",scope:"keyword",settings:{foreground:"#c678dd"}},{name:"Namespaces",scope:"entity.name.namespace",settings:{foreground:"#e5c07b"}},{name:"Variables",scope:"variable",settings:{foreground:"#e06c75"}},{name:"Variables",scope:"variable.c",settings:{foreground:"#abb2bf"}},{name:"Language variables",scope:"variable.language",settings:{foreground:"#e5c07b"}},{name:"Java Variables",scope:"token.variable.parameter.java",settings:{foreground:"#abb2bf"}},{name:"Java Imports",scope:"import.storage.java",settings:{foreground:"#e5c07b"}},{name:"Packages",scope:"token.package.keyword",settings:{foreground:"#c678dd"}},{name:"Packages",scope:"token.package",settings:{foreground:"#abb2bf"}},{name:"Functions",scope:["entity.name.function","meta.require","support.function.any-method","variable.function"],settings:{foreground:"#61afef"}},{name:"Classes",scope:"entity.name.type.namespace",settings:{foreground:"#e5c07b"}},{name:"Classes",scope:"support.class, entity.name.type.class",settings:{foreground:"#e5c07b"}},{name:"Class name",scope:"entity.name.class.identifier.namespace.type",settings:{foreground:"#e5c07b"}},{name:"Class name",scope:["entity.name.class","variable.other.class.js","variable.other.class.ts"],settings:{foreground:"#e5c07b"}},{name:"Class name php",scope:"variable.other.class.php",settings:{foreground:"#e06c75"}},{name:"Type Name",scope:"entity.name.type",settings:{foreground:"#e5c07b"}},{name:"Keyword Control",scope:"keyword.control",settings:{foreground:"#c678dd"}},{name:"Control Elements",scope:"control.elements, keyword.operator.less",settings:{foreground:"#d19a66"}},{name:"Methods",scope:"keyword.other.special-method",settings:{foreground:"#61afef"}},{name:"Storage",scope:"storage",settings:{foreground:"#c678dd"}},{name:"Storage JS TS",scope:"token.storage",settings:{foreground:"#c678dd"}},{name:"Source Js Keyword Operator Delete,source Js Keyword Operator In,source Js Keyword Operator Of,source Js Keyword Operator Instanceof,source Js Keyword Operator New,source Js Keyword Operator Typeof,source Js Keyword Operator Void",scope:"keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void",settings:{foreground:"#c678dd"}},{name:"Java Storage",scope:"token.storage.type.java",settings:{foreground:"#e5c07b"}},{name:"Support",scope:"support.function",settings:{foreground:"#56b6c2"}},{name:"Support type",scope:"support.type.property-name",settings:{foreground:"#abb2bf"}},{name:"Support type",scope:"support.constant.property-value",settings:{foreground:"#abb2bf"}},{name:"Support type",scope:"support.constant.font-name",settings:{foreground:"#d19a66"}},{name:"Meta tag",scope:"meta.tag",settings:{foreground:"#abb2bf"}},{name:"Strings",scope:"string",settings:{foreground:"#98c379"}},{name:"Constant other symbol",scope:"constant.other.symbol",settings:{foreground:"#56b6c2"}},{name:"Integers",scope:"constant.numeric",settings:{foreground:"#d19a66"}},{name:"Constants",scope:"constant",settings:{foreground:"#d19a66"}},{name:"Constants",scope:"punctuation.definition.constant",settings:{foreground:"#d19a66"}},{name:"Tags",scope:"entity.name.tag",settings:{foreground:"#e06c75"}},{name:"Attributes",scope:"entity.other.attribute-name",settings:{foreground:"#d19a66"}},{name:"Attribute IDs",scope:"entity.other.attribute-name.id",settings:{fontStyle:"normal",foreground:"#61afef"}},{name:"Attribute class",scope:"entity.other.attribute-name.class.css",settings:{fontStyle:"normal",foreground:"#d19a66"}},{name:"Selector",scope:"meta.selector",settings:{foreground:"#c678dd"}},{name:"Headings",scope:"markup.heading",settings:{foreground:"#e06c75"}},{name:"Headings",scope:"markup.heading punctuation.definition.heading, entity.name.section",settings:{foreground:"#61afef"}},{name:"Units",scope:"keyword.other.unit",settings:{foreground:"#e06c75"}},{name:"Bold",scope:"markup.bold,todo.bold",settings:{foreground:"#d19a66"}},{name:"Bold",scope:"punctuation.definition.bold",settings:{foreground:"#e5c07b"}},{name:"markup Italic",scope:"markup.italic, punctuation.definition.italic,todo.emphasis",settings:{foreground:"#c678dd"}},{name:"emphasis md",scope:"emphasis md",settings:{foreground:"#c678dd"}},{name:"[VSCODE-CUSTOM] Markdown headings",scope:"entity.name.section.markdown",settings:{foreground:"#e06c75"}},{name:"[VSCODE-CUSTOM] Markdown heading Punctuation Definition",scope:"punctuation.definition.heading.markdown",settings:{foreground:"#e06c75"}},{name:"punctuation.definition.list.begin.markdown",scope:"punctuation.definition.list.begin.markdown",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Markdown heading setext",scope:"markup.heading.setext",settings:{foreground:"#abb2bf"}},{name:"[VSCODE-CUSTOM] Markdown Punctuation Definition Bold",scope:"punctuation.definition.bold.markdown",settings:{foreground:"#d19a66"}},{name:"[VSCODE-CUSTOM] Markdown Inline Raw",scope:"markup.inline.raw.markdown",settings:{foreground:"#98c379"}},{name:"[VSCODE-CUSTOM] Markdown Inline Raw",scope:"markup.inline.raw.string.markdown",settings:{foreground:"#98c379"}},{name:"[VSCODE-CUSTOM] Markdown Inline Raw punctuation",scope:"punctuation.definition.raw.markdown",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Markdown List Punctuation Definition",scope:"punctuation.definition.list.markdown",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Markdown Punctuation Definition String",scope:["punctuation.definition.string.begin.markdown","punctuation.definition.string.end.markdown","punctuation.definition.metadata.markdown"],settings:{foreground:"#e06c75"}},{name:"beginning.punctuation.definition.list.markdown",scope:["beginning.punctuation.definition.list.markdown"],settings:{foreground:"#e06c75"}},{name:"[VSCODE-CUSTOM] Markdown Punctuation Definition Link",scope:"punctuation.definition.metadata.markdown",settings:{foreground:"#e06c75"}},{name:"[VSCODE-CUSTOM] Markdown Underline Link/Image",scope:"markup.underline.link.markdown,markup.underline.link.image.markdown",settings:{foreground:"#c678dd"}},{name:"[VSCODE-CUSTOM] Markdown Link Title/Description",scope:"string.other.link.title.markdown,string.other.link.description.markdown",settings:{foreground:"#61afef"}},{name:"[VSCODE-CUSTOM] Asciidoc Inline Raw",scope:"markup.raw.monospace.asciidoc",settings:{foreground:"#98c379"}},{name:"[VSCODE-CUSTOM] Asciidoc Inline Raw Punctuation Definition",scope:"punctuation.definition.asciidoc",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Asciidoc List Punctuation Definition",scope:"markup.list.asciidoc",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Asciidoc underline link",scope:"markup.link.asciidoc,markup.other.url.asciidoc",settings:{foreground:"#c678dd"}},{name:"[VSCODE-CUSTOM] Asciidoc link name",scope:"string.unquoted.asciidoc,markup.other.url.asciidoc",settings:{foreground:"#61afef"}},{name:"Regular Expressions",scope:"string.regexp",settings:{foreground:"#56b6c2"}},{name:"Escape Characters",scope:"constant.character.escape",settings:{foreground:"#56b6c2"}},{name:"Embedded",scope:"punctuation.section.embedded, variable.
1interpolation",settings:{foreground:"#e06c75"}},{name:"Embedded",scope:"punctuation.section.embedded.begin,punctuation.section.embedded.end",settings:{foreground:"#c678dd"}},{name:"illegal",scope:"invalid.illegal",settings:{foreground:"#ffffff"}},{name:"illegal",scope:"invalid.illegal.bad-ampersand.html",settings:{foreground:"#abb2bf"}},{name:"Broken",scope:"invalid.broken",settings:{foreground:"#ffffff"}},{name:"Deprecated",scope:"invalid.deprecated",settings:{foreground:"#ffffff"}},{name:"Unimplemented",scope:"invalid.unimplemented",settings:{foreground:"#ffffff"}},{name:"Source Json Meta Structure Dictionary Json > String Quoted Json",scope:"source.json meta.structure.dictionary.json > string.quoted.json",settings:{foreground:"#e06c75"}},{name:"Source Json Meta Structure Dictionary Json > String Quoted Json > Punctuation String",scope:"source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string",settings:{foreground:"#e06c75"}},{name:"Source Json Meta Structure Dictionary Json > Value Json > String Quoted Json,source Json Meta Structure Array Json > Value Json > String Quoted Json,source Json Meta Structure Dictionary Json > Value Json > String Quoted Json > Punctuation,source Json Meta Structure Array Json > Value Json > String Quoted Json > Punctuation",scope:"source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation",settings:{foreground:"#98c379"}},{name:"Source Json Meta Structure Dictionary Json > Constant Language Json,source Json Meta Structure Array Json > Constant Language Json",scope:"source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json",settings:{foreground:"#56b6c2"}},{name:"[VSCODE-CUSTOM] JSON Property Name",scope:"support.type.property-name.json",settings:{foreground:"#e06c75"}},{name:"[VSCODE-CUSTOM] JSON Punctuation for Property Name",scope:"support.type.property-name.json punctuation",settings:{foreground:"#e06c75"}},{name:"laravel blade tag",scope:"text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade",settings:{foreground:"#c678dd"}},{name:"laravel blade @",scope:"text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade",settings:{foreground:"#c678dd"}},{name:"use statement for other classes",scope:"support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php",settings:{foreground:"#e5c07b"}},{name:"error suppression",scope:"keyword.operator.error-control.php",settings:{foreground:"#c678dd"}},{name:"php instanceof",scope:"keyword.operator.type.php",settings:{foreground:"#c678dd"}},{name:"style double quoted array index normal begin",scope:"punctuation.section.array.begin.php",settings:{foreground:"#abb2bf"}},{name:"style double quoted array index normal end",scope:"punctuation.section.array.end.php",settings:{foreground:"#abb2bf"}},{name:"php illegal.non-null-typehinted",scope:"invalid.illegal.non-null-typehinted.php",settings:{foreground:"#f44747"}},{name:"php types",scope:"storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php",settings:{foreground:"#e5c07b"}},{name:"php call-function",scope:"meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php",settings:{foreground:"#61afef"}},{name:"php function-resets",scope:"punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php",settings:{foreground:"#abb2bf"}},{name:"support php constants",scope:"support.constant.core.rust",settings:{foreground:"#d19a66"}},{name:"support php constants",scope:"support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php",settings:{foreground:"#d19a66"}},{name:"php goto",scope:"entity.name.goto-label.php,support.other.php",settings:{foreground:"#61afef"}},{name:"php logical/bitwise operator",scope:"keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php",settings:{foreground:"#56b6c2"}},{name:"php regexp operator",scope:"keyword.operator.regexp.php",settings:{foreground:"#c678dd"}},{name:"php comparison",scope:"keyword.operator.comparison.php",settings:{foreground:"#56b6c2"}},{name:"php heredoc/nowdoc",scope:"keyword.operator.heredoc.php,keyword.operator.nowdoc.php",settings:{foreground:"#c678dd"}},{name:"python function decorator @",scope:"meta.function.decorator.python",settings:{foreground:"#61afef"}},{name:"python function support",scope:"support.token.decorator.python,meta.function.decorator.identifier.python",settings:{foreground:"#56b6c2"}},{name:"parameter function js/ts",scope:"function.parameter",settings:{foreground:"#abb2bf"}},{name:"brace function",scope:"function.brace",settings:{foreground:"#abb2bf"}},{name:"parameter function ruby cs",scope:"function.parameter.ruby, function.parameter.cs",settings:{foreground:"#abb2bf"}},{name:"constant.language.symbol.ruby",scope:"constant.language.symbol.ruby",settings:{foreground:"#56b6c2"}},{name:"rgb-value",scope:"rgb-value",settings:{foreground:"#56b6c2"}},{name:"rgb value",scope:"inline-color-decoration rgb-value",settings:{foreground:"#d19a66"}},{name:"rgb value less",scope:"less rgb-value",settings:{foreground:"#d19a66"}},{name:"sass selector",scope:"selector.sass",settings:{foreground:"#e06c75"}},{name:"ts primitive/builtin types",scope:"support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx",settings:{foreground:"#e5c07b"}},{name:"block scope",scope:"block.scope.end,block.scope.begin",settings:{foreground:"#abb2bf"}},{name:"cs storage type",scope:"storage.type.cs",settings:{foreground:"#e5c07b"}},{name:"cs local variable",scope:"entity.name.variable.local.cs",settings:{foreground:"#e06c75"}},{scope:"token.info-token",settings:{foreground:"#61afef"}},{scope:"token.warn-token",settings:{foreground:"#d19a66"}},{scope:"token.error-token",settings:{foreground:"#f44747"}},{scope:"token.debug-token",settings:{foreground:"#c678dd"}},{name:"String interpolation",scope:["punctuation.definition.template-expression.begin","punctuation.definition.template-expression.end","punctuation.section.embedded"],settings:{foreground:"#c678dd"}},{name:"Reset JavaScript string interpolation expression",scope:["meta.template.expression"],settings:{foreground:"#abb2bf"}},{name:"Import module JS",scope:["keyword.operator.module"],settings:{foreground:"#c678dd"}},{name:"js Flowtype",scope:["support.type.type.flowtype"],settings:{foreground:"#61afef"}},{name:"js Flow",scope:["support.type.primitive"],settings:{foreground:"#e5c07b"}},{name:"js class prop",scope:["meta.property.object"],settings:{foreground:"#e06c75"}},{name:"js func parameter",scope:["variable.parameter.function.js"],settings:{foreground:"#e06c75"}},{name:"js template literals begin",scope:["keyword.other.template.begin"],settings:{foreground:"#98c379"}},{name:"js template literals end",scope:["keyword.other.template.end"],settings:{foreground:"#98c379"}},{name:"js template literals variable braces begin",scope:["keyword.other.substitution.begin"],settings:{foreground:"#98c379"}},{name:"js template literals variable braces end",scope:["keyword.other.substitution.end"],settings:{foreground:"#98c379"}},{name:"js operator.assignment",scope:["keyword.operator.assignment"],settings:{foreground:"#56b6c2"}},{name:"go operator",scope:["keyword.operator.assignment.go"],settings:{foreground:"#e5c07b"}},{name:"go operator",scope:["keyword.operator.arithmetic.go","keyword.operator.address.go"],settings:{foreground:"#c678dd"}},{name:"Go package name",scope:["entity.name.package.go"],settings:{foreground:"#e5c07b"}},{name:"elm prelude",scope:["support.type.prelude.elm"],settings:{foreground:"#56b6c2"}},{name:"elm constant",scope:["support.constant.elm"],settings:{foreground:"#d19a66"}},{name:"template literal",scope:["punctuation.quasi.element"],settings:{foreground:"#c678dd"}},{name:"html/pug (jade) escaped characters and entities",scope:["constant.character.entity"],settings:{foreground:"#e06c75"}},{name:"styling css pseudo-elements/classes to be able to differentiate from classes which are the same colour",scope:["entity.other.attribute-name.pseudo-element","entity.other.attribute-name.pseudo-class"],settings:{foreground:"#56b6c2"}},{name:"Clojure globals",scope:["entity.global.clojure"],settings:{foreground:"#e5c07b"}},{name:"Clojure symbols",scope:["meta.symbol.clojure"],settings:{foreground:"#e06c75"}},{name:"Clojure constants",scope:["constant.keyword.clojure"],settings:{foreground:"#56b6c2"}},{name:"CoffeeScript Function Argument",scope:["meta.arguments.coffee","variable.parameter.function.coffee"],settings:{foreground:"#e06c75"}},{name:"Ini Default Text",scope:["source.ini"],settings:{foreground:"#98c379"}},{name:"Makefile prerequisities",scope:["meta.scope.prerequisites.makefile"],settings:{foreground:"#e06c75"}},{name:"Makefile text colour",scope:["source.makefile"],settings:{foreground:"#e5c07b"}},{name:"Groovy import names",scope:["storage.modifier.import.groovy"],settings:{foreground:"#e5c07b"}},{name:"Groovy Methods",scope:["meta.method.groovy"],settings:{foreground:"#61afef"}},{name:"Groovy Variables",scope:["meta.definition.variable.name.groovy"],settings:{foreground:"#e06c75"}},{name:"Groovy Inheritance",scope:["meta.definition.class.inherited.classes.groovy"],settings:{foreground:"#98c379"}},{name:"HLSL Semantic",scope:["support.variable.semantic.hlsl"],settings:{foreground:"#e5c07b"}},{name:"HLSL Types",scope:["support.type.texture.hlsl","support.type.sampler.hlsl","support.type.object.hlsl","support.type.object.rw.hlsl","support.type.fx.hlsl","support.type.object.hlsl"],settings:{foreground:"#c678dd"}},{name:"SQL Variables",scope:["text.variable","text.bracketed"],settings:{foreground:"#e06c75"}},{name:"types",scope:["support.type.swift","support.type.vb.asp"],settings:{foreground:"#e5c07b"}},{name:"heading 1, keyword",scope:["entity.name.function.xi"],settings:{foreground:"#e5c07b"}},{name:"heading 2, callable",scope:["entity.name.class.xi"],settings:{foreground:"#56b6c2"}},{name:"heading 3, property",scope:["constant.character.character-class.regexp.xi"],settings:{foreground:"#e06c75"}},{name:"heading 4, type, class, interface",scope:["constant.regexp.xi"],settings:{foreground:"#c678dd"}},{name:"heading 5, enums, preprocessor, constant, decorator",scope:["keyword.control.xi"],settings:{foreground:"#56b6c2"}},{name:"heading 6, number",scope:["invalid.xi"],settings:{foreground:"#abb2bf"}},{name:"string",scope:["beginning.punctuation.definition.quote.markdown.xi"],settings:{foreground:"#98c379"}},{name:"comments",scope:["beginning.punctuation.definition.list.markdown.xi"],settings:{foreground:"#7f848e"}},{name:"link",scope:["constant.character.xi"],settings:{foreground:"#61afef"}},{name:"accent",scope:["accent.xi"],settings:{foreground:"#61afef"}},{name:"wikiword",scope:["wikiword.xi"],settings:{foreground:"#d19a66"}},{name:"language operators like '+', '-' etc",scope:["constant.other.color.rgb-value.xi"],settings:{foreground:"#ffffff"}},{name:"elements to dim",scope:["punctuation.definition.tag.xi"],settings:{foreground:"#5c6370"}},{name:"C++/C#",scope:["entity.name.label.cs","entity.name.scope-resolution.function.call","entity.name.scope-resolution.function.definition"],settings:{foreground:"#e5c07b"}},{name:"Markdown underscore-style headers",scope:["entity.name.label.cs","markup.heading.setext.1.markdown","markup.heading.setext.2.markdown"],settings:{foreground:"#e06c75"}},{name:"meta.brace.square",scope:[" meta.brace.square"],settings:{foreground:"#abb2bf"}},{name:"Comments",scope:"comment, punctuation.definition.comment",settings:{fontStyle:"italic",foreground:"#7f848e"}},{name:"[VSCODE-CUSTOM] Markdown Quote",scope:"markup.quote.markdown",settings:{foreground:"#5c6370"}},{name:"punctuation.definition.block.sequence.item.yaml",scope:"punctuation.definition.block.sequence.item.yaml",settings:{foreground:"#abb2bf"}},{scope:["constant.language.symbol.elixir","constant.language.symbol.double-quoted.elixir"],settings:{foreground:"#56b6c2"}},{scope:["entity.name.variable.parameter.cs"],settings:{foreground:"#e5c07b"}},{scope:["entity.name.variable.field.cs"],settings:{foreground:"#e06c75"}},{name:"Deleted",scope:"markup.deleted",settings:{foreground:"#e06c75"}}
1,{name:"Inserted",scope:"markup.inserted",settings:{foreground:"#98c379"}},{name:"Underline",scope:"markup.underline",settings:{fontStyle:"underline"}},{name:"punctuation.section.embedded.begin.php",scope:["punctuation.section.embedded.begin.php","punctuation.section.embedded.end.php"],settings:{foreground:"#BE5046"}},{name:"support.other.namespace.php",scope:["support.other.namespace.php"],settings:{foreground:"#abb2bf"}},{name:"variable.other.object",scope:["variable.other.object"],settings:{foreground:"#e5c07b"}},{name:"variable.other.constant.property",scope:["variable.other.constant.property"],settings:{foreground:"#e06c75"}},{name:"entity.other.inherited-class",scope:["entity.other.inherited-class"],settings:{foreground:"#e5c07b"}},{name:"c variable readwrite",scope:"variable.other.readwrite.c",settings:{foreground:"#e06c75"}},{name:"php scope",scope:"entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php",settings:{foreground:"#abb2bf"}},{name:"Assembly",scope:["constant.numeric.decimal.asm.x86_64"],settings:{foreground:"#c678dd"}},{scope:["support.other.parenthesis.regexp"],settings:{foreground:"#d19a66"}},{scope:["constant.character.escape"],settings:{foreground:"#e5c07b"}},{scope:["string.regexp"],settings:{foreground:"#e06c75"}},{name:"js/ts italic",scope:"entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super",settings:{fontStyle:"italic"}},{name:"comment",scope:"comment.line.double-slash,comment.block.documentation",settings:{fontStyle:"italic"}},{name:"Python Keyword Control",scope:"keyword.control.import.python,keyword.control.flow.python,keyword.operator.logical.python",settings:{fontStyle:"italic"}},{name:"markup.italic.markdown",scope:"markup.italic.markdown",settings:{fontStyle:"italic"}}],colors:{"activityBar.background":"#282c34","activityBar.foreground":"#d7dae0","activityBarBadge.background":"#4d78cc","activityBarBadge.foreground":"#f8fafd","badge.background":"#282c34","button.background":"#404754","button.secondaryBackground":"#30333d","button.secondaryForeground":"#c0bdbd","checkbox.border":"#404754","debugToolBar.background":"#21252b",descriptionForeground:"#abb2bf","diffEditor.insertedTextBackground":"#00809b33","dropdown.background":"#21252b","dropdown.border":"#21252b","editor.background":"#282c34","editor.findMatchBackground":"#42557b","editor.findMatchBorder":"#457dff","editor.findMatchHighlightBackgroun
1d":"#6199ff2f","editor.foreground":"#abb2bf","editorHoverWidget.highlightForeground":"#61afef","editorInlayHint.foreground":"#abb2bf","editorInlayHint.background":"#2c313c","editor.lineHighlightBackground":"#2c313c","editorLineNumber.activeForeground":"#abb2bf","editorGutter.addedBackground":"#109868","editorGutter.deletedBackground":"#9A353D","editorGutter.modifiedBackground":"#948B60","editorOverviewRuler.addedBackground":"#109868","editorOverviewRuler.deletedBackground":"#9A353D","editorOverviewRuler.modifiedBackground":"#948B60","editor.selectionBackground":"#67769660","editor.selectionHighlightBackground":"#ffffff10","editor.selectionHighlightBorder":"#dddddd","editor.wordHighlightBackground":"#d2e0ff2f","editor.wordHighlightBorder":"#7f848e","editor.wordHighlightStrongBackground":"#abb2bf26","editor.wordHighlightStrongBorder":"#7f848e","editorActiveLineNumber.foreground":"#737984","editorBracketMatch.background":"#515a6b","editorBracketMatch.border":"#515a6b","editorCursor.background":"#ffffffc9","editorCursor.foreground":"#528bff","editorError.foreground":"#c24038","editorGroup.background":"#181a1f","editorGroup.border":"#181a1f","editorGroupHeader.tabsBackground":"#21252b","editorHoverWidget.background":"#21252b","editorHoverWidget.border":"#181a1f","editorIndentGuide.activeBackground":"#c8c8c859","editorIndentGuide.background":"#3b4048","editorLineNumber.foreground":"#495162","editorMarkerNavigation.background":"#21252b","editorRuler.foreground":"#abb2bf26","editorSuggestWidget.background":"#21252b","editorSuggestWidget.border":"#181a1f","editorSuggestWidget.selectedBackground":"#2c313a","editorWarning.foreground":"#d19a66","editorWhitespace.foreground":"#3b4048","editorWidget.background":"#21252b",focusBorder:"#3e4452","gitDecoration.ignoredResourceForeground":"#636b78","input.background":"#1d1f23","list.activeSelectionBackground":"#2c313a","list.activeSelectionForeground":"#d7dae0","list.focusBackground":"#323842","list.focusForeground":"#f0f0f0","list.highlightForeground":"#c5c5c5","list.hoverBackground":"#2c313a","list.hoverForeground":"#fff","list.inactiveSelectionBackground":"#323842","list.inactiveSelectionForeground":"#d7dae0","list.warningForeground":"#d19a66","menu.foreground":"#abb2bf","menu.separatorBackground":"#343a45","minimapGutter.addedBackground":"#109868","minimapGutter.deletedBackground":"#9A353D","minimapGutter.modifiedBackground":"#948B60","panel.border":"#3e4452","panelSectionHeader.background":"#21252b","peekViewEditor.background":"#1b1d23","peekViewEditor.matchHighlightBackgroun
1d":"#29244b","peekViewResult.background":"#22262b","scrollbar.shadow":"#23252c","scrollbarSlider.activeBackground":"#747d9180","scrollbarSlider.background":"#4e566660","scrollbarSlider.hoverBackground":"#5a637580","settings.focusedRowBackground":"#282c34","settings.headerForeground":"#fff","sideBar.background":"#21252b","sideBar.foreground":"#abb2bf","sideBarSectionHeader.background":"#282c34","sideBarSectionHeader.foreground":"#abb2bf","statusBar.background":"#21252b","statusBar.debuggingBackground":"#cc6633","statusBar.debuggingBorder":"#66017a","statusBar.debuggingForeground":"#ffffff","statusBar.foreground":"#9da5b4","statusBar.noFolderBackground":"#21252b","statusBarItem.hoverBackground":"#2c313a","statusBarItem.remoteBackground":"#4d78cc","statusBarItem.remoteForeground":"#f8fafd","tab.activeBackground":"#282c34","tab.activeForeground":"#dcdcdc","tab.border":"#181a1f","tab.hoverBackground":"#323842","tab.inactiveBackground":"#21252b","tab.unfocusedHoverBackground":"#323842","terminal.ansiBlack":"#3f4451","terminal.ansiBlue":"#4aa5f0","terminal.ansiBrightBlack":"#4f5666","terminal.ansiBrightBlue":"#4dc4ff","terminal.ansiBrightCyan":"#4cd1e0","terminal.ansiBrightGreen":"#a5e075","terminal.ansiBrightMagenta":"#de73ff","terminal.ansiBrightRed":"#ff616e","terminal.ansiBrightWhite":"#d7dae0","terminal.ansiBrightYellow":"#f0a45d","terminal.ansiCyan":"#42b3c2","terminal.ansiGreen":"#8cc265","terminal.ansiMagenta":"#c162de","terminal.ansiRed":"#e05561","terminal.ansiWhite":"#e6e6e6","terminal.ansiYellow":"#d18f52","terminal.background":"#282c34","terminal.border":"#3e4452","terminal.foreground":"#abb2bf","terminal.selectionBackground":"#abb2bf30","textBlockQuote.background":"#2e3440","textBlockQuote.border":"#4b5362","textLink.foreground":"#61afef","textPreformat.foreground":"#d19a66","titleBar.activeBackground":"#282c34","titleBar.activeForeground":"#9da5b4","titleBar.inactiveBackground":"#21252b","titleBar.inactiveForeground":"#6b717d","walkThrough.embeddedEditorBackground":"#2e3440","welcomePage.buttonHoverBackground":"#404754"}},autoImport:!0,skipLanguages:[],filepath:"/home/runner/work/dmitripavlutin.com/dmitripavlutin.com/posts/039-concise-arrow-functions/index.md"};function i(e){const t=Object.assign({p:"p",a:"a",ul:"ul",li:"li",code:"code",h2:"h2",span:"span",h3:"h3",em:"em"},(0,r.ah)(),e.components),{Affiliate:o}=t;return o||p("Affiliate",!0),a||p("CH",!1),a.Code||p("CH.Code",!0),n.createElement(n.Fragment,null,n.createElement(t.p,null,"With fat arrow syntax you can define functions shorter than a ",n.createElement(t.a,{href:"/6-ways-to-declare-javascript-functions/#2-function-expression"},"function expression"),". There are cases when you can completely omit:"),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"parameters parentheses ",n.createElement(t.code,null,"(param1, param2)")),"\n",n.createElement(t.li,null,n.createElement(t.code,null,"return")," keyword"),"\n",n.createElement(t.li,null,"or even curly braces ",n.createElement(t.code,null,"{ }"),"."),"\n"),"\n",n.createElement(t.p,null,"Let's explore how to make arrow functions concise and straightforward to read. Plus you'll find some tricky shortening cases to be aware of."),"\n",n.createElement(o),"\n",n.createElement(t.h2,{id:"1-basic-syntax",style:{position:"relative"}},n.createElement(t.a,{href:"#1-basic-syntax","aria-label":"1 basic syntax permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"1. Basic syntax"),"\n",n.createElement(t.p,null,"An arrow function declaration in its full version consists of:"),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"a pair of parentheses with the params enumerated ",n.createElement(t.code,null,"(param1, param2)")),"\n",n.createElement(t.li,null,"followed by an arrow ",n.createElement(t.code,null,"=>")),"\n",n.createElement(t.li,null,"ended with the function body ",n.createElement(t.code,null,"{ FunctionBody }")),"\n"),"\n",n.createElement(t.p,null,"A typical arrow function looks as follows:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"sayMessage ",props:{style:{color:"#61AFEF"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"what",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"who",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" return ",props:{style:{color:"#C678DD"}}},{content:"`",props:{style:{color:"#98C379"}}},{content:"${",props:{style:{color:"#C678DD"}}},{content:"what",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:", ",props:{style:{color:"#98C379"}}},{content:"${",props:{style:{color:"#C678DD"}}},{content:"who",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:"!`",props:{style:{color:"#98C379"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"sayMessage",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Hello'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'World'",props:{style:{color:"#98C379"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => 'Hello, World!'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"One small nuance here: you can't put a newline between the parameters ",n.createElement(t.code,null,"(param1, param2)")," and the arrow ",n.createElement(t.code,null,"=>"),"."),"\n",n.createElement(t.p,null,"Let's see how the arrow function can be shortened, making the function easy to read, almost inline. Such readability is convinient when dealing with callbacks."),"\n",n.createElement(t.h2,{id:"2-reducing-parameters-parentheses",style:{position:"relative"}}
1,n.createElement(t.a,{href:"#2-reducing-parameters-parentheses","aria-label":"2 reducing parameters parentheses permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2. Reducing parameters parentheses"),"\n",n.createElement(t.p,null,"The following function ",n.createElement(t.code,null,"greet")," has just one parameter:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"greet ",props:{style:{color:"#61AFEF"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"who",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" return ",props:{style:{color:"#C678DD"}}},{content:"`",props:{style:{color:"#98C379"}}},{content:"${",props:{style:{color:"#C678DD"}}},{content:"who",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:", Welcome!`",props:{style:{color:"#98C379"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"greet",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Aliens'",props:{style:{color:"#98C379"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:'// => "Aliens, Welcome!"',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"greet")," arrow function has only one parameter ",n.createElement(t.code,null,"who"),". This parameter is wrapped in a pair of parentheses ",n.createElement(t.code,null,"(who)"),"."),"\n",n.createElement(t.p,null,"When the arrow function has only one parameter, you can omit the parameters parentheses."),"\n",n.createElement(t.p,null,"Let's use this possibility and simplify ",n.createElement(t.code,null,"greet"),":"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"greetNoParentheses ",props:{style:{color:"#61AFEF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"who ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" return ",props:{style:{color:"#C678DD"}}},{content:"`",props:{style:{color:"#98C379"}}},{content:"${",props:{style:{color:"#C678DD"}}},{content:"who",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:", Welcome!`",props:{style:{color:"#98C379"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"greetNoParentheses",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Aliens'",props:{style:{color:"#98C379"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:'// => "Aliens, Welcome!"',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"The new version of the arrow function ",n.createElement(t.code,null,"greetNoParentheses")," doesn't have parentheses around its single parameter ",n.createElement(t.code,null,"who"),". Two characters less: still a win."),"\n",n.createElement(t.p,null,"While this simplification is easy to grasp, there are a few exceptions when you have to keep the parentheses. Let's see these exceptions."),"\n",n.createElement(t.h3,{id:"21-be-aware-of-default-param",style:{position:"relative"}}
1,n.createElement(t.a,{href:"#21-be-aware-of-default-param","aria-label":"21 be aware of default param permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2.1 Be aware of default param"),"\n",n.createElement(t.p,null,"If the arrow function has one parameter with a default value, you must keep the parentheses."),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"greetDefParam ",props:{style:{color:"#61AFEF"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"who ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"'Martians'",props:{style:{color:"#98C379"}}},{content:") ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" return ",props:{style:{color:"#C678DD"}}},{content:"`",props:{style:{color:"#98C379"}}},{content:"${",props:{style:{color:"#C678DD"}}},{content:"who",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:", Welcome!`",props:{style:{color:"#98C379"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"greetDefParam",props:{style:{color:"#61AFEF"}}},{content:"(); ",props:{style:{color:"#ABB2BF"}}},{content:'// => "Martians, Welcome!"',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"who")," parameter has a default value ",n.createElement(t.code,null,"'Martians'"),". In such a case, you must keep the pair of parentheses around the single parameter: ",n.createElement(t.code,null,"(who = 'Martians')"),"."),"\n",n.createElement(t.h3,{id:"22-be-aware-of-param-destructuring",style:{position:"relative"}},n.createElement(t.a,{href:"#22-be-aware-of-param-destructuring","aria-label":"22 be aware of param destructuring permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2.2 Be aware of param destructuring"),"\n",n.createElement(t.p,null,"You must also keep the parentheses around a destructured parameter:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"greetDestruct ",props:{style:{color:"#61AFEF"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" ({ ",props:{style:{color:"#ABB2BF"}}},{content:"who",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:" }) ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" return ",props:{style:{color:"#C678DD"}}},{content:"`",props:{style:{color:"#98C379"}}},{content:"${",props:{style:{color:"#C678DD"}}},{content:"who",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:", Welcome!`",props:{style:{color:"#98C379"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"race ",props:{style:{color:"#E5C07B"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" planet",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"'Jupiter'",props:{style:{color:"#98C379"}}},{content:",",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" who",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"'Jupiterians'",props:{style:{color:"#98C379"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"greetDestruct",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"race",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:'// => "Jupiterians, Welcome!"',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"The only parameter of the function uses destructuring ",n.createElement(t.code,null,"{ who }")," to access the object's property ",n.createElement(t.code,null,"who"),". In this case, you must wrap the destructuring in parentheses: ",n.createElement(t.code,null,"({ who })"),"."),"\n",n.createElement(t.h3,{id:"23-no-parameters",style:{position:"relative"}}
1,n.createElement(t.a,{href:"#23-no-parameters","aria-label":"23 no parameters permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2.3 No parameters"),"\n",n.createElement(t.p,null,"When the function has no parameters, the parentheses are required as well:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"greetEveryone ",props:{style:{color:"#61AFEF"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" () ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" return ",props:{style:{color:"#C678DD"}}},{content:"'Everyone, Welcome!'",props:{style:{color:"#98C379"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"greetEveryone",props:{style:{color:"#61AFEF"}}},{content:"(); ",props:{style:{color:"#ABB2BF"}}},{content:'// => "Everyone, Welcome!"',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"greetEveryone")," doesn't have any parameters. The params parentheses ",n.createElement(t.code,null,"()")," are kept."),"\n",n.createElement(t.h2,{id:"3-reducing-curly-braces-and-return",style:{position:"relative"}},n.createElement(t.a,{href:"#3-reducing-curly-braces-and-return","aria-label":"3 reducing curly braces and return permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"3. Reducing curly braces and return"),"\n",n.createElement(t.p,null,"When the arrow function body consists of only one expression, you can remove the curly braces ",n.createElement(t.code,null,"{ }")," and ",n.createElement(t.code,null,"return")," keyword."),"\n",n.createElement(t.p,null,"Don't worry about omitting ",n.createElement(t.code,null,"return"),". The arrow function implicitly returns the expression evaluation result."),"\n",n.createElement(t.p,null,"That's the simplification I like the most in the arrow function syntax."),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"greetConcise")," function that doesn't have the curly braces ",n.createElement(t.code,null,"{ }")," and ",n.createElement(t.code,null,"return"),":"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"greetConcise ",props:{style:{color:"#61AFEF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"who ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"`",props:{style:{color:"#98C379"}}},{content:"${",props:{style:{color:"#C678DD"}}},{content:"who",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:", Welcome!`",props:{style:{color:"#98C379"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"greetConcise",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Friends'",props:{style:{color:"#98C379"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:'// => "Friends, Welcome!"',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}
1),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"greetConcise")," is the shortest version of the arrow function syntax. The expression ",n.createElement(t.code,null,"`${who}, Welcome!`")," is implicitly returned, even without ",n.createElement(t.code,null,"return")," being present."),"\n",n.createElement(t.h3,{id:"31-be-aware-of-object-literal",style:{position:"relative"}},n.createElement(t.a,{href:"#31-be-aware-of-object-literal","aria-label":"31 be aware of object literal permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"3.1 Be aware of object literal"),"\n",n.createElement(t.p,null,"When using the shortest arrow function syntax, and returning an object literal, you might experience an unexpected result."),"\n",n.createElement(t.p,null,"Let's see what happens in such case:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"greetObject ",props:{style:{color:"#61AFEF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"who ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" { message: ",props:{style:{color:"#ABB2BF"}}},{content:"`",props:{style:{color:"#98C379"}}},{content:"${",props:{style:{color:"#C678DD"}}},{content:"who",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:", Welcome!`",props:{style:{color:"#98C379"}}},{content:" };",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"greetObject",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Klingons'",props:{style:{color:"#98C379"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => undefined",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"Being expected that ",n.createElement(t.code,null,"greetObject")," returns an object, it actually returns ",n.createElement(t.code,null,"undefined"),"."),"\n",n.createElement(t.p,null,"The problem is that JavaScript interprets the curly braces ",n.createElement(t.code,null,"{ }")," as function body delimiter, rather than an object literal. ",n.createElement(t.code,null,"message: ")," is interpreted as a ",n.createElement(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label",target:"_blank",rel:"noopener noreferrer"},"label identifier"),", rather than a property."),"\n",n.createElement(t.p,null,"To make the function return an object, wrap the object literal into a pair of parentheses:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"greetObject ",props:{style:{color:"#61AFEF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"who ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" ({ ",props:{style:{color:"#ABB2BF"}}},{content:"message",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"`",props:{style:{color:"#98C379"}}},{content:"${",props:{style:{color:"#C678DD"}}},{content:"who",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:", Welcome!`",props:{style:{color:"#98C379"}}},{content:" });",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"greetObject",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Klingons'",props:{style:{color:"#98C379"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => { message: `Klingons, Welcome!` }",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}
1),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"({ message: `${who}, Welcome!` })")," is an expression. Now JavaScript sees this as ",n.createElement(t.a,{href:"https://2ality.com/2012/09/expressions-vs-statements.html",target:"_blank",rel:"noopener noreferrer"},"an expression")," containing an object literal."),"\n",n.createElement(t.h2,{id:"4-fat-arrow-method",style:{position:"relative"}},n.createElement(t.a,{href:"#4-fat-arrow-method","aria-label":"4 fat arrow method permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"4. Fat arrow method"),"\n",n.createElement(t.p,null,n.createElement(t.a,{href:"https://github.com/tc39/proposal-class-fields",target:"_blank",rel:"noopener noreferrer"},"Class Fields Proposal")," (as of August 2019 at stage 3) introduces the fat arrow method syntax to classes. ",n.createElement(t.code,null,"this")," inside such a method always binds to the class instance."),"\n",n.createElement(t.p,null,"Let's define a class ",n.createElement(t.code,null,"Greet")," containing a fat arrow method:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"5:7",focus:"",code:{lines:[{tokens:[{content:"class ",props:{style:{color:"#C678DD"}}},{content:"Greet",props:{style:{color:"#E5C07B"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" constructor",props:{style:{color:"#C678DD"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"what",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" this",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"what ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"what",props:{style:{color:"#E06C75"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" getMessage ",props:{style:{color:"#61AFEF"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"who",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" return ",props:{style:{color:"#C678DD"}}},{content:"`",props:{style:{color:"#98C379"}}},{content:"${",props:{style:{color:"#C678DD"}}},{content:"who",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:", ",props:{style:{color:"#98C379"}}},{content:"${",props:{style:{color:"#C678DD"}}},{content:"this",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"what",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:"!`",props:{style:{color:"#98C379"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"welcome ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Greet",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Welcome'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"welcome",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"getMessage",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Romulans'",props:{style:{color:"#98C379"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => 'Romulans, Welcome!'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[{focus:"5:7",Component:a.annotations.mark}]}]}
1),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"getMessage")," is a method in ",n.createElement(t.code,null,"Greet")," class defined using the fat arrow syntax. ",n.createElement(t.code,null,"this")," inside ",n.createElement(t.code,null,"getMessage")," method always binds to the class instance."),"\n",n.createElement(t.p,null,"Can you write concise fat arrow methods? Yes, you can!"),"\n",n.createElement(t.p,null,"Let's shorten ",n.createElement(t.code,null,"getMessage")," method:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"5",focus:"",code:{lines:[{tokens:[{content:"class ",props:{style:{color:"#C678DD"}}},{content:"Greet",props:{style:{color:"#E5C07B"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" constructor",props:{style:{color:"#C678DD"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"what",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" this",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"what ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"what",props:{style:{color:"#E06C75"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" getMessage ",props:{style:{color:"#61AFEF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"who ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"`",props:{style:{color:"#98C379"}}},{content:"${",props:{style:{color:"#C678DD"}}},{content:"who",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:", ",props:{style:{color:"#98C379"}}},{content:"${",props:{style:{color:"#C678DD"}}},{content:"this",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"what",props:{style:{color:"#E06C75"}}},{content:"}",props:{style:{color:"#C678DD"}}},{content:"!`",props:{style:{color:"#98C379"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"welcome ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Greet",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Welcome'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"welcome",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"getMessage",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Romulans'",props:{style:{color:"#98C379"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => 'Romulans, Welcome!'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[{focus:"5",Component:a.annotations.mark}]}]}),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"getMessage = who => `${who}, ${this.what}!` ")," is a concise fat arrow method definition. The pair of parentheses around its single param ",n.createElement(t.code,null,"who")," was omitted, as well as the curly braces ",n.createElement(t.code,null,"{ }")," and ",n.createElement(t.code,null,"return")," keyword."),"\n",n.createElement(t.h2,{id:"5-concise-is-not-always-readable",style:{position:"relative"}},n.createElement(t.a,{href:"#5-concise-is-not-always-readable","aria-label":"5 concise is not always readable permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"5. Concise is not always readable"),"\n",n.createElement(t.p,null,"I enjoy concise arrow functions for the ability to instantly expose what the function does."),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"numbers ",props:{style:{color:"#E5C07B"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"4",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"5",props:{style:{color:"#D19A66"}}},{content:"];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"numbers",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"map",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"x ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"x ",props:{style:{color:"#E06C75"}}},{content:"* ",props:{style:{color:"#56B6C2"}}},{content:"2",props:{style:{color:"#D19A66"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => [2, 8, 10]",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}
1),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"x => x * 2")," easily implies a function that multiplies a number by ",n.createElement(t.code,null,"2"),"."),"\n",n.createElement(t.p,null,"While it might be tempting to use the short syntax as much as possible, it must be done wisely. Otherwise you might end up in a readability issue, especially in the case of multiple nested concise arrow functions."),"\n",n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 560px; "\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/fa56991c7dc5529681d38097ab167b5b/9605b/between-cables.jpg"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 75%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAHMsm0pWDwf/8QAGhAAAgIDAAAAAAAAAAAAAAAAAQIAEgMTIf/aAAgBAQABBQIcKKIMDQLaIp1qxr//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAgEBPwFX/8QAHRAAAQMFAQAAAAAAAAAAAAAAAAECIRESIjFxM//aAAgBAQAGPwKhLrenq4RSHcgy2f/EABsQAAMAAwEBAAAAAAAAAAAAAAABESFBUYFh/9oACAEBAAE/IUXShaZHgkyq8Ld7cNZfVEL1P//aAAwDAQACAAMAAAAQd9//xAAWEQEBAQAAAAAAAAAAAAAAAAAAARH/2gAIAQMBAT8QkY//xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPxBY/8QAGxABAQADAQEBAAAAAAAAAAAAAREAMWEhgeH/2gAIAQEAAT8Qph9tp+Y47PILpMuq6sdMjhsiw8N41QqkRO+9z2IY11ecz//Z\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="JavaScript code Readability"\n title=""\n src="/static/fa56991c
17dc5529681d38097ab167b5b/9605b/between-cables.jpg"\n srcset="/static/fa56991c7dc5529681d38097ab167b5b/c496c/between-cables.jpg 140w,\n/static/fa56991c7dc5529681d38097ab167b5b/cbbf7/between-cables.jpg 280w,\n/static/fa56991c7dc5529681d38097ab167b5b/9605b/between-cables.jpg 560w"\n sizes="(max-width: 560px) 100vw, 560px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}}),"\n",n.createElement(t.p,null,"I favor readability over brevity, so sometimes I would deliberately keep the curly braces and ",n.createElement(t.code,null,"return")," keyword."),"\n",n.createElement(t.p,null,"Let's define a concise factory function:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"multiplyFactory ",props:{style:{color:"#61AFEF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"m ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"x ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"x ",props:{style:{color:"#E06C75"}}},{content:"* ",props:{style:{color:"#56B6C2"}}},{content:"m",props:{style:{color:"#E06C75"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"double ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"multiplyFactory",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"2",props:{style:{color:"#D19A66"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"double",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"5",props:{style:{color:"#D19A66"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => 10",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"While ",n.createElement(t.code,null,"multiplyFactory")," is short, it might be difficult to understand at first glance what it does."),"\n",n.createElement(t.p,null,"In such a case, I would avoid the shortest syntax and make the function definition a bit longer:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"multiplyFactory ",props:{style:{color:"#61AFEF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"m ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" { ",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" return ",props:{style:{color:"#C678DD"}}},{content:"x ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"x ",props:{style:{color:"#E06C75"}}},{content:"* ",props:{style:{color:"#56B6C2"}}},{content:"m",props:{style:{color:"#E06C75"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"double ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"multiplyFactory",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"2",props:{style:{color:"#D19A66"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"double",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"5",props:{style:{color:"#D19A66"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => 10",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"In the longer form, ",n.createElement(t.code,null,"multiplyFactory")," is easier to understand that it returns an arrow function."),"\n",n.createElement(t.p,null,"Anyways, you might have your taste. But I advise you to prioritize readability over passionate shortening."),"\n",n.createElement(t.h2,{id:"6-conclusion",style:{position:"relative"}}
1,n.createElement(t.a,{href:"#6-conclusion","aria-label":"6 conclusion permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"6. Conclusion"),"\n",n.createElement(t.p,null,"The arrow function is known for its ability to provide short definitions."),"\n",n.createElement(t.p,null,"Using the recipes presented above, you can shorten arrow functions by removing the params parentheses, curly braces or ",n.createElement(t.code,null,"return")," keyword."),"\n",n.createElement(t.p,null,"You can use these recipes with the upcoming fat arrow methods in classes."),"\n",n.createElement(t.p,null,"However, shortening is good as long as it increases readability. If you have many nested arrow functions, it might be wise to avoid the shortest possible forms."),"\n",n.createElement(t.p,null,n.createElement(t.em,null,"What JavaScript shortening techniques do you know? Please write a comment below!")))}var l=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,r.ah)(),e.components);return t?n.createElement(t,e,n.createElement(i,e)):i(e)};function p(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}var d=o(12),u=o(5319),g=o(5893);function m(e){let{data:t,children:o}=e;const{featured:{popularPostsByCategory:n}}=t.site.siteMetadata,{mdx:r,popularPostsMarkdown:s}=t,a={...r.frontmatter,children:o,thumbnail:r.frontmatter.thumbnail.childImageSharp.gatsbyImageData,tableOfContents:r.tableOfContents},c=r.internal.contentFilePath.split("/").slice(-3).join("/"),i=s.edges.map(u.sN),l=n.map((e=>{let{category:t,slugs:o}=e;return{category:t,plainPosts:o.map((e=>i.find((t=>{let{slug:o}=t;return e===o}))))}}));return(0,g.jsx)(d.Z,{postRelativePath:c,post:a,popularPostsByCategory:l})}function f(e){return n.createElement(m,e,n.createElement(l,e))}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.