component---src-components-pages-post-f…-functions-index-md-0e7c5dd01a195b09e993.js

js dmitripavlutin.com collected 2026-10-02 07:24:22 UTC 94,839 bytes, 1 lines download raw bytes

1"use strict";(self.webpackChunkdmitri_pavlutin_blog=self.webpackChunkdmitri_pavlutin_blog||[]).push([[1083],{1717:function(e,o,t){t.r(o),t.d(o,{default:function(){return f}});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/080-arrow-vs-regular-functions/index.md"};function l(e){const o=Object.assign({p:"p",a:"a",code:"code",em:"em",h2:"h2",span:"span",h3:"h3"},(0,r.ah)(),e.components),{Affiliate:t,TableOfContents:s}=o;return t||p("Affiliate",!0),c||p("CH",!1),c.Code||p("CH.Code",!0),s||p("TableOfContents",!0),n.createElement(n.Fragment,null,n.createElement(o.p,null,"You can define JavaScript functions in ",n.createElement(o.a,{href:"/6-ways-to-declare-javascript-functions/"},"many ways"),"."),"\n",n.createElement(o.p,null,"The first, usual way, is by using the ",n.createElement(o.code,null,"function")," keyword:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"// Function declaration",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"greet",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"who",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{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"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"// Function expression",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"greet ",props:{style:{color:"#61AFEF"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"function",props:{style:{color:"#C678DD"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"who",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{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"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"The function declaration and function expression I'm going to reference as ",n.createElement(o.em,null,"regular function"),"."),"\n",n.createElement(o.p,null,"The second w

1ay, available starting ES2015, is the ",n.createElement(o.em,null,"arrow function")," 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:"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"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"While both the regular and arrow syntaxes define functions, when would you use one or another? That's a good question."),"\n",n.createElement(o.p,null,"In this post, I'll show you the difference between the two, so you could choose the right syntax for your needs."),"\n",n.createElement(t),"\n",n.createElement(s),"\n",n.createElement(o.h2,{id:"1-this-value",style:{position:"relative"}},n.createElement(o.a,{href:"#1-this-value","aria-label":"1 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>'}})),"1. this value"),"\n",n.createElement(o.h3,{id:"11-regular-function",style:{position:"relative"}},n.createElement(o.a,{href:"#11-regular-function","aria-label":"11 regular 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>'}})),"1.1 Regular function"),"\n",n.createElement(o.p,null,"Inside a regular JavaScript function, ",n.createElement(o.code,null,"this")," value (aka the execution context) is dynamic."),"\n",n.createElement(o.p,null,"The dynamic context means that the value of ",n.createElement(o.code,null,"this")," depends on ",n.createElement(o.em,null,"how")," the function is invoked. In JavaScript, there are 4 ways you can invoke a regular function."),"\n",n.createElement(o.p,null,"During a ",n.createElement(o.em,null,"simple invocation")," the value of ",n.createElement(o.code,null,"this")," equals the global object (or ",n.createElement(o.code,null,"undefined")," if the function runs in ",n.createElement(o.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode",target:"_blank",rel:"noopener noreferrer"},"strict mode"),"):"),"\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:"myFunction",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"this",props:{style:{color:"#E5C07B"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"// Simple invocation",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"myFunction",props:{style:{color:"#61AFEF"}}},{content:"(); ",props:{style:{color:"#ABB2BF"}}},{content:"// logs global object (window)",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"During a ",n.createElement(o.em,null,"method invocation")," the value of ",n.createElement(o.code,null,"this")," is the object owning the 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:"myObject ",props:{style:{color:"#E5C07B"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  method",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"this",props:{style:{color:"#E5C07B"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"};",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"// Method invocation",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"myObject",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"method",props:{style:{color:"#61AFEF"}}},{content:"(); ",props:{style:{color:"#ABB2BF"}}},{content:"// logs myObject",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"During an ",n.createElement(o.em,null,"indirect invocation")," using ",n.createElement(o.code,null,"myFunc.call(thisVal, arg1, ..., argN)")," or ",n.createElement(o.code,null,"myFunc.apply(thisVal, [arg1, ..., argN])")," the value of ",n.createElement(o.code,null,"this")," equals to the first argument:"),"\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:"myFunction",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"this",props:{style:{color:"#E5C07B"}}},{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:"myContext ",props:{style:{color:"#E5C07B"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" { ",props:{style:{color:"#ABB2BF"}}},{content:"value",props:{style:{color:"#E06C75"}}},{content:": ",props:{style:{color:"#ABB2BF"}}},{content:"'A'",props:{style:{color:"#98C379"}}},{content:" };",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"myFunction",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"call",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"myContext",props:{style:{color:"#E06C75"}}},{content:");  ",props:{style:{color:"#ABB2BF"}}},{content:"// logs { value: 'A' }",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"myFunction",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"apply",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"myContext",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// logs { value: 'A' }",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"During a ",n.createElement(o.em,null,"constructor invocation")," using ",n.createElement(o.code,null,"new")," keyword ",n.createElement(o.code,null,"this")," equals the newly created instance:"),"\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:"MyFunction",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"this",props:{style:{color:"#E5C07B"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"new ",props:{style:{color:"#C678DD"}}},{content:"MyFunction",props:{style:{color:"#61AFEF"}}},{content:"(); ",props:{style:{color:"#ABB2BF"}}},{content:"// logs an instance of MyFunction",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.h3,{id:"12-arrow-function",style:{position:"relative"}}

1,n.createElement(o.a,{href:"#12-arrow-function","aria-label":"12 arrow 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>'}})),"1.2 Arrow function"),"\n",n.createElement(o.p,null,"The behavior of ",n.createElement(o.code,null,"this")," inside of an arrow function differs from the regular function's ",n.createElement(o.code,null,"this")," behavior. The arrow function doesn't define its own execution context but resolves to the one from the outer function."),"\n",n.createElement(o.p,null,"No matter how or where being executed, ",n.createElement(o.code,null,"this")," value inside of an arrow function always equals ",n.createElement(o.code,null,"this")," value from the outer function. In other words, the arrow function resolves ",n.createElement(o.code,null,"this")," lexically."),"\n",n.createElement(o.p,null,"In the following example, ",n.createElement(o.code,null,"myMethod()")," is an outer function of ",n.createElement(o.code,null,"callback()")," arrow function:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"3,5",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"myObject ",props:{style:{color:"#E5C07B"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  myMethod",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"items",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"this",props:{style:{color:"#E5C07B"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// logs myObject",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"    const ",props:{style:{color:"#C678DD"}}},{content:"callback ",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:"      console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"this",props:{style:{color:"#E5C07B"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// logs myObject",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"    };",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    items",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"forEach",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"callback",props:{style:{color:"#E06C75"}}},{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:"myObject",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"myMethod",props:{style:{color:"#61AFEF"}}},{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"}}}]}],lang:"javascript"},annotations:[{focus:"3,5",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"this")," value inside the arrow function ",n.createElement(o.code,null,"callback()")," equals ",n.createElement(o.code,null,"this")," of the outer function ",n.createElement(o.code,null,"myMethod()"),"."),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"this")," resolved lexically is one of the great features of the arrow functions. When using callbacks inside methods you are sure the arrow function doesn't define its own ",n.createElement(o.code,null,"this")," (no more ",n.createElement(o.code,null,"const self = this")," or ",n.createElement(o.code,null,"callback.bind(this)")," workarounds)."),"\n",n.createElement(o.p,null,"Contrary to a regular function, the indirect invocation of an arrow function using ",n.createElement(o.code,null,"myArrowFunc.call(thisVal)")," or ",n.createElement(o.code,null,"myArrowFunc.apply(thisVal)")," doesn't change the value of ",n.createElement(o.code,null,"this"),": the context value ",n.createElement(o.em,null,"always")," resolves lexically."),"\n",n.createElement(o.h2,{id:"2-constructors",style:{position:"relative"}}

1,n.createElement(o.a,{href:"#2-constructors","aria-label":"2 constructors 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. Constructors"),"\n",n.createElement(o.h3,{id:"21-regular-function",style:{position:"relative"}},n.createElement(o.a,{href:"#21-regular-function","aria-label":"21 regular 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>'}})),"2.1 Regular function"),"\n",n.createElement(o.p,null,"As seen in the previous section, the regular function can easily construct objects."),"\n",n.createElement(o.p,null,"For example, the ",n.createElement(o.code,null,"new Car()")," function creates instances of a car:"),"\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:"Car",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"color",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  this",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"color ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"color",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:"redCar ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Car",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'red'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"redCar ",props:{style:{color:"#E06C75"}}},{content:"instanceof ",props:{style:{color:"#C678DD"}}},{content:"Car",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,n.createElement(o.code,null,"Car")," is a regular function. When invoked with ",n.createElement(o.code,null,"new")," keyword ",n.createElement(o.code,null,"new Car('red')")," â new instances of ",n.createElement(o.code,null,"Car")," type are created."),"\n",n.createElement(o.h3,{id:"22-arrow-function",style:{position:"relative"}},n.createElement(o.a,{href:"#22-arrow-function","aria-label":"22 arrow 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>'}})),"2.2 Arrow function"),"\n",n.createElement(o.p,null,"A consequence of ",n.createElement(o.code,null,"this")," resolved lexically is that an arrow function cannot be used as a constructor."),"\n",n.createElement(o.p,null,"If you try to invoke an arrow function prefixed with ",n.createElement(o.code,null,"new")," keyword, JavaScript throws an error meaning that an arrow function cannot be 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:"Car ",props:{style:{color:"#61AFEF"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"color",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:"color ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"color",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:"redCar ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Car",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'red'",props:{style:{color:"#98C379"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// TypeError: Car is not a constructor ",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"Invoking ",n.createElement(o.code,null,"new Car('red')"),", where ",n.createElement(o.code,null,"Car")," is an arrow function, throws ",n.createElement(o.code,null,"TypeError: Car is not a constructor"),"."),"\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.h3,{id:"31-regular-function",style:{position:"relative"}},n.createElement(o.a,{href:"#31-regular-function","aria-label":"31 regular 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>'}})),"3.1 Regular function"),"\n",n.createElement(o.p,null,"Inside the body of a regular function, ",n.createElement(o.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments",target:"_blank",rel:"noopener noreferrer"},"arguments")," is a special array-like object containing the list of arguments with which the function has been invoked."),"\n",n.createElement(o.p,null,"Let's invoke ",n.createElement(o.code,null,"myFunction()")," function with 2 arguments:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"2",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"myFunction",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"arguments",props:{style:{color:"#E5C07B"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"myFunction",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"}}},{content:"// logs { 0: 'a', 1: 'b', length: 2 }",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[{focus:"2",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,"Inside of ",n.createElement(o.code,null,"myFunction()")," body the ",n.createElement(o.code,null,"arguments")," is an array-like object containing the invocation arguments: ",n.createElement(o.code,null,"'a'")," and ",n.createElement(o.code,null,"'b'"),"."),"\n",n.createElement(o.h3,{id:"32-arrow-function",style:{position:"relative"}},n.createElement(o.a,{href:"#32-arrow-function","aria-label":"32 arrow 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>'}})),"3.2 Arrow function"),"\n",n.createElement(o.p,null,"On the other side, no ",n.createElement(o.code,null,"arguments")," special keyword is defined inside an arrow function."),"\n",n.createElement(o.p,null,"Again (same as with ",n.createElement(o.code,null,"this")," value), the ",n.createElement(o.code,null,"arguments")," object is resolved lexically: the arrow function accesses ",n.createElement(o.code,null,"arguments")," from 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:"",mark:"2:4",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"myRegularFunction",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  const ",props:{style:{color:"#C678DD"}}},{content:"myArrowFunction ",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:"    console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"arguments",props:{style:{color:"#E5C07B"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  myArrowFunction",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'c'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'d'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"myRegularFunction",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"}}},{content:"// logs { 0: 'a', 1: 'b', length: 2 }",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[{focus:"2:4",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,"The arrow function ",n.createElement(o.code,null,"myArrowFunction()")," is invoked with the arguments ",n.createElement(o.code,null,"'c'"),", ",n.createElement(o.code,null,"'d'"),". Still, inside of its body, ",n.createElement(o.code,null,"arguments")," object equals the arguments of ",n.createElement(o.code,null,"myRegularFunction()")," invocation: ",n.createElement(o.code,null,"'a'"),", ",n.createElement(o.code,null,"'b'"),"."),"\n",n.createElement(o.p,null,"If you'd like to access the direct arguments of the arrow function, then you can use ",n.createElement(o.a,{href:"/javascript-function-parameters/#5-rest-parameters"},"the rest parameters")," feature:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"2:4",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"myRegularFunction",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  const ",props:{style:{color:"#C678DD"}}},{content:"myArrowFunction ",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:"    console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"args",props:{style:{color:"#E06C75"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  myArrowFunction",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'c'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'d'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"myRegularFunction",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"}}},{content:"// logs ['c', 'd']",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[{focus:"2:4",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"...args")," rest parameter collects the execution arguments of the arrow function into an array: ",n.createElement(o.code,null,"['c', 'd']"),"."),"\n",n.createElement(o.h2,{id:"4-implicit-return",style:{position:"relative"}}

1,n.createElement(o.a,{href:"#4-implicit-return","aria-label":"4 implicit return 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. Implicit return"),"\n",n.createElement(o.h3,{id:"41-regular-function",style:{position:"relative"}},n.createElement(o.a,{href:"#41-regular-function","aria-label":"41 regular 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>'}})),"4.1 Regular function"),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"return expression")," statement returns the result from a 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:"myFunction",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  return ",props:{style:{color:"#C678DD"}}},{content:"42",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"myFunction",props:{style:{color:"#61AFEF"}}},{content:"(); ",props:{style:{color:"#ABB2BF"}}},{content:"// => 42",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"If the ",n.createElement(o.code,null,"return")," statement is missing, or there's no expression after the return statement, the regular function implicitly 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:"function ",props:{style:{color:"#C678DD"}}},{content:"myEmptyFunction",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  42",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"myEmptyFunction2",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  42",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  return",props:{style:{color:"#C678DD"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"myEmptyFunction",props:{style:{color:"#61AFEF"}}},{content:"();  ",props:{style:{color:"#ABB2BF"}}},{content:"// => undefined",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"myEmptyFunction2",props:{style:{color:"#61AFEF"}}},{content:"(); ",props:{style:{color:"#ABB2BF"}}},{content:"// => undefined",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.h3,{id:"42-arrow-function",style:{position:"relative"}}

1,n.createElement(o.a,{href:"#42-arrow-function","aria-label":"42 arrow 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>'}})),"4.2 Arrow function"),"\n",n.createElement(o.p,null,"You can return values from the arrow function the same way as from a regular function, but with one useful exception."),"\n",n.createElement(o.p,null,"If the arrow function contains one expression, and you omit the function's curly braces, then the expression is implicitly returned. These are ",n.createElement(o.a,{href:"/javascript-arrow-functions-best-practices/#2-inline-when-possible"},"the inline arrow functions"),"."),"\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:"increment ",props:{style:{color:"#61AFEF"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"num",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") ",props:{style:{color:"#ABB2BF"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"num ",props:{style:{color:"#E06C75"}}},{content:"+ ",props:{style:{color:"#56B6C2"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"increment",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"41",props:{style:{color:"#D19A66"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => 42",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"increment()")," consists of only one expression: ",n.createElement(o.code,null,"num + 1"),". This expression is implicitly returned by the arrow function without the use of ",n.createElement(o.code,null,"return")," keyword."),"\n",n.createElement(o.h2,{id:"5-methods",style:{position:"relative"}},n.createElement(o.a,{href:"#5-methods","aria-label":"5 methods 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. Methods"),"\n",n.createElement(o.h3,{id:"51-regular-function",style:{position:"relative"}},n.createElement(o.a,{href:"#51-regular-function","aria-label":"51 regular 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.1 Regular function"),"\n",n.createElement(o.p,null,"Regular functions are the usual way to define methods on classes or objects."),"\n",n.createElement(o.p,null,"In the following class ",n.createElement(o.code,null,"Hero"),", the method ",n.createElement(o.code,null,"logName()")," is defined using a regular function:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1}

1,files:[{name:"",mark:"6:8",focus:"",code:{lines:[{tokens:[{content:"class ",props:{style:{color:"#C678DD"}}},{content:"Hero",props:{style:{color:"#E5C07B"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  constructor",props:{style:{color:"#C678DD"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"heroName",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    this",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"heroName ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"heroName",props:{style:{color:"#E06C75"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  logName",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"this",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"heroName",props:{style:{color:"#E06C75"}}},{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:"const ",props:{style:{color:"#C678DD"}}},{content:"batman ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Hero",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Batman'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[{focus:"6:8",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,"Usually, regular functions as methods are the way to go."),"\n",n.createElement(o.p,null,"Sometimes you'd need to supply the method as a callback, for example to ",n.createElement(o.code,null,"setTimeout()")," or an event listener. In such cases, you might encounter difficulties accessing ",n.createElement(o.code,null,"this")," value."),"\n",n.createElement(o.p,null,"For example, let's use ",n.createElement(o.code,null,"logName()")," method as a callback to ",n.createElement(o.code,null,"setTimeout()"),":"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"setTimeout",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"batman",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"logName",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"1000",props:{style:{color:"#D19A66"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:'// after 1 second logs "undefined"',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"After 1 second, ",n.createElement(o.code,null,"undefined")," is logged to console. ",n.createElement(o.code,null,"setTimeout()")," performs a simple invocation of ",n.createElement(o.code,null,"logName")," (where ",n.createElement(o.code,null,"this")," is the global object). That's when ",n.createElement(o.a,{href:"/gentle-explanation-of-this-in-javascript/#32-pitfall-separating-method-from-its-object"},"the method is separated from the object"),"."),"\n",n.createElement(o.p,null,"Let's bind ",n.createElement(o.code,null,"this")," value manually to the right context:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"setTimeout",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"batman",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"logName",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"bind",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"batman",props:{style:{color:"#E06C75"}}},{content:"), ",props:{style:{color:"#ABB2BF"}}},{content:"1000",props:{style:{color:"#D19A66"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:'// after 1 second logs "Batman"',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"batman.logName.bind(batman)")," binds ",n.createElement(o.code,null,"this")," value to ",n.createElement(o.code,null,"batman")," instance. Now you're sure that the method doesn't lose the context."),"\n",n.createElement(o.p,null,"Binding ",n.createElement(o.code,null,"this")," manually requires boilerplate code, especially if you have lots of methods. There's a better way: the arrow functions as a class field."),"\n",n.createElement(o.h3,{id:"52-arrow-function",style:{position:"relative"}}

1,n.createElement(o.a,{href:"#52-arrow-function","aria-label":"52 arrow 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.2 Arrow function"),"\n",n.createElement(o.p,null,"Thanks to the class fields feature you can use the arrow function as methods inside classes."),"\n",n.createElement(o.p,null,"Now, in contrast with regular functions, the method defined using an arrow binds ",n.createElement(o.code,null,"this")," lexically to the class instance."),"\n",n.createElement(o.p,null,"Let's use the arrow function as a field:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"6:8",focus:"",code:{lines:[{tokens:[{content:"class ",props:{style:{color:"#C678DD"}}},{content:"Hero",props:{style:{color:"#E5C07B"}}},{content:" {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  constructor",props:{style:{color:"#C678DD"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"heroName",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    this",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"heroName ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"heroName",props:{style:{color:"#E06C75"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  logName ",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:"    console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"this",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"heroName",props:{style:{color:"#E06C75"}}},{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:"const ",props:{style:{color:"#C678DD"}}},{content:"batman ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Hero",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'Batman'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[{focus:"6:8",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,"Now you can use ",n.createElement(o.code,null,"batman.logName")," as a callback without manual binding of ",n.createElement(o.code,null,"this"),". The value of ",n.createElement(o.code,null,"this")," inside ",n.createElement(o.code,null,"logName()")," method is always the class instance:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"setTimeout",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"batman",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"logName",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"1000",props:{style:{color:"#D19A66"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:'// after 1 second logs "Batman"',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,"Understanding the differences between regular and arrow functions helps choose the right syntax for specific needs."),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"this")," value inside a regular function is dynamic and depends on the invocation. But ",n.createElement(o.code,null,"this")," inside the arrow function is bound lexically and equals to ",n.createElement(o.code,null,"this")," of the outer function."),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"arguments")," object inside the regular functions contains the arguments in an array-like object. The arrow function, on the opposite, doesn't define ",n.createElement(o.code,null,"arguments")," (but you can easily access the arrow function arguments using a rest parameter ",n.createElement(o.code,null,"...args"),")."),"\n",n.createElement(o.p,null,"If the arrow function has one expression, then the expression is returned implicitly, even without using the ",n.createElement(o.code,null,"return")," keyword."),"\n",n.createElement(o.p,null,"Last but not least, you can define methods using the arrow function syntax inside classes. Fat arrow methods bind ",n.createElement(o.code,null,"this")," value to the class instance."),"\n",n.createElement(o.p,null,"Anyhow the fat arrow method is invoked, ",n.createElement(o.code,null,"this")," always equals the class instance, which is useful when the methods are used as callbacks."),"\n",n.createElement(o.p,null,"To understand all types of functions in JavaScript, I recommend checking ",n.createElement(o.a,{href:"/6-ways-to-declare-javascript-functions/"},"JavaScript Function Declaration: The 6 Ways"),"."),"\n",n.createElement(o.p,null,n.createElement(o.em,null,"What other differences between the arrow and regular functions do you know?")))}var i=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 p(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),i=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:i})}function f(e){return n.createElement(g,e,n.createElement(i,e))}}}]);

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.