Start learning free

LESSON 123 OF 675 · ARRAYS - CHALLENGES

Move to the Front in TypeScript with splice

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

    TYPESCRIPT · ARRAYS - CHALLENGES

    Move To Front in TypeScript, explained

    Problem overview

    moveToFront receives a to-do list items, an array of strings, and a number index from 0 to the length minus 1. It returns the list with the item at index taken out of its place and put at index 0. All other items keep their order.

    For ["wash", "shop", "cook", "read"] and index = 2 the item is "cook", so the answer is ["cook", "wash", "shop", "read"]. With ["tea", "coffee"] and index = 0 the item is already first, so nothing changes. In ["call", "pay", "call", "walk"] with index = 2, the "call" at index 2 moves and the other "call" stays behind it.

    Approach

    Do it in three moves: remember the item, remove it from its old place, and insert it at the front. Both changes are done with splice. Remembering the item first matters, because after the removal it is no longer in the array. Using the index, not the word, is what handles the repeated "call" correctly: only the item at that exact position moves.

    Step by step

    1. Save the item. Store items[index] in a string constant named item.
    2. Remove it. items.splice(index, 1) starts at index and removes one item. The items after it move one place to the left.
    3. Insert it at the front. items.splice(0, 0, item) starts at 0, removes nothing and adds item. Every other item moves one place to the right.
    4. Return items. The others are still in their old order.

    The solution in TypeScript

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

    On the three examples it returns:

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

    Tracing the first example

    Start with ["wash", "shop", "cook", "read"] and index = 2. Step 1 saves "cook". Step 2 removes it, leaving ["wash", "shop", "read"]. Step 3 puts it in at index 0, and "wash" and "shop" each move one place to the right, giving ["cook", "wash", "shop", "read"].

    The type annotation string on item only documents the intent. If index were outside the array, items[index] would be undefined at run time whatever the annotation says, but the lesson's constraints keep it in range.

    Details worth knowing

    • The function changes the array it receives. splice works in place, and the function returns that same array. For l = ["a", "b", "c"], after const m = new Solution().moveToFront(l, 2) both l and m print [ 'c', 'a', 'b' ] and l === m is true. The lesson's tests only look at the returned list.
    • Index 0. The item is removed and put straight back at 0, so the list is unchanged, which is the right answer.
    • Single item. The only valid index is 0, which is the same case.

    Testing

    Try the last position, a single item and a two-item list: moveToFront(["a", "b", "c", "d"], 3) returns [ 'd', 'a', 'b', 'c' ], moveToFront(["solo"], 0) returns [ 'solo' ], and moveToFront(["x", "y"], 1) returns [ 'y', 'x' ].

    Common mistakes

    • Removing before saving. If the item is not stored first, it is lost with the removal.
    • Inserting first. After items.splice(0, 0, item), every item has moved one place to the right, so the old position is now index + 1. Removing at index would take out the wrong item.
    • Removing by value. Searching for the word with indexOf finds the first "call", which may not be the one at the given index.
    Keep going with TypeScript500+ step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free