Javascript value not updated with the value returned by the FB api

Excuse my lack of knowledge when it comes to javascript. The issue I'm showing it might be trivial, but I can't figure it out.

I have the following piece of code:

function ShowMyName() {
        var imgSrc="test pic";
        //set that image as default so I have a back-up for the demo
        FB.api(
            "/me/picture",
            {
                "redirect": false,
            },
            function (response) {
                /* handle the result */
                console.dir(response);
                imgSrc=response.data.url;
                console.log("FB pic is "+imgSrc);
             }
        );

        console.log(imgSrc);
}

My neanderthalian brain thought that the new value for imgSrc will be the one returned by the FB api. Clearly that's not what happens. It's the same old value as before "test pic".

How can I set the value of imgSrc to whatever I get back from facebook?