CODEWITHSUNDEEP
javascript
Googlebot
Googlebot

Reputation: 15673

How to use a variable after loop in Javascript?

I get an element with Javascript as,

var els = document.getElementsByTagName("a");

for(var i = 0; i < els.length; i++) {
    if (els[i].nodeValue == 'Something') {
        var el = els[i];
        break;
    }
}

console.log(el);

How can I be sure that the loop has been finished before console.log?

Note that I cannot put console.log inside the loop. This is just a simple example, and I need el for further processing.

Upvotes: 0

Views: 566

Answers (3)

RANGO
RANGO

Reputation: 310

The for loop is synchronous, which means that the code after the loop will only be executed, once the loop is finished.

In JavaScript, the code will be executed instruction after instruction and there is no reason for the console.log() to be executed before the end of the loop.

The exception are async functions. If you for example call a function that returns a promise, you have to use the await keyword in an asynchronous function. But even in that kind of function, the loop will finish before the following instruction is executed.

To log the value of el you should declare it before the loop though. If you declare a function inside a for loop, it won’t be available outside of that scope, hence the variable won’t be available after the loop. You should instead do

var els = document.getElementsByTagName("a");

var el;

for(var i = 0; i < els.length; i++) {
    if (els[i].nodeValue == 'Something') {
        el = els[i];
        break;
    }
}

console.log(el);

This way the variable is still available after the loop

Upvotes: 0

Ronnie Smith
Ronnie Smith

Reputation: 18555

Define the el vriable outside the loop.

var els = document.getElementsByTagName("a");
var el;


for(var i = 0; i < els.length; i++) {
if(els[i].nodeValue == 'Something') {
el = els[i];
break;
}
}

console.log(el);

Upvotes: 1

Lee Brindley
Lee Brindley

Reputation: 6472

How can I be sure that the loop has been finished before console.log?

Because you're looping using a for loop, which is a synchronous loop.

for (var i = 0, max = 1000000; i < max; i++) {

}

console.log('Finished');

Above, finished will always be executed after the for loop has finished it's last iteration.

In your example, you can be sure that your log will execute after the loop, because of what I've said above. What you can't be sure of is that your variable will be undefined or not.

var els = document.getElementsByTagName("a");

for(var i = 0; i < els.length; i++) {

    // If this does not get hit, your 'el' will be undefined.
    if(els[i].nodeValue == 'Something') {
        var el = els[i];
        break;
    }
}

console.log(el);

FYI (as an aside), you should look at hoisting in javascript, you declare your 'el' variable inside the IF statement, however there is no block-scoping with var, i.e. you could/should define the el variable underneath the els variable, to avoid confusion.

E.g. 

var els = document.getElementsByTagName("a");

var el;

for(var i = 0; i < els.length; i++) {

    // If this does not get hit, your 'el' will be undefined.
    if(els[i].nodeValue == 'Something') {
        el = els[i];
        break;
    }
}

console.log(el);

Upvotes: 2

Related Questions