Start learning free

LESSON 149 OF 348 · LOOPING OVER ARRAY INDICES

Get Full Names in TypeScript: Looping Over Two Arrays by Index

Practice Read the full explanation

Given two arrays of strings named firstNames and lastNames, return an array containing the full names (separated by one space)

Example:

Input:   firstNames = ["John","Andy","Mary"]
         lastNames = ["Doe","Smith","Johnson"]

Output:  ["John Doe", "Andy Smith", "Mary Johnson"]
STEP 1 OF 5
    Ctrl + Enter to check

    TYPESCRIPT · LOOPING OVER ARRAY INDICES

    Get Full Names in TypeScript, explained

    Problem overview

    The method getFullNames receives two arrays of strings, firstNames and lastNames. The name at position i in one array belongs with the name at position i in the other. The method returns a new array of full names, each first name and last name joined by a single space, in the original order.

    For firstNames = ["John", "Andy", "Mary"] and lastNames = ["Doe", "Smith", "Johnson"], the result is ["John Doe", "Andy Smith", "Mary Johnson"].

    Approach: walk both arrays with one index

    A for...of loop would visit the elements of one array, but it can't tell you which position you are at, so it can't reach the matching element of the other array. An index loop solves that: one variable i addresses firstNames[i] and lastNames[i] in the same iteration.

    The plan is to build a result array, add one full name per iteration, and return the array when the loop ends.

    Step by step

    1. Create the result array. Declare an empty string[] called names. It collects the answer, so it has to exist before the loop starts.
    2. Loop over the indices of firstNames. Start i at 0 and continue while i < firstNames.length. The index is what links each first name to its last name.
    3. Build one full name. Inside the loop, join firstNames[i], a single space " " and lastNames[i] with +. The space in the middle is part of the required format.
    4. Add it to the result. names.push(name) appends the string to the end of the array, so the order of the input is kept.
    5. Return after the loop. Only when the loop is finished does names hold every full name, so the return goes below the loop and not inside it.

    The solution in TypeScript

    class Solution {
        getFullNames(firstNames: string[], lastNames: string[]): string[] {
            let names: string[] = [];
            for (let i = 0; i < firstNames.length; i++) {
                const name: string = firstNames[i] + " " + lastNames[i];
                names.push(name);
            }
            return names;
        }
    }
    

    Some details of the code:

    • let and const. names is declared with let, although it is never reassigned. const would work too, because push changes the array's contents and not the variable. name is a const because each iteration creates it once and never changes it.
    • Annotations are for the compiler. string[] and : string tell TypeScript what the variables may hold. They are erased when the code is compiled to JavaScript and add no checks at run time.
    • Joining with +. When one operand is a string, + joins instead of adding. A template literal does the same job: `${firstNames[i]} ${lastNames[i]}`.
    • Each full name is a new string. Strings in TypeScript can't be changed in place, and the input arrays are left untouched.

    Complexity

    Let n be the number of names. Time: O(n). The loop runs n times and each iteration joins two strings and pushes one element. Joining depends on how long the names are, but for ordinary names that is a small constant.

    Space: O(n). The output array holds n strings. Apart from the output, the method only uses the index and one temporary string.

    Edge cases and common mistakes

    • Empty arrays. The loop does not run and the method returns [].
    • Forgetting the space. firstNames[i] + lastNames[i] gives "JohnDoe".
    • Arrays of different lengths. The problem expects equal lengths. If lastNames were shorter, lastNames[i] would be undefined past its end, and the text would become "B undefined" with no error. If firstNames were shorter, the extra last names would simply be ignored.
    • Returning inside the loop. A return in the loop body ends the method after the first name, giving a one-element array.
    • Declaring names inside the loop. Each iteration would start with a new empty array, and the variable would not exist after the loop.
    • Using <= in the loop condition. The last index is firstNames.length - 1. Going one further reads undefined from both arrays and adds "undefined undefined".

    Testing

    • ["John", "Andy", "Mary"] and ["Doe", "Smith", "Johnson"] give ["John Doe", "Andy Smith", "Mary Johnson"].
    • [] and [] give [].
    • ["Ada"] and ["Lovelace"] give ["Ada Lovelace"].
    Keep going with TypeScriptAbout 340 step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free