|
| 1 | +JavaScript Arithmetic Lab |
| 2 | +--- |
| 3 | + |
| 4 | +## Objectives |
| 5 | + |
| 6 | +1. Practice doing math with JavaScript |
| 7 | +2. Practice writing functions that do things with numbers |
| 8 | +3. Practice parsing strings as numbers |
| 9 | + |
| 10 | +## Introduction |
| 11 | + |
| 12 | +In this lab, we're going to practice writing functions and manipulating numbers in JavaScript. First, though, we need to go over some basic math. In this lab, we're going to learn about various arithmetic operators. What's an operator, you say? It's a symbol that _operates_ on one or more (usually two) objects — `+` is a good example. The `+` operator says "add what's to the left of `+` and what's to the right of `+` together." Easy-peasy! |
| 13 | + |
| 14 | +## Basic Math |
| 15 | + |
| 16 | +The most fundamental math operations work as one might expect in JavaScript: `+` adds two numbers; `-` subtracts one number from another; `*` multiplies two numbers; and `/` divides one number by another. For example (as usual, follow along in console!) |
| 17 | + |
| 18 | +``` javascript |
| 19 | +1 + 80 // 81 |
| 20 | +60 - 40 // 20 |
| 21 | +2 * 3.4 // 7.1999999999999 (there's that floating-point arithmetic again...) |
| 22 | +5.0 / 2.5 // 2 |
| 23 | +``` |
| 24 | + |
| 25 | +At this point, we can fix the first few broken tests: we can define functions `add()`, `subtract()`, `multiply()`, `divide()` in `index.js`. |
| 26 | + |
| 27 | +## Math + Assignment |
| 28 | + |
| 29 | +Additionally, we can increment (`++`) and decrement (`--`) a number if it's assigned to a variable: |
| 30 | + |
| 31 | +``` javascript |
| 32 | +var number = 5 |
| 33 | + |
| 34 | +number++ // 5... hmmmm |
| 35 | + |
| 36 | +number // 6 -- the number was incremented after it was evaluated |
| 37 | + |
| 38 | +number-- // 6 |
| 39 | + |
| 40 | +number // 5 |
| 41 | +``` |
| 42 | + |
| 43 | +We can also put the incrementor and decrementor operations before the number: |
| 44 | + |
| 45 | +``` javascript |
| 46 | +--number // 4 |
| 47 | + |
| 48 | +++number // 5 |
| 49 | +``` |
| 50 | + |
| 51 | +But generally, you will see them placed _after_ the number (and we recommend that that's where you put them). |
| 52 | + |
| 53 | +And, while we're on the subject, you'll usually only want to use these incrementors and decrementors when the shorthand makes what you're writing easier to read (more on when _exactly_ later). Instead, it's best to use the basic arithmetic operators combined with `=`. For the examples below, assume that `number` is equal to `5` (and resets for every example). |
| 54 | + |
| 55 | +- `+=` modifies the value to the operator's left by adding to it the value to the operator's right: |
| 56 | + |
| 57 | +```javascript |
| 58 | +number += 3 // 8 |
| 59 | +``` |
| 60 | + |
| 61 | +- `-=` modifies the value to the operator's left by subtracting from it the value to the operator's right: |
| 62 | + |
| 63 | +``` javascript |
| 64 | +number -= 2 // 3 |
| 65 | +``` |
| 66 | + |
| 67 | +- `*=` modifies the value to the operator's left by multiplying it by the value to the operator's right: |
| 68 | + |
| 69 | +``` javascript |
| 70 | +number *= 10 // 50 |
| 71 | +``` |
| 72 | + |
| 73 | +- `/=` modifies the value to the operator's left by dividing it by the value to the operator's right: |
| 74 | + |
| 75 | +``` javascript |
| 76 | +number /= 5 // 1 |
| 77 | +``` |
| 78 | + |
| 79 | +The thing to remember about these methods is that they modify the variable in place. So if we have two functions that depend on the same external variable, they order in which they're called matters. Follow along in console: |
| 80 | + |
| 81 | +``` javascript |
| 82 | +var number = 10 |
| 83 | + |
| 84 | +function add5() { |
| 85 | + number += 5 |
| 86 | +} |
| 87 | + |
| 88 | +function divideBy3() { |
| 89 | + number /= 3 |
| 90 | +} |
| 91 | + |
| 92 | +divideBy3() |
| 93 | + |
| 94 | +console.log(number) // 3.333333333335 |
| 95 | + |
| 96 | +add5() |
| 97 | + |
| 98 | +console.log(number) // 8.333333333335 |
| 99 | + |
| 100 | +// reset number |
| 101 | +number = 10 |
| 102 | + |
| 103 | +add5() |
| 104 | + |
| 105 | +console.log(number) // 15 |
| 106 | + |
| 107 | +divideBy3() |
| 108 | + |
| 109 | +console.log(number) // 5 |
| 110 | +``` |
| 111 | + |
| 112 | +**Because these methods are more explicit, prefer `+=` to `++` and `-=` to `--` (usually).** |
| 113 | + |
| 114 | +Okay, now we're ready to write solutions for `inc(n)` and `dec(n)`. |
| 115 | + |
| 116 | +## Parsing Numbers |
| 117 | + |
| 118 | +Sometimes, we'll receive a number — well, we know it's a number, as we've seen many numbers in the past. JavaScript, however, won't know that it's a number because it shows up wrapped in quotes — JavaScript, then, thinks it's a string. |
| 119 | + |
| 120 | +Luckily, JavaScript gives us tools to turn these strings into proper numbers (that is, numbers that JavaScript understands). |
| 121 | + |
| 122 | +### `parseInt()` |
| 123 | + |
| 124 | +The first such tool is the function `parseInt()`, which accepts two arguments: the value to parse and the base of the value being parsed. _Usually_ you will want to work with base 10, so a typical call to `parseInt()` looks like |
| 125 | + |
| 126 | +``` javascript |
| 127 | +parseInt('2', 10) // 2 |
| 128 | +``` |
| 129 | + |
| 130 | +What happens if we pass a representation of a non-integer to `parseInt()`? Let's try it: |
| 131 | + |
| 132 | +``` javascript |
| 133 | +parseInt('2.2222', 10) |
| 134 | +``` |
| 135 | + |
| 136 | +If we enter the above in console, we'll see that `parseInt()` forces the parsed number to be an integer — which makes sense when we think about it, right? |
| 137 | + |
| 138 | +What happens, though, if we pass utter nonsense to `parseInt()`? Go ahead and try it in the console — something like |
| 139 | + |
| 140 | +``` javascript |
| 141 | +parseInt('nonsense!', 10) |
| 142 | +``` |
| 143 | + |
| 144 | +What did it return? `NaN`? What is that? |
| 145 | + |
| 146 | +`NaN` stands for "not a number" — pretty handy, right? This is the number (in the JavaScript sense) that JavaScript returns when it can't determine a valid value for a numeric operation. |
| 147 | + |
| 148 | +### `parseFloat()` |
| 149 | + |
| 150 | +Above, we saw that `parseInt()` lops off everything after the decimal point and only returns integers. If we want to preserve decimals, we'll need to use `parseFloat()`. |
| 151 | + |
| 152 | +Unlike `parseInt()`, `parseFloat()` accepts only a single argument, the thing to be parsed. We can use it like so: |
| 153 | + |
| 154 | +``` javascript |
| 155 | +parseFloat('80.123999') // 80.123999 |
| 156 | +``` |
| 157 | + |
| 158 | +You're now ready to solve the final tests in this lab, `makeInt(n)` and `preserveDecimal(n)`. |
| 159 | + |
| 160 | +## Resources |
| 161 | + |
| 162 | +- `parseInt()`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt |
| 163 | + |
| 164 | +- `parseFloat()`: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat |
0 commit comments