Undefined array.length returns true not false - javascript

I'm currently working through the MDN JavaScript documentation and in one of the beginner exercises it claims that: (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Evaluating_variables)
The undefined value behaves as false when used in a boolean context.
var myArray = [];
if (!myArray[0]) myFunction();
However, my brain being simple can't work with opposites in an if statement. Therefore I re-wrote it using the .length function:
var myArray = [];
if(myArray.length === 1) {
console.log("How?");
} else {
console.log("Hello World!");
}
What I was expecting was Hello World! to be printed because the Array is undefined and should return false however it is returning 1.
Any explanation as to why this is happening would be great!

For the test myArray.length === 1 to evaluate to true the array must contain exactly one element. But you didn't put anything in there so the test failed and Hello World! was printed.
Think of an array as a container.
var myArray; // is undefined
var myArray = [] // is NOT undefined
var myArray = [] is empty but it is a valid array.
Therefore, using .length, a better test would have been:
if (myArray.length === 0)
Then How? would have been printed.
Because there is nothing in your array, the length is 0.

var myArray = [];
if (!myArray[0]) myFunction();
myArray[0] - In this array initialization default zero will take 1.
if(myArray.length === 1) - In this line, it will return to get the opposite result of the initialization. So, it printed to be 1.

If you’re in doubts debugging check with console output or inspect the variables/create you watch.
var myArray = [];
console.log(!myArray);
console.log(!myArray[0]);
printIt(myArray.length === 0)
printIt(myArray.length === 1)
function printIt(ok) {
if(ok) { console.log("Ok."); }
else { console.log("Not ok."); }
}
If you’re about to check if array is empty you should express you desire by code, so:
if(array.length === 0) …
If you’re about to check if variable is declared …
var array;
console.log(!array);
array = [];
console.log(!array);
console.log(Array.isArray(array));
let u = "u";
console.log(Array.isArray(u));
If you need to aware of both …
var array;
//console.log(array.length);
array = [];
if(array && Array.isArray(array) && array.length === 0) { array.push("Hi!"); console.log(array[0]);}
let w = "w";
if(w && Array.isArray(w)) { console.log(w);}

Related

How to check - $scope.students = []; - in JavaScript - Angular JS [duplicate]

When the page is loading for the first time, I need to check if there is an image in image_array and load the last image.
Otherwise, I disable the preview buttons, alert the user to push new image button and create an empty array to put the images;
The problem is that image_array in the else fires all time. If an array exists - it just overrides it, but alert doesn't work.
if(image_array.length > 0)
$('#images').append('<img src="'+image_array[image_array.length-1]+'" class="images" id="1" />');
else{
$('#prev_image').attr('disabled', 'true');
$('#next_image').attr('disabled', 'true');
alert('Please get new image');
var image_array = [];
}
UPDATE
Before loading html, I have something like this:
<?php if(count($images) != 0): ?>
<script type="text/javascript">
<?php echo "image_array = ".json_encode($images);?>
</script>
<?php endif; ?>
if (typeof image_array !== 'undefined' && image_array.length > 0) {
// the array is defined and has at least one element
}
Your problem may be happening due to a mix of implicit global variables and variable hoisting. Make sure you use var whenever declaring a variable:
<?php echo "var image_array = ".json_encode($images);?>
// add var ^^^ here
And then make sure you never accidently redeclare that variable later:
else {
...
image_array = []; // no var here
}
To check if an array is either empty or not
A modern way, ES5+:
if (Array.isArray(array) && array.length) {
// array exists and is not empty
}
An old-school way:
typeof array != "undefined"
&& array != null
&& array.length != null
&& array.length > 0
A compact way:
if (typeof array != "undefined" && array != null && array.length != null && array.length > 0) {
// array exists and is not empty
}
A CoffeeScript way:
if array?.length > 0
Why?
Case Undefined
Undefined variable is a variable that you haven't assigned anything to it yet.
let array = new Array(); // "array" !== "array"
typeof array == "undefined"; // => true
Case Null
Generally speaking, null is state of lacking a value. For example a variable is null when you missed or failed to retrieve some data.
array = searchData(); // can't find anything
array == null; // => true
Case Not an Array
Javascript has a dynamic type system. This means we can't guarantee what type of object a variable holds. There is a chance that we're not talking to an instance of Array.
supposedToBeArray = new SomeObject();
typeof supposedToBeArray.length; // => "undefined"
array = new Array();
typeof array.length; // => "number"
Case Empty Array
Now since we tested all other possibilities, we're talking to an instance of Array. In order to make sure it's not empty, we ask about number of elements it's holding, and making sure it has more than zero elements.
firstArray = [];
firstArray.length > 0; // => false
secondArray = [1,2,3];
secondArray.length > 0; // => true
How about (ECMA 5.1):
if(Array.isArray(image_array) && image_array.length){
// array exists and is not empty
}
This is what I use. The first condition covers truthy, which has both null and undefined. Second condition checks for an empty array.
if(arrayName && arrayName.length > 0){
//do something.
}
or thanks to tsemer's comment I added a second version
if(arrayName && arrayName.length)
Then I made a test for the second condition, using Scratchpad in Firefox:
var array1;
var array2 = [];
var array3 = ["one", "two", "three"];
var array4 = null;
console.log(array1);
console.log(array2);
console.log(array3);
console.log(array4);
if (array1 && array1.length) {
console.log("array1! has a value!");
}
if (array2 && array2.length) {
console.log("array2! has a value!");
}
if (array3 && array3.length) {
console.log("array3! has a value!");
}
if (array4 && array4.length) {
console.log("array4! has a value!");
}
which also proves that if(array2 && array2.length) and if(array2 && array2.length > 0) are exactly doing the same
optional chaining
As optional chaining proposal reached stage 4 and is getting wider support, there is a very elegant way to do this
if(image_array?.length){
// image_array is defined and has at least one element
}
You should use:
if (image_array !== undefined && image_array.length > 0)
If you want to test whether the image array variable had been defined you can do it like this
if(typeof image_array === 'undefined') {
// it is not defined yet
} else if (image_array.length > 0) {
// you have a greater than zero length array
}
JavaScript
( typeof(myArray) !== 'undefined' && Array.isArray(myArray) && myArray.length > 0 )
Lodash & Underscore
( _.isArray(myArray) && myArray.length > 0 )
You can use jQuery's isEmptyObject() to check whether the array contains elements or not.
var testArray=[1,2,3,4,5];
var testArray1=[];
console.log(jQuery.isEmptyObject(testArray)); //false
console.log(jQuery.isEmptyObject(testArray1)); //true
Source: https://api.jquery.com/jQuery.isEmptyObject/
Using undescore or lodash:
_.isArray(image_array) && !_.isEmpty(image_array)
A simple way that doesn't result in exceptions if not exist and convert to boolean:
!!array
Example:
if (!!arr) {
// array exists
}
How about this ? checking for length of undefined array may throw exception.
if(image_array){
//array exists
if(image_array.length){
//array has length greater than zero
}
}
The best is to check like:
let someArray: string[] = [];
let hasAny1: boolean = !!someArray && !!someArray.length;
let hasAny2: boolean = !!someArray && someArray.length > 0; //or like this
console.log("And now on empty......", hasAny1, hasAny2);
See full samples list:
I come across this issue quite a lot in Javascript. For me the best way to do it is to put a very broad check before checking for length. I saw some other solutions in this Q&A, but I wanted to be able to check for either null or undefined or any other false value.
if(!array || array.length == 0){
console.log("Array is either empty or does not exist")
}
This will first check for undefined, null, or other false values. If any of those are true, it will complete the boolean as this is an OR. Then the more risky check of array.length, which could error us if array is undefined, can be checked. This will never be reached if array is undefined or null, so the ordering of conditions is very important.
If you do not have a variable declared as array you can create a check:
if(x && x.constructor==Array && x.length){
console.log("is array and filed");
}else{
var x= [];
console.log('x = empty array');
}
This checks if variable x exists and if it is, checks if it is a filled array. else it creates an empty array (or you can do other stuff);
If you are certain there is an array variable created there is a simple check:
var x = [];
if(!x.length){
console.log('empty');
} else {
console.log('full');
}
You can check my fiddle here with shows most possible ways to check array.
The following is my solution wrapped in a function that also throws
errors to manage a couple of problems with object scope and all types
of possible data types passed to the function.
Here's my fiddle used to examine this problem (source)
var jill = [0];
var jack;
//"Uncaught ReferenceError: jack is not defined"
//if (typeof jack === 'undefined' || jack === null) {
//if (jack) {
//if (jack in window) {
//if (window.hasOwnP=roperty('jack')){
//if (jack in window){
function isemptyArray (arraynamed){
//cam also check argument length
if (arguments.length === 0) {
throw "No argument supplied";
}
//console.log(arguments.length, "number of arguments found");
if (typeof arraynamed !== "undefined" && arraynamed !== null) {
//console.log("found arraynamed has a value");
if ((arraynamed instanceof Array) === true){
//console.log("I'm an array");
if (arraynamed.length === 0) {
//console.log ("I'm empty");
return true;
} else {
return false;
}//end length check
} else {
//bad type
throw "Argument is not an array";
} //end type check
} else {
//bad argument
throw "Argument is invalid, check initialization";;
}//end argument check
}
try {
console.log(isemptyArray(jill));
} catch (e) {
console.log ("error caught:",e);
}
the way I found to work (comming from another language) is to make a simple function to test.
create a function that check the size of the array and pass the lenght by parameter.
isEmpty(size){
if(size==0) {
return true;
} else {
return false;
}
}
//then check
if(isEmpty(yourArray.length)==true){
//its empty
} else {
//not empty
}
You should do this
if (!image_array) {
// image_array defined but not assigned automatically coerces to false
} else if (!(0 in image_array)) {
// empty array
// doSomething
}
For me sure some of the high rated answers "work" when I put them into jsfiddle, but when I have a dynamically generated amount of array list a lot of this code in the answers just doesn't work for ME.
This is what IS working for me.
var from = [];
if(typeof from[0] !== undefined) {
//...
}
Notice, NO quotes around undefined and I'm not bothering with the length.
Probably your image_array is not array but some OBJECT with length property (like string) - try
if(image_array instanceof Array && image_array.length)
function test(image_array) {
if(image_array instanceof Array && image_array.length) {
console.log(image_array,'- it is not empty array!')
} else {
console.log(image_array,'- it is empty array or not array at all!')
}
}
test({length:5});
test('undefined');
test([]);
test(["abc"]);
In my case, array_.length always returned 0, even if it had values inside. Probably, because of non-default indexes.
So to check if array is defined we use typeof _array !== 'undefined'
And then to check if it contains any date i just simply compare it to an empty array _array !== []
in ts
isArray(obj: any)
{
return Array.isArray(obj)
}
in html
(photos == undefined || !(isArray(photos) && photos.length > 0) )
When you create your image_array, it's empty, therefore your image_array.length is 0
As stated in the comment below, i edit my answer based on this question's answer) :
var image_array = []
inside the else brackets doesn't change anything to the image_array defined before in the code

Checking if one element of an array's index is equal to the second element

I have this little script that will check if one element of an array (arr[0]) is equal to the second element of the array (arr[1]). However when it checks the following array I would expect it to return false, yet it returns true. so my questions are, why does this return true, and how can I fix it to return false like expected?
function mutation(arr) {
var elem0 = arr[0].toLowerCase();
var elem1 = arr[1].toLowerCase();
for(var x=0; x < elem1.length; x++){
check = elem0.indexOf(elem1[x]);
if(check === -1){
return false;
}
return true;
}
}
mutation(["hello", "hey"]); //returns true
you place the return true to soon
you need to place it after the for statement like so
function mutation(arr) {
var elem0 = arr[0].toLowerCase();
var elem1 = arr[1].toLowerCase();
for(var x=0; x < elem1.length; x++){
check = elem0.indexOf(elem1[x]);
if(check === -1){
return false;
}
}
return true;
}
mutation(["hello", "hey"]); //returns false
You're looping over a characters in a string (see what elem1 actually is), and therefore you get true because the first character of hey, which is h, is indeed found within the string hello.
If you want to wait for it to finish iterating over the whole string, use a boolean flag, and then return the value of that flag when the iterations are over.
However, seems you just want to compare the two elements:
return elem0 === elem1;
I have this little script that will check if one element of an array
(arr[0]) is equal to the second element of the array (arr[1])
It returns true since e is in both the elements hello and hey
Your code is essentially iterating over all the characters in the string.
You need to simply check
function mutation(arr) {
return arr[0].toLowerCase() == arr[1].toLowerCase();
}
The expression of this question has some logical flaws or at least some lacking points. Such as the given condition means that all the items in the array must be equal. If this is the case then just one tiny piece of instruction is sufficient
myArray.every(e => e == myArray[0])
var a = [1,1,1,1,1,1,1,1],
b = ["hello", "hey"];
document.write("<pre> a array :" + a.every(e => e == a[0]) + "</pre>");
document.write("<pre> b array :" + b.every(e => e == b[0]) + "</pre>");

Using a for-loop to find a string in an array is working, but forEach() does not here. Why and how to correct?

Working through some javascript array exercises to solidify my understanding. Came across an exercise that I'm able to solve easily using a for-loop, but not using the forEach() method. Why is happening, and how would I correct for this?
Here's the exercise question listed out, and my code using both methods below:
"Write a function that takes an array of values and returns an boolean representing if the word "hello" exists in the array."
function hello_exists(array){
for(i = 0; i < array.length; i++){
if(array[i] === "hello"){
return true
}
}
}
var my_arr = ["some", "hello", "is", "cat"]
hello_exists(my_arr) // returns true as expected
function hello_exists(array){
array.forEach(function(val){
if(val === "hello") {
return true
}
})
}
var my_arr = ["some", "hello", "is", "cat"]
hello_exists(my_arr) // returns undefined. not sure why?
Returning true in forEach does not actually return a value to the caller and has no effect.
The callback passed into forEach is designated to perform a set of operations in iteration(without returning anything)
Use a variable to return after the forEach has finished executing
function hello_exists(array){
var exists = false;
array.forEach(function(val){
if(val == "hello"){
exists = true;
}
});
return exists;
}
As an alternative, you can use some()
function hello_exists(array){
return array.some(function(val){
return val == "hello";
});
}
or filter() with checking the length on the results
function hello_exists(array){
return array.filter(function(val){
return val == "hello";
}).length > 0;
}
Your second hello_exists function is not returning anything. It may look like it is because you have the 'return' in there, but that is in the forEach function.
In the second example, you need to return something for the hello_exists function. Something like this would work
function hello_exists(array){
var isTrue = false
array.forEach(function(val){
if(val === "hello") {
isTrue = true
}
})
return isTrue
}
var my_arr = ["some", "hello", "is", "cat"]
hello_exists(my_arr) // true
It can also help to understand what's happening if you imagine a simplified implementation of forEach:
function forEach(array, fn) {
var i;
for (i = 0; i < array.length; i++) {
fn(arr[i]); // forEach doesn't care about what the function returns
}
}

Self Invoking Function returns "undefined"

Im trying to get a sum of array injected into a function that loops until all the values are added, the console.log right before the "return" logs the right value, meaning the code works, but when I try to use that function with any array it returns "undefined"...
var total = function(arr) {
console.log(arr);
if(arr.length > 1) {
var temp = []
for(var i=0, len=arr.length-1; i<len; i++) {
temp.push(arr[i] + arr[i+1]);
}
total(temp);
}
else {
console.log(arr.join()); // 48, exectly what I need
return parseInt(arr.join());
}
}
var sup = total([1,2,3,4,5]); // undefined
Not completely sure how to debug it..
If your arr.length is greater than one, you will invoke total with the temporary array, however, you don't do anything with this temporary array - you don't return it, or utilize it in any way, so the intermediate results are lost.
In addition - this is not a self invoking function; it is recursion.

javascript if( variable = =(variable2 || variable3 || ...)) [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to nest OR statements in JavaScript?
Is there a way to do this:
if( variable1 == (variable2 || variable3 || ...) )
I need to check if variable1 is equal to either variable2 variable3 4 5...
I can't directly do this:
if( (variable1 == variable2) || (variable1 == variable3) || ...) )
because I don't know exactly how many variable2 3 4 5... I have
btw variable2 3 4 5... are the elements of my array. I tried this but nothings happen.
if( variable1 == (variable2 || variable3 || ...) )
update:
here's the snippet
let say strskill equal to:
abc|def|ghi|jkl|
.
var myskl = document.getElementById('strskill').value.split("|");
for(var q=0; q<(myskl.length); q++)
{
var r = r + "myskl[q], ";
var s = r + "myskl[q]";
}
if(s.indexOf(myArray[i]) > -1)
{
continue;
}
I tried your suggestion, but still not working!
You can't do that because A || B || C || ... always return the first true value.
You could do like below:
if ([variable2, variable3, variable4, ...].indexOf(variable1) > -1) {
}
You could also do it this way
a = 1;
b = [1,2,3,4];
function check(a,b){
i = 0;
for (i=0;i<b.length;i++) {
if (a === b[i]) {
return true;
}
}
return false;
}
alert(check (a,b))
​
You have different options.
In pure javascript, you could use array.indexOf(variable1) which returns -1 if it hasn't been found in the array. More info here. Be careful of older browsers which would not support this function.
lots of different javascript frameworks give this possibility : check this answer on SO with lots of different references
Your code would then be (with the first solution) :
myArray = [variable2, variable3 ...];
if(myArray.indexOf(variable1) !== -1)
this wont' work as what you are doing check if any of variable 2 to n can be considered as the boolean value True and then compare it with the value of varaible1
if varaible 2 to n are in an array you shoud create a fonction is_member taking the array and varaible1 and sending back a bool
this can be done with a for going through the array and returning true if eather value matches varaible1
in the other cases you should return false after the for boucle
You cannot do this logical operation directly. Either you have to use indexOf as #xdazz has shown or use a loop as shown below
function inArray(array, val){
for(var i = 0; i < array.length; i++){
if(array[i] == val){
return true;
}
}
return false;
}
var arr = [3, 4, 5, 6, 7, 8, 9];
var var1 = 90;
inArray(arr, var1);
You will have to use a for / while loop to check this. If you want to keep the if statement intact, you can use an anonymous function:
var myArr=[false,true,true,false];
if((function(arr,compareTo){
for( var i=0;i<arr.length;i++){
if(arr[i]==compareTo) return true;
}
return false;
})(myArr,true)){
// ⇑⇑⇑⇑ ⇖The variable you want to check against
//The array with the values you want to check
document.write('Yes!')
}else{
document.write('No :-(');
}
↪ View this example at JSFiddle
Assuming from your update that you want to find if the first entry is found in the rest of the list:
var myskl = document.getElementById('strskill').value.split("|");
var s = myskl.shift();
var found = (myskl.indexOf(s) >= 0);
If the string ss to be found comes from somewhere else, remove the .shift() line.
Note that indexOf() is a recent addition to JS - use a "shim" function to add it to your browser if it doesn't exist - see here for more.

Categories