This content originally appeared on DEV Community and was authored by Allen Valdez
Hey everyone, my name is Dez and I am new to programming as well. I wanted to share my understandings of some javascript methods I have learned. If I messed anything up PLEASE feel free to correct me and I will change it. Also if you want to add some more methods or tips/tricks in the comments that will be awesome!
1.) slice()
Slice is a non-mutating method (this means it does not change the original array). This method extracts selected items from an array and returns the extracted items. The slice method looks like this array.slice(from, until); Now you might be confused with the "until" part. SO I will do my best to explain it because the until part was CONFUSING!
What I found was that the "until" part is NOT the end index, instead, it's until ANOTHER element index. For example, let's say I want to slice an array from index 2 to index 4 we will write array.slice(2,5) Think of this 5 as in "STOP AT INDEX 5 BUT DO NOT INCLUDE". Now let's create an instance and try to use slice to get what we wanted
EX 1-1:
myHobbies.slice example:
The following code is an array with my hobbies as elements
const myHobbies = ["Muay Thai", "Boxing", "Programming", "Lifting weights", "Learning about Artificial Intelligence"]Let's say we can extract Programming, Lifting Weights, and Learning about Artificial Intelligence. We will write it as follows:
myHobbies.slice(2, 5)
This will extract my desired items and if I wanted to we can save them into a variable because the method RETURNS my selected items into a new array. So if I were to console.log what I wrote above I will get:
['Programming', 'Lifting Weights', 'Learning about Artificial Intelligence']
Now if I were to console.log myHobbies I will get:
["Muay Thai", "Boxing", "Programming", "Lifting weights", "Learning about Artificial Intelligence"]
This is because this method is non-mutating remember?
2.) splice()
Splice IS NOT THE SAME AS SLICE!!! A lot of devs get this confused because the names are similar. Now splice CHANGES an array by adding or removing elements from the array.
- Removing Elements with splice()
In order to remove elements using splice, we will need to provide the method with the index of the element along with the number of elements to be removed. It will be written as such:
array.splice(index, number of elements);Where "index" is the starting point and number of elements is how many elements we want to be removed starting from our desired start point going up. Now if we fail to include a second argument every single element starting from your start point and up will be REMOVED. Now let's see it in action
EX 2-1:
Now let's say we have the same array as before which is const myHobbies = ["Muay Thai", "Boxing", "Programming", "Lifting weights", "Learning about Artificial Intelligence"]. Now let's say we got injured and we are no longer interested in lifting weight. We also figured that we no longer want to learn about artificial intelligence. Now to remove these 2 elements from our myHobbies array we can use the splice method!
`myHobbies.splice(3,2)'
What this does is that it will begin on index 3 which is "Lifting Weights" and will REMOVE 2 elements. These elements will be the starting point and the next element. This means if we console.log myHobbies we will see ["Muay Thai", "Boxing", and "Programming"] Awesome right?
- Adding Elements
In order to add elements, we will need to pass them as the 3rd, 4th, 5th ...nth parameter. Depending on how much you want to add of course. So it will look like this
array.splice(index, number of elements, element, element, element)
EX 2-2:
Let's look at our previous array again which is const myHobbies = ["Muay Thai", "Boxing", "Programming", "Lifting weights", "Learning about Artificial Intelligence"]. Let's say we picked up new hobbies and we want to add them. In order to NOT remove anything, but add new elements we can do it like this.
myHobbies.splice(5,0, 'Machine Learning', 'Running','CyberSecurity')
Now if we console.log myHobbies we will see [ 'Muay Thai', 'Boxing', 'Programming', 'Lifting weights', 'Learning about Artificial Intelligence', 'Machine Learning', 'Running', 'CyberSecurity']
NOTE: Notice how I put 5 as the index. This means I wanted to start on the 5th index which is "Learning about Artificial Intelligence" and add it at the end. You can begin in ANY index and add it in. This means you can throw in some elements in the center if you really wanted to.
This content originally appeared on DEV Community and was authored by Allen Valdez
Allen Valdez | Sciencx (2022-01-17T02:06:14+00:00) Some Javascript Methods: slice() & splice(). Retrieved from https://www.scien.cx/2022/01/17/some-javascript-methods-slice-splice/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.