Unexpected Javascript for-loop behavior inside Chrome - javascript

So I am getting incredible weird java script behavior inside a chrome tab. The page is behind a login so I can't post it but can someone explain exactly what is happening???
for(var z in ""){ console.log(z) }
contains
//undefined
hmm...
var key = ""
for(var i in key){ console.log(i) }
contains
//undefined
Object.getOwnPropertyNames(key)
//["length"]
Object.getOwnPropertySymbols(key)
//[]
window[key]
//undefined
At first I thought this was one of those JS behaviors and was ready to submit it to JSWTF but the behavior runs properly in another chrome tab:
for(var i in ""){ console.log('ran',i) }
//undefined
How did a value get assigned to a blank string?
Where is it?
What is the for loop doing?
edit: The same page in firefox returns expected behavior in console. I have not tested other browsers

You have an ES6 shim on the original page which adds the function contains() to the String prototype. You can do this yourself by doing something like:
String.prototype.contains =
function(e) {
return this.indexOf(e) > -1;
};
The ES6 function ultimately standardized on is includes(), so you'll probably see that function name change in the future when a developer updates the shim.

Related

JavaScript Math.random() returns "Undefined"

I have a block of code that uses Math.random(). I noticed that occasionally the return value would be "Undefined". This is the code I used:
return data.map(val => {
var r = Math.random();
if (r < this.mutChance) {
console.log(Math.random);
debugger;
return this.rDna(val);
}
return val;
});
When i set the mutChance variable to 0 and let the code run for a bit eventually debugger gets called and shows the value of r to be undefined. I tried to reproduce the problem by running in console
var test = Math.random();
while(test){
test = Math.random();
}
However, this loop never ended. I have no idea why the function would act differently within my object, and the console.log(Math.random); Says that the function still has its native code. Nowhere do I override the random function, nor do I use the variable r anywhere else.
I am relatively new to JavaScript and couldn't find this problem anywhere else. The only other code I have imported is the p5.min.js package.
Problem was with how chrome was interpreting the very small values
Without console.log chrome shows it like this
With console.log chrome displays correctly

How to check if a function does anything? [duplicate]

Let's have a function call
function doSomethingAndInvokeCallback(callback){
// do something
callback();
}
I can check if given argument is function if(typeof callback == 'function')
How can I discover, if given callback function is function and isn't empty?
like
doSomethingAndInvokeCallback(function(){
//nothing here
})
There is no totally reliable way to know if a function is empty because there are multiple kinds of functions in JS, some implemented with JS and some implemented with native code and you can't know for sure whether the function passed in does anything or not. If you want to limit the passed in function to only very simple JS functions, you could use the mechanisms outlined by other answers here (examining the source of the function). But, I would not recommend doing that in anything but a tightly controlled situation because there are lots of legal javascript ways to break that.
I would suggest that you should change the contract of your function arguments and have the caller pass null or not pass anything (which will make the argument undefined) rather than an empty function. Then, it will be very clear whether they intend to have a function called or not. If they then pass an empty function instead of null or undefined, they are getting the behavior that the interface of the function specifies. The caller can choose the desired behavior and you can implement your function in a more failsafe manner.
Also, one of your main suppositions in your question is not quite right. You cannot safely use typeof x == "function" to determine if something is a function as that will not work reliably in some older versions of IE for some types of functions. If you want to learn how to detect if something is a function at all, you can learn from jQuery here (even if you're not using it). jQuery has a function it uses internally all the time called jQuery.isFunction() that returns a bool. It uses that mostly for testing arguments to see if a function was passed.
Internally, it calls:
Object.prototype.toString.call(o)
and then examines the result. If the result has "Function" in it, then test test parameter is a function.
So, using the same technique used in jQuery, you could build your own simple little isFunction routine like this:
function isFunction(test) {
return(Object.prototype.toString.call(test).indexOf("Function") > -1);
}
Of course, if you have jQuery available, you could just use it's own version:
jQuery.isFunction(o)
When there are questions with potential cross browser compatibility issues, I find it instructional to look at how one of the big libraries solves the issue, even if you aren't going to be using that library. You can be sure that the libraries have been vetted against many browsers so a technique they are using is safe. You sometimes have to unwrap all their own internal routines they may use to figure out what they're really doing (which was the case for this function), but you can save yourself a lot of legwork.
You can see a working test bed for this here: http://jsfiddle.net/jfriend00/PKcsM/
In modern browsers typeof fn === "function", but in older versions of IE, some functions give a typeof === "object" which is probably why jQuery uses this other method which does work in those older versions of IE.
It seems that you can define a function to retrieve the body of a function(1). I wrote a small (non-definitive) test of this:
http://jsfiddle.net/6qn5P/
Function.prototype.getBody =
function() {
// Get content between first { and last }
var m = this.toString().match(/\{([\s\S]*)\}/m)[1];
// Strip comments
return m.replace(/^\s*\/\/.*$/mg,'');
};
function foo() {
var a = 1, b = "bar";
alert(b + a);
return null;
}
console.log(foo.getBody());
console.log(foo.getBody().length);
One possibility is matching the .toString result against a regexp to get the function body, and then trim to check whether it has become an empty string:
var f = function foo() {
};
/^function [^(]*\(\)[ ]*{(.*)}$/.exec(
f.toString().replace(/\n/g, "")
)[1].trim() === ""; // true
That ugly regexp does take care of spaces aroung named functions as well as extraneous spaces before the name and the opening brace. Spaces like in foo () do seem to be removed, so there is no reason to check for those.
You might be able to get this from .toString():
var blank = function(){};
var f = function(){};
var f2 = function() { return 1; };
f.toString() == blank.toString(); // true
f2.toString() == blank.toString(); // false
but this is really prone to error:
var blank = function(){};
var f = function(){ }; // extra space!
f.toString() == blank.toString(); // false
You could munge the strings a bit to try to overcome this, but I suspect this is very browser-dependent. I wouldn't actually try to do this in a production environment if I were you. Even if you normalize the whitespace, it still won't catch other no-op lines, including comments, useless var statements, etc. To actually address these issues, you'd probably need a whole tokenizer system (or a crazy regex).
You can't do it for a host function, but for others, you can fairly reliably do
function isEmpty(f) {
return typeof f === "function" &&
/^function[^{]*[{]\s*[}]\s*$/.test(
Function.prototype.toString.call(f));
}
This isn't efficient, but major interpreters implement toString for functions in such a way that it works, though it will not work on some interpreters for some empty-ish functions
function () { /* nothing here */ }
function () { ; }
function () { return; }
In some implementation you can just do a toString() on the function and get it's content. Though it contains comments etcetera.
var foo = function(){ /* Comment */ };
alert(foo.toString());

var x; ... x.trim(); Why sometimes it allows but sometimes it makes the rest of the code stop working?

This minor issue causes me 5 hours to fix. Finally I figured out. See this code:
<script language="JavaScript" type="text/javascript">
var x;
.... // a lot of codes here
var k=x.trim();
</script>
The above code made the whole app stop working!
I remembered that I used to do like that before but got no problem.
So, about var x; ... x.trim();, Why sometimes it allows but sometimes it makes the rest of the code stop working?
And what is the best code practice for it?
You can do like this:
if(typeof x === 'undefined'){
// your get an error message
}
else
{
var k=x.toString().trim();
}
Using strict equality operator === above is good idea there because in JS, you can name a variable as undefined too:
var undefined = "something";
So using === makes sure that you are really checking against undefined value for a variable.
trim is a function of String. Refer MDN - String.trim().
So when you apply it to an integer, it fails and throws error, causing you code to stop work
Example
try{
var a = 1;
console.log(a.trim());
}
catch(ex){
console.log(ex);
}
You can try to convert number to string using .toString() and then apply .trim()
try{
var a = 1;
console.log(a.toString().trim());
}
catch(ex){
console.log(ex);
}
I would expand Rajesh's answer. He's right, when you try to call a method that does not exist, a TypeError is thrown. The easiest and fool-proof approach would be to use try/catch to ensure that the rest of the code would be executed as it should. But it's likely that even if it does, you don't get the result you want.
I believe the best way to do would be to wrap the value you're having into String object. It's as easy as
var k = String(x).trim();
It does several important things:
Converts the value of x, whatever it be, into a string, i.e. when you check its type, it's always 'string' and is always an instance of the String object.
Ensures that the resulting value has the method trim which does what it should.
Doesn't throw any error, so the rest of the code is executed.
There may be several pitfalls. If x is undefined, null, NaN or an object, the result of String(x) would be, correspondingly, 'undefined', 'null', 'NaN', or '[object Object]'. If x is an array, it's a specific case, and the value would be the same as if you call x.join(','), for example
x = [1, 2, 3];
var k = String(x).trim; // k is now '1,2,3'
So always keep in mind what types you're dealing with.
Just as with String, you can cast variables to other types, but naïvely converting anything into a Number, a String or an Array is considered a very bad practice. You should always be somewhat sure what type you're working with.

Javascript indexOf behaves differently on server side compared to client side?

Our site runs javascript on .asp and the indexOf function is not behaving as I would expect. See example below (some vars changed for the same of the example. All types are the same however):
var SID = "foo";
var getCookie = "foo##%##bar##%##bloo"
var cookieArr = getCookie.split("##%##");
if(cookieArr.indexOf(SID)!=-1){
console.log("found") //found
} else {
console.log("not found") //not found
}
This works correctly in the console however when run on the server it returns "Object doesn't support this property or method" on the if statement line.
I notice that changing the check to 'cookieArr[0].indexOf(SID)!=-1' resolves to true on the serverside however this is obviously no good as I'm telling it where to look.
If this is a known behaviour, what solution should I use instead to search an array for the presence of a value?
Edit:
Going to use below dirty workaround for now but would still be interested if anyone knows why the above doesn't work
function checkArrForString(str,arr){
for(x=0;x<arr.length;x++){
if(arr[x]==str){
return x;
}
}
return -1;
}

Javascript not working in IE7 and IE8

I am currently creating a website and have some javascript that works in all browsers except IE7 and IE8. I have done some tests on the code by inserting several 'alert' statements and deduced that the javascript breaks at one particular 'if' statement. It is not the code within the 'if' statement either because I have also tested this.
I can't see anything wrong with the actual 'if' statement myself but please let me know if there is a problem with IE7/IE8 and the code I have produced. The code can be seen below.
Thanks in advance for any help.
var Items = new Array("a","b","c","d");
var queryString = window.location.search.substring(1);
if(Items.indexOf(queryString) != "-1"){
//code goes here
}
There's no "indexOf()" function on IE's Array prototype. If there were, it'd return a numeric value and not a string.
You can find an "indexOf()" polyfill at the MDN documentation page for the function.
Also, when you declare and initialize arrays, use array constant notation:
var Items = ["a", "b", "c", "d"];
Here is one way of extending the Array object to support indexOf in those browsers that don't support it. Doing this has its own issues, if you ever iterate an array via for (x in a) (not suggested) and don't check hasOwnProperty this will cause you problems.
if(!Array.indexOf){
Array.prototype.indexOf = function(obj){
for(var i=0; i<this.length; i++){
if(this[i]==obj){
return i;
}
}
}
}

Categories