Start learning free

LESSON 120 OF 671 · ARRAYS - CHALLENGES

Move to the Front in JavaScript: Remove and Insert

Practice Read the full explanation

You get a to-do list items, an array of strings, and a number index. Return the list with the item at index moved to the front.

Take the item out of its place and put it at index 0. The other items keep their order.

 

Example 1:

Input: items = ["wash", "shop", "cook", "read"], index = 2
Output: ["cook", "wash", "shop", "read"]
Explanation: The item at index 2 is "cook". It moves to the front.
Then "wash" and "shop" move one place to the right.

Example 2:

Input: items = ["tea", "coffee"], index = 0
Output: ["tea", "coffee"]
Explanation: The item at index 0 is already at the front.
Nothing changes.

Example 3:

Input: items = ["call", "pay", "call", "walk"], index = 2
Output: ["call", "call", "pay", "walk"]
Explanation: The "call" at index 2 moves to the front.
The other "call" and "pay" move one place to the right.

 

Constraints:

  • items has 1 to 10 words.
  • index is from 0 to the length of items minus 1.
  • Every word is made of lowercase English letters.
  • The same word may appear more than once.
STEP 1 OF 4
    Ctrl + Enter to check

    JAVASCRIPT · ARRAYS - CHALLENGES

    Move To Front in JavaScript, explained

    Problem overview

    The method moveToFront receives a to-do list items, an array of strings, and a number index. It returns the list with the item at index moved to the front. The item is taken out of its place and put at index 0, and all other items keep their order. The constraints say the list has 1 to 10 words, index is a valid position, and the same word may appear more than once.

    The examples:

    • ["wash", "shop", "cook", "read"] with index = 2 gives ["cook", "wash", "shop", "read"]. "cook" moves to the front, and "wash" and "shop" shift right.
    • ["tea", "coffee"] with index = 0 stays ["tea", "coffee"], since the item is already first.
    • ["call", "pay", "call", "walk"] with index = 2 gives ["call", "call", "pay", "walk"]. The "call" at index 2 moves, and the other "call" is a different item.

    Approach

    Moving an item is two changes: take it out of its current place, then put it in at the front. The array method splice(start, count, item) does both. With a count of 1 and no items, it removes one item at start. With a count of 0 and an item, it inserts that item at start.

    Once the item is removed, you no longer have it in the array, so save it first. The order is: save, remove, insert, return.

    Step by step

    1. Save the item at index, items[index], in a variable named item, declared with let. The next step removes it, so you need your own copy.
    2. Remove it with splice: start at index and remove 1 item. The items after it move one place to the left.
    3. Put item at index 0 with splice too: start at 0, remove 0 items, and add item. Every other item moves one place to the right.
    4. Return items.

    The solution in JavaScript

    class Solution {
    moveToFront(items, index) {
        let item = items[index];
        items.splice(index, 1);
        items.splice(0, 0, item);
        return items;
    }
}

    Details worth knowing

    splice changes the array in place, so the method edits the array it was given and returns that same array. The caller sees the change in their own variable too. The method does not make a copy.

    When index is 0, the item is removed from the front and put straight back at the front, so the list ends up as it began. The code needs no check for that case.

    Equal words are no problem. The code works with a position, not with a value, so in the third example only the "call" at index 2 moves.

    Testing

    Running the method on the three examples prints:

    [ 'cook', 'wash', 'shop', 'read' ]
[ 'tea', 'coffee' ]
[ 'call', 'call', 'pay', 'walk' ]

    Edge cases and common mistakes

    • Inserting before removing. If you insert first, every item from position 0 on shifts right, and the old index now points at a different item. Removing at the old index then takes out the wrong word. On ["wash", "shop", "cook", "read"] with index = 2, inserting "cook" at the front and then removing at index 2 gives [ 'cook', 'wash', 'cook', 'read' ]: "shop" is lost and "cook" is there twice. Remove first, or remove at index + 1.
    • Forgetting to save the item. After the removal, items[index] is the next word, not the one you moved.
    • Using the return value as the list. splice returns an array of the removed items, not the changed array. Return items.
    • Looking up by value. Searching for the word and removing the first match would move the wrong "call" when words repeat.
    Keep going with JavaScript500+ step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free