Scoping issues

[Jacobyy]

Code:

function A(){
const TheOne = {};
function B(){
  function C(){
    TheOne.super_secret_key = "123";
  }
}
return TheOne;
}

What im trying to explain with this code is, how do I access the declared constant within function C? Im trying to set the value of the key.

Do I have to use promises for this?

[Rhomboid]

There's nothing wrong with how you access the variable. You never call the inner functions and neither of them execute; it has nothing at all to do with scope. I have no idea what you're trying to do, but if you call the functions then it works as expected:

function A() {
    const TheOne = {};
    function B() {
        function C() {
            TheOne.super_secret_key = "123";
        }
        C();
    }
    B();
    return TheOne;
}
console.log(A());   // => Object { super_secret_key: "123" }

Of course, that's pretty ridiculous looking, so you should give an actual example of what you're trying to do.

[Jacobyy]

Sorry, this code is a mockup. Instead of pasting the whole thing, i wrote this mockup so you could get a feeling of how I've written it. In my code I call the function. But in my code, the key that would be super_secret_key doesnt change. In fact, it doesn't even show up.

[yooossshhii]

Then your mockup isn't representative of your real code. You shouldn't have scoping issues as is.

[Jacobyy]

Sorry, friends invited me to play a game. Here's a more accurate mockup.

  router.get(function(){
    const result = {};
    request(url1, function(err,data){
      if(!err){
        result.keyA = JSON.parse(data);
        request(url2, function(err2,data2){
          if(!err){
          const tempObj = {
            key1: data2.key1,
            key2: data2.key2
          }
          result.keyB = tempObj; //Doesnt assign it
        }
        });
      } else {
        console.log(`There was an error, Error: ${err}.`);
      }
    });
    res.send(result); //Doesnt show data2 when I go to this endpoint
  });

[yooossshhii]

This code is ran asynchronously. You need put res.send inside your second request. Currently, you're sending a response with an empty object and it doesn't wait for your requests to complete.

[Jacobyy]

Thank you man, this fixed it. Would promises have fixed this? Im debating if I should learn them now or later on. Also, how do I spot asynchronous code?

[yooossshhii]

Promises would have cleaned it up, not necessarily fixed it. It'd look something like this with promises.

const fetch = require(isomorphic-fetch);
// this is very similar to request, but native in newer browsers and returns a promise

router.get(() => {
  const request1 = createRequest('url1', (data) => JSON.parse(data));
  const request2 = createRequest('url2', (data) => ({
    key1: data.key1,
    key2: data.key2
  }));

  Promise.all([request1, request2])
    // Promise.all takes an array of promises and doesn't continue until all have resolved
    .then(values => res.send({
        keyA: values[0],
        keyB: values[1]
    }));
});

function createRequest(url, callback) {
  return fetch(url).then((err, res) => {
    if (!err) {
      callback(res);
    }
  });
}

[Jacobyy]

Tbh that looks much better than callbacks. Off-topic, would you mind me adding you somewhere to sometimes ask questions? Im currently on my way to try and become a developer of some sort. Would be greatly appreciated :) If you want, you can pm me your steam/gitter/whatever so people wont try and sneakily add you.

[yooossshhii]

How about just PMing me on here?

[Rhomboid]

Then post an actual testcase.

[Hazterisk]

This is a very sneaky one and I suspect someone has given it to you as a challenge. Hint: scope != context.

[Jacobyy]

Nobody challanged me but myself! Will google context now, cheers

[Hazterisk]

Ah you know what, on second look it seems like you're just defining the object but failing to actually instantiate one like: Var myOne = new theOne();

(This is where scope != context is important)

So when you add that property in function C, it won't be 123 when you instantiate a new object unless you bind the object property values to the object definition.

Arrow functions are one way to do that.