title: How does Protractor executes the function calls. (E2E AngularJS + Protractor + Jasmine)
body: <p>I am new to protractor and currently experimenting with an internal Angular JS application. In the below snippet of code, I am unable to understand on how Protractor is executing the statements and function calls. The behaviour seems weird OR I am doing something completely wrong. Appreciate all the help.</p>
  
  <pre><code>    describe('Describe Function', function() 
  {
  
      it('Should return a value',function(){
          var IndexValue = ' ';
  
          var col_model = element.all(by.repeater('col in renderedColumns'));
          var row_model = element.all(by.repeater('row in renderedRows'));
  
          browser.get('URL');
  
          ptor = protractor.getInstance();
  
          var user = element(by.model('login.user_id_1'));
          user.sendKeys('demo');
  
          element(by.id('txtusername')).getAttribute('value').then(function(text) {
              console.log(text); // This line prints 'demo'
          });
  
          var pwd = element(by.model('login.password_1'));
          pwd.sendKeys('demo');
  
          var submit = element(by.className('login-submit'));
          submit.click();
  
          browser.driver.sleep(1000);
  
          var colCount = element.all(by.repeater('col in renderedColumns')).count(); 
          colCount.then(console.log) // This prints '80'
  
          var items = [];
          getArrayList();
          function getArrayList() // Function to capture all the content of the table in an array
          {
              console.log('Array List function started');
              colCount.then(function(Col_count){
                  for(var i=0; i &lt; Col_count; ++i){
                      var grid =  browser.findElement(by.repeater('col in renderedColumns').row(i));
                      grid.getText().then(function(gridValue){
                          items.push(gridValue.trim());
                          console.log('For loop')
                      });
                  }
              });
             console.log('Array List function completed');
          }
          console.log(items); // This prints []
          getGridValue('Prospect');
          function getGridValue(name) 
          {
  
              console.log('Inside grid value');
  
          }
  
      });
  });
  </code></pre>
  
  <p>When I execute the above code, even before the browser is invoked and the application is launched, first 4 lines (specified below) are printed on the console. What surprises me is the fact that point 1 and 3 are part of the function call which indeed is printing point 7. Looks like all the independent "console.log" are executed first and then the "console.log" associated with "element." statements are executed. Its really confusing. Plz let me know where am I going wrong. Thanks.</p>
  
  <p><strong>OUTPUT ON THE CONSOLE</strong><br>
  1. Array List function started<br>
  2. []<br>
  3. Array List function completed<br>
  4. Inside grid value<br>
  5. demo<br>
  6. 80<br>
  7. For loop<br>
  For loop<br>
  For loop<br>
  For loop<br>
  .... so on until the loop ends</p>