HTML Academy
New data
Arrays5/30
Back to the list of tasks
  • 1. Little Muffin and Big Data
  • 2. Average value
  • 3. Finishing the traffic analyzer
  • 4. New data
  • 5. A lot of data? An array!
  • 6. Reading an array element by index
  • 7. Using a variable as an index
  • 8. Array length
  • 9. Let’s hit arrays with loops!
  • 10. Summation in the loop
  • 11. Finishing refactoring
  • 12. One small analytical investigation
  • 13. Writing to an array by index
  • 14. The murderer is a butler!
  • 15. Summary of “Arrays”. Part 1
  • 16. Fifth program: Beginner decryptor
  • 17. Vague suspicions
  • 18. Swapping the elements
  • 19. Looking for the minimum element
  • 20. The minimum element is found!
  • 21. Starting sorting
  • 22. Continue sorting
  • 23. Finish sorting
  • 24. Testing the sorting
  • 25. Median of an odd number of elements
  • 26. Median of an even number of elements
  • 27. Green light
  • 28. The murderer is the butler, again!
  • 29. Summary of “Arrays”. Part 2
  • 30. Sixth program: Long jump records
Reading an array element by index
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

A lot of data? An array!

Muffin was wagging his tail pensively and squinting at your code. Then he took his tired eyes off the monitor, dialed the familiar number on the pager and said with a sigh: “Hi, team lead. Tell this rookie about refactoring.”

Surprisingly, the video blog was able to survive long enough, and today Muffin sent us data for the last month:

817, 1370, 752, 1247, 681, 1120, 915, 1281, 875, 1341, 757, 610, 812, 1170, 769, 1261, 845, 1289, 515, 1247, 845, 1311, 741, 1239, 812, 638, 877, 1242, 1159, 1372

To analyze this data, you will have to add 26 more variables to the current program. A lot of writing? We are about to get data for the year, too.

Your program works correctly, but adding new data to it is extremely time-consuming. Therefore, it’s time to refactor. Refactoring is changing the structure of a program while keeping its behavior the same. The purpose of our refactoring is to reduce the complexity of adding and modifying massive amounts of data.

Fortunately, there is a way to store large amounts of data. This structure is called an array. An array is a data type representing an ordered list of elements, each identified by an index.

Arrays are created using an array literal with square brackets. Inside the brackets, list the array values separated by commas. Like any other value, an array can be assigned to a variable:

var numbers = [1, 2, 3, 4, 5];

In the array you can store any data: strings, Boolean values, numbers and even other arrays.

We will do refactoring smoothly, without deleting the entire program, but rewriting its parts instead. At the first stage, we get rid of the individual variables for the data:

  1. Let’s temporarily set the average value to zero.
  2. Then create an array, in which we transfer the values ​​from the variables.
  3. And pass this array to the command muffin.plot() instead of variables (fortunately, the command can work with arrays).
  4. Now, when the variables for the data in the program are no longer used, we can go ahead and delete them.

Comments

  • script.js
JavaScript
var expectedUsers = 1000; var firstDayUsers = 812; var secondDayUsers = 1360; var thirdDayUsers = 657; var fourthDayUsers = 1247; // Drawing the traffic graph muffin.plot( firstDayUsers, secondDayUsers, thirdDayUsers, fourthDayUsers, expectedUsers ); // Calculating the average traffic value var averageUsers = (firstDayUsers + secondDayUsers + thirdDayUsers + fourthDayUsers) / 4; console.log('Average traffic: ' + averageUsers); if (averageUsers > expectedUsers) { console.log('Traffic is amazing. Keep up the good work!'); } else { console.log('Traffic is so-so. You need to try harder!'); }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

Console

The code has changed, click “Run” or turn autorun on.

Result

Goalscompleted
  1. Replace the average calculation with the value 0 assigned to averageUsers.
  2. Before muffin.plot(), declare usersByDay with the value [812, 1360, 657, 1247].
  3. In the muffin.plot() call, pass usersByDay as the first argument and expectedUsers as the second. Remove the other arguments.
  4. Feel free to delete variables firstDayUsers, secondDayUsers, thirdDayUsers and fourthDayUsers.

Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2026

VISAMastercard

Log in

or

Forgot your password?

Sign up

Sign up

or
Log in

Restore access

Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

Forgot to connect your email to the profile? Email us and we’ll help.