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 from an array using index
  • 7. Variable as 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 from an array using 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 rooky 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 rewriting a program, after which it should work the same way, but be more flexible. 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 massive data. This method is called an array. An array is a data type, which is a list of elements, each of which has its own sequence number.

Arrays are created using the so-called literal array or square brackets. Inside the brackets, comma-separated lists contain all values ​​that an array must contain. When you create an array, like any value, you can write it 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 transfer this array to 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. Instead of calculating the average value, assign the variable averageUsers value 0.
  2. Before the muffin.plot() command, add variable usersByDay with value [812, 1360, 657, 1247].
  3. Inside muffin.plot(), set usersByDay as first parameter, expectedUsers as second parameter and delete the remaining parameters.
  4. Feel free to delete variables firstDayUsers, secondDayUsers, thirdDayUsers and fourthDayUsers.

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

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.