Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Loops, Arrays and Objects Tracking Multiple Items with Arrays Build a Quiz Challenge, Part 2 Solution

Motoki Higa
Motoki Higa
14,111 Points
Posted by Motoki Higa
Motoki Higa
14,111 Points

Why did Dave write the functions in unorganised order? Shouldn't be written in proper order?

Hello everyone, I need some logical explanation of why the functions are not written in proper order in the file. It's very confusing, but I kinda feel there are some critical reasons behind, which I have no idea.

Here below is the original codes written by Dave:

// 1.List of questions to ask

var questions = [
  ['How many states are in the United States?', 50],
  ['How many continents are there?', 7],
  ['How many legs does an insect have?', 6]
];

// 2.Variables

var correctAnswers = 0;
var question;
var answer;
var response;
var correct = [];
var wrong = [];

// 6.Print(display) compiled answers on screen

function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}

// 5.The outcome will be listed as ordered list

function buildList(arr) {
  var listHTML = '<ol>';
    for (var i = 0; i < arr.length; i += 1){
      listHTML += '<li>' + arr[i] + '</li>';
    }
    listHTML += '</ol>';
    return listHTML;
}

// 3.Asking questions, and compiling answers

for (var i = 0; i < questions.length; i += 1) {
  question = questions[i][0];
  answer = questions[i][1];
  response = prompt(question);
  response = parseInt(response);
  if (response === answer) {
    correctAnswers += 1;
    correct.push(question);
  } else {
    wrong.push(question);
  }
}

// 4.Deciding what/How to show the outcome

html = "You got " + correctAnswers + " question(s) right."
html += '<h2>You got these questions correct:</h2>';
html += buildList(correct);
html += '<h2>You got these questions wrong:</h2>';
html += buildList(wrong);

// 7.Command for print

print(html);

Then I re-ordered the functions below. It worked properly. For me, the functions and codes should be written in the actual event order. Isn't it easier to read and decipher? Does it make sense?

// 1.List of questions to ask

var questions = [
  ['How many states are in the United States?', 50],
  ['How many continents are there?', 7],
  ['How many legs does an insect have?', 6]
];

// 2.Variables

var correctAnswers = 0;
var question;
var answer;
var response;
var correct = [];
var wrong = [];


// 3.Asking questions, and compiling answers

for (var i = 0; i < questions.length; i += 1) {
  question = questions[i][0];
  answer = questions[i][1];
  response = prompt(question);
  response = parseInt(response);
  if (response === answer) {
    correctAnswers += 1;
    correct.push(question);
  } else {
    wrong.push(question);
  }
}

// 4.Deciding what/How to show the outcome

html = "You got " + correctAnswers + " question(s) right."
html += '<h2>You got these questions correct:</h2>';
html += buildList(correct);
html += '<h2>You got these questions wrong:</h2>';
html += buildList(wrong);

// 5.The outcome will be listed as ordered list

function buildList(arr) {
  var listHTML = '<ol>';
    for (var i = 0; i < arr.length; i += 1){
      listHTML += '<li>' + arr[i] + '</li>';
    }
    listHTML += '</ol>';
    return listHTML;
}


// 6.Print(display) compiled answers on screen

function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML = message;
}

// 7.Command for print

print(html);

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

The thing with JavaScript is that it has something called function hoisting. That means that you can place the function anywhere in the code, but call it anywhere. This is not true for all programming languages. Many require that you define the functions before you use them. Personally, I like the way he did it. But that may be because I have a different programming learning path than you.

However, that being said, it's really about personal preference in my opinion. I'm also of the opinion that with code that's clearly commented (as is the case in both examples), are easy enough to read for maintainability purposes. :sparkles:

Motoki Higa
Motoki Higa
14,111 Points
Motoki Higa
Motoki Higa
14,111 Points

Awesome Jennifer, that clarifies everything. I don't know if Dave talked about it at the beginning or not, but it feels like should be taught in the earlier stage. Especially for like me, I came from graphic design, illustration background, so I tend to see things in a natural manner, like developing from rough to concrete.

Other people might come across same confusion I had, so I will leave this link below about hoisting. https://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/

Cheers Jennifer