1"use strict";(self.webpackChunkdmitri_pavlutin_blog=self.webpackChunkdmitri_pavlutin_blog||[]).push([[8741],{4045: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/076-javascript-scope/index.md"};function l(e){const o=Object.assign({p:"p",h2:"h2",a:"a",span:"span",code:"code",em:"em",blockquote:"blockquote",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,"The scope is an important concept that manages the availability of variables. The scope is at the base closures, defines the idea of global and local variables."),"\n",n.createElement(o.p,null,"If you'd like to code in JavaScript, understanding the scope of variables is a must."),"\n",n.createElement(o.p,null,"In this post, I will explain step by step, in-depth, how the scope works in JavaScript."),"\n",n.createElement(t),"\n",n.createElement(s),"\n",n.createElement(o.h2,{id:"1-the-scope",style:{position:"relative"}},n.createElement(o.a,{href:"#1-the-scope","aria-label":"1 the scope permalink",className:"anchor before"},n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"1. The scope"),"\n",n.createElement(o.p,null,"Before diving into what the scope is, let's try an experiment that demonstrates how the scope manifests itself."),"\n",n.createElement(o.p,null,"Let's say you define a variable ",n.createElement(o.code,null,"message"),":"),"\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:"message ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"'Hello'",props:{style:{color:"#98C379"}}},{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:"message",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// 'Hello'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"Then, you could easily log this variable in the next line after the declaration. No questions here."),"\n",n.createElement(o.p,null,"Now, let's move the declaration of ",n.createElement(o.code,null,"message")," inside of an ",n.createElement(o.code,null,"if")," code block:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"if",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"true",props:{style:{color:"#D19A66"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"message ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"'Hello'",props:{style:{color:"#98C379"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{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:"message",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// ReferenceError: message is not defined",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"This time, when trying to log the variable, JavaScript throws ",n.createElement(o.code,null,"ReferenceError: message is not defined"),"."),"\n",n.createElement(o.p,null,"Why does it happen?"),"\n",n.createElement(o.p,null,"The ",n.createElement(o.code,null,"if")," code block creates a ",n.createElement(o.em,null,"scope")," for ",n.createElement(o.code,null,"message")," variable. And ",n.createElement(o.code,null,"message")," variable c
1an be accessed ",n.createElement(o.em,null,"only")," within this scope."),"\n",n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 560px; "\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/72b34894fc61cc71d76bfcda521e1c65/c2d7e/javascript-scope-2.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 97.85714285714285%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAADzElEQVR42pWU21MaVxzH9yVW8RL3vhhBAUEiQoDVBq+pDWJU8IKIC3YmmbGddiZ5yUP/KaexnXTGR9OhLaMGRluqERajIirKXlguXgDdDlDtQ/vQfucz53znnO/v4fzmnAPsxJjDM+GEyXw85vdOhL1Emo5zkTi7e8LvJfjdY56O8zsxNnzIhuPcToyh42z0iNs/SW3tnQGZ8ytRFG9ubkRRPD/P5bKZ6+uieC2WuBEL+Xwhf1ks5IvFQiF/dV0s3IXTuSuAS1+IolgoFEVRDIVCb398u/37h+t9kd+8vPgghjZCSz98/+7dT4uLi9+9ebO1vX0XFrKXAJPKiWVls9nNzc1gMOj/1e//xb/x/jc6HA0EAhsbG+vr60tLS8vLy2tra7ncbf7iCmCEv4t9Pl+p2O/3/exbf7/2x1ZodW01GAyurq76fL5AILCyssIwTDl+k7vMA4xwfneM/6hKNnuRByIfY9EoTUdpmqbD4XAkHImEI+F/aGfnL0OXFaUju/uHwOz88+oaCYziEIJCKAqiKISgcBkExf4FDMMIaXWNZG7+OWB3UvUN9a1KGUY8wFFCihIEJkWlzZi0+T6ENiJYI1wBbYSx+xBaDyKNKFEtkTjdXsAx44Hghv7Hmj5SN6BTOfRq6yNNb7fOYtZ2tDXpNc2d7XJ9u9zwsFWnlZt1iiGTcsCoqq2rdbrnAYfLc69KYu3RvKQM38wZF2Z0TjtJUVZq5omXsno9I3PjnW6bxj3V7/XYPFM9C56hhQmzFAcnXB5gbIqCiTqP69HLmc9e2B9/NTnwwj7gdVhmRk2uUfPseLfT2jH9tMM9Rs6Oka5npkmrYdamf0CA49MUMDpJ6bpxx6hharDbMWicHvrU9bnF8URv69UMW9psPWpbX7u1R/1sUGfrax/p0w5b1LZeDQw12J0UMOHyQDDSolCCMAQhMIxAcKnNOIYTt+AYjqMYdruIE9KmGkltqWFOtxeUtbb3D3/ZaXhKWpSDIy2tCqJZ1iRrkas0cpVGplTLFCqZUi1v08gUqmaFSq5S19bXu6gvgEkXVVVb1yRr0RNStVyByJUohoEwAsIIhGAVwNIVwCAUBxEURFAEJ+5VfWJ3uoFXr7/VarUmktSZzAZjWWbSRHaZzF1GM1nyZYy3mMykuav7YUfH169eA2eskOJ5juN5rjRyZc9xHMtVxFcmtkRli2dZLpXij5M8kMpe/v+HcfsZJNgMm84dJYWD09RBgj9I8MfJ9AmTjieF2GkqnhSOksLhmXCQ4GOnqVMuk2AzR0nhmEkfJFJ/AnDHjZJagfOUAAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="JavaScript Scope"\n title=""\n src="/static/72b34894fc61cc71d76bfcda521e1c65/2e575/javascript-scope-2.png"\n srcset="/static/72b34894fc61cc71d76bfcda521e1c65/b9440/javascript-scope-2.png 140w,\n/static/72b34894fc61cc71d76bfcda521e1c65/6d9bb/javascript-scope-2.png 280w,\n/static/72b34894fc61cc71d76bfcda521e1c65/2e575/javascript-scope-2.png 560w,\n/static/72b34894fc61cc71d76bfcda521e1c65/f0f46/javascript-scope-2.png 840w,\n/static/72b34894fc61cc71d76bfcda521e1c65/c2d7e/javascript-scope-2.png 1000w"\n sizes="(max-width: 560px) 100v
1w, 560px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}}),"\n",n.createElement(o.p,null,"At a higher level, the accessibility of variables is limited by the scope where they're created. You are free to access the variable defined within its scope. But outside of its scope, the variable is inaccessible."),"\n",n.createElement(o.p,null,"Now, let's put down a general definition of scope:"),"\n",n.createElement(o.blockquote,null,"\n",n.createElement(o.p,null,n.createElement(o.em,null,"The scope")," is a policy that manages the accessibility of variables."),"\n"),"\n",n.createElement(o.h2,{id:"2-block-scope",style:{position:"relative"}},n.createElement(o.a,{href:"#2-block-scope","aria-label":"2 block scope 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. Block scope"),"\n",n.createElement(o.p,null,"A code block in JavaScript defines a scope for variables declared using ",n.createElement(o.code,null,"let")," and ",n.createElement(o.code,null,"const"),":"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"if",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"true",props:{style:{color:"#D19A66"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:' // "if" block scope',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"message ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"'Hello'",props:{style:{color:"#98C379"}}},{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:"message",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// 'Hello'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{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:"message",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// throws ReferenceError",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"The first ",n.createElement(o.code,null,"console.log(message)")," correctly logs the variable because ",n.createElement(o.code,null,"message")," is accessed from the scope where it is defined."),"\n",n.createElement(o.p,null,"But the second ",n.createElement(o.code,null,"console.log(message)")," throws a reference error because ",n.createElement(o.code,null,"message")," variable is accessed outside of its scope: the variable doesn't exist here."),"\n",n.createElement(o.p,null,"The code block of ",n.createElement(o.code,null,"if"),", ",n.createElement(o.code,null,"for"),", ",n.createElement(o.code,null,"while")," statements also create a scope."),"\n",n.createElement(o.p,null,"In the following example ",n.createElement(o.code,null,"for")," loop defines a scope:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"for",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"const ",props:{style:{color:"#C678DD"}}},{content:"color ",props:{style:{color:"#E5C07B"}}},{content:"of",props:{style:{color:"#C678DD"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"'green'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'red'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'blue'",props:{style:{color:"#98C379"}}},{content:"]) {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:' // "for" block scope',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"message ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"'Hi'",props:{style:{color:"#98C379"}}},{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:"color",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// 'green', 'red', 'blue'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"message",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// 'Hi', 'Hi', 'Hi'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{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:"color",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// throws ReferenceError",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"message",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// throws ReferenceError",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"color")," and ",n.createElement(o.code,null,"message")," variables exist within the scope of ",n.createElement(o.code,null,"while")," code block."),"\n",n.createElement(o.p,null,"Same way the code block of ",n.createElement(o.code,null,"while")," statement creates a scope for its variables:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"while",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"/* condition */",props:{style:{color:"#7F848E",fontStyle:"italic"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]}
1,{tokens:[{content:' // "while" block scope',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"message ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"'Hi'",props:{style:{color:"#98C379"}}},{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:"message",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// 'Hi'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{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:"message",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// => throws ReferenceError",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"message")," is defined within ",n.createElement(o.code,null,"while()")," body, consequently ",n.createElement(o.code,null,"message")," is accessible only within ",n.createElement(o.code,null,"while()")," body."),"\n",n.createElement(o.p,null,"In JavaScript you can define standalone code blocks. The standalone code blocks also delimit a scope:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"{",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" // block scope",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"message ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"'Hello'",props:{style:{color:"#98C379"}}},{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:"message",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// 'Hello'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{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:"message",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// throws ReferenceError",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.h3,{id:"21-var-is-not-block-scoped",style:{position:"relative"}},n.createElement(o.a,{href:"#21-var-is-not-block-scoped","aria-label":"21 var is not block scoped 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 var is not block scoped"),"\n",n.createElement(o.p,null,"As seen in the previous section, the code block creates a scope for variables declared using ",n.createElement(o.code,null,"const")," and ",n.createElement(o.code,null,"let"),". However, that's not the case of variables declared using ",n.createElement(o.code,null,"var"),"."),"\n",n.createElement(o.p,null,"The snippet below declares a variable ",n.createElement(o.code,null,"count")," using a ",n.createElement(o.code,null,"var")," statement:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"if",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"true",props:{style:{color:"#D19A66"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:' // "if" block scope',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" var ",props:{style:{color:"#C678DD"}}},{content:"count ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"0",props:{style:{color:"#D19A66"}}},{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:"count",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// 0",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{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:"count",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// 0",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"count")," variable, as expected, is accessible within the scope of ",n.createElement(o.code,null,"if")," code block. However, ",n.createElement(o.code,null,"count")," variable is also accessible outside!"),"\n",n.createElement(o.p,null,"A ",n.createElement(o.em,null,"code block does not create a scope")," for ",n.createElement(o.code,null,"var")," variables, but a ",n.createElement(o.em,null,"function body does"),". Read the previous sentence again, and try to remember it."),"\n",n.createElement(o.p,null,"Let's continue on the function scope in the next section."),"\n",n.createElement(o.h2,{id:"3-function-scope",style:{position:"relative"}}
1,n.createElement(o.a,{href:"#3-function-scope","aria-label":"3 function scope 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. Function scope"),"\n",n.createElement(o.p,null,"A function in JavaScript defines a scope for variables declared using ",n.createElement(o.code,null,"var"),", ",n.createElement(o.code,null,"let")," and ",n.createElement(o.code,null,"const"),"."),"\n",n.createElement(o.p,null,"Let's declare a ",n.createElement(o.code,null,"var")," variable within a function body:"),"\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:"run",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:' // "run" function scope',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" var ",props:{style:{color:"#C678DD"}}},{content:"message ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"'Run, Forrest, Run!'",props:{style:{color:"#98C379"}}},{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:"message",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// 'Run, Forrest, Run!'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"run",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:"message",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// throws ReferenceError",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"run()")," function body creates a scope. The variable ",n.createElement(o.code,null,"message")," is accessible inside of the function scope, but inaccessible outside."),"\n",n.createElement(o.p,null,"Same way, a function body creates a scope for ",n.createElement(o.code,null,"let"),", ",n.createElement(o.code,null,"const")," and even function declarations."),"\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:"run",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:' // "run" function scope',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"two ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"2",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" let ",props:{style:{color:"#C678DD"}}},{content:"count ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"0",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" function ",props:{style:{color:"#C678DD"}}},{content:"run2",props:{style:{color:"#61AFEF"}}},{content:"() {}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{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:"two",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// 2",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"count",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// 0",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"run2",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// function",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"run",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:"two",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// throws ReferenceError",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"count",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// throws ReferenceError",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"run2",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// throws ReferenceError",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.h2,{id:"4-module-scope",style:{position:"relative"}}
1,n.createElement(o.a,{href:"#4-module-scope","aria-label":"4 module scope 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. Module scope"),"\n",n.createElement(o.p,null,"ES2015 module also creates a scope for variables, functions, classes."),"\n",n.createElement(o.p,null,"The module ",n.createElement(o.code,null,"circle")," defines a constant ",n.createElement(o.code,null,"pi")," (for some internal usage):"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:'// "circle" module scope',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"pi ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"3.14159",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{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:"pi",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// 3.14159",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"// Usage of pi",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"pi")," variable is declared within the scope of ",n.createElement(o.code,null,"circle")," module. Also, the variable ",n.createElement(o.code,null,"pi")," is not exported from the module."),"\n",n.createElement(o.p,null,"Then the ",n.createElement(o.code,null,"circle")," module is imported:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"import ",props:{style:{color:"#C678DD"}}},{content:"'./circle'",props:{style:{color:"#98C379"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{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:"pi",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// throws ReferenceError",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"The variable ",n.createElement(o.code,null,"pi")," is not accessible outside of ",n.createElement(o.code,null,"circle")," module (unless explicitly exported using ",n.createElement(o.code,null,"export"),")."),"\n",n.createElement(o.p,null,"The module scope makes the module encapsulated. Every private variable (that's not exported) remains an internal detail of the module, and the module scope protects these variables from being accessed outside."),"\n",n.createElement(o.p,null,"Looking from another angle, the scope is an encapsulation mechanism for code blocks, functions, and modules."),"\n",n.createElement(o.h2,{id:"5-scopes-can-be-nested",style:{position:"relative"}},n.createElement(o.a,{href:"#5-scopes-can-be-nested","aria-label":"5 scopes can be nested 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. Scopes can be nested"),"\n",n.createElement(o.p,null,"An interesting property of scopes is that they can be nested."),"\n",n.createElement(o.p,null,"In the following example the function ",n.createElement(o.code,null,"run()")," creates a scope, and inside an ",n.createElement(o.code,null,"if")," condition code block creates another scope:"),"\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:"run",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:' // "run" function scope',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"message ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"'Run, Forrest, Run!'",props:{style:{color:"#98C379"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" if",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"true",props:{style:{color:"#D19A66"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:' // "if" code block scope',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" const ",props:{style:{color:"#C678DD"}}},{content:"friend ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"'Bubba'",props:{style:{color:"#98C379"}}},{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:"message",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// 'Run, Forrest, Run!'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{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:"friend",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// throws ReferenceError",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"run",props:{style:{color:"#61AFEF"}}},{content:"();",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"if")," code block scope is nested inside the ",n.createElement(o.code,null,"run()")," function scope. Scopes of any type (code block, function, module) can be nested."),"\n",n.createElement(o.p,null,"The scope contained within another scope is named ",n.createElement(o.em,null,"inner scope"),". In the example, ",n.createElement(o.code,null,"if")," code block scope is an inner scope of ",n.createElement(o.code,null,"run()")," function scope."),"\n",n.createElement(o.p,null,"The scope that wraps another scope is named ",n.createElement(o.em,null,"outer scope"),". In the example, ",n.createElement(o.code,null,"run()")," function scope is an outer scope to ",n.createElement(o.code,null,"if")," code block scope."),"\n",n.createElement(o.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 560px; "\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/c0a319b3b08ab2c6e9a5aecef9e2e8e2/c2d7e/javascript-nested-scopes.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 120%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEsElEQVR42q2V2U8bRxzHV60azkCLMbZBHLGdg1yUNFIOLpsjB4TL63u9NsYmIUoe+r+QPyN9C0kDSV/TVmqlqlDSBEK4wQc2wVxJyKfaMYrap/QhI330nZmd/c7vtzOzI/0xs8ZCbIPV9QzzaxvMLKeYWVrn5WKWmeV1ZldSQl8sJJmaiwuezycE2vjZlbTw+O3FClJiY5vPVeLpLSTNWSv7H/Z5/26f1OQOqakdkr9vk/p7m19+/pWnP/3E47Exxsef8OzZM+7f/4EHD0YZHR1ld3ePDx+yhlqWkpaeVt7v77O/v8/bzHv20u/Yib1lb/MdyWSSWCxGIpEQqrWXlpZYXV0lFo+LdzS0knyzjfRqOfXZUk5ndpHmY5vcuzeC7PISCkcIBMOooTCh0ADBUAhV6AChgfBHgkIHBeFIFLfXz8jICOmtt0hzsU2cTpnc3C8wlBVjLCtCV1JIXnEJxTo9RUVFFBYWcignh5zcXHI+6iFBXn4ukiThkGXWN/eQVlPbqAGFCnMNZ2xXONXUJqi+dJVjLV1YL7RhudhOZX0TlfWNVJ+3Ca357rrAerEP3dHLIpvEm12kldQ2is9DnsnCqd4Bajt9WDuDmLsi1FwfxNI9hPmKF3PnANbem5ivqVhuRDB3RbF03+LojSF05zsJBEMkNcOFeAbF76Wg3MyJ6z6OdTiosjs50qVQH/RT3RGgqqWPSpuTmqsBKltkqto8Wdp91LR7KPnWTiAYJJXZQ5qPZwgIQwsntOhanRxvcnJJ7qFB7afich9VzX1UNvVS2dgj6jXNvRxp7hFY7DLFZ20iwrRmqC2KZphnMtPq8SGrbmSvB/+wh76gm17FTY/fSc+B3vA48AddBAfcqKoDJeiitN6GIlLeQZpZfYOqGRrNdHg8RIZdhIZd+O968Eb9BG4P4r+p4Bt0odwOo9yJ4h0K4Bl
1w4wo4cIfclJ2zC8OEZji9vIGqeMk1mrnm83Pnbphbd0IMfh/hdkQhGvXjjXgJRDz4hxTU4SCKNlHEiz/swhd2oz+XTXl1fQtpemVDRFhQbqXBGaRDdmGTvfhkF6rsoLm/H7vDQavsxK7VD9p2WaZVlrHJLkrqbOIALCYySLNr2W9YWGGhps2D8VIXhsvdRC7YcVxsp6Sxn4qGXkwNvZRrNPZltaFP1CtbnGJRtH24nMwgLSa2xD7UVtnaHcHcHaW2J8qZNhdHbDLmDp/gSLvnQL1i4mq7k8rmfmpa3RTX2VFDIWLpbc0wQzCoUmIox3T8LKbjdQK95SQGy0mMVo1T/yLbZ7DUYjDXUn70NPml5QQCgey20Y5eQA2QX1BAWZkenU5HqU6HXq8XlJaW/het7wDtucFgJDcvD1VVWUttI8XSOyiKwmFTFZbTdZitVvRGE3qDKaufwFheQW7B4axhegdJO9A+n4+v8gvRm8rR6cv4RlfK1yWlQj+FNv7LQzkiKO2/IK2ltpiY+JOHDx8xNv6Ex2PjQv8P2pUw/uQpo49+ZHJygoX4JtJKcvPzXlLTS+usrW8ys5Tkr9cxwdTrGNOLSV4tr/NyIcHUXIwXCwleLmav0cnZGM/n4syvpZld0a7bhBg7MRvnH5D9tjhcOnj4AAAAAElFTkSuQmCC\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="JavaScript Nested Scopes"\n title=""\n src="/static/c0a319b3b08ab2c6e9a5aecef9e2e8e2/2e575/javascript-nested-scopes.png"\n srcset="/static/c0a319b3b08ab2c6e9a5aecef9e2e8e2/b9440/javascript-nested-scopes.png 140w,\n/static/c0a319b3b08ab2c6e9a5aecef9e2e8e2/6d9bb/javascript-nested-scopes.png 280w,\n/static/c0a319b3b08ab2c6e9a5aecef9e2e8e2/2e575/javascript-nested-scopes.png 560w,\n/static/c0a319b3b08ab2c6e9a5aecef9e2e8e2/f0f46/javascript-nested-scopes.png 840w,\n/static/c0a319b3b08ab2c6e9a5aecef9e2e8e2/c2d7e/javascript-nested-scopes.png 1000w"\n sizes="(max-width: 560px) 100v
1w, 560px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}}),"\n",n.createElement(o.p,null,"What about the variable's accessibility? Here's one simple rule to remember:"),"\n",n.createElement(o.blockquote,null,"\n",n.createElement(o.p,null,"The ",n.createElement(o.em,null,"inner scope")," can access the variables of its ",n.createElement(o.em,null,"outer scope"),"."),"\n"),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"message")," variable, which is a part of the ",n.createElement(o.code,null,"run()")," function scope (outer scope), is accessible inside ",n.createElement(o.code,null,"if")," code block scope (inner scope)."),"\n",n.createElement(o.h2,{id:"6-global-scope",style:{position:"relative"}},n.createElement(o.a,{href:"#6-global-scope","aria-label":"6 global scope 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. Global scope"),"\n",n.createElement(o.p,null,"The global scope is the outermost scope. It is accessible from any inner (aka ",n.createElement(o.em,null,"local"),") scope."),"\n",n.createElement(o.p,null,"In a browser environment, the topmost scope of JavaScript file loaded using ",n.createElement(o.code,null,"<script>")," tag is a global scope:"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#ABB2BF"}}},{content:"script ",props:{style:{color:"#E06C75"}}},{content:"src",props:{style:{color:"#D19A66"}}},{content:"=",props:{style:{color:"#ABB2BF"}}},{content:'"myScript.js"',props:{style:{color:"#98C379"}}},{content:"></",props:{style:{color:"#ABB2BF"}}},{content:"script",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]}],lang:"html"},annotations:[]}]}),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"// myScript.js",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:'// "global" scope',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"counter ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(o.p,null,"A variable declared inside the global scope is named ",n.createElement(o.em,null,"global")," variable. Global variables are accessible from any scope."),"\n",n.createElement(o.p,null,"In the previous code snippet, ",n.createElement(o.code,null,"counter")," is a global variable. This variable can be accessed from any place of the webpage's JavaScript."),"\n",n.createElement(o.p,null,"The global scope is a mechanism that lets the host of JavaScript (browser, Node) supply applications with host-specific functions as global variables."),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"window")," and ",n.createElement(o.code,null,"document"),", for example, are global variables supplied by the browser. In a Node environment, you can access ",n.createElement(o.code,null,"process")," object as a global variable."),"\n",n.createElement(o.h2,{id:"7-lexical-scope",style:{position:"relative"}},n.createElement(o.a,{href:"#7-lexical-scope","aria-label":"7 lexical scope 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>'}})),"7. Lexical scope"),"\n",n.createElement(o.p,null,"Let's define 2 functions, having the function ",n.createElement(o.code,null,"innerFunc()")," is nested inside ",n.createElement(o.code,null,"outerFunc()"),"."),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"7,14",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"outerFunc",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" // the outer scope",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" let ",props:{style:{color:"#C678DD"}}},{content:"outerVar ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"'I am from outside!'",props:{style:{color:"#98C379"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" function ",props:{style:{color:"#C678DD"}}},{content:"innerFunc",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" // the inner scope",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" console",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"log",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"outerVar",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// 'I am from outside!'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" return ",props:{style:{color:"#C678DD"}}},{content:"innerFunc",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:"inner ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"outerFunc",props:{style:{color:"#61AFEF"}}},{content:"();",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"inner",props:{style:{color:"#61AFEF"}}},{content:"();",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[{focus:"7,14",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.p,null,"Look at the last line of the snippet ",n.createElement(o.code,null,"inner()"),": the ",n.createElement(o.code,null,"innerFunc()")," invokation happens outside of ",n.createElement(o.code,null,"outerFunc()")," scope. Still, how does JavaScript understand that ",n.createElement(o.code,null,"outerVar")," inside ",n.createElement(o.code,null,"innerFunc()")," corresponds to the variable ",n.createElement(o.code,null,"outerVar")," of ",n.createElement(o.code,null,"outerFunc()"),"?"),"\n",n.createElement(o.p,null,"The answer is due to lexical scoping."),"\n",n.createElement(o.p,null,"JavaScript implements a scoping mechanism named lexical scoping (or static scoping). Lexical scoping means that the accessibility of variables is determined statically by the position of the variables within the nested function scopes: ",n.createElement(o.em,null,"the inner function scope can access variables from the outer function scope"),"."),"\n",n.createElement(o.p,null,"A formal definition of lexical scope:"),"\n",n.createElement(o.blockquote,null,"\n",n.createElement(o.p,null,"The ",n.createElement(o.em,null,"lexical scope")," consists of outer scopes determined statically."),"\n"),"\n",n.createElement(o.p,null,"In the example, the lexical scope of ",n.createElement(o.code,null,"innerFunc()")," consists of the scope of ",n.createElement(o.code,null,"outerFunc()"),"."),"\n",n.createElement(o.p,null,"Moreover, the ",n.createElement(o.code,null,"innerFunc()")," is a ",n.createElement(o.em,null,"closure")," because it captures the variable ",n.createElement(o.code,null,"outerVar")," from the lexical scope."),"\n",n.createElement(o.p,null,"If you'd like to master the closure concept, I highly recommend reading my post ",n.createElement(o.a,{href:"/javascript-closure/#4-the-closure"}
1,"A Simple Explanation of JavaScript Closures"),"."),"\n",n.createElement(o.h2,{id:"8-variables-isolation",style:{position:"relative"}},n.createElement(o.a,{href:"#8-variables-isolation","aria-label":"8 variables isolation 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>'}})),"8. Variables isolation"),"\n",n.createElement(o.p,null,"An immediate property of scope arises: the scope isolates the variables. And what's good different scopes can have variables with the same name."),"\n",n.createElement(o.p,null,"You can reuse common variables names (",n.createElement(o.code,null,"count"),", ",n.createElement(o.code,null,"index"),", ",n.createElement(o.code,null,"current"),", ",n.createElement(o.code,null,"value"),", etc) in different scopes without collisions."),"\n",n.createElement(o.p,null,n.createElement(o.code,null,"foo()")," and ",n.createElement(o.code,null,"bar()")," function scopes have their own, but same named, variables ",n.createElement(o.code,null,"count"),":"),"\n",n.createElement(c.Code,{codeConfig:a,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"4,10",focus:"",code:{lines:[{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"foo",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:' // "foo" function scope',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" let ",props:{style:{color:"#C678DD"}}},{content:"count ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"0",props:{style:{color:"#D19A66"}}},{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:"count",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// 0",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"function ",props:{style:{color:"#C678DD"}}},{content:"bar",props:{style:{color:"#61AFEF"}}},{content:"() {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:' // "bar" function scope',props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" let ",props:{style:{color:"#C678DD"}}},{content:"count ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"1",props:{style:{color:"#D19A66"}}},{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:"count",props:{style:{color:"#E06C75"}}},{content:"); ",props:{style:{color:"#ABB2BF"}}},{content:"// 1",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"foo",props:{style:{color:"#61AFEF"}}},{content:"();",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"bar",props:{style:{color:"#61AFEF"}}},{content:"();",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[{focus:"4,10",Component:c.annotations.mark}]}]}),"\n",n.createElement(o.h2,{id:"9-conclusion",style:{position:"relative"}},n.createElement(o.a,{href:"#9-conclusion","aria-label":"9 conclusion 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>'}})),"9. Conclusion"),"\n",n.createElement(o.p,null,"The scope is a policy that manages the availability of variables. A variable defined inside a scope is accessible only within that scope, but inaccessible outside."),"\n",n.createElement(o.p,null,"In JavaScript, scopes are created by code blocks, functions, modules."),"\n",n.createElement(o.p,null,"While ",n.createElement(o.code,null,"const")," and ",n.createElement(o.code,null,"let")," variables are scoped by code blocks, functions or modules, ",n.createElement(o.code,null,"var")," variables are scoped only by functions or modules."),"\n",n.createElement(o.p,null,"Scopes can be nested. Inside an inner scope you can access the variables of an outer scope."),"\n",n.createElement(o.p,null,"The lexical scope consists of the outer function scopes determined statically. Any function, no matter the place where being executed, can access the variables of its lexical scope (this is the concept of ",n.createElement(o.a,{href:"/javascript-closure/"},"closure"),")."),"\n",n.createElement(o.p,null,"Hopefully, my post has helped you understand the scope better!"))}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 d=t(12),u=t(5319),g=t(5893);function m(e){let{data:o,children:t}=e;const{featured:{popularPostsByCategory:n}}
1=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(u.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,g.jsx)(d.Z,{postRelativePath:a,post:c,popularPostsByCategory:i})}function f(e){return n.createElement(m,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.