{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/javascript-subarrays-with-slice-and-splice/",
    "result": {"data":{"markdownRemark":{"html":"<h3 id=\"slice\" style=\"position:relative;\"><a href=\"#slice\" aria-label=\"slice permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><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></a>Slice</h3>\n<ul>\n<li>Returns an array that contains the element specified by the first argument &#x26; all subsequent elements up to, <strong>but not including</strong>, the element specified by the second argument.</li>\n<li><strong>Doesn’t modify</strong> the array on which it is invoked.</li>\n</ul>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">let</span><span class=\"mtk1\"> </span><span class=\"mtk3\">nums</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> [</span><span class=\"mtk7\">1</span><span class=\"mtk1\">, </span><span class=\"mtk7\">4</span><span class=\"mtk1\">, </span><span class=\"mtk7\">16</span><span class=\"mtk1\">, </span><span class=\"mtk7\">64</span><span class=\"mtk1\">, </span><span class=\"mtk7\">256</span><span class=\"mtk1\">]</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">let</span><span class=\"mtk1\"> </span><span class=\"mtk3\">subNums</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk3\">nums</span><span class=\"mtk1\">.</span><span class=\"mtk6\">slice</span><span class=\"mtk1\">(</span><span class=\"mtk7\">1</span><span class=\"mtk1\">, </span><span class=\"mtk7\">3</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">subNums</span><span class=\"mtk1\">) </span><span class=\"mtk4 mtki\">// =&gt;  [4, 16]</span></span></span></code></pre>\n<h3 id=\"splice\" style=\"position:relative;\"><a href=\"#splice\" aria-label=\"splice permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><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></a>Splice</h3>\n<ul>\n<li>Deletes, inserts or does both operations at the same time.</li>\n<li><strong>Modifies</strong> the array on which it is invoked.</li>\n<li>Returns an empty array if no elements were deleted.</li>\n<li>The first argument specifies the position in the array where the insertion and/or deletion is to begin. The second argument specifies the number of elements that should be deleted from the array.</li>\n<li>If the second argument is omitted, all elements starting from the start element to the end of the array are deleted.</li>\n<li>The first two arguments may be followed by any number of additional arguments that specify elements to be inserted into the array, starting at the position specified by the first argument.</li>\n</ul>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">let</span><span class=\"mtk1\"> </span><span class=\"mtk3\">nums</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> [</span><span class=\"mtk7\">1</span><span class=\"mtk1\">, </span><span class=\"mtk7\">4</span><span class=\"mtk1\">, </span><span class=\"mtk7\">16</span><span class=\"mtk1\">, </span><span class=\"mtk7\">64</span><span class=\"mtk1\">, </span><span class=\"mtk7\">256</span><span class=\"mtk1\">]</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">let</span><span class=\"mtk1\"> </span><span class=\"mtk3\">subNums</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk3\">nums</span><span class=\"mtk1\">.</span><span class=\"mtk6\">splice</span><span class=\"mtk1\">(</span><span class=\"mtk7\">1</span><span class=\"mtk1\">, </span><span class=\"mtk7\">2</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">nums</span><span class=\"mtk1\">) </span><span class=\"mtk4 mtki\">// =&gt; [1, 64, 256]</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"6\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"7\"></span><span class=\"grvsc-source\"><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">subNums</span><span class=\"mtk1\">) </span><span class=\"mtk4 mtki\">// =&gt; [4, 16]</span></span></span></code></pre>\n<pre class=\"grvsc-container synthwave-84\" data-language=\"js\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"1\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">let</span><span class=\"mtk1\"> </span><span class=\"mtk3\">tech</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> [</span><span class=\"mtk16\">&quot;html&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk16\">&quot;css&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk16\">&quot;JavaScript&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk16\">&quot;python&quot;</span><span class=\"mtk1\">]</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"2\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"3\"></span><span class=\"grvsc-source\"><span class=\"mtk4 mtki\">// the 3rd argument will be inserted into the array</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"4\"></span><span class=\"grvsc-source\"><span class=\"mtk10\">let</span><span class=\"mtk1\"> </span><span class=\"mtk3\">subTech</span><span class=\"mtk1\"> </span><span class=\"mtk12\">=</span><span class=\"mtk1\"> </span><span class=\"mtk3\">tech</span><span class=\"mtk1\">.</span><span class=\"mtk6\">splice</span><span class=\"mtk1\">(</span><span class=\"mtk7\">3</span><span class=\"mtk1\">, </span><span class=\"mtk7\">1</span><span class=\"mtk1\">, </span><span class=\"mtk16\">&quot;React&quot;</span><span class=\"mtk1\">)</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"5\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"6\"></span><span class=\"grvsc-source\"><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">tech</span><span class=\"mtk1\">) </span><span class=\"mtk4 mtki\">// =&gt; [&#39;html&#39;, &#39;css&#39;, &#39;JavaScript&#39;, &#39;React];</span></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"7\"></span><span class=\"grvsc-source\"></span></span>\n<span class=\"grvsc-line\"><span class=\"grvsc-gutter-pad\"></span><span class=\"grvsc-gutter grvsc-line-number\" aria-hidden=\"true\" data-content=\"8\"></span><span class=\"grvsc-source\"><span class=\"mtk9\">console</span><span class=\"mtk1\">.</span><span class=\"mtk6\">log</span><span class=\"mtk1\">(</span><span class=\"mtk3\">subTech</span><span class=\"mtk1\">) </span><span class=\"mtk4 mtki\">// =&gt; [&#39;python&#39;];</span></span></span></code></pre>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    position: relative;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n    line-height: 1.4;\n  }\n  \n  .grvsc-code {\n    display: table;\n  }\n  \n  .grvsc-line {\n    display: table-row;\n    box-sizing: border-box;\n    width: 100%;\n    position: relative;\n  }\n  \n  .grvsc-line > * {\n    position: relative;\n  }\n  \n  .grvsc-gutter-pad {\n    display: table-cell;\n    padding-left: 0.75rem;\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\n  }\n  \n  .grvsc-gutter {\n    display: table-cell;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n  \n  .grvsc-gutter::before {\n    content: attr(data-content);\n  }\n  \n  .grvsc-source {\n    display: table-cell;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-source:empty::after {\n    content: ' ';\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    user-select: none;\n  }\n  \n  .grvsc-gutter + .grvsc-source {\n    padding-left: 0.75rem;\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\n  }\n  \n  /* Line transformer styles */\n  \n  .grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before {\n    content: ' ';\n    position: absolute;\n    width: 100%;\n  }\n  \n  .grvsc-line-diff-add::before {\n    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\n  }\n  \n  .grvsc-line-diff-del::before {\n    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\n  }\n  \n  .grvsc-line-number {\n    padding: 0 2px;\n    text-align: right;\n    opacity: 0.7;\n  }\n  \n  .synthwave-84 { background-color: #262335; }\n  .synthwave-84 .mtki { font-style: italic; }\n  .synthwave-84 .mtk10 { color: #FEDE5D; }\n  .synthwave-84 .mtk1 { color: #FFFFFF; }\n  .synthwave-84 .mtk3 { color: #FF7EDB; }\n  .synthwave-84 .mtk12 { color: #FFFFFFEE; }\n  .synthwave-84 .mtk7 { color: #2EE2FA; }\n  .synthwave-84 .mtk6 { color: #36F9F6; }\n  .synthwave-84 .mtk9 { color: #FE4450; }\n  .synthwave-84 .mtk4 { color: #848BBD; }\n  .synthwave-84 .mtk16 { color: #FF8B39; }\n  .synthwave-84 .grvsc-line-highlighted::before {\n    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n  }\n</style>","frontmatter":{"title":"JavaScript Subarrays With Slice & Splice","date":"2021-05-21"}}},"pageContext":{"slug":"/javascript-subarrays-with-slice-and-splice/","prev":{"fields":{"slug":"/http-status-response-codes/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/understanding-express-middleware/"},"frontmatter":{"modules":null}}}},
    "staticQueryHashes": ["3159585216"]}