Function in javascript not behaving consistently

Question

The following code is meant to build an object from a list of words.

var buildDictionary = function() {
  console.log("Buildling Dictionary");
  console.log(masterList);
  var word, vowelString, dict = {};
  for (var i = 0; i < masterList.length; i++) {
    word = masterList[i][0];
    vowelString = getVowels(masterList[i]);
    console.log(vowelString);
    if (dict[vowelString] == undefined)
      dict[vowelString] = [word];
    else
      dict[vowelString].push(word);
  }
  return dict;
}
var dictionary = buildDictionary();

When ran as is, dictionary is an empty object. However, if I manually invoke it...

dictionary = buildDictionary();

It works as expected!

The full code, if relevant, is available here https://jsfiddle.net/4yts4uvr/

Run as is what do you mean by that? To execute a function, you must invoke it. — mohamedrias
– mohamedrias, Commented Mar 31, 2015 at 17:18
In your fiddle, you are loading the data via ajax, which is asynchronous. Immidiatly after you are running the buildDictionary, at which point the data won't be back yet. You need to build the dictionary in your ajax callback — Joey Ciechanowicz
– Joey Ciechanowicz, Commented Mar 31, 2015 at 17:19
What I mean is, when I just load my page in the browser. It is running all my code, but it's not actually creating the dictionary. Then if I go to the console and manually type in 'dictionary = buildDictionary();' it THEN creates the dictionary. — Steven
– Steven, Commented Mar 31, 2015 at 17:20
Joey, I don't understand: when it console.log's masterList, it shows that it is in fact populated... Begin rhymer.js:8 Loading CMU Dict... rhymer.js:77 Buildling Dictionary rhymer.js:78 Array[133854] Sorry about the formatting messyness. — Steven
– Steven, Commented Mar 31, 2015 at 17:22
Put the console.log just before buildDictionary function declaration, you'll find an empty array — mohamedrias
– mohamedrias, Commented Mar 31, 2015 at 17:26

Joey Ciechanowicz · Accepted Answer · 2015-04-01 08:49:42Z

0

In your jsfiddle the masterList is loaded using ajax, you need to build your dictionary in the callback.

$.ajax({
  type: "GET",
  url: "../data/cmudict-0.7b"
}).success(function(content) {
    // do stuff with content
}).then(function() {
  // make your second ajax call (or look at jQuery.when)
  $.ajax({
      type: "GET",
      url: "../data/cmudict-0.7b.phones"
  }).success(function(content) {
      // do stuff with content
  }).then(function() {
      var dictionary = buildDictionary();
  });
});

This way you ensure that you have all the data you need before running your buildDictionary function.

You can perform synchronous http requests (blocking), however they are deprecated when performed on the main thread:

Note: Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.

edited Apr 1, 2015 at 8:49

answered Mar 31, 2015 at 17:25

Joey Ciechanowicz

3,6733 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Steven Over a year ago

Does this mean that as soon as I use AJAX I basically can't do anything synchronously? Does this mean all the rest of my code has to be inside the ajax call for the whole program?

Joey Ciechanowicz Over a year ago

@Steven Updated my answer to reflect your comment

Collectives™ on Stack Overflow

Function in javascript not behaving consistently

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related