loading...
Cover image for Newbie's Guide to Calling vs. Referencing in JavaScript

Newbie's Guide to Calling vs. Referencing in JavaScript

notfocaccia profile image Alicia Fasciocco Originally published at Medium ・2 min read

Newbie's Guide (2 Part Series)

1) Newbie's Guide to Hoisting in JavaScript 2) Newbie's Guide to Calling vs. Referencing in JavaScript

Calling vs. Referencing in JS first appeared on Medium.

For my JavaScript API / Rails back-end project at Flatiron School, I decided to create an app called Interviewr that gives new interviewers the tools (read: questions) they need to conduct a great interview. As an HR Business Partner, I see the need for this kind of app every day, and as a new coder, I felt it was time I built something that solved a real problem.

As with most projects, I got stuck on things such as:

  • Typos
  • Forgetting to seed my database
  • Not having a JSON reader installed on Chrome
  • Calling functions

My 24-hour problem was calling functions-related and it threw an ‘Uncaught Reference Error.’ But, why?!

Here was the (very messy) code in my questions.js file:

newQuestion() {
    var randomNumber = Math.floor(Math.random() *    (this.questions.length - 1));
    if (randomNumber > this.questions.length - 1) {
    alert("You've seen all questions!");
    done = true;
    } else {
    document.getElementById('questionDisplay').innerHTML 
= this.questions[randomNumber].content;
    }
  document.getElementById("next").addEventListener("click", function(e) {
newQuestion();
  });
 }
}

Something did NOT like this line:

document.getElementById("next").addEventListener("click", function(e) { newQuestion(); });

The error stated that newQuestion hadn’t been defined at the time it reached the click.

Do you see the problem? It’s the ol’ parentheses. These little guys call a function rather than referencing it. I didn’t just reference newQuestion for later use within the eventListener, I called it in my function. This executes the function where it shouldn’t be executed. So, no. It hadn’t been defined by the time it reached the click.

I went in and refactored my code (a lot) to the following. Suddenly things were working:

fetchAndLoadQuestions(){
  this.adapter
  .getQuestions()
  .then(questions => {
    questions.forEach(question => this.questions.push(new  Question(question)))
  })
  .then(() => { 
    this.newQuestion()
  })
}

initBindingsAndEventListeners() {
  this.btn = document.getElementById("next")
  this.btn.addEventListener("click", this.newQuestion.bind(this))
}

newQuestion() {
  var randomNumber = Math.floor(Math.random() * (this.questions.length - 1));
  document.getElementById('questionDisplay').innerHTML = this.questions[randomNumber].questionHtml();
}

Within my initBindingsAndEventListeners, I reference newQuestion, which is expected to execute upon a click. The only place I call newQuestion is when I fetch and load my Questions.

Another way to think about it:

  • Calling/newQuestion(), I need this to run now!
  • Referencing/newQuestion, I’m referencing this now, so it can be called later.

One of my favorite things about coding is getting past an error (even if it means getting to a new error). In these moments, you realize how much you don’t know and it can feel pretty crummy — but, stay positive! I talk to Senior Developers who tell me they spend a lot of time Googling and still miss typos in their code. Stories like this keep me going. After all, a classmate told me that the concept of calling vs. referencing is a common JavaScript newbie blindspot…and I’ll take his word for it.

Newbie's Guide (2 Part Series)

1) Newbie's Guide to Hoisting in JavaScript 2) Newbie's Guide to Calling vs. Referencing in JavaScript

Posted on by:

notfocaccia profile

Alicia Fasciocco

@notfocaccia

Mostly remote HR Business Partner. Flatiron School Student. Collage Artist. A person with an early bedtime. she/her

Discussion

markdown guide
 

Rarely was there ever a more appropriate header image. 😁