Interpreting output after using callback in javascript

Question

I am new to javascript and I am trying to understand callbacks. I am not able to understand why 20 is getting printed before 10. My understanding is for a callback function like - func1(parameter,func2()) , func2() is the callback function, which gets executed after func1 executes with the "parameter" passed to func1. Is my understanding correct?

function timePass(length){

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

timePass(10,timePass(20));

OUTPUT BELOW:

finished after doing timePass for 20 seconds

finished after doing timePass for 10 seconds

Answer 1

You are not really creating a callback function but actually calling timePass(20) before everything else on your last line of code.

To pass a callback function you should do something like this:

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

timePass(10,timePass);

Answer 2

This is because you execute the function timePass and then - adding the result as argument number 2.

Explaining what is happening:

First you define new function "timePass", The function printing on the console.
Second you execute timePass(10, /*But here you execute it again*/ timePass(20)).

The function timePass(20) will be executed first because you added ().
() == execute. If you just pass the name of the function, it will be passed as function. When you use () it will be executed and then the result will be passed as argument.

EXAMPLE OF USING 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()

USE CASES

Most often callbacks are used while we working with async code.

For example: 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'