Javascript - can console.log an object inside a function but when returned it is comes back as undefined

Question

I am trying to write a function to geocode a zipcode, and return the lat and lng to an object, and then return this object. I am then trying to assign the value of this geocode function to a variable to create an object.

When I console log the object created in this function, I get an object returned in my terminal as expected:

const geo = (zip) => {
    geocoder.geocode(zip, function(err, data) {
                let latLng = {};
                latLng.lat = data.results[0].geometry.location.lat;
                latLng.lng = data.results[0].geometry.location.lng;

                console.log(latLng); // Returns Object As Expected    
        });        
};

But when I instead replace the console.log(latLng) with return latLng I get an undefined value when assigning this function to a variable like so:

let newObj = geo(zip);
console.log(newObj) // Returns Undefined

I am confused because the initial console.log does show an object is being made in the geocode function, but when I use return it is coming back as undefined. I think it is an issue with how I am assigning it to a variable. I am misunderstanding something without doubt.

What is `geocoder`? What does `geocode` return (if anything)? — Phil, Feb 28 '18 at 05:18
Your object letlang is declare using let, so moment you move out of callback function, letlang will be out of scope (block level scope) and you will get undefined. so move its scope out of callback function. — Himanshu Shekhar, Feb 28 '18 at 05:25
@HimanshuShekhar that will take latLng out of the scope of the callback function and then latLng will just be an empty object. — maison.m, Feb 28 '18 at 06:36

score 2 · Accepted Answer · answered Feb 28 '18 at 05:18

2

The problem is you are mixing async (via callbacks with sync), you could use promises to simplify this

const geo = (zip) => {
    return new Promise(resolve => {
       geocoder.geocode(zip, (err, data) => {
            let latLng = {};
            latLng.lat = data.results[0].geometry.location.lat;
            latLng.lng = data.results[0].geometry.location.lng;
            resolve(latLng);  
       });
    })         
};

you can utilise the function then like

geo(zip).then(latLng => {
  console.log(latLng) // or whatever
})

answered Feb 28 '18 at 05:18

Jiby Jose

3,745
4
24
32

I wouldn't ignore `err`. Why not add `if (err) return reject(err)`? – Phil Feb 28 '18 at 05:21
@Phil i wouldn't also not ignore, `err`, i was just showing him how he can get it done (more of as a pseudo code), and not a complete solution – Jiby Jose Feb 28 '18 at 05:29
@maison.m as @Phil suggested, you will have to handle `err` by rejecting, the promise, and you can also ideally use `await` to consume the function as well – Jiby Jose Feb 28 '18 at 05:30
This works perfect. Thanks for the explanation, that helped me immensely. – maison.m Feb 28 '18 at 20:02

score 0 · Answer 2 · edited Feb 28 '18 at 05:35

0

You didn't specify a return statement. Avoid the arrow in this case and just use a normal function. .geocode() method return value is not assigned in any way. You need to keep throwing the value back to its caller.

const geo = function(zip) {
        return geocoder.geocode(zip, function(err, data) {
                let latLng = {};
                latLng.lat = data.results[0].geometry.location.lat;
                latLng.lng = data.results[0].geometry.location.lng; 

                console.log(latLng); // Returns Object As Expected    
                return latLng;
        });       

};

edited Feb 28 '18 at 05:35

jonhid

2,075
1
11
18

answered Feb 28 '18 at 05:12

Abana Clara

4,602
3
18
31

This won't make any difference. You're just adding a return value to the `geocode` callback which isn't assigned anywhere. – Phil Feb 28 '18 at 05:14
I realised that. Edited. @Phil – Abana Clara Feb 28 '18 at 05:15
Assuming it's Google's geocoder, `geocode` doesn't return anything ~ https://developers.google.com/maps/documentation/javascript/reference/3.exp/#Geocoder – Phil Feb 28 '18 at 05:16
Then he must try to use a global variable in order to access the value – Abana Clara Feb 28 '18 at 05:18
1

There are much better options than that. See https://stackoverflow.com/a/49022448/283366 – Phil Feb 28 '18 at 05:19

score -1 · Answer 3 · answered Feb 28 '18 at 06:26

-1

You can try async-await because geocode method is asynchronous. Reference: How to make this method asynchronous?

answered Feb 28 '18 at 06:26

Hank Phung

2,059
1
23
38

Javascript - can console.log an object inside a function but when returned it is comes back as undefined

3 Answers3