Related
I'm trying to add a custom method on the prototype of the Array object:
Array.prototype.demo = function(){
this.forEach(i=>console.log(i))
}
But, I'm receiving the error below when I'm calling the method like this:
[1,2,3].demo()
// Error: TypeError: Cannot read property 'demo' of undefined
However, it runs successfully when I change it to:
const arr = [1,2,3];
arr.demo()
// Output: 1, 2, 3
PS. This is in nodejs
To reproduce the error in the browser, copy/paste the full block at once and click enter.
UPDATE: It sounds like we need to add a semicolon to make it work:
Array.prototype.demo = function(){
this.forEach(i=>console.log(i))
}; <=== added semicolon here to work #jfriend00
[1,2,3].demo();
However, now this next code works WITHOUT semicolon!!
String.prototype.demo = function(){
this.split('').forEach(c=>console.log(c))
}
'hello'.demo();
Quick Fix - Add Semi-colon
Add a semi-colon at the end of your function definition:
Array.prototype.demo = function(){
this.forEach(i=>console.log(i))
}; // <======
[1,2,3].demo();
And, it will work.
What's Happening?
The problem is that the [1,2,3] is being combined with the previous function (whitespace between them collapsed). In that circumstance, the [1,2,3] becomes just [3] and tries to read the [3] property from the function object. If you put the semi-colon at the end of the function definition, then that signals the end of the function definition statement and the [1,2,3] can then be interpreted as a static array definition.
It's all about context. In some circumstances in Javascript, [x] is a property access. In other circumstances, it's a static array definition. Without the semi-colon, it was getting interpreted as the property access instead of the array definition.
Remember that functions are objects in Javascript so they can have properties and can respond to [x] as a property access on them.
So, without the semi-colon at the end of the function you essentially have this:
Array.prototype.demo = function() {...}[3].demo();
Because the whitespace is collapsed between the end of your function and the [1,2,3]. That means the JS interpreter is expecting the [] to be a property name so it evaluates the statement inside the [] and in that context [1,2,3] turns into [3] (the 1,2,3 is evaluated which takes the value of the last comma separated statement which is 3).
More Detailed Explanation
Think of it like this:
// defines function
let f = function() {};
// attempts to read a property from that function object
let o = f [1,2,3]; // this is the same as let o = f[3]
// tries to call `.demo()` on the value read from that property
// which was undefined so this throws
o.demo();
Functions Are Objects
As a demonstration of how functions are objects, see this example that actually works!
// defines function
let f = function() {};
f[3] = {demo: function() { console.log("demo!!!");}}
// attempts to read a property from that function object
let o = f[1,2,3]; // this is the same as let o = f[3]
// tries to call `.demo()` on the value read from that property
// which was undefined so this throws
o.demo();
Here, we actually put a property on the [3] property of the function so when f[1,2,3] reads that property, it actually gets an object with a .demo() method on it so when we then call it, it all works. I'm not suggesting one would ever code this way, but I am trying to illustrate how f[1,2,3] is just reading the [3] property from the function object.
Good Reason Not to Leave out the Semi-colons
These odd cases are a good reason not to leave out semi-colons, even though you usually (but not always) get away with it.
The reason is that functions are objects, so if we don't add a semicolon, JavaScript will try to access a property on the function object, after it evaluates the comma operator like this:
function() { ... }[1,2,3].demo();
function() { ... }[3].demo();
undefined.demo();
I spent hours just to find out that I misspelt the word .length as .lenght. It can run normally with no warning at all. Why...?
I use 'use strict' and run on Node.js 10.13.0.
Code:
'use strict';
let arr = [1, 2, 3, 4];
for(let i = 0; i < arr.lenght; i++) {
console.log(arr[i]);
}
Because when you try to get a property that doesn't exist, it returns undefined, and 0 < undefined is false.
let arr = [1, 2, 3, 4];
console.log(arr.lenght) // undefined
console.log(arr.qwerty) // undefined
console.log(arr.lenght < 9999) // false
console.log(arr.lenght > 9999) // false
arr.length = 7 // <-- it's not a good idea
for(let i = 0; i < arr.length; i++) {console.log(arr[i])}
EDIT
I said 'javascript is not a strongly typed language' and it is true. But this way of adding new properties it is a feature of prototype-based programming, as #Voo said.
I also said .length=7 it's a bad idea. After reading a little more, in this case I still think it's a little weird to increase the length property after adding elements. Maybe it's fine to truncate, delete elements or empty an array, although in the latter case I would prefer arr=[] instead of arr.length=0.
There are some interesting examples about length property in the Mozilla documentation.
A JavaScript array's length property and numerical properties are
connected. Several of the built-in array methods (e.g., join(),
slice(), indexOf(), etc.) take into account the value of an array's
length property when they're called. Other methods (e.g., push(),
splice(), etc.) also result in updates to an array's length property.
var fruits = [];
fruits.push('banana', 'apple', 'peach');
console.log(fruits.length); // 3
When setting a property on a JavaScript array when the property is a
valid array index and that index is outside the current bounds of the
array, the engine will update the array's length property accordingly:
fruits[5] = 'mango';
console.log(fruits[5]); // 'mango'
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 6
Increasing the length.
fruits.length = 10;
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 10
Decreasing the length property does, however, delete elements.
fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length); // 2
JavaScript arrays are treated as objects (though they are instances of Array). Hence, when you write arr.lenght, it treats lenght as a property of an object that is undefined. Hence, you don't get an error.
It simply tries to get a property that is undefined. Also, in your case, the loop just does not execute as the condition of the loop is never satisfied.
Why
Standard JavaScript arrays aren't really arrays at all¹, they're objects, and if you read an object property that doesn't exist (like lenght), you get the value undefined (even in strict mode):
console.log(({}).foo); // undefined
When you use undefined in a relational operation like < or > with a number, it gets converted to a number, but the number value it gets is the special number NaN, which has the bizarre property of always causing comparisons to be false:
console.log(NaN < 0); // false
console.log(NaN > 0); // false
console.log(NaN === 0); // false
console.log(NaN === NaN); // false!!
What you can do about it
Linter tools will often pick these things up in simple cases.
Alternately, TypeScript provides a full static typing layer on top of JavaScript which can catch these sorts of errors.
If you wanted (and this would probably be overkill), you could wrap a Proxy around your objects that threw a proactive error when you tried to read a property that didn't exist:
function proactive(obj) {
return new Proxy(obj, {
get(target, propName, receiver) {
if (!Reflect.has(target, propName)) {
throw new TypeError(`Property '${propName}' not found on object`);
}
return Reflect.get(target, propName, receiver);
}
});
}
const a = proactive(["a", "b"]);
a.push("c");
for (let i = 0; i < a.length; ++i) {
console.log(a[i]);
}
console.log(`Length is: ${a.lenght}`); // Note the typo
.as-console-wrapper {
max-height: 100% !important;
}
There's a significant runtime penalty, though.
¹ (that's a post on my anemic little blog)
You could easily add new properties to arr object, JavaScript won't warn you about it, instead it will try to find the property you're calling, and if it didn't find anything such result will be undefined, so the comparison is actually i < undefined everytime because you're calling a property that hasn't been created on the object. I'll suggest you to read What does "use strict" do in JavaScript, and what is the reasoning behind it?.
The upper bound of the loop is specified as lenght, a typo for the local variable length. At runtime, lenght will evaluate to undefined, so the check 0 < undefined is false. Therefore the loop body is never executed.
By default, all objects in JavaScript are extensible, which means that you can add additional properties to them at any time simply by assigning a value to them.
Arrays are no different; they're simply objects that are instances of the Array type (at least for the purposes of extensibility).
In this case, had you added:
Object.preventExtensions(arr);
after creating the array, then in combination with 'use strict' this would have raised an error -- had you tried to write to a typo'd property. But for a read usage like this, there is still no error at all; you just get undefined.
This is just one of the things you have to live with in a loosely-typed language; with the added flexibility comes added risk of bugs if you're not careful.
This question already has answers here:
What are the rules for JavaScript's automatic semicolon insertion (ASI)?
(7 answers)
Closed 3 months ago.
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 )
So I'm calling the following function:
function updateOutput(a){
var n = $('#selector').val();
$('#hueslide').val(a[n].hue);
$('#huetext').val(a[n].hue);
}
And I'm getting an error: "Cannot read property 'hue' of undefined."
However, when I use console.log(n), it's returning a value. And when I manually insert the same value in a[n], I get the expected result. I'm guessing this is an asynchronous issue, but the same code was working in an earlier version and I'm not sure how to fix it.
Specifically, when trying to debug updateOutput using console.log, I get the following:
console.log(n); //returns 0
console.log(a); //returns an array of objects
console.log(a[0]); //returns first object in array
console.log(a(n)); // returns undefined
That error isn't saying that n is undefined, or even a, it's saying that there is no property hue on whatever is assigned to a[n]. Whatever you are passing into updateOutput has no key to match n that also has the property hue.
Try like this:
function updateOutput(a){
$(document).ready(function(e) {
var n = $('#selector').val();
$('#hueslide').val(a[n].hue);
$('#huetext').val(a[n].hue);
});
}
You have to wait until the element are fully loaded. That's why you have to use ready method.
Okay, I figured it out. Turns out the value of 0 in n I was passing a string. So adding n = parseInt(n); resolved the issue.
Suppose I have some variables:
var s = 's', i = 0, o = {}, a = [], n = null, nan = NaN, u;
How can I make any sense of when reading x.p will return undefined, and when it will throw a TypeError?
s.p; // undefined
i.p; // undefined
o.p; // undefined
a.p; // undefined
n.p; // TypeError!
nan.p; // undefined
u.p; // TypeError!
P.S. Are null and undefined the only weird values in this way? Are there others?
Edit
I'm aware that by declaring variables as I have, several of my values have been automatically wrapped by objects (e.g. Number), despite being primitives. Therefore I can treat them like "proper" objects (e.g. {}, []) and attempt to read their properties. But I can't find much explaining what is and isn't wrapped this way.
Yes, null and undefined are the only values that throw an exception when being used in a property access. The dot and bracket property accessors do invoke the internal CheckObjectCoercible function, which is defined as following:
The abstract operation CheckObjectCoercible throws an error if its
argument is a value that cannot be converted to an Object using
ToObject. It is defined by Table 15:
Table 15 — CheckObjectCoercible Results
Argument Type | Result
--------------+------------------
Undefined | Throw a TypeError exception.
Null | Throw a TypeError exception.
Boolean | Return
Number | Return
String | Return
Object | Return
null and undefined being the values that represent Nothing cannot be converted to objects ("wrapped" as you say). Notice that you could of course have an object with an existing property that throws on access, like
var o = {get p() { throw new TypeError("you may not access this"); }};
o.p // TypeError
When you're reading the property of something that's undefined. You're basing saying:
What is undefined of undefined? or in the case of null what is undefined of null ? Neither undefined nor null are objects, therefore you can't set or get properties on/from them. With that in mind, an error will be thrown.
When the object is null/undefined, it'll throw an error because it'll try to access a property of an object that does not exist in first place.
On the other cases, it'll try to access a property of an existing object and will return undefined because the property is not found.
Please note that almost everything in js is an object, as you can see here.
let's firstly start with
why undefined on:
var s='s';
You assigned s to string which is primitive type. Javascript is tricky here in one sense. Though primitive type, when you try to access the property by doing:
s.p
It firstly does this internally:
String(s)
and creates the object and then tries to see if it has that property which is, of course not defined and thus you get undefined. Almost similar things happen with numerical assignment and NAN.
For n=null:
If you do:
var n=null;
typeof n;//"object"
n.p// throws typeerror
In fact,null can be thought of special kind of object without any properties or method to represent absence of value and thus, you get typeerror when you try to access any properties of null.
a.p
o.p
Easily, you can see that you are trying to access the property of an object than is not defined or not built-in and thus it should say, undefined. You should be surprised to see other than that :D.
To add to the other answers here, there is an easy way to check if a property access will throw an exception. Simply loosely compare the value you're unsure of to null, like so:
if(x != null) { // note the LOOSE equality, rather than !==
// do something with x.prop
}
The reason this works is that only null and undefined * throw errors on property access, and they are only loosely equal to each other. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_when_to_use_them.
* There is also a case where some JS objects can apparently "emulate" being undefined, in which case they also are loosely equal to null and undefined.