Jim Hoskins
writes on October 29, 2012
In this Treehouse Quick Tip, Jim shows us how to use the JavaScript Splice Method. The splice method is used to manipulate arrays. The splice function can be used to remove elements from an array. The first argument in the splice function is the index you want to begin with. The second argument is the number if indices to remove. You can also replace or insert values into your array with the splice function. This is done by simply adding the elements to insert into your function.
To simply insert values, set the second argument (the number of elements to remove) in your splice function to “0
Video Transcription
Jim: Sometimes, we need to wait a certain amount of time in our programs
before we take an action, and sometimes we even want to repeat this waiting
and code execution over and over again. Now, we can’t simply write a loop
to wait the correct amount of time in JavaScript or else our pages won’t
work. Instead, we need to use something called the timeout and an
interval.
So, in this example, I have our time displayed on a page using JavaScript.
So, let’s take a look at the code. You basically have an H1 with this ID
of message, which we replace, using JavaScript with the current time.
We’re simply grabbing the element with “get element by ID” and then setting
its inner HTML to “the time is” plus the current date. Now, what if I want
this to not happen on a page load immediately, like this, but rather, to
wait a few seconds. Well, we need to do a timeout for that. In order to
do a timeout, what we’re going to do is take our original code and surround
it in a function, giving it a name. So, in this case, I will call this
function “update message”. And, we’ll put the code inside, and we’ll
indent it properly. And, now, if we run our code, we’ll see it doesn’t run
at all because we’ve surrounded it in a function. By putting it in a
function, we don’t execute it immediately, but, rather, we can execute it
later.
Now, in order to make a trigger a few seconds afterwards, we use a special
function called “set Timeout”. It’s called “setTimeout”, and Timeout
starts with a capital T. And, this takes a function and how long to delay
before running that function. Our function is “update message”. Now,
we’re not going to put parenthesis after this because we’re passing “update
message” as a function value, not executing “update message” itself. Then,
as our second argument, we have the delay, and this is measured in
milliseconds. There are 1000 milliseconds per second, so if we wanted to
delay for, let’s say, four seconds, then we would use 4000 milliseconds.
Now, when we run this code, and “setTimeout” is called, it will wait 4000
milliseconds before calling “update message”. So, let’s go, and refresh,
one, two, three, four, and, there it goes.
Now, sometimes we would want to have this update automatically after a
certain amount of time. “SetTimeout” only executes it once after a single
delay. If we want to continually update, instead of using “setTimeout”, we
can use “setInterval”. And, let’s change the time from 4000 milliseconds
to, let’s say, 500 milliseconds. Now, it will update the message every 500
milliseconds, or twice a second. And, now, if we update it, we can see our
code is now updating every 500 milliseconds. We can only see the code
updating every second because of what we’re outputting, but we can use this
code any time we want to repeat code over and over again with small, or
large delays in between each running of the code.
Jim: The JavaScript splice function on arrays is a very powerful tool. It’s
capable of adding, removing, and replacing values within an array. With all
the things it can do, it can be a little confusing at first, but let’s take
a look at exactly how it works.
The splice method is used on arrays. In our example here, we have an array
called “numbers” which holds the numbers zero through six. We have a log
statement before and after we call our splice that we’ll be experimenting
with. To call it, we just call numbers.splice and we’ll place our arguments
here and experiment with it. So, if we take a look at the output, right
here, we can see our numbers originally started with this array. After we
call splice with no arguments, numbers remains the same value and result is
empty. So there are two things that happen when we call splice. First, it
changes the actual value of the array we’re operating on, in this case
“numbers” and it also returns another array.
So the first two arguments are for removing elements from the array. Let’s
say we wanted to remove the number one and two from the array. Well, the
first index is where we start removing. We started index zero, and this
will be index one, two, three and the values happened to be named after the
index they’re currently at. So if we wanted to remove one and two, the
index we would start removing from is index number one. Now to remove both
one and two, we need to remove two elements. And that’s with the second
argument to splice is. The number of arguments after this beginning index
to remove. Now when it does this, it removes it from the original array and
it returns that value as a result. So let’s take a look.
If we refresh, we can now see the numbers has been changed, removing one
and two, that where originally inside the numbers array and it also
returned those values out. Any arguments after the first two arguments are
the values to be inserted into the array, at the location the originals
were. So in this case, when we remove one and two, we are replacing it with
nothing. So we go straight from zero to three in a result. However, if we
want to place any values, we can just pass them right here. So let’s put
the string one, and the string two. Now if we refresh, we can see that it
removed the number one and two, but added in the string one and two in
their place. And it doesn’t have to be the same amount of elements I
removed. If we simply add one element in, we’re going to remove the number
one and two or replace it with a single value one. Or we could have
multiple values. We can have as many values as we like.
Now we can see that we’re both able to remove and return values as well as
insert values in their place. Now we can also use this just to insert
values anywhere we want, if we simply make the second argument zero. What
this means is we’re starting at index one and we want to remove zero
elements, meaning we don’t want to remove anything. But, starting at index
one, we also want to insert all these extra values. So by doing it this
way, we start off with zero, one, two, three, four, five, six, but now,
starting at index one, we have our inserted values, but we haven’t removed
any other values. And since we haven’t removed anything, the result is the
empty array.
Announcer: If you would like to see more advance videos and tutorials like
this one, go to teamtreehouse.com and start learning for free.
