Array.push throwing TypeError for array.push is not a function

Question

function capitalizeFirst(arr, new_arr) {
    if (arr.length === 0) return new_arr;
    let str = arr.pop();
    console.log(str);
    return capitalizeFirst(arr, new_arr.push(str));
}

Here is my code. The goal is to practice recursion with this exercise. I am giving the function the following parameters

capitalizeFirst(['car','taco','banana'], []);

new_arr is clearly an array. Why is the push method not working on it? Also, when I change my return statement to

return capitalizeFirst(arr, [].push(str));

and follow along with chrome debugger, the number 1 keeps getting passed to the array instead of the arr.pop() value. What is causing this behavior? I haven't added in the implementation to capitalize the first letter yet either. That was just going to be a replace() call inside my push method in case anyone was wondering why my code wasn't doing what the method name proclaimed.

Thanks for any help

Answer 1

From W3C:

The push() method adds new items to the end of an array, and returns the new length.

The first loop should be fine, but because you're passing .push recursively, the second loop sees a number instead of an array because push returns a number.

Push on it's own line, then pass just the new_arr as the param.

function capitalizeFirst(arr, new_arr) {
    if (arr.length === 0) return new_arr;
    let str = arr.pop();
    console.log(str);
    new_arr.push(str); // the return of .push is the array length, which is not needed. 
    return capitalizeFirst(arr, new_arr); // pass the full array into this function, making it recursive
}

Answer 2

Basically, your error is mainly because push() returns the length of the array after the element was pushed on it, and this will be passed as argument on the recursive call instead of an array:

The push() method adds one or more elements to the end of an array and returns the new length of the array.

A simple fix will be next:

 function capitalizeFirst(arr, new_arr) { if (arr.length === 0) return new_arr; let str = arr.pop(); // Added code to capitalize first letter. str = str.charAt(0).toUpperCase() + str.slice(1); new_arr.push(str); return capitalizeFirst(arr, new_arr); } console.log(capitalizeFirst(['car','taco','banana'], []));

 .as-console {background-color:black !important; color:lime;} .as-console-wrapper {max-height:100% !important; top:0;}

Answer 3

If you console.log(typeof new_arr) you get number as answer.

The reason is that the return value of arr.push() is the index the value was pushed to, not the new array. So your works if you do this:

function capitalizeFirst(arr, new_arr) {
    if (arr.length === 0) return new_arr;
    let str = arr.pop();
    new_arr.push(str);
    return capitalizeFirst(arr, new_arr);
}

https://www.w3schools.com/Jsref/jsref_push.asp (see return value section)

Answer 4

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

The push() method adds one or more elements to the end of an array and returns the new length of the array.

 function capitalizeFirst(arr, new_arr) { console.log("Type of new_arr : ",typeof(new_arr),":", new_arr); if (arr.length === 0) return new_arr; let str = arr.pop(); console.log(str); console.log("Push returns Length", new_arr.push(str)) return capitalizeFirst(arr, new_arr.push(str)); } function correctCapitalizeFirst(arr, new_arr) { console.log("Type of new_arr : ",typeof(new_arr),":", new_arr); if (arr.length === 0) return new_arr; let str = arr.pop(); console.log(str); new_arr.push(str); return correctCapitalizeFirst(arr, new_arr); } console.log("--------------- Correct -----------------"); correctCapitalizeFirst(['car','taco','banana'], []); console.log("--------------- Incorrect ---------------"); capitalizeFirst(['car','taco','banana'], []);