https://dmitripavlutin.com/component---src-components-pages-post-f…-functions-index-md-c28c9df57a7c62addf07.js

1"use strict";(self.webpackChunkdmitri_pavlutin_blog=self.webpackChunkdmitri_pavlutin_blog||[]).push([[902],{1377:function(e,o,t){t.r(o),t.d(o,{default:function(){return y}});var n=t(7294),r=t(1151),s=t(9794);const c={annotations:s.ds,Code:s.EK},a={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/096-arrow-functions/index.md"};function l(e){const o=Object.assign({p:"p",code:"code",h2:"h2",a:"a",span:"span",em:"em",blockquote:"blockquote",h3:"h3",h4:"h4"},(0,r.ah)(),e.components),{Affiliate:t,TableOfContents:s}=o;return t||i("Affiliate",!0),c||i("CH",!1),c.Code||i("CH.Code",!0),s||i("TableOfContents",!0),n.createElement(n.Fragment,null,n.createElement(o.p,null,"ES2015 had introduced a new way to define functions in JavaScript: the arrow functions. They have a concise syntax, can be inlined, fit great as callbacks, and resolve ",n.createElement(o.code,null,"this")," lexically."),"\n",n.createElement(o.p,null,"I'm going to explain in a few easy steps how to use arrow functions in JavaScript."),"\n",n.createElement(t),"\n",n.createElement(s,{maxLevel:2}),"\n",n.createElement(o.h2,{id:"1-the-syntax",style:{position:"relative"}},n.createElement(o.a,{href:"#1-the-syntax","aria-label":"1 the syntax permalink",className:"anchor before"},n.createElement(o.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. The syntax"),"\n",n.createElement(o.p,null,"The central symbol of an arrow function is the fat arrow ",n.createElement(o.code,null,"=>"),". That's where the name ",n.createElement(o.em,null,"arrow function")," came from."),"\n",n.createElement(o.p,null,"Let's define an arrow function to greet a person:"),"\n",n.createElement(c.Code,{codeConfig:a,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:"`Hello, ",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:"greet",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Eric Cartman'",props:{style:{color:"#98C379"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => 'Hello, Eric Cartman!'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"greet")," is an arrow function. The symbol ",n.createElement(o.code,null,"=>")," delimits the parameters ",n.createElement(o.code,null,"(who)")," and the function body ",n.createElement(o.code,null,"{ return `Hello, ${who}!` }"),"."),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"greet('Eric Cartman')")," is how you call an arrow function. There's no difference between calling a regular function and an arrow function."),"\n",n.createElement(o.p,null,"Generally, the syntax of the arrow function is this:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"param1",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"param2",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ..., ",props:{style:{color:"#ABB2BF"}}},{content:"paramN",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" { ... }",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"Enumerate the parameters ",n.createElement(o.code,null,"(param1, param2, ..., paramN) "),", then put the arrow ",n.createElement(o.code,null,"=>"),", and on the right side write the body ",n.createElement(o.code,null,"{ ... }"),"."),"\n",n.createElement(o.p,null,"Almost everywhere you can use a regular function, you can also use the arrow function. For example:"),"\n",n.createElement(c.Code,{codeConfig:a,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:"4",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"5",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"2",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"6",props:{style:{color:"#D19A66"}}},{content:"];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"doubled ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"numbers",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"map",props:{style:{color:"#61AFEF"}}},{content:"((",props:{style:{color:"#ABB2BF"}}},{content:"number",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:"number ",props:{style:{color:"#E06C75"}}},{content:"* ",props:{style:{color:"#56B6C2"}}},{content:"2",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"});",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"doubled",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => [8, 10, 4, 12]",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"(number) => { return number * 2; }")," is an arrow function used as a callback of ",n.createElement(o.code,null,"number.map()")," method."),"\n",n.createElement(o.h2,{id:"2-this-value",style:{position:"relative"}}

1,n.createElement(o.a,{href:"#2-this-value","aria-label":"2 this value permalink",className:"anchor before"},n.createElement(o.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. this value"),"\n",n.createElement(o.blockquote,null,"\n",n.createElement(o.p,null,"The arrow function resolves ",n.createElement(o.code,null,"this")," lexically."),"\n"),"\n",n.createElement(o.p,null,"The biggest difference between an arrow function and ",n.createElement(o.a,{href:"/6-ways-to-declare-javascript-functions/#1-function-declaration"},"regular function")," is that ",n.createElement(o.code,null,"this")," value inside of an arrow function always equals to ",n.createElement(o.code,null,"this")," from the outer function."),"\n",n.createElement(o.p,null,"In other words, the arrow function doesn't define its own execution context."),"\n",n.createElement(o.p,null,"In the following example, an arrow function is defined inside a method:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"7",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"object ",props:{style:{color:"#E5C07B"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  items",props:{style:{color:"#E06C75"}}},{content:": [",props:{style:{color:"#ABB2BF"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"2",props:{style:{color:"#D19A66"}}},{content:"],",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  method",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    this ",props:{style:{color:"#E5C07B"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"object",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"    this",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"items",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"forEach",props:{style:{color:"#61AFEF"}}},{content:"(() ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"      this ",props:{style:{color:"#E5C07B"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"object",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"    });",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"object",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"method",props:{style:{color:"#61AFEF"}}},{content:"();",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[{focus:"7",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"myObject.myMethod([1, 2, 3])")," is a ",n.createElement(o.a,{href:"/gentle-explanation-of-this-in-javascript/#3-method-invocation"},"method invocation"),". ",n.createElement(o.code,null,"this")," value inside the arrow function equals to ",n.createElement(o.code,null,"this")," of the outer function — and is ",n.createElement(o.code,null,"object"),"."),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"this")," resolved lexically is a great feature of arrow functions. When using callbacks inside methods you are sure the arrow function doesn't define its own ",n.createElement(o.code,null,"this"),"."),"\n",n.createElement(o.p,null,"To compare, if you use a regular function under the same circumstance:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"7",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"object ",props:{style:{color:"#E5C07B"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  items",props:{style:{color:"#E06C75"}}},{content:": [",props:{style:{color:"#ABB2BF"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"2",props:{style:{color:"#D19A66"}}},{content:"],",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  method",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    this ",props:{style:{color:"#E5C07B"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"object",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"    this",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"items",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"forEach",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"function",props:{style:{color:"#C678DD"}}},{content:" () {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"      this ",props:{style:{color:"#E5C07B"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"object",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => false",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"      this ",props:{style:{color:"#E5C07B"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"window",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"    });",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"object",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"method",props:{style:{color:"#61AFEF"}}},{content:"();",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[{focus:"7",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,"Then inside of the regular function ",n.createElement(o.code,null,"this")," equals the global object, which is ",n.createElement(o.code,null,"window")," in a browser environment."),"\n",n.createElement(o.h2,{id:"3-arguments-object",style:{position:"relative"}}

1,n.createElement(o.a,{href:"#3-arguments-object","aria-label":"3 arguments object permalink",className:"anchor before"},n.createElement(o.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. arguments object"),"\n",n.createElement(o.blockquote,null,"\n",n.createElement(o.p,null,"The arrow function resolves ",n.createElement(o.code,null,"arguments")," lexically."),"\n"),"\n",n.createElement(o.p,null,"The ",n.createElement(o.code,null,"arguments")," object inside of an arrow function equals to ",n.createElement(o.code,null,"arguments")," of the outer function."),"\n",n.createElement(o.p,null,"Let's try to access ",n.createElement(o.code,null,"arguments")," inside of an arrow function:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"regular",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  const ",props:{style:{color:"#C678DD"}}},{content:"arrow ",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:"    arguments",props:{style:{color:"#E5C07B"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => ['A', 'B']",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"  };",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  arrow",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'C'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"regular",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'A'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'B'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"arguments")," object inside the arrow function equals to the arguments of ",n.createElement(o.code,null,"regular()")," function invocation: ",n.createElement(o.code,null,"'A'"),", ",n.createElement(o.code,null,"'B'"),"."),"\n",n.createElement(o.p,null,"To access the direct arguments of the arrow function use a ",n.createElement(o.a,{href:"/javascript-function-parameters/#5-rest-parameters"},"rest parameter")," ",n.createElement(o.code,null,"...args"),":"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"regular",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  const ",props:{style:{color:"#C678DD"}}},{content:"arrow ",props:{style:{color:"#61AFEF"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" (...",props:{style:{color:"#ABB2BF"}}},{content:"args",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    args",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => ['C']",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"  }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  arrow",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'C'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"regular",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'A'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'B'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"...args")," rest parameter collects the arguments of the arrow function invocation: ",n.createElement(o.code,null,"['C']"),"."),"\n",n.createElement(o.h2,{id:"4-shortening",style:{position:"relative"}}

1,n.createElement(o.a,{href:"#4-shortening","aria-label":"4 shortening permalink",className:"anchor before"},n.createElement(o.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. Shortening"),"\n",n.createElement(o.p,null,"In the previous examples, the arrow function was used in the long form: both parentheses and curly braces were present."),"\n",n.createElement(o.p,null,"Fortunately, a great benefit of the arrow function is the possibility to make it shorter. Let's see the situations when you can do that."),"\n",n.createElement(o.h3,{id:"41-omitting-parenthesis",style:{position:"relative"}},n.createElement(o.a,{href:"#41-omitting-parenthesis","aria-label":"41 omitting parenthesis permalink",className:"anchor before"},n.createElement(o.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.1 Omitting parenthesis"),"\n",n.createElement(o.p,null,"If the arrow function has one parameter, the parentheses around this parameter can be omitted:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"param",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" { ... }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"// can be simplified to:",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"param ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" { ... }",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"For example, the ",n.createElement(o.code,null,"greet")," function has only one parameter ",n.createElement(o.code,null,"who"),". That's good because you can omit the parentheses around the one parameter:"),"\n",n.createElement(c.Code,{codeConfig:a,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:"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:"`Hello, ",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:"greet",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Eric Cartman'",props:{style:{color:"#98C379"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => 'Hello, Eric Cartman!'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"But be aware that parentheses cannot al

1ways be omitted."),"\n",n.createElement(o.p,null,"If the arrow function accepts a rest parameter, destructures the parameter or has no parameters, then you have to ",n.createElement(o.em,null,"keep the parentheses"),":"),"\n",n.createElement(c.Code,{codeConfig:a,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:" ({ ",props:{style:{color:"#ABB2BF"}}},{content:"name",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:"`Hello, ",props:{style:{color:"#98C379"}}},{content:"${",props:{style:{color:"#C678DD"}}},{content:"name",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:"greetPeople ",props:{style:{color:"#61AFEF"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" (...",props:{style:{color:"#ABB2BF"}}},{content:"args",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:"`Hello, ",props:{style:{color:"#98C379"}}},{content:"${",props:{style:{color:"#C678DD"}}},{content:"args",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"join",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"' and '",props:{style:{color:"#98C379"}}},{content:")",props:{style:{color:"#ABB2BF"}}},{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:"sayHello ",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:"'Hello!'",props:{style:{color:"#98C379"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"greetObject",props:{style:{color:"#61AFEF"}}},{content:"({ ",props:{style:{color:"#ABB2BF"}}},{content:"name",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"'Eric'",props:{style:{color:"#98C379"}}},{content:" }); ",props:{style:{color:"#ABB2BF"}}},{content:"// => 'Hello, Eric!'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"greetPeople",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Eric'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'Stan'",props:{style:{color:"#98C379"}}},{content:");   ",props:{style:{color:"#ABB2BF"}}},{content:"// => 'Hello, Eric and Stan!'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"sayHello",props:{style:{color:"#61AFEF"}}},{content:"();                    ",props:{style:{color:"#ABB2BF"}}},{content:"// => 'Hello!'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.h3,{id:"42-omitting-curly-braces",style:{position:"relative"}},n.createElement(o.a,{href:"#42-omitting-curly-braces","aria-label":"42 omitting curly braces permalink",className:"anchor before"},n.createElement(o.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.2 Omitting curly braces"),"\n",n.createElement(o.p,null,"If the arrow function body contains one statement, you can omit the curly braces and and ",n.createElement(o.code,null,"return")," keyword, then the expression will be implicitely returned:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"param1",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"param2",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ..., ",props:{style:{color:"#ABB2BF"}}},{content:"paramN",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" { ",props:{style:{color:"#ABB2BF"}}},{content:"return ",props:{style:{color:"#C678DD"}}},{content:"statement",props:{style:{color:"#E06C75"}}},{content:"; }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"// can be simplified to:",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"param1",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"param2",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ..., ",props:{style:{color:"#ABB2BF"}}},{content:"paramN",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") ",props:{style:{color:"#ABB2BF"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"statement",props:{style:{color:"#E06C75"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"Following the example, the ",n.createElement(o.code,null,"greet")," function contains one statement, so let's omit the curly braces around the function body:"),"\n",n.createElement(c.Code,{codeConfig:a,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:"who ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"`Hello, ",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:"greet",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Eric Cartman'",props:{style:{color:"#98C379"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => 'Hello, Eric Cartman!'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"In the arrow function ",n.createElement(o.code,null,"who => `Hello, ${who}!`")," the expression ",n.createElement(o.code,null,"`Hello, ${who}!`")," is implicitely returned."),"\n",n.createElement(o.p,null,"The form when the curly braces are omitted is named an ",n.createElement(o.a,{href:"/javascript-arrow-functions-best-practices/#2-inline-when-possible"},"inline arrow function"),". They're useful for writing short callbacks:"),"\n",n.createElement(c.Code,{codeConfig:a,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:"4",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"5",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"2",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"6",props:{style:{color:"#D19A66"}}},{content:"];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"duplicated ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"numbers",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"map",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"number ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"number ",props:{style:{color:"#E06C75"}}},{content:"* ",props:{style:{color:"#56B6C2"}}},{content:"2",props:{style:{color:"#D19A66"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"duplicated",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => [8, 10, 4, 12]",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.h4,{id:"object-literal-case",style:{position:"relative"}}

1,n.createElement(o.a,{href:"#object-literal-case","aria-label":"object literal case permalink",className:"anchor before"},n.createElement(o.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>'}})),"Object literal case"),"\n",n.createElement(o.p,null,"Omitting the curly braces works flawlessly most of the time but with one exception."),"\n",n.createElement(o.p,null,"When returning an object literal, you have to wrap the literal into a pair of parentheses:"),"\n",n.createElement(c.Code,{codeConfig:a,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:"`Hello, ",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:"greetObject",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Eric Cartman'",props:{style:{color:"#98C379"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => { message: `Hello, Eric Cartman!` }",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"Otherwise, JavaScript ",n.createElement(o.a,{href:"/javascript-arrow-functions-best-practices/#4-constructing-plain-objects"},"confuses")," the curly braces of the function body with those of the object literal and returns ",n.createElement(o.code,null,"undefined"),":"),"\n",n.createElement(c.Code,{codeConfig:a,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:"`Hello, ",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:"greetObject",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Eric Cartman'",props:{style:{color:"#98C379"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => undefined",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.h2,{id:"5-dos-and-donts",style:{position:"relative"}},n.createElement(o.a,{href:"#5-dos-and-donts","aria-label":"5 dos and donts permalink",className:"anchor before"},n.createElement(o.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. Dos and don'ts"),"\n",n.createElement(o.h3,{id:"51-can-be-asynchronous",style:{position:"relative"}}

1,n.createElement(o.a,{href:"#51-can-be-asynchronous","aria-label":"51 can be asynchronous permalink",className:"anchor before"},n.createElement(o.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.1 Can be asynchronous"),"\n",n.createElement(o.p,null,"You can make an arrow function asynchornous using the ",n.createElement(o.code,null,"async/await")," syntax:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"fetchMovies ",props:{style:{color:"#61AFEF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"async",props:{style:{color:"#C678DD"}}},{content:" () ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" { ",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  const ",props:{style:{color:"#C678DD"}}},{content:"response ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"await ",props:{style:{color:"#C678DD"}}},{content:"fetch",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'/api/movies'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  const ",props:{style:{color:"#C678DD"}}},{content:"movies ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"await ",props:{style:{color:"#C678DD"}}},{content:"response",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"json",props:{style:{color:"#61AFEF"}}},{content:"();",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  return ",props:{style:{color:"#C678DD"}}},{content:"movies",props:{style:{color:"#E06C75"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"fetchMovies",props:{style:{color:"#61AFEF"}}},{content:"().",props:{style:{color:"#ABB2BF"}}},{content:"then",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"movies ",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  // Movies fetched",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"})",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.h3,{id:"52-cannot-be-a-method",style:{position:"relative"}},n.createElement(o.a,{href:"#52-cannot-be-a-method","aria-label":"52 cannot be a method permalink",className:"anchor before"},n.createElement(o.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.2 Cannot be a method"),"\n",n.createElement(o.p,null,"A method is a special function attached to an object. Inside a method, ",n.createElement(o.code,null,"this")," value equals the object upon which the method was called on."),"\n",n.createElement(o.p,null,"Let's consider the method ",n.createElement(o.code,null,"isEmpty()")," in the ",n.createElement(o.code,null,"collection")," object:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"collection ",props:{style:{color:"#E5C07B"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  items",props:{style:{color:"#E06C75"}}},{content:": [",props:{style:{color:"#ABB2BF"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"2",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"3",props:{style:{color:"#D19A66"}}},{content:"],",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  isEmpty",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    this ",props:{style:{color:"#E5C07B"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"collection",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"    return ",props:{style:{color:"#C678DD"}}},{content:"this",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"items",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"length ",props:{style:{color:"#E06C75"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"0",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"collection",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"isEmpty",props:{style:{color:"#61AFEF"}}},{content:"(); ",props:{style:{color:"#ABB2BF"}}},{content:"// => false",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"collection.isEmpty()")," is a ",n.createElement(o.a,{href:"/gentle-explanation-of-this-in-javascript/#3-method-invocation"},"method invocation"),". Inside of the method ",n.createElement(o.code,null,"isEmpty()"),", you can access the special value ",n.createElement(o.code,null,"this"),", which equals to the object upon which the method was called — ",n.createElement(o.code,null,"collection"),"."),"\n",n.createElement(o.p,null,"However, from a ",n.createElement(o.a,{href:"#step-3-this-value"},"previous section")," you know that ",n.createElement(o.code,null,"this")," inside of an arrow function equals to ",n.createElement(o.code,null,"this")," value of from the outer scope. That's why you normally cannot use an arrow function as a method:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"collection ",props:{style:{color:"#E5C07B"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  items",props:{style:{color:"#E06C75"}}},{content:": [",props:{style:{color:"#ABB2BF"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"2",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"3",props:{style:{color:"#D19A66"}}},{content:"],",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  isEmpty",props:{style:{color:"#61AFEF"}}},{content:": () ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    this ",props:{style:{color:"#E5C07B"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"collection",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => false",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"    this ",props:{style:{color:"#E5C07B"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"window",props:{style:{color:"#E06C75"}}},{content:";     ",props:{style:{color:"#ABB2BF"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"    return ",props:{style:{color:"#C678DD"}}},{content:"this",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"items",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"length ",props:{style:{color:"#E06C75"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"0",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"collection",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"isEmpty",props:{style:{color:"#61AFEF"}}},{content:"(); ",props:{style:{color:"#ABB2BF"}}},{content:'// throws "TypeError: this.items is undefined"',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"When performing a method invocation ",n.createElement(o.code,null,"collection.isEmpty()")," JavaScript throws a ",n.createElement(o.code,null,'"TypeError this.items is undefined"'),". All because ",n.createElement(o.code,null,"this")," inside of the arrow function equals to the global object, particularly ",n.createElement(o.code,null,"window")," when running in a browser."),"\n",n.createElement(o.h3,{id:"53-cannot-be-a-constructor",style:{position:"relative"}}

1,n.createElement(o.a,{href:"#53-cannot-be-a-constructor","aria-label":"53 cannot be a constructor permalink",className:"anchor before"},n.createElement(o.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.3 Cannot be a constructor"),"\n",n.createElement(o.p,null,"A regular function can be a ",n.createElement(o.a,{href:"/gentle-explanation-of-this-in-javascript/#4-constructor-invocation"},"constructor")," of instances:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"User",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"name",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  this",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"name ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"name",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:"user ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"User",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Eric Cartman'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"user ",props:{style:{color:"#E06C75"}}},{content:"instanceof ",props:{style:{color:"#C678DD"}}},{content:"User",props:{style:{color:"#E5C07B"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"However, the arrow function cannot be used as a constructor:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"User ",props:{style:{color:"#61AFEF"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"name",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  this",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"name ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"name",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:"user ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"User",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Eric Cartman'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:'// throws "TypeError: User is not a constructor"',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"When ",n.createElement(o.code,null,"User")," is an arrow function, invoking ",n.createElement(o.code,null,"new User('Eric Cartman')")," throws a ",n.createElement(o.code,null,"TypeError"),"."),"\n",n.createElement(o.h3,{id:"54-cannot-be-a-generator-function",style:{position:"relative"}}

1,n.createElement(o.a,{href:"#54-cannot-be-a-generator-function","aria-label":"54 cannot be a generator function permalink",className:"anchor before"},n.createElement(o.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.4 Cannot be a generator function"),"\n",n.createElement(o.p,null,"Finally, the arrow function cannot be used as generator function:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"getNumbersArrow ",props:{style:{color:"#E5C07B"}}},{content:"= *",props:{style:{color:"#56B6C2"}}},{content:"() ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  yield ",props:{style:{color:"#C678DD"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  yield ",props:{style:{color:"#C678DD"}}},{content:"2",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"// SyntaxError: Unexpected token '*'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"When using an asterisk ",n.createElement(o.code,null,"*")," to mark an arrow function as a generator, JavaScript throws a syntax error."),"\n",n.createElement(o.p,null,"The regular functions, of course, are marked as generators without issues:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"function *",props:{style:{color:"#C678DD"}}},{content:"getNumbersRegular",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  yield ",props:{style:{color:"#C678DD"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  yield ",props:{style:{color:"#C678DD"}}},{content:"2",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"// Works!",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"gen ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"getNumbersRegular",props:{style:{color:"#61AFEF"}}},{content:"();",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"gen",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"next",props:{style:{color:"#61AFEF"}}},{content:"(); ",props:{style:{color:"#ABB2BF"}}},{content:"// => { value: 1, done: false }",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"gen",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"next",props:{style:{color:"#61AFEF"}}},{content:"(); ",props:{style:{color:"#ABB2BF"}}},{content:"// => { value: 2, done: false }",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"gen",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"next",props:{style:{color:"#61AFEF"}}},{content:"(); ",props:{style:{color:"#ABB2BF"}}},{content:"// => { value: undefined, done: true }",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.h2,{id:"6-summary",style:{position:"relative"}}

1,n.createElement(o.a,{href:"#6-summary","aria-label":"6 summary permalink",className:"anchor before"},n.createElement(o.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. Summary"),"\n",n.createElement(o.p,null,"The central symbol of an arrow function is the fat arrow ",n.createElement(o.code,null,"=>"),": on the left side of it are the params, and on the right side is the function body:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"param1",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"param2",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ..., ",props:{style:{color:"#ABB2BF"}}},{content:"paramN",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") ",props:{style:{color:"#ABB2BF"}}},{content:"=>",props:{style:{color:"#C678DD"}}},{content:" { ... }",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"The arrow function can be shortened: when it has one parameter you can omit the parentheses ",n.createElement(o.code,null,"param => { ... }"),", and when it has one statement you can omit the curly braces ",n.createElement(o.code,null,"param => statement"),"."),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"this")," and ",n.createElement(o.code,null,"arguments")," inside of an arrow function are resolved lexically, meaning that they're taken from the outer function scope."),"\n",n.createElement(o.p,null,"The arrow function has a few limitations: you cannot use it as a method on an object, constructor, or generator function."),"\n",n.createElement(o.p,null,"Arrow functions are lightweight, inline, and easy to read (",n.createElement(o.a,{href:"/javascript-arrow-functions-best-practices/#5-be-aware-of-excessive-nesting"},"when not being nested too much"),") — use them as much as you want in your code."),"\n",n.createElement(o.p,null,"What about the differences between an arrow and a regular function? Follow my post ",n.createElement(o.a,{href:"/differences-between-arrow-and-regular-functions/"},"5 Differences Between Arrow and Regular Functions")," to find a detailed answer."),"\n",n.createElement(o.p,null,n.createElement(o.em,null,"Do you prefer using the arrow or regular functions?")))}var p=function(e){void 0===e&&(e={});const{wrapper:o}=Object.assign({},(0,r.ah)(),e.components);return o?n.createElement(o,e,n.createElement(l,e)):l(e)};function i(e,o){throw new Error("Expected "+(o?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}var u=t(12),d=t(5319),m=t(5893);function g(e){let{data:o,children:t}=e;const{featured:{popularPostsByCategory:n}}=o.site.siteMetadata,{mdx:r,popularPostsMarkdown:s}=o,c={...r.frontmatter,children:t,thumbnail:r.frontmatter.thumbnail.childImageSharp.gatsbyImageData,tableOfContents:r.tableOfContents},a=r.internal.contentFilePath.split("/").slice(-3).join("/"),l=s.edges.map(d.sN),p=n.map((e=>{let{category:o,slugs:t}=e;return{category:o,plainPosts:t.map((e=>l.find((o=>{let{slug:t}=o;return e===t}))))}}));return(0,m.jsx)(u.Z,{postRelativePath:a,post:c,popularPostsByCategory:p})}function y(e){return n.createElement(g,e,n.createElement(p,e))}}}]);