{"id":21009,"date":"2022-10-14T07:38:32","date_gmt":"2022-10-14T14:38:32","guid":{"rendered":"https:\/\/coderpad.io\/?p=21009"},"modified":"2023-06-07T13:49:18","modified_gmt":"2023-06-07T20:49:18","slug":"4-ways-to-use-javascript-slice-method","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/4-ways-to-use-javascript-slice-method\/","title":{"rendered":"4 Ways to Use JavaScript .slice() Method and How to Do Each"},"content":{"rendered":"\n<p>The JavaScript <code>.slice()<\/code> method is a common method that\u2019s often used in code but not often understood by novice developers. To help you understand this helpful method,&nbsp; we will discuss exactly what it is and four ways you can use it.&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2139\ufe0f Before getting started, we assume that you understand how functions work in JavaScript. If not, check out <a href=\"https:\/\/coderpad.io\/blog\/development\/what-you-never-learned-about-javascript-functions\/\">the JavaScript functions guide<\/a>&nbsp;to learn more.&nbsp;<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is the .slice() method?<\/strong><\/h2>\n\n\n\n<p>Put simply, <code>.slice()<\/code> returns a portion of an array. It\u2019s implementation looks something like this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">target.slice(start_index, end_index);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>It takes two arguments:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The index of the element to start at.<\/li>\n\n\n\n<li>The index of the element to end at.<\/li>\n<\/ol>\n\n\n\n<p>It then returns an array containing elements from the start index to the end index.&nbsp;<\/p>\n\n\n\n<p>The <code>start_index<\/code> in the method is inclusive (where <code>start_index<\/code> is included), and the <code>end_index<\/code> is exclusive (where <code>end_index<\/code> is not included). This method creates a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Shallow_copy\" target=\"_blank\" rel=\"noopener\">shallow copy<\/a> and does not modify the original array or string.&nbsp;<\/p>\n\n\n\n<p>The <code>.slice()<\/code> method can be helpful when working on a big project:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The method can be used to quickly and easily extract a portion of an array or string. This function can be very helpful when you need to process only a subset of data.&nbsp;<\/li>\n\n\n\n<li>Developers can use the <code>.slice()<\/code> method to create a new array or string based on an existing one. This can be helpful when you need to manipulate data in a different way than the original.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How to use the .slice()&nbsp;<\/strong>method<\/h2>\n\n\n\n<p>The <code>.slice()<\/code> method can be used on both arrays and strings (which is just an array of characters). Let\u2019s look at some code examples to understand this better.&nbsp;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> arr = &#91;<span class=\"hljs-number\">1<\/span>,<span class=\"hljs-number\">2<\/span>,<span class=\"hljs-number\">3<\/span>,<span class=\"hljs-number\">4<\/span>,<span class=\"hljs-number\">5<\/span>,<span class=\"hljs-number\">6<\/span>,<span class=\"hljs-number\">7<\/span>,<span class=\"hljs-number\">8<\/span>,<span class=\"hljs-number\">9<\/span>,<span class=\"hljs-number\">10<\/span>];\n<span class=\"hljs-keyword\">const<\/span> newArr = arr.slice(<span class=\"hljs-number\">3<\/span>,<span class=\"hljs-number\">6<\/span>);\n<span class=\"hljs-built_in\">console<\/span>.log(newArr);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><span style=\"font-size: revert; color: initial; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;\">Here we have an array of integers named <\/span><code>arr<\/code><span style=\"font-size: revert; color: initial; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;\">, and we are using the slice method on it and storing the output of the slice method in a new variable named <\/span><code>newArr<\/code><span style=\"font-size: revert; color: initial; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;\">. In this case, the output of the code will be <\/span><code>[4, 5, 6]<\/code><span style=\"font-size: revert; color: initial; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;\">. But how?&nbsp;<\/span><\/p>\n\n\n\n<p>The start index, in this case, is 3. This means we will start slicing the array from <code>arr[3]<\/code>, which is 4, and we still stop at <code>arr[6-1]<\/code>, which is 6. If you are wondering why we have subtracted 1 from the end index, it is because the end index is always exclusive, which means the end index is not included.&nbsp;<\/p>\n\n\n\n<p>To better understand this concept, let\u2019s look at another example::&nbsp;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> arr = &#91;<span class=\"hljs-string\">\"A\"<\/span>, <span class=\"hljs-string\">\"B\"<\/span>, <span class=\"hljs-string\">\"C\"<\/span>, <span class=\"hljs-string\">\"D\"<\/span>, <span class=\"hljs-string\">\"E\"<\/span>, <span class=\"hljs-string\">\"F\"<\/span>, <span class=\"hljs-string\">\"G\"<\/span>, <span class=\"hljs-string\">\"H\"<\/span>, <span class=\"hljs-string\">\"I\"<\/span>, <span class=\"hljs-string\">\"J\"<\/span>];\n<span class=\"hljs-keyword\">const<\/span> newArr = arr.slice(<span class=\"hljs-number\">3<\/span>);\n\n<span class=\"hljs-built_in\">console<\/span>.log(newArr);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><span style=\"font-size: revert; color: initial; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;\">In this code, we don\u2019t have any end index specified because both the start and end indexes are optional, and you can use them per your needs.&nbsp;<\/span>&nbsp;<\/p>\n\n\n\n<p>When any index is not specified, we assume that the index is either the first element (if the start index is not specified) or the length of the array. Because the index starts from 0, we\u2019ll include all elements until the end of the array ( i.e. where the index is <code>length-1<\/code> ).&nbsp;<\/p>\n\n\n\n<p>The output, in this case, will be <code>[\"D\", \"E\", \"F\", \"G\", \"H\", \"I\", \"J\"]<\/code>. The start index is 3, and the end index is not mentioned, so we\u2019ll start slicing from <code>arr[3]<\/code>, which is &#8220;<strong>D<\/strong>&#8220;. As the end index is not mentioned, we\u2019ll include all elements.&nbsp;<\/p>\n\n\n\n<p>Until now, we only looked at the start and end indexes as positive numbers, but these indexes can be negative ones too.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Using .slice() with negative indexes<\/strong><\/h3>\n\n\n\n<p>We have the start and end index as negative numbers in the following code block:&nbsp;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> arr = &#91;<span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">2<\/span>, <span class=\"hljs-number\">3<\/span>, <span class=\"hljs-number\">4<\/span>, <span class=\"hljs-number\">5<\/span>, <span class=\"hljs-number\">6<\/span>, <span class=\"hljs-number\">7<\/span>, <span class=\"hljs-number\">8<\/span>, <span class=\"hljs-number\">9<\/span>, <span class=\"hljs-number\">10<\/span>];\n<span class=\"hljs-keyword\">const<\/span> newArr = arr.slice(<span class=\"hljs-number\">-3<\/span>, <span class=\"hljs-number\">-1<\/span>);\n\n<span class=\"hljs-built_in\">console<\/span>.log(newArr);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>The negative index means we\u2019ll count the index from the end of the array. A negative index can be thought of as an offset from the end of the array, list, or string. For example, in an array with five elements, you can access the last element with an index of -1 (like <code>arr[-1]<\/code>), the second-to-last element with an index of -2, and so on.&nbsp;<\/p>\n\n\n\n<p>The output, in this case, will be <code>[8, 9]<\/code>. The start index is <code>arr[-3]<\/code>, which is <strong>8<\/strong>, and the end index is <code>arr[-1]<\/code>, which is <strong>10<\/strong>. Since the end index is exclusive, the output will be <code>[8, 9]<\/code>.&nbsp;<\/p>\n\n\n\n<p>As we discussed before, both index arguments are optional. Let\u2019s look at a code example with only one negative index argument.&nbsp;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> arr = &#91;<span class=\"hljs-string\">\"A\"<\/span>, <span class=\"hljs-string\">\"B\"<\/span>, <span class=\"hljs-string\">\"C\"<\/span>, <span class=\"hljs-string\">\"D\"<\/span>, <span class=\"hljs-string\">\"E\"<\/span>, <span class=\"hljs-string\">\"F\"<\/span>];\n<span class=\"hljs-keyword\">const<\/span> newArr = arr.slice(<span class=\"hljs-number\">-3<\/span>);\n\n<span class=\"hljs-built_in\">console<\/span>.log(newArr);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Here we only have one index specified: <strong>-3<\/strong>. We&#8217;ll start from <code>arr[-3]<\/code>, which is D, and we&#8217;ll include all elements until the end. So the output, in this case, will be <code>[\"D\", \"E\", \"F\"]<\/code>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Using .slice() on a nested array<\/strong><\/h3>\n\n\n\n<p>We can use the slice method on a nested array as well:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">var<\/span> nestedArray = &#91;\n  &#91;<span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">2<\/span>, <span class=\"hljs-number\">3<\/span>],\n  &#91;<span class=\"hljs-number\">4<\/span>, <span class=\"hljs-number\">5<\/span>, <span class=\"hljs-number\">6<\/span>],\n  &#91;<span class=\"hljs-number\">7<\/span>, <span class=\"hljs-number\">8<\/span>, <span class=\"hljs-number\">9<\/span>]\n];\n<span class=\"hljs-keyword\">var<\/span> newArray = nestedArray.slice(<span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">3<\/span>);\n\n<span class=\"hljs-built_in\">console<\/span>.log(newArray);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>We have a nested array in the above-mentioned code block and are using the slice method on it. In this instance it will print the last two array elements: <code>[[4,5,6],[7,8,9]]<\/code>. You can further access elements based on the index directly like this:&nbsp;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">var<\/span>\u00a0newArray\u00a0=\u00a0nestedArray.slice(<span class=\"hljs-number\">1<\/span>,\u00a0<span class=\"hljs-number\">3<\/span>)&#91;<span class=\"hljs-number\">0<\/span>]; <span class=\"hljs-comment\">\/\/ Output: &#91;4, 5, 6]<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\"><strong>Using&nbsp; .slice() without indexes<\/strong><\/h3>\n\n\n\n<p>Developers can also use the slice method without a start or end index, as both are optional. In this case, the output is the shallow copy of the array. Let\u2019s look at the code to understand this better.&nbsp;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-keyword\">var<\/span> <span class=\"hljs-keyword\">array<\/span> = &#91;<span class=\"hljs-string\">\"a\"<\/span>, <span class=\"hljs-string\">\"b\"<\/span>, <span class=\"hljs-string\">\"c\"<\/span>, <span class=\"hljs-string\">\"d\"<\/span>, <span class=\"hljs-string\">\"e\"<\/span>];\n<span class=\"hljs-keyword\">var<\/span> output = <span class=\"hljs-keyword\">array<\/span>.slice() <span class=\"hljs-comment\">\/\/ Using slice without arguments<\/span>\n\nconsole.log(output);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Without using any index arguments, this <code>.slice()<\/code> operation would output&nbsp;<code> 'a', 'b', 'c', 'd', 'e'<\/code>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Using .slice() on strings<\/strong><\/h3>\n\n\n\n<p>As discussed earlier, the slice method can also be used on strings:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-comment\">\/\/ Using slice() with any index<\/span>\n<span class=\"hljs-keyword\">const<\/span> str = <span class=\"hljs-string\">\"Hello World\"<\/span>;\n<span class=\"hljs-keyword\">const<\/span> newStr = str.slice();\n\n<span class=\"hljs-built_in\">console<\/span>.log(newStr); <span class=\"hljs-comment\">\/\/ Output: \"Hello World\"<\/span>\n\n<span class=\"hljs-comment\">\/\/ Using slice() with single index<\/span>\n<span class=\"hljs-keyword\">const<\/span> newStr2 = str.slice(<span class=\"hljs-number\">3<\/span>); <span class=\"hljs-comment\">\/\/ end index is not specified<\/span>\n\n<span class=\"hljs-built_in\">console<\/span>.log(newStr2); <span class=\"hljs-comment\">\/\/ Output: lo World<\/span>\n\n<span class=\"hljs-comment\">\/\/ Using slice() with start and end index<\/span>\n<span class=\"hljs-keyword\">const<\/span> newStr3 = str.slice(<span class=\"hljs-number\">3<\/span>, <span class=\"hljs-number\">6<\/span>);\n\n<span class=\"hljs-built_in\">console<\/span>.log(newStr3); <span class=\"hljs-comment\">\/\/ Output: lo ( 3rd character is a whitespace )<\/span>\n\n<span class=\"hljs-comment\">\/\/ Using slice() with one negative &amp; one positive index<\/span>\n<span class=\"hljs-keyword\">const<\/span> newStr4 = str.slice(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">-1<\/span>);\n\n<span class=\"hljs-built_in\">console<\/span>.log(newStr4); <span class=\"hljs-comment\">\/\/ Hello Worl<\/span>\n\n<span class=\"hljs-comment\">\/\/ Using slice() with only 1 index ( negative )<\/span>\n<span class=\"hljs-keyword\">const<\/span> newStr5 = str.slice(<span class=\"hljs-number\">-3<\/span>);\n\n<span class=\"hljs-built_in\">console<\/span>.log(newStr5); <span class=\"hljs-comment\">\/\/ rld<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\"><strong>Understanding the difference between .slice() and .splice()&nbsp;<\/strong><\/h2>\n\n\n\n<p>In JavaScript, <code>slice()<\/code> and <code>splice()<\/code> are both methods that developers can use to manipulate arrays. However, there is a significant difference between the two methods.&nbsp;<\/p>\n\n\n\n<p>The <code>.slice()<\/code> method returns a new array containing a subset of the elements from the original array. The elements in the new array are selected from the original array based on a start and end index that you specify.&nbsp;<\/p>\n\n\n\n<p><strong>On the other hand, the <\/strong><code><strong>.<\/strong>splice()<\/code><strong> method modifies the original array<\/strong>.&nbsp;<\/p>\n\n\n\n<p>When you use <code>.splice()<\/code> to add or remove elements from an array, the elements you add or remove are selected based on a start index that you specify.&nbsp;<\/p>\n\n\n\n<p>So, if you want to extract a section of an array without modifying the original array, you would use the <code>.slice()<\/code> method. And if you want to remove a section of an array and get the removed elements back, you would use the <code>.splice()<\/code> method:&nbsp;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-class\">.splice<\/span>(<span class=\"hljs-selector-tag\">start_index<\/span>, <span class=\"hljs-selector-tag\">items_to_remove<\/span>, <span class=\"hljs-selector-tag\">item_to_insert_1<\/span>, <span class=\"hljs-selector-tag\">item_to_insert_2<\/span>, ...)<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>With the <code>.splice()<\/code> method, the <code>start_index<\/code> is a required parameter where all others are optional.&nbsp;<\/p>\n\n\n\n<p>In the following code block, we have an array on which we have used both <code>.splice()<\/code> and <code>.slice()<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> numbers = &#91;<span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">2<\/span>, <span class=\"hljs-number\">3<\/span>, <span class=\"hljs-number\">4<\/span>, <span class=\"hljs-number\">5<\/span>];\n<span class=\"hljs-keyword\">const<\/span> newNumbers = numbers.slice(<span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">4<\/span>);\n\n<span class=\"hljs-built_in\">console<\/span>.log(newNumbers); <span class=\"hljs-comment\">\/\/ &#91;2, 3, 4]<\/span>\n\n<span class=\"hljs-comment\">\/\/ Using splice method on the same array<\/span>\n\nnumbers.splice(<span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">2<\/span>);\n\n<span class=\"hljs-built_in\">console<\/span>.log(numbers); <span class=\"hljs-comment\">\/\/ &#91;1, 4, 5]<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>When we used the <code>.slice()<\/code> method, the start index and the end index are 1 and 4, respectively, which gives the output as <code>[2, 3, 4].<\/code>&nbsp;<\/p>\n\n\n\n<p>On the other hand, when we used the <code>.splice()<\/code> method on the same array, we get the output as <code>[1, 4, 5]<\/code> because we are removing two elements from index 1 (i.e., 2 and 3).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Try it out!<\/strong><\/h2>\n\n\n<div\n\tclass=\"sandbox-embed responsive-embed  sandbox-embed--full-width\"\n\tstyle=\"padding-top: 125%\"\ndata-block-name=\"coderpad-sandbox-embed\">\n\t<iframe src=\"https:\/\/embed.coderpad.io\/sandbox?question_id=231387&#038;use_question_button\" width=\"640\" height=\"800\" loading=\"lazy\" aria-label=\"Try out the CoderPad sandbox\"><\/iframe>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>In this blog post, we explained how you can use JavaScript&#8217;s <code>.slice()<\/code> method. This can come in handy when working with arrays and other objects that contain several elements.&nbsp;We&#8217;ve also provided a few examples to explain how the method works, using code snippets, as well as how <code>.slice()<\/code> and <code>.splice()<\/code> differ.&nbsp;<\/p>\n\n\n\n<p>We hope this post has been helpful to you, and if you want to learn more about JavaScript or other topics, check out our <a href=\"https:\/\/coderpad.io\/blog\/\">blog<\/a>.&nbsp;<\/p>\n\n\n\n<p><em>This post was written by Keshav Malik. <\/em><a href=\"https:\/\/theinfosecguy.xyz\/\" target=\"_blank\" rel=\"noopener\"><em>Keshav<\/em><\/a><em> is an information security engineer&nbsp; who loves to build and break stuff. He is constantly on the lookout for new and interesting technologies and enjoys working with a diverse set of technologies in his spare time. He loves music and plays badminton whenever the opportunity presents itself.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The JavaScript .slice() method is often used in array operations and can be confusing for beginners. This blog post will discuss the JavaScript slice method and four ways to use it. It will also include the code of each method for more clarity.<\/p>\n","protected":false},"author":1,"featured_media":21066,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[],"persona":[29],"blog-programming-language":[33],"keyword-cluster":[],"class_list":["post-21009","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/21009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/comments?post=21009"}],"version-history":[{"count":66,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/21009\/revisions"}],"predecessor-version":[{"id":34563,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/posts\/21009\/revisions\/34563"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media\/21066"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/media?parent=21009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/categories?post=21009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/tags?post=21009"},{"taxonomy":"persona","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/persona?post=21009"},{"taxonomy":"blog-programming-language","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/blog-programming-language?post=21009"},{"taxonomy":"keyword-cluster","embeddable":true,"href":"https:\/\/coderpad.io\/wp-json\/wp\/v2\/keyword-cluster?post=21009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}