Back to Lesson Index

Pre-requisites

Before diving into this, make sure you are familiar with using objects and DOM manipulation.

Refactoring

Our appendScholar example (code shown below) above has grown to 15 lines of code - that’s quite long. It’s borderline messy and hard to people new to this code to read. So, let’s refactor it!

Refactoring is something we do once our code already works, but it’s like editing it. We go back over it and look for opportunities to make it more readable or concise. When we notice that a function has more than 1 or 2 jobs, we need to refactor.

In the appendScholar function, it is gathering all the scholar information from the user, organizing it in an object, and then appending it:

function appendScholar() {
  var name = $('.name').val();
  var studying = $('.studying').val();
  var city = $('.city').val();

  var scholarInfo = { name: name, studying: studying, city: city };

  cardContainer.append(`
    <div class="name-card">
      <p class="name">
        ${scholarInfo.name} is studying ${scholarInfo.studying} in ${scholarInfo.city}!
      </p>
    </div>
  `);
}

We’re to create what is commonly referred to as a helper function, which will take one of the jobs. We can then call it from inside the other function.

function getScholarInfo() {
  var name = $('.name').val();
  var studying = $('.studying').val();
  var city = $('.city').val();

  var scholarInfo = { name: name, studying: studying, city: city };

  appendScholar(scholarInfo);
}

function appendScholar(scholar) {
  cardContainer.append(`
    <div class="name-card">
      <p class="name">
        ${scholar.name} is studying ${scholar.studying} in ${scholar.city}!
      </p>
    </div>
  `);
}

To make sure everyone is on the same page…

• Do we see any new code, compared to the original appendScholar function?
  • A new function was declared, but other than that, code was just moved around.
• What is happening on the last line of getScholarInfo?
  • appendScholar(scholarInfo);
• What is that line doing?
  • We are calling the helper, appendScholar and passing it 1 argument, the object of scholarInfo.
• Why is the appendScholar function taking an argument?
  • This function is the one that actually appends the information. We have to pass in the argument with the scholar info so that it has something to append.
• Which of these functions should be called in the event listener? Why?
  • The event listener should call getScholarInfo because that step has to be taken before the appendScholar can do its job.

Back to Lesson Index