Interpreting output after using callback in javascript

Question

I am new to javascript and I am trying to understand callbacks. I can’t understand why 20 is printed before 10. My understanding is in the callback function, for example - func1(parameter,func2()), func2()- this is the callback function, which is launched after execution func1with the "parameter" passed to func1. Do I understand correctly?

function timePass(length){

    console.log("finished after doing timePass for "+length +" seconds")
}

timePass(10,timePass(20));

EXIT BELOW:

finished after executing timePass in 20 seconds

finished after executing timePass in 10 seconds

Answer 1

, timePass, - 2.

, :

"TimePass", .
-, timePass(10, /*But here you execute it again*/ timePass(20)).

timePass (20) , ().
() == execute. , . (), , .

CALLBACK

function timePass(length, callbackFunction){

    console.log("finished after doing timePass for "+length +" seconds");

    // check if the function caller is included callback parameter
    // and check if it is function - to prevent errors.
    if (callbackFunction && typeof callbackFunction == "function") {
        // Execute the callback (timePass)
        callbackFunction(20);
    }
}

// Here you say, Execute timePass with arg 10, and then call timePass
timePass(10, timePass);
// and now callbackFunction defined above will be == timePass

// You can do also
timePass(10, anotherFunction)
// So another function will be executed after console.log()

CASES

.

: Jsfiddle

// Imagine we have function which will request the server for some data.
function getData(index) {
  // The request - response will took some time
  // 0.1s ? 15s ? We don't know how big is the data we downloading.
  var data;
  // Imagine this is an AJAX call, not timeout.
  setTimeout(function() {
    // after 30ms we recieved 'server data'
    data = 'server data';
  },30)

  return data;
}

var users = getData('users');

console.log(users); // undefined - because we returned "data" before the AJAX is completed.

/*
So we can change the function and adding an callback.
*/

function getAsyncData(index, callback) {
  var data;
  // Imagine this is an AJAX call, not timeout.
  setTimeout(function() {
    // after 30ms we recieved 'server data'
    data = 'server data';
    callback(data);
  },30)

}

getAsyncData('users', function(data) {
  console.log(data); // 'server data'
});

// OR

function processData(data) {
  console.log(data);
}

getAsyncData('users', processData); // processData also logs 'server data'

Answer 2

, timePass (20), .

, - :

function timePass(length,callback){
    console.log("finished after doing timePass for "+length +" seconds")
    if(typeof(callback) == "function")
        callback(20);
}

timePass(10,timePass);

Answer 3

, , timepass(20) ( , , -), .

.

doFunction( doSomethingElse() );

doSomethingElse 1, , 1 doFunction.

, , . , :

callback = function() { somecode; }
target = function(data, callback) { console.log('hi'); callback(); }

target(10, callback);

() i.e. callback not callback()