{"id":3152,"date":"2017-12-05T11:41:38","date_gmt":"2017-12-05T06:11:38","guid":{"rendered":"https:\/\/code4developers.com\/?p=3152"},"modified":"2017-12-05T11:44:02","modified_gmt":"2017-12-05T06:14:02","slug":"slice-splice-one-use","status":"publish","type":"post","link":"https:\/\/code4developers.com\/slice-splice-one-use\/","title":{"rendered":"Slice or Splice Which one to Use?"},"content":{"rendered":"

In this article we will try to get a clear idea about Slice or Splice which one is better to use…<\/p>\n

Slice<\/h3>\n

Slice is a method on the Array Prototype that you can use to extract a section of a array. Let\u2019s say you want to remove the first two elements from a array. Then you could do something like this:<\/p>\n

let myList = [0,1,2,3,4,5,6,7,8,9]\r\nmyList = myList.slice(2)<\/pre>\n
You could of course do the same with a combination of filters and map without using slice:<\/p>\n
let myList = [0,1,2,3,4,5,6,7,8,9]\r\nmyList = myList.map((value, index) => index => 2 ? value : undefined).filter(val => val!==undefined)<\/pre>\n
There aren\u2019t much to the slice method, but the key thing is that it doesn\u2019t mutate the array you run it on, but rather it returns a new copy. It takes two arguments: begin and end. If you don\u2019t give it a end it treats the end as to the end of the array. And you can give it a negative number of remove things at the end. For example, like below to remove the last three elements at the end; without doing some weird .length hacks or double reversing.<\/p>\n
let myList = [0,1,2,3,4,5,6,7,8,9]\r\nmyList = myList.slice(0, -3)<\/pre>\n
Slice is a very versatile and useful method, when you need to modify a list based on position instead of content. And it much more elegant than some of the other solutions I have seen (and written) to get the same thing. Everything from something like my map + filter hack above to some more advanced uses for the old school for loop.<\/p>\n
Splice<\/h3>\n
Splice is another method on the Array Prototype; it is in many ways Slice\u2019s weird brother in law. The main difference is that splice mutates the array you run it on, while slice does not. I personally never use splice because mutation often lead to unintended circumstances.<\/p>\n
The other thing about splice is that you can\u2019t do all of what you can do with slice; for example the cool -1 tricks for removing stuff at the end. This is where it gets a little bit \u201cweird\u201d. You can use it to remove stuff from an array. It takes a start argument and a number argument, for example like below (removing the two first elements)<\/p>\n
let myList = [0,1,2,3,4,5,6,7,8,9]\r\nmyList.splice(0, 2)<\/pre>\n
But you can also feed it any number of elements after the number argument which will be inserted where you removed the elements. Splice can be very useful, but be careful, because everything is just weird enough that it is very easy to do something you didn\u2019t want to and cause some difficult to spot bugs.<\/p>\n
Let me end with the key differences between slice and splice:<\/p>\n
    \n
  • Splice mutates<\/li>\n
  • Slice doesn\u2019t mutate<\/li>\n
  • Slice works with start and end position<\/li>\n
  • Splice works with a start position and a \u201cdelete Count\u201d.<\/li>\n
  • Splice can also append elements.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
    In this article we will try to get a clear idea about Slice or Splice which one is better to use… Slice Slice is a method on the Array Prototype…<\/p>\n","protected":false},"author":7,"featured_media":3127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[22,70,71],"powerkit_post_featured":[],"class_list":{"0":"post-3152","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-javascript","9":"tag-slice","10":"tag-splice"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-OQ","jetpack-related-posts":[{"id":3818,"url":"https:\/\/code4developers.com\/slicepipe-jsonpipe-asyncpipe\/","url_meta":{"origin":3152,"position":0},"title":"Pipes in Angular Part \u2013 4 : SlicePipe, JSONPipe, AsyncPipe","author":"Yatendrasinh Joddha","date":"August 19, 2018","format":false,"excerpt":"Here is the fourth part of angular pipe series in this part we will discuss about SlicePipe, JSONPipe, and AsyncPipe. If you have not read previous articles here is the link for previous articles. Pipes in Angular Part \u2013 1 : lowercase, uppercase, and titlecase pipes Pipes in Angular Part\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":4103,"url":"https:\/\/code4developers.com\/top-array-hacks\/","url_meta":{"origin":3152,"position":1},"title":"Top Array Hacks","author":"Arif Khoja","date":"March 14, 2019","format":false,"excerpt":"Arrays are everywhere in JavaScript and with the new\u00a0spread operators\u00a0introduced in ECMAScript 6, you can do awesome things with them. In this post I will show you 3 useful tricks you can use when programming. 1. Iterating through an empty\u00a0array JavaScript arrays are sparse in nature in that there are\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3143,"url":"https:\/\/code4developers.com\/looping-without-loops\/","url_meta":{"origin":3152,"position":2},"title":"Looping without loops.","author":"Arif Khoja","date":"November 29, 2017","format":false,"excerpt":"As a coder or an aspiring one you have probably experienced many moments where all the smokes blows away and you understand something much clearer. One of these moments for me was when I was introduced to recursion. Probably, while learning Scheme or Haskell. The basic idea is that a\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3311,"url":"https:\/\/code4developers.com\/default-parameter-in-a-javascript-function\/","url_meta":{"origin":3152,"position":3},"title":"Default Parameter in JavaScript function","author":"Yatendrasinh Joddha","date":"March 17, 2018","format":false,"excerpt":"In any programming language we often require having default parameter or default value for the parameter in a function. JavaScript allow us to initialize parameter a default value. If you are not passing any value to the parameter, then the default value of the parameter will be undefined. Let's consider\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2610,"url":"https:\/\/code4developers.com\/semicolon-in-javascript\/","url_meta":{"origin":3152,"position":4},"title":"Importance of Semicolon [;] In JavaScript","author":"Yatendrasinh Joddha","date":"June 19, 2017","format":false,"excerpt":"It is said that in JavaScript semicolons are not compulsory. It's true, because JavaScript automatically inserts a semicolons at required place and it is know as \"Automatic Semicolon Insertion\". This behavior of JavaScript confuses us a lot. This article is written for those who have just started writing JavaScript and\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3174,"url":"https:\/\/code4developers.com\/for-of-loop\/","url_meta":{"origin":3152,"position":5},"title":"For-of Loop","author":"Arif Khoja","date":"December 25, 2017","format":false,"excerpt":"For of loop is one of a few recent additions to the for loop in JavaScript. It makes it possible to do what is basically a foreach in most other programming languages, like for example C#. for(var item of array){} is more or less the same as foreach(var item in\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3152"}],"version-history":[{"count":4,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3152\/revisions"}],"predecessor-version":[{"id":3156,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3152\/revisions\/3156"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3127"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3152"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}