Moving an Element (Javascript Basics Course)

JavaScript
1

Hello All,

I am rather confused with how this code is using the .splice() method to offset an element in an array.

  • My understanding of splice method syntax:
    .splice(starting index, element to delete, elements to add);

  • My questions:

  1. What is the parameter index referencing, and what is [0]:
    const element = output.splice(index,1)[0];

  2. What is index + offset?:
    output.splice(index + offset, 0, element);

const numbers = [1,2,3,4];
const output = move(numbers, 0, 2);
console.log(output);

function move(array, index, offset){
const output = […array];
const element = output.splice(index,1)[0];
output.splice(index + offset, 0, element);
return output;
}

2

I’m not a pro, but this is what I believe is correct:

Question 1: what is index & what is [0]:
const element = output.splice(index,1)[0];

“output” is the given array (in this case [1,2,3,4]);
in which you want to remove a number. (which is specified by the user)
The user can choose the position of this number with the “index” through the method splice.
So the index is refering to the position of the element in the array. If the index was 0, the first element sice arrays are zero based.

We can write the folowing line also as the following two lines:

const element = output.splice(index,1)[0];

const removedItem = output.splice(index,1);
const element = removedItem[0];

The first line removes 1 element in the array: output at a specific position (index).

const removedItem = output.splice(index,1) //returns an array

This method returns an array with the removed elements (in this case with only 1 element) We don’t want an array (e.g. [1] or [4]) but only the element stored in the array we can acces this element by [0], because we know it is the first one.

const element = removedItem[0];

Question 2: What is index + offset?
output.splice(index + offset, 0, element);

the .splice method doesn’t just remove items, we can also replace or insert elements.
index + offset calculates the new position (index) where you want to insert the specified element.

Hope this helps. I sometimes went back to watch a video again. Maybe it’s clever to go over the explanation video about the splice method once more.

1 Like
3

Hi @Cage,

Still digesting the information you provided, and looking up splice method in more detail :books:

I will come back with more questions.

4

Hi @Cage,

So I seem to understand where most of confusion was coming from I was somehow thinking the function move(array, index, offset) was using the .splice() method’s syntax (i.e. splice’s three parameters). I guess I got lost in the variable names.

So your explanation of Question 1: what is index & what is [0] made things clearer for me in that we are accessing the splice’s removed element which is returned as an array. I also confirmed this by removing [0]; the result became
//[2, 3, Array[1], 4]

Question about sysntax
However, is using [0] at the end of splice a form of Javascript syntax, or is it an optional argument? Because I did not see this syntax in online documents.
const element = output.splice(index,1)[0];

5

Nice, good job!

I’m not sure if I’ll be using the correct words but here we go.
Your question: No to both.

We have this line:
const element = output.splice(index,1)[0];

We now know that the following line returns an array:
const returnedArray = output.splice(index,1);

And we acces an array by adding the brackets [], including the index of the element you want;
const element = returnedArray[0];

So if you need to acces something in an array that was returned by the spice method you could do this:

const returnedArray =  output.splice(index,1);
const element = returnedArray[0];

// or shorter:
const element = output.splice(index,1)[0];

I hope it helps!

1 Like
6

Thank you for the detailed explanations, look out for more of my posts. Also how is Mosh’s Javascipt Intermediate course. What are your observations: pros, and cons. Since, I am almost done with the last section of Javascript basics, looking to couple this with Mosh’s HTML/CSS course.

7

I found the second course more difficult than the first. It took me twice as long to get things, and a lot more time to get used to all the new exercizes. But it was worth it though. I didn’t do the HTML/CSS courses yet, maybe in the future :).

8

The 2nd course is indeed more difficult but necessary for modern JS development.

The thing I missed is combination of JS with HTML/CSS. Would be a good subject for a 3rd JS course.

9

You can use the arrayObject.filter() method to remove element from an array at specific index in JavaScript.

var rValue = 'three'
var arrayItems = ['one', 'two', 'three', 'four', 'five', 'six']
arrayItems = arrayItems.filter(item => item !== rValue)
console.log(arrayItems)