Search for a command to run...
Hey there! You're welcome to my blog - Here I pen down articles specifically targeted at newbies in tech and front end web development and technical writing. If you're an expert, you could also use a thing or two.
Okay, girl. You definitely killed it on this oneš.
This is very well explained. Thanks for sharing Emmanuela Azubuike.
Thanks Didiā¤ā¤
Asides the fact that you did justice to this topic, the gifs really got me ššš
We are in the era of information. People are more willing to share information and knowledge, both paid and free. The rate of information consumption is also increasing exponentially, with the availability of several platforms geared at information s...
Open-source projects are software whose codes are made public and are free to use, study, modify, and distribute for any purpose. Contributing to an open-source project is one of the best ways to receive immediate feedback and grow your development a...
3 no-code tools you can use to build websites even if you don't write codes
For some people, productivity as a developer means the number of codes you can write in minimal time, while for some, it is the number of quality codes you can churn out in the barest amount of time. Whichever definition you choose is great. This is ...
If you love writing and technology, technical writing could be a suitable career for you. It's also something else you can do if you love tech but donāt really fancy coding all day long. Technical writing might also be for you if you love learning by...
The first time I learnt about splice and slice, it was on a friends Whatsapp status. He was asking why the creators of JavaScript deliberately named the methods similarly knowing their functions are similar too.
Few months later, it was me asking the same question as I always got confused whenever these methods were mentioned.
I'm writing this article partly for myself, as a reference to fall back on on those days when everything seems not to make sense, and for every other person who's either hearing about this for the first time or actually looking for solution or clarity on the concept.
Well, if you're reading this, then it means one thing, you're finding your way around JavaScript. You should have an idea of JavaScript Arrays. It'll be cool to also have a console handy, so you can quickly try out some of the examples in order to know how they work.
For the sake of newbies (who this article is mostly targeted at), I'll be explaining arrays briefly before we proceed in order to enable you have a clearer understanding of the context.
Arrays are data structures which can hold values of different data types(boolean, strings, numbers) and store them inside a single variable. Values of an array are enclosed in a square bracket and each of the values are usually separated by commas .
Let a = ["name", 12, true]
Each item in an array is called element and each element can be accessed by a numerical index, starting with 0.
In the array above, the element at index 0 is name and the element at index 2 is true.
The element at index 1 in the above array can be accessed like this
a[1]
and this will return 12
However, the length of the above array is 3.
Some basic operations can be carried out on an array to either add values or remove values. These operations are done with specific JavaScript methods. Let's look at some of them briefly.
The push operation is used to add an element to an array from the end (last element)
a.push(8);
console.log(a);
In the example above, an element 8 will be added to the rear end of the array a, so we'll have
["name", 12, true, 8]
This is the opposite of push. It removes an element from the end of an array (the last element in an array). So, let's remove the number we just added to the array above.
a.pop(8);
console.log(a);
This method adds an element to the beginning of an array. Lets add two elements to the beginning of our array a
a.unshift("age",36);
console.log(a);
We would have our a array to be
["age", 36, "name", 12, true]
The shift method is used to remove the first element in an array and returns the removed element. Let's remove the element age from our array
a.shift("age");
console.log(a);
Our current array
[36, "name",12, true]
So, now that we've covered the basics, let's look at the splice and slice methods. Before we do, feel free to have a little mental stretch.
Let's continueš
The slice method is used to return a number of copied elements from an array. slice() does not alter the array it is used on, rather it simply returns the copied elements while leaving the parent array untouched.
Syntax
array.slice(from, until)
from - where the slice will start
until - where the slice will end ( the element at this position not included)
So the trick is, if we want to slice the first 2 elements from an array, our until parameter will be 2.
Let's remove the first 2 elements from our previous array [36, "name",12, true].
We have to specify the start 0 and the end 2.
let newArray = a.slice(0,2)
a[0] - 36
a[1] - "name"
a[2] - 12 (not inclusive)
So, our newArray will be
[36,"name"]
our previous array will remain unchanged
[36, "name",12, true]
Splice is used to remove elements from an array and return the removed elements. Splice directly alters the array upon which it is called.
Syntax
array.splice(startindex, numberOfElementsToBeRemoved)
Let's remove 2 elements from our array a starting from the second array (index 1) and store it in the variable splicedArray
let splicedArray = a.splice(1,2);
console.log(splicedArray);
This will return
["name", 12]
While array a will become
[36, true]
If we don't specify the second parameter (numberOfElementsToBeRemoved), every element starting from the given index will be removed from the array
Splice and slice can be a bit confusing, and its okay if you still need to reference an article all the time in order to recall how they work. That's why I wrote about it, for your (and my) reference.
That's all for now.
If you enjoyed this article, leave me a cute emoji and follow me on twitter .