Codementor Events

JavaScript dives – copy it with copyWithin

Published Nov 18, 2018Last updated Nov 19, 2018
JavaScript dives – copy it with copyWithin

Wow, I wasn’t writing for some time, it happens sometimes when you’re not having enough time to handle all of your activities, but I felt it that I have to be back because I need it, and I want to give you an article. Great, once we’re here, let’s take a look at the content that we’ve got.

Awesome things happen, in C++ we’ve got a function called "memmove". Programmers who came from this language or C are going to know, what I’m talking about. If someone wants to analyze the mentioned function in a deeper way, please hit the following link.

Link to the explanation on "memmove":
http://www.cplusplus.com/reference/cstring/memmove/

Implementation of copyWithin in JavaScript works in the same way as "memmove" in C++, which is a highly-performance method used to shift the data of an array.

1. What copyWithin method does?

It is really simple in use and it doesn’t have too many use cases. To be honest, I didn’t have any need of using it yet. I hope it will change in the near future because the method gives me a sort of a motivational slap in a face when I think about it.

The method allows you to do a shallow copy of a specific part of an array and move it to a different location in the same collection. There is a really important thing to remember, the element existing on the specified index will be replaced by the copied one.

2. What is the syntax of the following method?

I’m going to show you the syntax of copyWithin, but believe me, it’s really simple, and you shouldn’t have any problems in absorbing it.

The first parameter that is being taken is an index, which is a new location for our element to be copied to. Yes, it’s a new location, imagine that you are a pilot of AirForce 1 and you have to shoot your enemy, which means that you have to make him a target, the same is with the first parameter – you’re targeting the right index in your collection.

The second and the third are the simple ones as well. The second one implies the start place, and the second one means the end place. The element placed between start and end index will be moved to the targeted location in your array. Take a look.

Modeled syntax:

copyWithin(targetedLocation, startPlace, endPlace);

2.1 What do you have to know about syntax params?

You have to know that targetedLocation takes positive and negative numbers, which means that if you provide the negative one, it will start counting from the end of your array. The same rule applies to startPlace and endPlace.

Another important thing that you have to know is, if you skip startPlace param, it will set the parameter’s value to 0, which means, counting will start from the beginning of an array. The same rule applies to endPlace, if omitted it takes the length of an array as a value.

Syntax snippet:

const array = [6,7,9,15,[56,57,58]]; // [6,7,9,15, Array(3)];
array.copyWithin(4, 0, 1); // [6, 7, 9, 15, 6];

Easy peasy, no?! I know, it is. Unfortunately, it is not as awesome as it looks when you use it for the first time. The thing is that the method is a mutable method, which makes it something to be used with precaution. As you could see on the above snippet example, the internal array has been just replaced by chosen value. It has not modified the length of an array, but it modified the value and that is enough to call it mutable.

Please, remember that the method is being supported in all of the major web browsers apart from Internet Explorer.

At the end, if you've got any interesting use cases of this method, post it in the comments, please. Thanks for reading! Until next time!

Discover and read more posts from Robert Wozniak
get started
post commentsBe the first to share your opinion
Andrei Gătej
5 years ago

Hi! At your Syntax Snippet paragraph, shouldn’t the resulted array be “[ 6, 7, 9, 15, 6 ]” ?

Please correct me if I missed something. I haven’t read the entire article, I have just looked at your snippet.

Have a great day!

Robert Wozniak
5 years ago

Hi Andrei,

Thanks for spotting the mistake, a little typo.
Corrected!

Show more replies