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

by

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.

More Related Contents:

  1. How to detect if multiple keys are pressed at once using JavaScript?
  2. How do you display JavaScript datetime in 12 hour AM/PM format?
  3. Javascript and regex: split string and keep the separator
  4. Javascript Regex: How to put a variable inside a regular expression? [duplicate]
  5. How to get JSON from URL in JavaScript?
  6. How does this object method definition work without the “function” keyword?
  7. fetch resolves even if 404?
  8. Changing width property of a :before css selector using JQuery [duplicate]
  9. Dashed border animation in css3 animation
  10. JavaScript ES6: Test for arrow function, built-in function, regular function?
  11. Using textures in THREE.js
  12. Use componentWillMount or componentDidMount lifecycle functions for async request in React
  13. Object copy using Spread operator actually shallow or deep?
  14. html onchange event not working
  15. IE8 alternative to window.scrollY?
  16. Custom browser actions in Protractor
  17. Chrome javascript debugger breakpoints don’t do anything?
  18. How to pixelate an image with canvas and javascript
  19. swfobject.embedSWF not working?
  20. Disable zooming of the page in desktop web browsers using Javascript/Jquery [duplicate]
  21. Convert lat/lon to pixel coordinate?
  22. javascript – Why is there a spec for sync and async modules?
  23. blur vs focusout — any real differences? [duplicate]
  24. How to convert a Title to a URL slug in jQuery?
  25. How to filter input type=”file” dialog by specific file type?
  26. reactjs and masonry layout – undefined
  27. What is the best way to store private data in react-native?
  28. How do I manipulate the SVG DOM and create elements?
  29. Does using a document fragment really improve performance?
  30. How to return an array from an AJAX call?

Leave a Comment