https://dmitripavlutin.com/component---src-components-pages-post-f…y-creation-index-md-ddb6e82774605066fad3.js

1"use strict";(self.webpackChunkdmitri_pavlutin_blog=self.webpackChunkdmitri_pavlutin_blog||[]).push([[8531],{4834:function(e,t,o){o.r(t),o.d(t,{default:function(){return y}});var n=o(7294),r=o(1151),s=o(9794);const a={annotations:s.ds,Code:s.EK,InlineCode:s.ZM},c={staticMediaQuery:"not screen, (max-width: 768px)",theme:{name:"one-dark-pro",type:"dark",semanticHighlighting:!0,semanticTokenColors:{enumMember:{foreground:"#56b6c2"},"variable.constant":{foreground:"#d19a66"},"variable.defaultLibrary":{foreground:"#e5c07b"},"variable:dart":{foreground:"#d19a66"},"property:dart":{foreground:"#d19a66"},"annotation:dart":{foreground:"#d19a66"},"parameter.label:dart":{foreground:"#abb2bf"},macro:{foreground:"#d19a66"}},tokenColors:[{settings:{foreground:"#abb2bf",background:"#282c34"}},{scope:"meta.embedded",settings:{foreground:"#abb2bf"}},{name:"unison punctuation",scope:"punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison",settings:{foreground:"#e06c75"}},{name:"haskell variable generic-type",scope:"variable.other.generic-type.haskell",settings:{foreground:"#c678dd"}},{name:"haskell storage type",scope:"storage.type.haskell",settings:{foreground:"#d19a66"}},{name:"support.variable.magic.python",scope:"support.variable.magic.python",settings:{foreground:"#e06c75"}},{name:"punctuation.separator.parameters.python",scope:"punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python",settings:{foreground:"#abb2bf"}},{name:"variable.parameter.function.language.special.self.python",scope:"variable.parameter.function.language.special.self.python",settings:{foreground:"#e5c07b"}},{name:"variable.parameter.function.language.special.cls.python",scope:"variable.parameter.function.language.special.cls.python",settings:{foreground:"#e5c07b"}},{name:"storage.modifier.lifetime.rust",scope:"storage.modifier.lifetime.rust",settings:{foreground:"#abb2bf"}},{name:"support.function.std.rust",scope:"support.function.std.rust",settings:{foreground:"#61afef"}},{name:"entity.name.lifetime.rust",scope:"entity.name.lifetime.rust",settings:{foreground:"#e5c07b"}},{name:"variable.language.rust",scope:"variable.language.rust",settings:{foreground:"#e06c75"}},{name:"support.constant.edge",scope:"support.constant.edge",settings:{foreground:"#c678dd"}},{name:"regexp constant character-class",scope:"constant.other.character-class.regexp",settings:{foreground:"#e06c75"}},{name:"keyword.operator",scope:["keyword.operator.word"],settings:{foreground:"#c678dd"}},{name:"regexp operator.quantifier",scope:"keyword.operator.quantifier.regexp",settings:{foreground:"#d19a66"}},{name:"Text",scope:"variable.parameter.function",settings:{foreground:"#abb2bf"}},{name:"Comment Markup Link",scope:"comment markup.link",settings:{foreground:"#5c6370"}},{name:"markup diff",scope:"markup.changed.diff",settings:{foreground:"#e5c07b"}},{name:"diff",scope:"meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff",settings:{foreground:"#61afef"}},{name:"inserted.diff",scope:"markup.inserted.diff",settings:{foreground:"#98c379"}},{name:"deleted.diff",scope:"markup.deleted.diff",settings:{foreground:"#e06c75"}},{name:"c++ function",scope:"meta.function.c,meta.function.cpp",settings:{foreground:"#e06c75"}},{name:"c++ block",scope:"punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c",settings:{foreground:"#abb2bf"}}

1,{name:"js/ts punctuation separator key-value",scope:"punctuation.separator.key-value",settings:{foreground:"#abb2bf"}},{name:"js/ts import keyword",scope:"keyword.operator.expression.import",settings:{foreground:"#61afef"}},{name:"math js/ts",scope:"support.constant.math",settings:{foreground:"#e5c07b"}},{name:"math property js/ts",scope:"support.constant.property.math",settings:{foreground:"#d19a66"}},{name:"js/ts variable.other.constant",scope:"variable.other.constant",settings:{foreground:"#e5c07b"}},{name:"java type",scope:["storage.type.annotation.java","storage.type.object.array.java"],settings:{foreground:"#e5c07b"}},{name:"java source",scope:"source.java",settings:{foreground:"#e06c75"}},{name:"java modifier.import",scope:"punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java",settings:{foreground:"#abb2bf"}},{name:"java modifier.import",scope:"meta.method.java",settings:{foreground:"#61afef"}},{name:"java modifier.import",scope:"storage.modifier.import.java,storage.type.java,storage.type.generic.java",settings:{foreground:"#e5c07b"}},{name:"java instanceof",scope:"keyword.operator.instanceof.java",settings:{foreground:"#c678dd"}},{name:"java variable.name",scope:"meta.definition.variable.name.java",settings:{foreground:"#e06c75"}},{name:"operator logical",scope:"keyword.operator.logical",settings:{foreground:"#56b6c2"}},{name:"operator bitwise",scope:"keyword.operator.bitwise",settings:{foreground:"#56b6c2"}},{name:"operator channel",scope:"keyword.operator.channel",settings:{foreground:"#56b6c2"}},{name:"support.constant.property-value.scss",scope:"support.constant.property-value.scss,support.constant.property-value.css",settings:{foreground:"#d19a66"}},{name:"CSS/SCSS/LESS Operators",scope:"keyword.operator.css,keyword.operator.scss,keyword.operator.less",settings:{foreground:"#56b6c2"}},{name:"css color standard name",scope:"support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss",settings:{foreground:"#d19a66"}},{name:"css comma",scope:"punctuation.separator.list.comma.css",settings:{foreground:"#abb2bf"}},{name:"css attribute-name.id",scope:"support.constant.color.w3c-standard-color-name.css",settings:{foreground:"#d19a66"}},{name:"css property-name",scope:"support.type.vendored.property-name.css",settings:{foreground:"#56b6c2"}},{name:"js/ts module",scope:"support.module.node,support.type.object.module,support.module.node",settings:{foreground:"#e5c07b"}},{name:"entity.name.type.module",scope:"entity.name.type.module",settings:{foreground:"#e5c07b"}},{name:"js variable readwrite",scope:"variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node",settings:{foreground:"#e06c75"}},{name:"js/ts json",scope:"support.constant.json",settings:{foreground:"#d19a66"}},{name:"js/ts Keyword",scope:["keyword.operator.expression.instanceof","keyword.operator.new","keyword.operator.ternary","keyword.operator.optional","keyword.operator.expression.keyof"],settings:{foreground:"#c678dd"}},{name:"js/ts console",scope:"support.type.object.console",settings:{foreground:"#e06c75"}},{name:"js/ts support.variable.property.process",scope:"support.variable.property.process",settings:{foreground:"#d19a66"}},{name:"js console function",scope:"entity.name.function,support.function.console",settings:{foreground:"#61afef"}},{name:"keyword.operator.misc.rust",scope:"keyword.operator.misc.rust",settings:{foreground:"#abb2bf"}},{name:"keyword.operator.sigil.rust",scope:"keyword.operator.sigil.rust",settings:{foreground:"#c678dd"}},{name:"operator",scope:"keyword.operator.delete",settings:{foreground:"#c678dd"}},{name:"js dom",scope:"support.type.object.dom",settings:{foreground:"#56b6c2"}},{name:"js dom variable",scope:"support.variable.dom,support.variable.property.dom",settings:{foreground:"#e06c75"}},{name:"keyword.operator",scope:"keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational",settings:{foreground:"#56b6c2"}},{name:"C operator assignment",scope:"keyword.operator.assignment.c,

1keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp",settings:{foreground:"#c678dd"}},{name:"Punctuation",scope:"punctuation.separator.delimiter",settings:{foreground:"#abb2bf"}},{name:"Other punctuation .c",scope:"punctuation.separator.c,punctuation.separator.cpp",settings:{foreground:"#c678dd"}},{name:"C type posix-reserved",scope:"support.type.posix-reserved.c,support.type.posix-reserved.cpp",settings:{foreground:"#56b6c2"}},{name:"keyword.operator.sizeof.c",scope:"keyword.operator.sizeof.c,keyword.operator.sizeof.cpp",settings:{foreground:"#c678dd"}},{name:"python parameter",scope:"variable.parameter.function.language.python",settings:{foreground:"#d19a66"}},{name:"python type",scope:"support.type.python",settings:{foreground:"#56b6c2"}},{name:"python logical",scope:"keyword.operator.logical.python",settings:{foreground:"#c678dd"}},{name:"pyCs",scope:"variable.parameter.function.python",settings:{foreground:"#d19a66"}},{name:"python block",scope:"punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python",settings:{foreground:"#abb2bf"}},{name:"python function-call.generic",scope:"meta.function-call.generic.python",settings:{foreground:"#61afef"}},{name:"python placeholder reset to normal string",scope:"constant.character.format.placeholder.other.python",settings:{foreground:"#d19a66"}},{name:"Operators",scope:"keyword.operator",settings:{foreground:"#abb2bf"}},{name:"Compound Assignment Operators",scope:"keyword.operator.assignment.compound",settings:{foreground:"#c678dd"}},{name:"Compound Assignment Operators js/ts",scope:"keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts",settings:{foreground:"#56b6c2"}},{name:"Keywords",scope:"keyword",settings:{foreground:"#c678dd"}},{name:"Namespaces",scope:"entity.name.namespace",settings:{foreground:"#e5c07b"}},{name:"Variables",scope:"variable",settings:{foreground:"#e06c75"}},{name:"Variables",scope:"variable.c",settings:{foreground:"#abb2bf"}},{name:"Language variables",scope:"variable.language",settings:{foreground:"#e5c07b"}},{name:"Java Variables",scope:"token.variable.parameter.java",settings:{foreground:"#abb2bf"}},{name:"Java Imports",scope:"import.storage.java",settings:{foreground:"#e5c07b"}},{name:"Packages",scope:"token.package.keyword",settings:{foreground:"#c678dd"}},{name:"Packages",scope:"token.package",settings:{foreground:"#abb2bf"}},{name:"Functions",scope:["entity.name.function","meta.require","support.function.any-method","variable.function"],settings:{foreground:"#61afef"}},{name:"Classes",scope:"entity.name.type.namespace",settings:{foreground:"#e5c07b"}},{name:"Classes",scope:"support.class, entity.name.type.class",settings:{foreground:"#e5c07b"}},{name:"Class name",scope:"entity.name.class.identifier.namespace.type",settings:{foreground:"#e5c07b"}},{name:"Class name",scope:["entity.name.class","variable.other.class.js","variable.other.class.ts"],settings:{foreground:"#e5c07b"}},{name:"Class name php",scope:"variable.other.class.php",settings:{foreground:"#e06c75"}},{name:"Type Name",scope:"entity.name.type",settings:{foreground:"#e5c07b"}},{name:"Keyword Control",scope:"keyword.control",settings:{foreground:"#c678dd"}},{name:"Control Elements",scope:"control.elements, keyword.operator.less",settings:{foreground:"#d19a66"}},{name:"Methods",scope:"keyword.other.special-method",settings:{foreground:"#61afef"}},{name:"Storage",scope:"storage",settings:{foreground:"#c678dd"}},{name:"Storage JS TS",scope:"token.storage",settings:{foreground:"#c678dd"}},{name:"Source Js Keyword Operator Delete,source Js Keyword Operator In,source Js Keyword Operator Of,source Js Keyword Operator Instanceof,source Js Keyword Operator New,source Js Keyword Operator Typeof,source Js Keyword Operator Void",scope:"keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void",settings:{foreground:"#c678dd"}},{name:"Java Storage",scope:"token.storage.type.java",settings:{foreground:"#e5c07b"}},{name:"Support",scope:"support.function",settings:{foreground:"#56b6c2"}},{name:"Support type",scope:"support.type.property-name",settings:{foreground:"#abb2bf"}},{name:"Support type",scope:"support.constant.property-value",settings:{foreground:"#abb2bf"}},{name:"Support type",scope:"support.constant.font-name",settings:{foreground:"#d19a66"}},{name:"Meta tag",scope:"meta.tag",settings:{foreground:"#abb2bf"}},{name:"Strings",scope:"string",settings:{foreground:"#98c379"}},{name:"Constant other symbol",scope:"constant.other.symbol",settings:{foreground:"#56b6c2"}},{name:"Integers",scope:"constant.numeric",settings:{foreground:"#d19a66"}},{name:"Constants",scope:"constant",settings:{foreground:"#d19a66"}},{name:"Constants",scope:"punctuation.definition.constant",settings:{foreground:"#d19a66"}},{name:"Tags",scope:"entity.name.tag",settings:{foreground:"#e06c75"}},{name:"Attributes",scope:"entity.other.attribute-name",settings:{foreground:"#d19a66"}},{name:"Attribute IDs",scope:"entity.other.attribute-name.id",settings:{fontStyle:"normal",foreground:"#61afef"}},{name:"Attribute class",scope:"entity.other.attribute-name.class.css",settings:{fontStyle:"normal",foreground:"#d19a66"}},{name:"Selector",scope:"meta.selector",settings:{foreground:"#c678dd"}},{name:"Headings",scope:"markup.heading",settings:{foreground:"#e06c75"}},{name:"Headings",scope:"markup.heading punctuation.definition.heading, entity.name.section",settings:{foreground:"#61afef"}},{name:"Units",scope:"keyword.other.unit",settings:{foreground:"#e06c75"}},{name:"Bold",scope:"markup.bold,todo.bold",settings:{foreground:"#d19a66"}},{name:"Bold",scope:"punctuation.definition.bold",settings:{foreground:"#e5c07b"}},{name:"markup Italic",scope:"markup.italic, punctuation.definition.italic,todo.emphasis",settings:{foreground:"#c678dd"}},{name:"emphasis md",scope:"emphasis md",settings:{foreground:"#c678dd"}},{name:"[VSCODE-CUSTOM] Markdown headings",scope:"entity.name.section.markdown",settings:{foreground:"#e06c75"}},{name:"[VSCODE-CUSTOM] Markdown heading Punctuation Definition",scope:"punctuation.definition.heading.markdown",settings:{foreground:"#e06c75"}},{name:"punctuation.definition.list.begin.markdown",scope:"punctuation.definition.list.begin.markdown",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Markdown heading setext",scope:"markup.heading.setext",settings:{foreground:"#abb2bf"}},{name:"[VSCODE-CUSTOM] Markdown Punctuation Definition Bold",scope:"punctuation.definition.bold.markdown",settings:{foreground:"#d19a66"}},{name:"[VSCODE-CUSTOM] Markdown Inline Raw",scope:"markup.inline.raw.markdown",settings:{foreground:"#98c379"}},{name:"[VSCODE-CUSTOM] Markdown Inline Raw",scope:"markup.inline.raw.string.markdown",settings:{foreground:"#98c379"}},{name:"[VSCODE-CUSTOM] Markdown Inline Raw punctuation",scope:"punctuation.definition.raw.markdown",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Markdown List Punctuation Definition",scope:"punctuation.definition.list.markdown",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Markdown Punctuation Definition String",scope:["punctuation.definition.string.begin.markdown","punctuation.definition.string.end.markdown","punctuation.definition.metadata.markdown"],settings:{foreground:"#e06c75"}},{name:"beginning.punctuation.definition.list.markdown",scope:["beginning.punctuation.definition.list.markdown"],settings:{foreground:"#e06c75"}},{name:"[VSCODE-CUSTOM] Markdown Punctuation Definition Link",scope:"punctuation.definition.metadata.markdown",settings:{foreground:"#e06c75"}},{name:"[VSCODE-CUSTOM] Markdown Underline Link/Image",scope:"markup.underline.link.markdown,markup.underline.link.image.markdown",settings:{foreground:"#c678dd"}},{name:"[VSCODE-CUSTOM] Markdown Link Title/Description",scope:"string.other.link.title.markdown,string.other.link.description.markdown",settings:{foreground:"#61afef"}},{name:"[VSCODE-CUSTOM] Asciidoc Inline Raw",scope:"markup.raw.monospace.asciidoc",settings:{foreground:"#98c379"}},{name:"[VSCODE-CUSTOM] Asciidoc Inline Raw Punctuation Definition",scope:"punctuation.definition.asciidoc",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Asciidoc List Punctuation Definition",scope:"markup.list.asciidoc",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Asciidoc underline link",scope:"markup.link.asciidoc,markup.other.url.asciidoc",settings:{foreground:"#c678dd"}},{name:"[VSCODE-CUSTOM] Asciidoc link name",scope:"string.unquoted.asciidoc,markup.other.url.asciidoc",settings:{foreground:"#61afef"}},{name:"Regular Expressions",scope:"string.regexp",settings:{foreground:"#56b6c2"}},{name:"Escape Characters",scope:"constant.character.escape",settings:{foreground:"#56b6c2"}},{name:"Embedded",scope:"punctuation.section.embedded, variable.

1interpolation",settings:{foreground:"#e06c75"}},{name:"Embedded",scope:"punctuation.section.embedded.begin,punctuation.section.embedded.end",settings:{foreground:"#c678dd"}},{name:"illegal",scope:"invalid.illegal",settings:{foreground:"#ffffff"}},{name:"illegal",scope:"invalid.illegal.bad-ampersand.html",settings:{foreground:"#abb2bf"}},{name:"Broken",scope:"invalid.broken",settings:{foreground:"#ffffff"}},{name:"Deprecated",scope:"invalid.deprecated",settings:{foreground:"#ffffff"}},{name:"Unimplemented",scope:"invalid.unimplemented",settings:{foreground:"#ffffff"}},{name:"Source Json Meta Structure Dictionary Json > String Quoted Json",scope:"source.json meta.structure.dictionary.json > string.quoted.json",settings:{foreground:"#e06c75"}},{name:"Source Json Meta Structure Dictionary Json > String Quoted Json > Punctuation String",scope:"source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string",settings:{foreground:"#e06c75"}},{name:"Source Json Meta Structure Dictionary Json > Value Json > String Quoted Json,source Json Meta Structure Array Json > Value Json > String Quoted Json,source Json Meta Structure Dictionary Json > Value Json > String Quoted Json > Punctuation,source Json Meta Structure Array Json > Value Json > String Quoted Json > Punctuation",scope:"source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation",settings:{foreground:"#98c379"}},{name:"Source Json Meta Structure Dictionary Json > Constant Language Json,source Json Meta Structure Array Json > Constant Language Json",scope:"source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json",settings:{foreground:"#56b6c2"}},{name:"[VSCODE-CUSTOM] JSON Property Name",scope:"support.type.property-name.json",settings:{foreground:"#e06c75"}},{name:"[VSCODE-CUSTOM] JSON Punctuation for Property Name",scope:"support.type.property-name.json punctuation",settings:{foreground:"#e06c75"}},{name:"laravel blade tag",scope:"text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade",settings:{foreground:"#c678dd"}},{name:"laravel blade @",scope:"text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade",settings:{foreground:"#c678dd"}},{name:"use statement for other classes",scope:"support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php",settings:{foreground:"#e5c07b"}},{name:"error suppression",scope:"keyword.operator.error-control.php",settings:{foreground:"#c678dd"}},{name:"php instanceof",scope:"keyword.operator.type.php",settings:{foreground:"#c678dd"}},{name:"style double quoted array index normal begin",scope:"punctuation.section.array.begin.php",settings:{foreground:"#abb2bf"}},{name:"style double quoted array index normal end",scope:"punctuation.section.array.end.php",settings:{foreground:"#abb2bf"}},{name:"php illegal.non-null-typehinted",scope:"invalid.illegal.non-null-typehinted.php",settings:{foreground:"#f44747"}},{name:"php types",scope:"storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php",settings:{foreground:"#e5c07b"}},{name:"php call-function",scope:"meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php",settings:{foreground:"#61afef"}},{name:"php function-resets",scope:"punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php",settings:{foreground:"#abb2bf"}},{name:"support php constants",scope:"support.constant.core.rust",settings:{foreground:"#d19a66"}},{name:"support php constants",scope:"support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php",settings:{foreground:"#d19a66"}},{name:"php goto",scope:"entity.name.goto-label.php,support.other.php",settings:{foreground:"#61afef"}},{name:"php logical/bitwise operator",scope:"keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php",settings:{foreground:"#56b6c2"}},{name:"php regexp operator",scope:"keyword.operator.regexp.php",settings:{foreground:"#c678dd"}},{name:"php comparison",scope:"keyword.operator.comparison.php",settings:{foreground:"#56b6c2"}},{name:"php heredoc/nowdoc",scope:"keyword.operator.heredoc.php,keyword.operator.nowdoc.php",settings:{foreground:"#c678dd"}},{name:"python function decorator @",scope:"meta.function.decorator.python",settings:{foreground:"#61afef"}},{name:"python function support",scope:"support.token.decorator.python,meta.function.decorator.identifier.python",settings:{foreground:"#56b6c2"}},{name:"parameter function js/ts",scope:"function.parameter",settings:{foreground:"#abb2bf"}},{name:"brace function",scope:"function.brace",settings:{foreground:"#abb2bf"}},{name:"parameter function ruby cs",scope:"function.parameter.ruby, function.parameter.cs",settings:{foreground:"#abb2bf"}},{name:"constant.language.symbol.ruby",scope:"constant.language.symbol.ruby",settings:{foreground:"#56b6c2"}},{name:"rgb-value",scope:"rgb-value",settings:{foreground:"#56b6c2"}},{name:"rgb value",scope:"inline-color-decoration rgb-value",settings:{foreground:"#d19a66"}},{name:"rgb value less",scope:"less rgb-value",settings:{foreground:"#d19a66"}},{name:"sass selector",scope:"selector.sass",settings:{foreground:"#e06c75"}},{name:"ts primitive/builtin types",scope:"support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx",settings:{foreground:"#e5c07b"}},{name:"block scope",scope:"block.scope.end,block.scope.begin",settings:{foreground:"#abb2bf"}},{name:"cs storage type",scope:"storage.type.cs",settings:{foreground:"#e5c07b"}},{name:"cs local variable",scope:"entity.name.variable.local.cs",settings:{foreground:"#e06c75"}},{scope:"token.info-token",settings:{foreground:"#61afef"}},{scope:"token.warn-token",settings:{foreground:"#d19a66"}},{scope:"token.error-token",settings:{foreground:"#f44747"}},{scope:"token.debug-token",settings:{foreground:"#c678dd"}},{name:"String interpolation",scope:["punctuation.definition.template-expression.begin","punctuation.definition.template-expression.end","punctuation.section.embedded"],settings:{foreground:"#c678dd"}},{name:"Reset JavaScript string interpolation expression",scope:["meta.template.expression"],settings:{foreground:"#abb2bf"}},{name:"Import module JS",scope:["keyword.operator.module"],settings:{foreground:"#c678dd"}},{name:"js Flowtype",scope:["support.type.type.flowtype"],settings:{foreground:"#61afef"}},{name:"js Flow",scope:["support.type.primitive"],settings:{foreground:"#e5c07b"}},{name:"js class prop",scope:["meta.property.object"],settings:{foreground:"#e06c75"}},{name:"js func parameter",scope:["variable.parameter.function.js"],settings:{foreground:"#e06c75"}},{name:"js template literals begin",scope:["keyword.other.template.begin"],settings:{foreground:"#98c379"}},{name:"js template literals end",scope:["keyword.other.template.end"],settings:{foreground:"#98c379"}},{name:"js template literals variable braces begin",scope:["keyword.other.substitution.begin"],settings:{foreground:"#98c379"}},{name:"js template literals variable braces end",scope:["keyword.other.substitution.end"],settings:{foreground:"#98c379"}},{name:"js operator.assignment",scope:["keyword.operator.assignment"],settings:{foreground:"#56b6c2"}},{name:"go operator",scope:["keyword.operator.assignment.go"],settings:{foreground:"#e5c07b"}},{name:"go operator",scope:["keyword.operator.arithmetic.go","keyword.operator.address.go"],settings:{foreground:"#c678dd"}},{name:"Go package name",scope:["entity.name.package.go"],settings:{foreground:"#e5c07b"}},{name:"elm prelude",scope:["support.type.prelude.elm"],settings:{foreground:"#56b6c2"}},{name:"elm constant",scope:["support.constant.elm"],settings:{foreground:"#d19a66"}},{name:"template literal",scope:["punctuation.quasi.element"],settings:{foreground:"#c678dd"}},{name:"html/pug (jade) escaped characters and entities",scope:["constant.character.entity"],settings:{foreground:"#e06c75"}},{name:"styling css pseudo-elements/classes to be able to differentiate from classes which are the same colour",scope:["entity.other.attribute-name.pseudo-element","entity.other.attribute-name.pseudo-class"],settings:{foreground:"#56b6c2"}},{name:"Clojure globals",scope:["entity.global.clojure"],settings:{foreground:"#e5c07b"}},{name:"Clojure symbols",scope:["meta.symbol.clojure"],settings:{foreground:"#e06c75"}},{name:"Clojure constants",scope:["constant.keyword.clojure"],settings:{foreground:"#56b6c2"}},{name:"CoffeeScript Function Argument",scope:["meta.arguments.coffee","variable.parameter.function.coffee"],settings:{foreground:"#e06c75"}},{name:"Ini Default Text",scope:["source.ini"],settings:{foreground:"#98c379"}},{name:"Makefile prerequisities",scope:["meta.scope.prerequisites.makefile"],settings:{foreground:"#e06c75"}},{name:"Makefile text colour",scope:["source.makefile"],settings:{foreground:"#e5c07b"}},{name:"Groovy import names",scope:["storage.modifier.import.groovy"],settings:{foreground:"#e5c07b"}},{name:"Groovy Methods",scope:["meta.method.groovy"],settings:{foreground:"#61afef"}},{name:"Groovy Variables",scope:["meta.definition.variable.name.groovy"],settings:{foreground:"#e06c75"}},{name:"Groovy Inheritance",scope:["meta.definition.class.inherited.classes.groovy"],settings:{foreground:"#98c379"}},{name:"HLSL Semantic",scope:["support.variable.semantic.hlsl"],settings:{foreground:"#e5c07b"}},{name:"HLSL Types",scope:["support.type.texture.hlsl","support.type.sampler.hlsl","support.type.object.hlsl","support.type.object.rw.hlsl","support.type.fx.hlsl","support.type.object.hlsl"],settings:{foreground:"#c678dd"}},{name:"SQL Variables",scope:["text.variable","text.bracketed"],settings:{foreground:"#e06c75"}},{name:"types",scope:["support.type.swift","support.type.vb.asp"],settings:{foreground:"#e5c07b"}},{name:"heading 1, keyword",scope:["entity.name.function.xi"],settings:{foreground:"#e5c07b"}},{name:"heading 2, callable",scope:["entity.name.class.xi"],settings:{foreground:"#56b6c2"}},{name:"heading 3, property",scope:["constant.character.character-class.regexp.xi"],settings:{foreground:"#e06c75"}},{name:"heading 4, type, class, interface",scope:["constant.regexp.xi"],settings:{foreground:"#c678dd"}},{name:"heading 5, enums, preprocessor, constant, decorator",scope:["keyword.control.xi"],settings:{foreground:"#56b6c2"}},{name:"heading 6, number",scope:["invalid.xi"],settings:{foreground:"#abb2bf"}},{name:"string",scope:["beginning.punctuation.definition.quote.markdown.xi"],settings:{foreground:"#98c379"}},{name:"comments",scope:["beginning.punctuation.definition.list.markdown.xi"],settings:{foreground:"#7f848e"}},{name:"link",scope:["constant.character.xi"],settings:{foreground:"#61afef"}},{name:"accent",scope:["accent.xi"],settings:{foreground:"#61afef"}},{name:"wikiword",scope:["wikiword.xi"],settings:{foreground:"#d19a66"}},{name:"language operators like '+', '-' etc",scope:["constant.other.color.rgb-value.xi"],settings:{foreground:"#ffffff"}},{name:"elements to dim",scope:["punctuation.definition.tag.xi"],settings:{foreground:"#5c6370"}},{name:"C++/C#",scope:["entity.name.label.cs","entity.name.scope-resolution.function.call","entity.name.scope-resolution.function.definition"],settings:{foreground:"#e5c07b"}},{name:"Markdown underscore-style headers",scope:["entity.name.label.cs","markup.heading.setext.1.markdown","markup.heading.setext.2.markdown"],settings:{foreground:"#e06c75"}},{name:"meta.brace.square",scope:[" meta.brace.square"],settings:{foreground:"#abb2bf"}},{name:"Comments",scope:"comment, punctuation.definition.comment",settings:{fontStyle:"italic",foreground:"#7f848e"}},{name:"[VSCODE-CUSTOM] Markdown Quote",scope:"markup.quote.markdown",settings:{foreground:"#5c6370"}},{name:"punctuation.definition.block.sequence.item.yaml",scope:"punctuation.definition.block.sequence.item.yaml",settings:{foreground:"#abb2bf"}},{scope:["constant.language.symbol.elixir","constant.language.symbol.double-quoted.elixir"],settings:{foreground:"#56b6c2"}},{scope:["entity.name.variable.parameter.cs"],settings:{foreground:"#e5c07b"}},{scope:["entity.name.variable.field.cs"],settings:{foreground:"#e06c75"}},{name:"Deleted",scope:"markup.deleted",settings:{foreground:"#e06c75"}}

1,{name:"Inserted",scope:"markup.inserted",settings:{foreground:"#98c379"}},{name:"Underline",scope:"markup.underline",settings:{fontStyle:"underline"}},{name:"punctuation.section.embedded.begin.php",scope:["punctuation.section.embedded.begin.php","punctuation.section.embedded.end.php"],settings:{foreground:"#BE5046"}},{name:"support.other.namespace.php",scope:["support.other.namespace.php"],settings:{foreground:"#abb2bf"}},{name:"variable.other.object",scope:["variable.other.object"],settings:{foreground:"#e5c07b"}},{name:"variable.other.constant.property",scope:["variable.other.constant.property"],settings:{foreground:"#e06c75"}},{name:"entity.other.inherited-class",scope:["entity.other.inherited-class"],settings:{foreground:"#e5c07b"}},{name:"c variable readwrite",scope:"variable.other.readwrite.c",settings:{foreground:"#e06c75"}},{name:"php scope",scope:"entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php",settings:{foreground:"#abb2bf"}},{name:"Assembly",scope:["constant.numeric.decimal.asm.x86_64"],settings:{foreground:"#c678dd"}},{scope:["support.other.parenthesis.regexp"],settings:{foreground:"#d19a66"}},{scope:["constant.character.escape"],settings:{foreground:"#e5c07b"}},{scope:["string.regexp"],settings:{foreground:"#e06c75"}},{name:"js/ts italic",scope:"entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super",settings:{fontStyle:"italic"}},{name:"comment",scope:"comment.line.double-slash,comment.block.documentation",settings:{fontStyle:"italic"}},{name:"Python Keyword Control",scope:"keyword.control.import.python,keyword.control.flow.python,keyword.operator.logical.python",settings:{fontStyle:"italic"}},{name:"markup.italic.markdown",scope:"markup.italic.markdown",settings:{fontStyle:"italic"}}],colors:{"activityBar.background":"#282c34","activityBar.foreground":"#d7dae0","activityBarBadge.background":"#4d78cc","activityBarBadge.foreground":"#f8fafd","badge.background":"#282c34","button.background":"#404754","button.secondaryBackground":"#30333d","button.secondaryForeground":"#c0bdbd","checkbox.border":"#404754","debugToolBar.background":"#21252b",descriptionForeground:"#abb2bf","diffEditor.insertedTextBackground":"#00809b33","dropdown.background":"#21252b","dropdown.border":"#21252b","editor.background":"#282c34","editor.findMatchBackground":"#42557b","editor.findMatchBorder":"#457dff","editor.findMatchHighlightBackgroun

1d":"#6199ff2f","editor.foreground":"#abb2bf","editorHoverWidget.highlightForeground":"#61afef","editorInlayHint.foreground":"#abb2bf","editorInlayHint.background":"#2c313c","editor.lineHighlightBackground":"#2c313c","editorLineNumber.activeForeground":"#abb2bf","editorGutter.addedBackground":"#109868","editorGutter.deletedBackground":"#9A353D","editorGutter.modifiedBackground":"#948B60","editorOverviewRuler.addedBackground":"#109868","editorOverviewRuler.deletedBackground":"#9A353D","editorOverviewRuler.modifiedBackground":"#948B60","editor.selectionBackground":"#67769660","editor.selectionHighlightBackground":"#ffffff10","editor.selectionHighlightBorder":"#dddddd","editor.wordHighlightBackground":"#d2e0ff2f","editor.wordHighlightBorder":"#7f848e","editor.wordHighlightStrongBackground":"#abb2bf26","editor.wordHighlightStrongBorder":"#7f848e","editorActiveLineNumber.foreground":"#737984","editorBracketMatch.background":"#515a6b","editorBracketMatch.border":"#515a6b","editorCursor.background":"#ffffffc9","editorCursor.foreground":"#528bff","editorError.foreground":"#c24038","editorGroup.background":"#181a1f","editorGroup.border":"#181a1f","editorGroupHeader.tabsBackground":"#21252b","editorHoverWidget.background":"#21252b","editorHoverWidget.border":"#181a1f","editorIndentGuide.activeBackground":"#c8c8c859","editorIndentGuide.background":"#3b4048","editorLineNumber.foreground":"#495162","editorMarkerNavigation.background":"#21252b","editorRuler.foreground":"#abb2bf26","editorSuggestWidget.background":"#21252b","editorSuggestWidget.border":"#181a1f","editorSuggestWidget.selectedBackground":"#2c313a","editorWarning.foreground":"#d19a66","editorWhitespace.foreground":"#3b4048","editorWidget.background":"#21252b",focusBorder:"#3e4452","gitDecoration.ignoredResourceForeground":"#636b78","input.background":"#1d1f23","list.activeSelectionBackground":"#2c313a","list.activeSelectionForeground":"#d7dae0","list.focusBackground":"#323842","list.focusForeground":"#f0f0f0","list.highlightForeground":"#c5c5c5","list.hoverBackground":"#2c313a","list.hoverForeground":"#fff","list.inactiveSelectionBackground":"#323842","list.inactiveSelectionForeground":"#d7dae0","list.warningForeground":"#d19a66","menu.foreground":"#abb2bf","menu.separatorBackground":"#343a45","minimapGutter.addedBackground":"#109868","minimapGutter.deletedBackground":"#9A353D","minimapGutter.modifiedBackground":"#948B60","panel.border":"#3e4452","panelSectionHeader.background":"#21252b","peekViewEditor.background":"#1b1d23","peekViewEditor.matchHighlightBackgroun

1d":"#29244b","peekViewResult.background":"#22262b","scrollbar.shadow":"#23252c","scrollbarSlider.activeBackground":"#747d9180","scrollbarSlider.background":"#4e566660","scrollbarSlider.hoverBackground":"#5a637580","settings.focusedRowBackground":"#282c34","settings.headerForeground":"#fff","sideBar.background":"#21252b","sideBar.foreground":"#abb2bf","sideBarSectionHeader.background":"#282c34","sideBarSectionHeader.foreground":"#abb2bf","statusBar.background":"#21252b","statusBar.debuggingBackground":"#cc6633","statusBar.debuggingBorder":"#66017a","statusBar.debuggingForeground":"#ffffff","statusBar.foreground":"#9da5b4","statusBar.noFolderBackground":"#21252b","statusBarItem.hoverBackground":"#2c313a","statusBarItem.remoteBackground":"#4d78cc","statusBarItem.remoteForeground":"#f8fafd","tab.activeBackground":"#282c34","tab.activeForeground":"#dcdcdc","tab.border":"#181a1f","tab.hoverBackground":"#323842","tab.inactiveBackground":"#21252b","tab.unfocusedHoverBackground":"#323842","terminal.ansiBlack":"#3f4451","terminal.ansiBlue":"#4aa5f0","terminal.ansiBrightBlack":"#4f5666","terminal.ansiBrightBlue":"#4dc4ff","terminal.ansiBrightCyan":"#4cd1e0","terminal.ansiBrightGreen":"#a5e075","terminal.ansiBrightMagenta":"#de73ff","terminal.ansiBrightRed":"#ff616e","terminal.ansiBrightWhite":"#d7dae0","terminal.ansiBrightYellow":"#f0a45d","terminal.ansiCyan":"#42b3c2","terminal.ansiGreen":"#8cc265","terminal.ansiMagenta":"#c162de","terminal.ansiRed":"#e05561","terminal.ansiWhite":"#e6e6e6","terminal.ansiYellow":"#d18f52","terminal.background":"#282c34","terminal.border":"#3e4452","terminal.foreground":"#abb2bf","terminal.selectionBackground":"#abb2bf30","textBlockQuote.background":"#2e3440","textBlockQuote.border":"#4b5362","textLink.foreground":"#61afef","textPreformat.foreground":"#d19a66","titleBar.activeBackground":"#282c34","titleBar.activeForeground":"#9da5b4","titleBar.inactiveBackground":"#21252b","titleBar.inactiveForeground":"#6b717d","walkThrough.embeddedEditorBackground":"#2e3440","welcomePage.buttonHoverBackground":"#404754"}},autoImport:!0,skipLanguages:[],filepath:"/home/runner/work/dmitripavlutin.com/dmitripavlutin.com/posts/012-array-creation/index.md"};function l(e){const t=Object.assign({p:"p",br:"br",ol:"ol",li:"li",ul:"ul",code:"code",h2:"h2",a:"a",span:"span",h3:"h3",h4:"h4",strong:"strong",em:"em"},(0,r.ah)(),e.components),{Affiliate:o}=t;return o||p("Affiliate",!0),a||p("CH",!1),a.Code||p("CH.Code",!0),a.InlineCode||p("CH.InlineCode",!0),n.createElement(n.Fragment,null,n.createElement(t.p,null,"The array is an ordered collection of objects or primitive types. It's hard to imagine an application that doesn't use this data structure.",n.createElement(t.br),"\n","Working with arrays consists in the following phases:"),"\n",n.createElement(t.ol,null,"\n",n.createElement(t.li,null,"Initialize the array and setup the initial elements"),"\n"),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,"Access the array elements by index"),"\n",n.createElement(t.li,null,"Add new elements"),"\n",n.createElement(t.li,null,"Remove existing elements"),"\n"),"\n",n.createElement(t.p,null,"The current article covers the array initialization and setting the initial elements. The basic way to do this in JavaScript is using an array literal, e.g. ",n.createElement(t.code,null,"[1, 5, 8]"),"  or an array constructor ",n.createElement(t.code,null,"new Array (1, 5, 8)"),"."),"\n",n.createElement(t.p,null,"Fortunately JavaScript offers more interesting and straightforward ways to create arays, not limited to manual enumeration. Let's illustrate the common and advanced scenarios how to initialize arrays in JavaScript."),"\n",n.createElement(o),"\n",n.createElement(t.h2,{id:"1-array-literal",style:{position:"relative"}},n.createElement(t.a,{href:"#1-array-literal","aria-label":"1 array literal permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"1. Array literal"),"\n",n.createElement(t.p,null,"An array literal syntax is created from a list of comma separated elements ",n.createElement(t.code,null,"element1, element2, ..., elementN")," included in a pair of square brackets ",n.createElement(t.code,null,"[")," ",n.createElement(t.code,null,"]"),".",n.createElement(t.br),"\n","Let's see some examples of array literals:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"numbers ",props:{style:{color:"#E06C75"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"5",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"7",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"8",props:{style:{color:"#D19A66"}}},{content:"];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"planets ",props:{style:{color:"#E06C75"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"'Earth'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'Mercury'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'Jupiter'",props:{style:{color:"#98C379"}}},{content:"];",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"An array literal can contain elements of any type, including ",n.createElement(t.code,null,"null")," and ",n.createElement(t.code,null,"undefined"),", primitives and objects:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"mixed ",props:{style:{color:"#E06C75"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'Earth'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"null",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"NaN",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"undefined",props:{style:{color:"#D19A66"}}},{content:", [",props:{style:{color:"#ABB2BF"}}},{content:"'Mars'",props:{style:{color:"#98C379"}}},{content:"]];",props:{style:{color:"#ABB2BF"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.h3,{id:"11-commas-in-array-literal",style:{position:"relative"}}

1,n.createElement(t.a,{href:"#11-commas-in-array-literal","aria-label":"11 commas in array literal permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"1.1 Commas in array literal"),"\n",n.createElement(t.p,null,"The comma character ",n.createElement(a.InlineCode,{codeConfig:c,code:{lines:[{tokens:[{content:",",props:{style:{color:"#ABB2BF"}}}]}],lang:"jsx"}},",")," is used to separate the elements enumerated in the array literal. Depending on the comma position or the missing element between commas, arrays with different structure are created."),"\n",n.createElement(t.p,null,"Let's see in details the three existing situations."),"\n",n.createElement(t.h4,{id:"first-case-usual-array-literal",style:{position:"relative"}},n.createElement(t.a,{href:"#first-case-usual-array-literal","aria-label":"first case usual array literal permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"First case: usual array literal"),"\n",n.createElement(t.p,null,"The usual case is when between ",n.createElement(t.strong,null,"any pair of commas is specified one element")," and the array literal ",n.createElement(t.strong,null,"does not start or end with a comma"),". This is the recommended commas composition to manually initialize arrays:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"items ",props:{style:{color:"#E06C75"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"'first'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'second'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'third'",props:{style:{color:"#98C379"}}},{content:"];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"items",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => ['first', 'second', 'third']",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"items")," is created from 3 elements that are separated with 2 commas.",n.createElement(t.br),"\n","In this code sample ",n.createElement(t.code,null,"items")," is a ",n.createElement(t.strong,null,"dense")," array, because its elements have contiguous indexes (or simply the array does not have holes)."),"\n",n.createElement(t.p,null,"Most of the time you will initialize array using this form."),"\n",n.createElement(t.h4,{id:"second-case-a-noop-comma-at-the-end",style:{position:"relative"}},n.createElement(t.a,{href:"#second-case-a-noop-comma-at-the-end","aria-label":"second case a noop comma at the end permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Second case: a noop comma at the end"),"\n",n.createElement(t.p,null,"The second case is similar to first one, only that ",n.createElement(t.strong,null,"after the last comma no element is specified"),". In this case the last comma is ignored by JavaScript:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"items ",props:{style:{color:"#E06C75"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"'first'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'second'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'third'",props:{style:{color:"#98C379"}}},{content:", ];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"items",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => ['first', 'second', 'third']",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"After the element ",n.createElement(t.code,null,"'third'")," a comma is specified, which is the last one in the literal and does not have any element after. The last comma is a noop, meaning that it has no impact over the created array."),"\n",n.createElement(t.p,null,"For this case JavaScript creates a ",n.createElement(t.strong,null,"dense")," array too."),"\n",n.createElement(t.h4,{id:"third-case-no-element-between-commas",style:{position:"relative"}}

1,n.createElement(t.a,{href:"#third-case-no-element-between-commas","aria-label":"third case no element between commas permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"Third case: no element between commas"),"\n",n.createElement(t.p,null,"The third case happens when between a ",n.createElement(t.strong,null,"pair of commas no element is specified")," or the array literal ",n.createElement(t.strong,null,"starts with a comma"),".",n.createElement(t.br),"\n","Such configuration creates a ",n.createElement(t.strong,null,"sparse")," array: a collection whose elements don't have contiguous indexes (in other words the array has holes)."),"\n",n.createElement(t.p,null,"The following array literal starts with a comma and creates a sparse array:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"items ",props:{style:{color:"#E06C75"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" [, ",props:{style:{color:"#ABB2BF"}}},{content:"'first'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'second'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'third'",props:{style:{color:"#98C379"}}},{content:"];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"items",props:{style:{color:"#E06C75"}}},{content:";        ",props:{style:{color:"#ABB2BF"}}},{content:"// => [<1 empty slot>, 'first', 'second', 'third']",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"items",props:{style:{color:"#E06C75"}}},{content:"[",props:{style:{color:"#ABB2BF"}}},{content:"0",props:{style:{color:"#D19A66"}}},{content:"];     ",props:{style:{color:"#ABB2BF"}}},{content:"// => undefined",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"items",props:{style:{color:"#E06C75"}}},{content:"[",props:{style:{color:"#ABB2BF"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:"];     ",props:{style:{color:"#ABB2BF"}}},{content:"// => 'first'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"items",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"length",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => 4",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"The array literal ",n.createElement(t.code,null,"[, ...]")," is starting with a comma. As result ",n.createElement(t.code,null,"items")," is a sparse array with an empty slot at index ",n.createElement(t.code,null,"0"),". Accessing an empty slot ",n.createElement(t.code,null,"items[0]")," evaluates to ",n.createElement(t.code,null,"undefined"),"."),"\n",n.createElement(t.p,null,"It is important to ",n.createElement(t.strong,null,"distinguish")," an empty slot element from an element that has ",n.createElement(t.code,null,"undefined")," value. When accessing these elements by index both return ",n.createElement(t.code,null,"undefined"),", which makes the distinction tricky.",n.createElement(t.br),"\n","The empty slot means that the array has no element at an index (",n.createElement(t.code,null,"index in array")," returns ",n.createElement(t.code,null,"false"),"), contrary to an existing element that contains ",n.createElement(t.code,null,"undefined")," (",n.createElement(t.code,null,"index in array")," returns ",n.createElement(t.code,null,"true"),")."),"\n",n.createElement(t.p,null,"Notice that ",n.createElement(t.code,null,"<1 empty slot>")," is displayed in Firefox console, which is a correct way to represent empty slots. Chrome console displays ",n.createElement(t.code,null,"undefined x 1"),". In other consoles you might see a simple ",n.createElement(t.code,null,"undefined"),"."),"\n",n.createElement(t.p,null,"When the array literal has commas with 

1no element between, a sparse array is created too:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"items ",props:{style:{color:"#E06C75"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"'first'",props:{style:{color:"#98C379"}}},{content:", , ",props:{style:{color:"#ABB2BF"}}},{content:"'second'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'third'",props:{style:{color:"#98C379"}}},{content:"];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"items",props:{style:{color:"#E06C75"}}},{content:";        ",props:{style:{color:"#ABB2BF"}}},{content:"// => ['first', <1 empty slot> ,'second', 'third']",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"items",props:{style:{color:"#E06C75"}}},{content:"[",props:{style:{color:"#ABB2BF"}}},{content:"0",props:{style:{color:"#D19A66"}}},{content:"];     ",props:{style:{color:"#ABB2BF"}}},{content:"// => 'first'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"items",props:{style:{color:"#E06C75"}}},{content:"[",props:{style:{color:"#ABB2BF"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:"];     ",props:{style:{color:"#ABB2BF"}}},{content:"// => undefined",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"items",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"length",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => 4",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"The array literal contains commas with no element in between: ",n.createElement(t.code,null,"[... , , ...]"),". This way ",n.createElement(t.code,null,"items")," is a sparse array with an empty slot at index ",n.createElement(t.code,null,"1"),". Accessing an empty slot ",n.createElement(t.code,null,"items[1]")," evaluates to ",n.createElement(t.code,null,"undefined"),"."),"\n",n.createElement(t.p,null,"Using this configuration of the array literal, which creates sparse arrays, generally should be avoided.  Also you might want not to deal at all with sparse arrays, if possible."),"\n",n.createElement(t.p,null,"You can ",n.createElement(t.em,null,"accidentally")," fall into this case when deleting or adding elements in a normal array literal (see the first case above). So double check the commas after modification."),"\n",n.createElement(t.h3,{id:"12-improved-by-spread-operator",style:{position:"relative"}},n.createElement(t.a,{href:"#12-improved-by-spread-operator","aria-label":"12 improved by spread operator permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"1.2 Improved by spread operator"),"\n",n.createElement(t.p,null,"The ",n.createElement(t.a,{href:"/how-three-dots-changed-javascript/"},"spread operator")," from ECMAScript 6 improves how an array can be initialized from other arrays.",n.createElement(t.br),"\n","There are many uses cases how three dots makes the array creation easier. The idea is to prefix with ",n.createElement(t.code,null,"...")," the source array in the literal, then the elements from the source are included in the created array. Pretty straightforward."),"\n",n.createElement(t.p,null,"The following array literal is using the spread operator:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"source ",props:{style:{color:"#E06C75"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"'second'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'third'",props:{style:{color:"#98C379"}}},{content:"];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"items ",props:{style:{color:"#E06C75"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"'first'",props:{style:{color:"#98C379"}}},{content:", ...",props:{style:{color:"#ABB2BF"}}},{content:"source",props:{style:{color:"#E06C75"}}},{content:"];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"items",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => ['first', 'second', 'third']",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"The array literal ",n.createElement(t.code,null,"['First', ...source]")," indicates that ",n.createElement(t.code,null,"'First'")," is the first element. The rest of elements are taken from ",n.createElement(t.code,null,"source")," array using the spread operator."),"\n",n.createElement(t.p,null,"It's nice that regular elements enumeration and arrays with spread operators can be combined without limitation:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"odds ",props:{style:{color:"#E06C75"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"3",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"5",props:{style:{color:"#D19A66"}}},{content:"];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"evens ",props:{style:{color:"#E06C75"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"4",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"6",props:{style:{color:"#D19A66"}}},{content:"];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"zero ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"0",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"negative ",props:{style:{color:"#E06C75"}}},{content:"= -",props:{style:{color:"#56B6C2"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"items ",props:{style:{color:"#E06C75"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" [...",props:{style:{color:"#ABB2BF"}}},{content:"odds",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"zero",props:{style:{color:"#E06C75"}}},{content:", ...",props:{style:{color:"#ABB2BF"}}},{content:"evens",props:{style:{color:"#E06C75"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"negative",props:{style:{color:"#E06C75"}}},{content:"];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"items",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => [1, 3, 5, 0, 4, 6, -1]",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}

1),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"items")," is created by an array literal that has a combination of regular elements ",n.createElement(t.code,null,"zero")," and ",n.createElement(t.code,null,"negative"),", and source arrays prefixed with the spread operator ",n.createElement(t.code,null,"...odds")," and ",n.createElement(t.code,null,"...evens"),"."),"\n",n.createElement(t.p,null,"Because the spread operator generally accepts ",n.createElement(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols",target:"_blank",rel:"noopener noreferrer"},"iterable objects")," (an array is iterable by default), it is possible to create custom initialization.\nA ",n.createElement(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*",target:"_blank",rel:"noopener noreferrer"},"generator function")," returns a ",n.createElement(t.a,{href:"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Generator",target:"_blank",rel:"noopener noreferrer"}," generator object")," that is iterable too, so you can use the generators flexibility to create arrays."),"\n",n.createElement(t.p,null,"Let's create a generator function that accepts first argument as the elements value and the second argument as the number of elements. Then use it with spread operator and array literal to instantiate a new array:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"function* ",props:{style:{color:"#C678DD"}}},{content:"elements",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"element",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"length",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  let ",props:{style:{color:"#C678DD"}}},{content:"index ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"0",props:{style:{color:"#D19A66"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  while",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"length ",props:{style:{color:"#E06C75"}}},{content:"> ",props:{style:{color:"#56B6C2"}}},{content:"index",props:{style:{color:"#E06C75"}}},{content:"++",props:{style:{color:"#56B6C2"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    yield ",props:{style:{color:"#C678DD"}}},{content:"element",props:{style:{color:"#E06C75"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"[...",props:{style:{color:"#ABB2BF"}}},{content:"elements",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"0",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"5",props:{style:{color:"#D19A66"}}},{content:")];    ",props:{style:{color:"#ABB2BF"}}},{content:"// => [0, 0, 0, 0, 0]",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"[...",props:{style:{color:"#ABB2BF"}}},{content:"elements",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'hi'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"2",props:{style:{color:"#D19A66"}}},{content:")]; ",props:{style:{color:"#ABB2BF"}}},{content:"// => ['hi', 'hi']",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"Each time ",n.createElement(t.code,null,"elements(element, length)")," is called, a generator object is created. This generator object is used by the spread operator to initialize the array with elements.",n.createElement(t.br),"\n",n.createElement(t.code,null,"[...elements(0, 5)]")," is creating an array with five zeros. Respectively ",n.createElement(t.code,null,"[...elements('hi', 2)]")," creates an array of two ",n.createElement(t.code,null,"'hi'")," strings."),"\n",n.createElement(t.h2,{id:"2-array-constructor",style:{position:"relative"}}

1,n.createElement(t.a,{href:"#2-array-constructor","aria-label":"2 array constructor permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2. Array constructor"),"\n",n.createElement(t.p,null,"The array in JavaScript is an object. As any object, it has a constructor function  ",n.createElement(t.code,null,"Array")," that allows creating new instances. Let's see this in a sample:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"// From constructor invocation",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"arrayConstr ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Array",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"5",props:{style:{color:"#D19A66"}}},{content:");  ",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"arrayConstr",props:{style:{color:"#E06C75"}}},{content:";                        ",props:{style:{color:"#ABB2BF"}}},{content:"// => [1, 5]",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"typeof ",props:{style:{color:"#C678DD"}}},{content:"arrayConstr",props:{style:{color:"#E06C75"}}},{content:";                 ",props:{style:{color:"#ABB2BF"}}},{content:"// => 'object'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"arrayConstr",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"constructor ",props:{style:{color:"#E06C75"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"Array",props:{style:{color:"#E06C75"}}},{content:";  ",props:{style:{color:"#ABB2BF"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"// From array literal",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"arrayLiteral ",props:{style:{color:"#E06C75"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" [",props:{style:{color:"#ABB2BF"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"5",props:{style:{color:"#D19A66"}}},{content:"];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"arrayLiteral",props:{style:{color:"#E06C75"}}},{content:";                       ",props:{style:{color:"#ABB2BF"}}},{content:"// => [1, 5]",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"typeof ",props:{style:{color:"#C678DD"}}},{content:"arrayLiteral",props:{style:{color:"#E06C75"}}},{content:";                ",props:{style:{color:"#ABB2BF"}}},{content:"// => 'object'",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"arrayLiteral",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"constructor ",props:{style:{color:"#E06C75"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"Array",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"arrayConstr")," and ",n.createElement(t.code,null,"arrayLiteral")," are array instances whose constructor is ",n.createElement(t.code,null,"Array"),". ",n.createElement(t.code,null,"arrayConstr")," object is created using a constructor invocation: ",n.createElement(t.code,null,"new Array(1, 5)"),"."),"\n",n.createElement(t.p,null,"Notice that you can call ",n.createElement(t.code,null,"Array")," as a regular function (without ",n.createElement(t.code,null,"new")," operator) to create array instances: ",n.createElement(t.code,null,"Array(1, 5)"),"."),"\n",n.createElement(t.p,null,"You should broadly favor the literal ",n.createElement(t.code,null,"[item1, item2, ..., itemN]")," over the constructor ",n.createElement(t.code,null,"new Array(item1, item2, ..., itemN)")," to create arrays. Mainly because the array literal is shorter and simpler. But also the array constructor has a strange behavior depending on the type of the first argument.\nLet's see how ",n.createElement(t.code,null,"Array")," creates array instances depen

1ding on the first argument type and the number of arguments."),"\n",n.createElement(t.h3,{id:"21-numeric-argument-creates-sparse-array",style:{position:"relative"}},n.createElement(t.a,{href:"#21-numeric-argument-creates-sparse-array","aria-label":"21 numeric argument creates sparse array permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2.1 Numeric argument creates sparse array"),"\n",n.createElement(t.p,null,"When the array constructor ",n.createElement(t.code,null,"new Array(numberArg)")," is invoked  with a single argument of type number, JavaScript creates a sparse array containing only empty slots with the length equal to ",n.createElement(t.code,null,"numberArg"),".\nLet's take a look:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"items ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Array",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"3",props:{style:{color:"#D19A66"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"items",props:{style:{color:"#E06C75"}}},{content:";        ",props:{style:{color:"#ABB2BF"}}},{content:"// => [<3 empty slots>]",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"items",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"length",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => 3",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"new Array(3)")," is a constructor invocation with a single argument ",n.createElement(t.code,null,"3"),". A sparse array ",n.createElement(t.code,null,"items")," is created with length ",n.createElement(t.code,null,"3"),", but actually without elements and just empty slots."),"\n",n.createElement(t.p,null,"By itself this way to create arrays has little value. However it can be useful in combination with static methods as a way to initialize an array with specific length, which is filled with generated elements (see the chapter below ",n.createElement(t.a,{href:"#23usefulstaticmethods"},"2.3"),")."),"\n",n.createElement(t.h3,{id:"22-enumerating-elements",style:{position:"relative"}},n.createElement(t.a,{href:"#22-enumerating-elements","aria-label":"22 enumerating elements permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2.2 Enumerating elements"),"\n",n.createElement(t.p,null,"If ",n.createElement(t.code,null,"Array")," constructor is invoked with a list of arguments other than a single number, then these arguments become the array elements.",n.createElement(t.br),"\n","This approach works almost like the array literal, just in a constructor call."),"\n",n.createElement(t.p,null,"The following example is creating an array:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"items ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Array",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'first'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'second'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'third'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"items",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => ['first', 'second', 'third']",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}

1),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"new Array('first', 'second', 'third')")," is creating a new array with the elements taken from arguments list."),"\n",n.createElement(t.p,null,"Due to flexibility of the spread operator, is possible to indicate on constructor call to use elements from another array:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"source ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Array",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'second'",props:{style:{color:"#98C379"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"'third'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"items ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Array",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'first'",props:{style:{color:"#98C379"}}},{content:", ...",props:{style:{color:"#ABB2BF"}}},{content:"source",props:{style:{color:"#E06C75"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"items",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => ['first', 'second', 'third']",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"new Array('First', ...source)")," is creating an array with ",n.createElement(t.code,null,"'First'")," element and all the elements from ",n.createElement(t.code,null,"source")," array."),"\n",n.createElement(t.p,null,"Either way, you should prefer the array literals over the array constructors as a more straightforward solution."),"\n",n.createElement(t.h3,{id:"23-useful-static-methods",style:{position:"relative"}},n.createElement(t.a,{href:"#23-useful-static-methods","aria-label":"23 useful static methods permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2.3 Useful static methods"),"\n",n.createElement(t.p,null,"When reading ",n.createElement(t.a,{href:"#21numericargumentcreatessparsearray"},"2.1")," about creating the sparse arrays by indicating a number in a constructor you might wonder what practical use cases it produces?"),"\n",n.createElement(t.p,null,"ECMAScript 6 added useful methods like ",n.createElement(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill",target:"_blank",rel:"noopener noreferrer"},n.createElement(t.code,null,"Array.prototype.fill()"))," and ",n.createElement(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from",target:"_blank",rel:"noopener noreferrer"},n.createElement(t.code,null,"Array.from()")),". Both functions can be used to fill the empty slots of a sparse array."),"\n",n.createElement(t.p,null,"Let's use ",n.createElement(t.code,null,"fill()")," method to initialize an array with 5 zeros:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"zeros ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Array",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"5",props:{style:{color:"#D19A66"}}},{content:").",props:{style:{color:"#ABB2BF"}}},{content:"fill",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"0",props:{style:{color:"#D19A66"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"zeros",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => [0, 0, 0, 0, 0]",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}

1),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"new Array(5)")," is creating a sparse array with 5 empty slots. Then ",n.createElement(t.code,null,"fill(0)")," method fills the empty slots with ",n.createElement(t.code,null,"0"),"."),"\n",n.createElement(t.p,null,"The static method ",n.createElement(t.code,null,"Array.from()")," has a wider range of possibilities. Like the example above, let's fill an array with 5 zeros:"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"zeros ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"Array",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"from",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Array",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"5",props:{style:{color:"#D19A66"}}},{content:"), () ",props:{style:{color:"#ABB2BF"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"0",props:{style:{color:"#D19A66"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"zeros",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => [0, 0, 0, 0, 0]",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"A sparse array with length ",n.createElement(t.code,null,"5")," created using ",n.createElement(t.code,null,"new Array(5)")," is passed as an argument to ",n.createElement(t.code,null,"Array.from()"),". The second argument is used as a map function that returns ",n.createElement(t.code,null,"0"),".",n.createElement(t.br),"\n",n.createElement(t.code,null,"5")," iterations (the array length) are made and the arrow function invocation result on each step is used as the array element value."),"\n",n.createElement(t.p,null,"Because the map function is called on every iteration, it is possible to create the array elements dynamically. Let's create an array with items from ",n.createElement(t.code,null,"1")," up to ",n.createElement(t.code,null,"5"),":"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"items ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"Array",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"from",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"new ",props:{style:{color:"#C678DD"}}},{content:"Array",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"5",props:{style:{color:"#D19A66"}}},{content:"), (",props:{style:{color:"#ABB2BF"}}},{content:"item",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:", ",props:{style:{color:"#ABB2BF"}}},{content:"index",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{content:") ",props:{style:{color:"#ABB2BF"}}},{content:"=> ",props:{style:{color:"#C678DD"}}},{content:"index ",props:{style:{color:"#E06C75"}}},{content:"+ ",props:{style:{color:"#56B6C2"}}},{content:"1",props:{style:{color:"#D19A66"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"items",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => [1, 2, 3, 4, 5]",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"The map function is called with 2 arguments: current ",n.createElement(t.code,null,"item")," and iteration ",n.createElement(t.code,null,"index"),". The index parameter is used to generate numbers by increment: ",n.createElement(t.code,null,"index + 1"),"."),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"Array.from()")," accepts as the first argument an ",n.createElement(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols",target:"_blank",rel:"noopener noreferrer"},"iterable object"),", making it even more valuable.",n.createElement(t.br),"\n","Let's use a ",n.createElement(t.a,{href:"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Generator",target:"_blank",rel:"noopener noreferrer"},"generator object")," (which is an iterable) to create a list of incremented numbers (like the example above):"),"\n",n.createElement(a.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"function* ",props:{style:{color:"#C678DD"}}},{content:"generate",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"max",props:{style:{color:"#E06C75",fontStyle:"italic"}}},{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:"  while",props:{style:{color:"#C678DD"}}},{content:" (",props:{style:{color:"#ABB2BF"}}},{content:"max ",props:{style:{color:"#E06C75"}}},{content:"> ",props:{style:{color:"#56B6C2"}}},{content:"count",props:{style:{color:"#E06C75"}}},{content:"++",props:{style:{color:"#56B6C2"}}},{content:") {",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"    yield ",props:{style:{color:"#C678DD"}}},{content:"count",props:{style:{color:"#E06C75"}}},{content:";",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"  }",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"}",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"items ",props:{style:{color:"#E06C75"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"Array",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"from",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"generate",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"5",props:{style:{color:"#D19A66"}}},{content:"));",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"items",props:{style:{color:"#E06C75"}}},{content:";       ",props:{style:{color:"#ABB2BF"}}},{content:"// => [1, 2, 3, 4, 5]",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"let ",props:{style:{color:"#C678DD"}}},{content:"itemsSpread ",props:{style:{color:"#E06C75"}}},{content:"=",props:{style:{color:"#56B6C2"}}},{content:" [...",props:{style:{color:"#ABB2BF"}}},{content:"generate",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"5",props:{style:{color:"#D19A66"}}},{content:")];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"itemsSpread",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => [1, 2, 3, 4, 5]",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}

1),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"generate(max)")," is a generator function that creates numbers from ",n.createElement(t.code,null,"1")," to ",n.createElement(t.code,null,"max")," parameter.",n.createElement(t.br),"\n",n.createElement(t.code,null,"Array.from(generate(5))")," accepts a generator object and creates numbers from ",n.createElement(t.code,null,"1")," to ",n.createElement(t.code,null,"5")," that are added to the array.",n.createElement(t.br),"\n","Using the spread operator ",n.createElement(t.code,null,"[...generate(5)]")," and the array literal achieves the same array with incremented numbers."),"\n",n.createElement(t.h2,{id:"3-conclusion",style:{position:"relative"}},n.createElement(t.a,{href:"#3-conclusion","aria-label":"3 conclusion permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"3. Conclusion"),"\n",n.createElement(t.p,null,"Array initialization is an usual task when dealing with collections. JavaScript allows a decent number of ways and flexibility to achieve that."),"\n",n.createElement(t.p,null,"The array constructor has a number of situations when its behavior may be surprising. So the array literal is a better and simpler solution to initialize array instances."),"\n",n.createElement(t.p,null,"When an array should be initialized with calculated on each iteration elements, ",n.createElement(t.code,null,"Array.from()")," is a nice solution.",n.createElement(t.br),"\n","If an array should be loaded with the same value, use ",n.createElement(t.code,null,"Array.prototype.fill()")," in combination with ",n.createElement(t.code,null,"new Array(length)"),"."),"\n",n.createElement(t.p,null,"Do not underestimate the power of iterable objects and generator functions, which can be combined with the spread operator in an array literal or used directly in ",n.createElement(t.code,null,"Array.from()")," static method."))}var i=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,r.ah)(),e.components);return t?n.createElement(t,e,n.createElement(l,e)):l(e)};function p(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}var d=o(12),u=o(5319),m=o(5893);function g(e){let{data:t,children:o}=e;const{featured:{popularPostsByCategory:n}}=t.site.siteMetadata,{mdx:r,popularPostsMarkdown:s}=t,a={...r.frontmatter,children:o,thumbnail:r.frontmatter.thumbnail.childImageSharp.gatsbyImageData,tableOfContents:r.tableOfContents},c=r.internal.contentFilePath.split("/").slice(-3).join("/"),l=s.edges.map(u.sN),i=n.map((e=>{let{category:t,slugs:o}=e;return{category:t,plainPosts:o.map((e=>l.find((t=>{let{slug:o}=t;return e===o}))))}}));return(0,m.jsx)(d.Z,{postRelativePath:c,post:a,popularPostsByCategory:i})}function y(e){return n.createElement(g,e,n.createElement(i,e))}}}]);