JavaScript A–Z: “A” for Arrays.

It may be accurate to say that for every code session, a visit to w3schools.com inevitably will take place. I’ve forgotten syntax, what parameters go into this method, what’s the difference between .slice and .splice? The list is endless. Every single time, I say to myself “I should really go through all these”. Well, here is that time. After this hopefully when I say, “I knew that”, I wasn’t bullshitting.

JS Array Methods:

Photo by Charlie Deets on Unsplash

concat() — method is used to join two or more arrays.

syntax: array1.concat(array2, array3, …arrayX)
return value: an Array object, representing the joined array.

let string1 = "Hello";
let string2 = "World";
string1.concat(string2); // "HelloWorld"
let space = " ";
string1.concat(space, string2); // "Hello World"
// So this would the same as the + operator for strings?
string1 + space + string2; // "Hello World" Yep!

Wow, I’ve already screwed up using strings. Let’s use arrays as intended. However, happy accident, .concat() works on strings as well.

let array1 = ["H", "E", "L", "L"];
let array2 = ["O"];
array1.concat(array2); // [ 'H', 'E', 'L', 'L', 'O' ]

Would the + operator work with arrays???

array1 + array2; // "H,E,L,LO"... not exactly.

Very interesting… It does but not as expected. The last string of the first array is combined with the first string of the second array. Based on the prior experiment with strings, this takes the last string element and combines it with the first string element of the second array. I can’t think of a use case for this result however, experimenting like this shows deeper insight on how things function. For now, I’m moving on.

Lastly does it mutate the array or arrays passed in as parameters?

array1 // [ 'H', 'E', 'L', 'L' ]
array2 // [ 'O' ]
// NOPE, the original array remains intact. 

Photo by Jacek Dylag on Unsplash

constructor property — returns the constructor function for an object.

syntax: array.constructor
return value: function Array() { [native code] }

This is to check if a variable is an Array or not. Let’s code it out.

let myArray = [ 1, 2, 3 ]
myArray.constructor // => Array() { [native code] }

OK, that confirms myArray is an Array… This reminded me of the typeof() method… To stay in tune with how coding lessons are taught, “we’ll get to that later”. Next!

Photo by Victor Garcia on Unsplash

copyWithin() — copies array elements to another position in the array, overwriting the existing values.

syntax: array.copyWithin( targetIndex, startIndex = 0, endIndex = array.length)
return value: the changed array

I have never used this but seems very interesting and confusing… Making sense of the syntax:
targetIndex — Required. It refers to the index of the resulting array of which the copy will start.
startIndex — Optional. Index of the original array in which to start copying from.
endIndex — Optional. Index of the original array in which to stop copying. The value of this index is not included.
Let’s see where this goes.

let letters = [ "A", "B", "C", "D", "E" ];
letters.copyWithin(0); // => [ 'A', 'B', 'C', 'D', 'E' ]
letters.copyWithin(1); // => [ 'A', 'A', 'B', 'C', 'D' ] 
letters.copyWithin(2); // => [ 'A', 'A', 'A', 'A', 'B' ]
letters.copyWithin(3); // => [ 'A', 'A', 'A', 'A', 'A' ]
letters.copyWithin(4); // => [ 'A', 'A', 'A', 'A', 'A' ]
letters // => [ 'A', 'A', 'A', 'A', 'A' ];

Using only the required parameter the return is a copy of the original array replacing the elements, starting from the targetIndex of the resulting array. The interesting part is the length of the array does not change. The length stays within the original. Also worth noting the original array is mutated. How about using the optional parameters?

let letters = [ "A", "B", "C", "D", "E" ];
letters.copyWithin(1, 2); // => [ 'A', 'C', 'D', 'E', 'E' ]

With the startIndex parameter, this is saying:

• copy the letters array [ "A", "B", "C", "D", "E" ];
• copy the original array’s values starting from index 2 [ "C", "D", "E" ];
• insert and replace the values of the letters array at the targetIndex of 1 [ "B" ];
• If the copied values’ length is less than the original arrays length, keep the original values as they were.

How about all parameters…

let letters = [ "A", "B", "C", "D", "E" ];
letters.copyWithin(1, 2, 4); // => [ 'A', 'C', 'D', 'D', 'E' ]

Breaking this one down:

• Cop the letters array [ "A", "B", "C", "D", "E" ];
• Take values from startIndex 2 to endIndex 4 [ "C", "D" ] , but not including 4 [ "E" ];
• Insert/replace the values at targetIndex of 1 [ "B" ];

This is a great start for going through JavaScript’s built in methods. Next post will pick up here.