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

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.


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


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

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.

Tags:

Javascript

Recent Posts