Improve the Sum Function — Transcript

Transcript of the free Vue.js lesson Improve the Sum Functionwatch the video lesson.

From our previous lesson, we test the additions in JavaScript. Now let's refactor it into a function and make it less trivial so we could have a better reason to test. I imagine we could have some functions that takes arbitrary amount of numbers and returns their summary. Then we could change out the test files like so.

We start a test with npm run test and that it stays on watch mode so we can have an instant feedback when we make changes. The test is passing, so we can proceed with our next step. Consider we might have a third number added to the summary. Let's add a new test case to express our expectation.

Let's say 1 plus 2 plus 3 should equal to 6. The test failed as we didn't consider the third argument. We could add an addition c to our summary functions, so it could cover that case. Try it again, we will see the new test passed while the old one failed.

So we better figure out a better way implementing that. This is also one of the reasons why tests are important. They help you immediately identify the breaks to existing functionalities when adding to new features. So let's refactor our functions to use REST parameter syntax and array reduce.

The REST parameter syntax allows us to gather all the function's parameters into an array. Reduce goes through all the numbers into arrays and sums them together. Now we see that both tests are passing. To be more confident about our new implementation, we could add more tests to cover the edge cases.

For instance, we could make sure adding 10 numbers together works. We could also test only one single number or no numbers at all. Great, now all the tests are passing and we are good to go. From our previous lesson, we test the additions in JavaScript.

Now let's refactor it into a function and make it less trivial so we could have a better reason to test. I imagine we could have some functions that takes arbitrary amount of numbers and returns their summary. Then we could change out the test files like so. We start a test with npm run test and that it stays on watch mode so we can have an instant feedback when we make changes.

The test is passing, so we can proceed with our next step. Consider we might have a third number added to the summary. Let's add a new test case to express our expectation. Let's say 1 plus 2 plus 3 should equal to 6.

The test failed as we didn't consider the third argument. We could add an addition c to our summary functions, so it could cover that case. Try it again, we will see the new test passed while the old one failed. So we better figure out a better way implementing that.

This is also one of the reasons why tests are important. They help you immediately identify the breaks to existing functionalities when adding to new features. So let's refactor our functions to use REST parameter syntax and array reduce. The REST parameter syntax allows us to gather all the function's parameters into an array.

Reduce goes through all the numbers into arrays and sums them together. Now we see that both tests are passing. To be more confident about our new implementation, we could add more tests to cover the edge cases. For instance, we could make sure adding 10 numbers together works.

We could also test only one single number or no numbers at all. Great, now all the tests are passing and we are good to go.