TypeError: console.log(...) is not a function

I'm really confused how I can get console.log is not a function on line 1091. If I remove the closure below, line 1091 doesn't complain such error. Chrome Version 43.0.2357.130 (64-bit).

Here is the code:

$scope.columnNameChanged = function (tableColumn) {
    setDirtyColumn(tableColumn);
    //propagate changes to the key fields
    for (var i = 0; i < $scope.tableIndexes.length; ++i) {
        for (var j = 0; j < $scope.tableIndexes[i].columnName.length; ++j) {
            if ($scope.tableIndexes[i].columnName[j] === tableColumn.previousName) {
                console.log('xxx', $scope.tableIndexes[i].columnName[j])
                (function (i, j) {
                    $timeout(function () {
                        console.log($scope.tableIndexes[i].columnName[j])
                        $scope.tableIndexes[i].columnName[j] = tableColumn.name.toUpperCase();
                        console.log($scope.tableIndexes[i].columnName[j])
                    });
                })(i, j);
            }
        }
    }
};

Solution

Simply put a semicolon (;) after console.log(…).

---

Explanation

The error is easily reproducible like this:

console.log()
(function(){})

It’s trying to pass function(){} as an argument to the return value of console.log() which itself is not a function but actually undefined (check typeof console.log();). This is because JavaScript interprets this as console.log()(function(){}). console.log however is a function.

If you didn’t have the console object you’d see

> ReferenceError: console is not defined

If you had the console object but not the log method you’d see

> TypeError: console.log is not a function

What you have, however, is

> TypeError: console.log(...) is not a function

Note the (...) after the function name. With those it’s referring to the return value of the function.

The line break doesn’t separate these two expressions as separate statements because of JavaScript’s rules for automatic semicolon insertion (ASI).

---

Respect the ;

All these code snippets result in all sorts of unexpected errors if no semicolons are present:

console.log() // As covered before
() // TypeError: console.log(...) is not a function

console.log() // Accessing property 0 of property 1 of the return value…
[1][0] // TypeError: console.log(...) is undefined

console.log() // Like undefined-3
-3 // NaN

let a, b;
const array = Array.from({ length: 2 })

// Now, let’s use destructuring:
[a, b] = array; // ReferenceError: can't access lexical declaration 'array' before initialization

let a, b;
const array = Array.from({ length: 2 }).fill(1),
  array2 = Array.from({ length: 2 })

// Now, let’s use destructuring. Attempt to get the two 1’s from `array` as `a` and `b`:
[a, b] = array;
console.log(a, b); // undefined undefined

---

Another Example

You see the (...) oftentimes with the use of chained methods or chained property accessors:

string.match(/someRegEx/)[0]

If that RegEx isn’t found, the method will return null and the property accessor on null will cause a TypeError: string.match(...) is null — the return value is null. In the case of console.log(...) the return value was undefined.

The error means that the return value of console.log() is not a function. You are missing a semicolon:

console.log('xxx', $scope.tableIndexes[i].columnName[j]);
//                                                      ^

which makes the following (...) of the IIFE to be interpreted as a function call.

---

Compare the error messages of

> var foo = {bar: undefined};
> foo.bar();
Uncaught TypeError: foo.bar is not a function

and

> var foo = {bar: function(){}};
> foo.bar()();
Uncaught TypeError: foo.bar(...) is not a function

2020 Update

One possible cause can be the declaration of var console somewhere in your script.

Use:

window.console.log(...);

instead. Worked for me.

I hope it helps

There is another way to encounter this error. console.log is not immutable and it is possible to accidentally overwrite the value.

console.log = 'hi';

In this case just reload the page to undo the damage.

I know this is not "THE" answer, but thought I would toss in the following

 var console = $( data.message_target );
 console.val( console.val() + data.message); 
 console.scrollTop(console[0].scrollHeight - console.height());

I had a textarea on the page I was calling "console". suddenly all my console.log() scripts gave the error "Uncaught TypeError: console.log is not a function at Object"

... and rightly so, because I used a reserved namespace for my object/var. I realized what I had done after reading his post, and for the sake of posterity: double check naming conventions.

cheers

"its always human error"

In react-native at least, the console seems to work without any import, so, removing import console = require('console'); or import console from 'console'; from the begin of my file fixed it for me. (the VS Code IDE seems to add that automatically sometimes )