JavaScript Assignment Operators💻🧮 Explained with Canvas API🎨
Tags: javascript, beginners, webdev, tutorial
Published: 2023-01-01 20:51:42

## Table of Contents
1 [JavaScript Assignment Operators](#javaScript-assignment-operators)
2 [Code Workplace](#code-workplace)
3 [Questions](#questions)
4 [Answers](#answers)

## JavaScript Assignment Operators brief overview
The Assignment operator is  `equal (=)` which assigns the value of right-hand operand to its left-hand operand. That is if a = b assigns the value of b to a.

`+=` Addition Assignment: This operator adds the value to the right operand to a variable and assigns the result to the variable.

`-=` Subtraction assignment: Subtracts the value on the right from the variable value on the left, and returns the new variable value.

`*=` Multiplication assignment: Multiplies the variable value on the left by the value on the right, and returns the new variable value.

`/=` Division Assignment: This operator divides a variable by the value of the right operand and assigns the result to the variable.

`%=` Remainder/Modulus Assignment: This operator divides a variable by the value of the right operand and assigns the remainder to the variable.

![javaScript operators](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1dqv7xordn7hm6dzmwx.jpg)

_image credit:_ `http://www.corelangs.com/js/basics/operators.html`

Let's carry out an exercise to manipulate some numbers and operators to change the size of a box. The box is drawn using a browser API called the Canvas API. There is no need to worry about how this works — just concentrate on the math for now. The width and height of the box (in pixels) are defined by the variables x and y, which are initially both given a value of 50.

The following questions are obtained from the MDN JavaScript Documentation which you can find [here](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math#active_learning_sizing_a_canvas_box).

## Code Workplace
Practice working on the coding questions using this workspace. Then check the answers if you need help💯
JSitor: https://jsitor.com/mxtwfi8OL5
You only edit these two lines for this exercise:

![two lines to edit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbaha9mxfindvz304bkg.png)

## Questions
### Question 1
Change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator.

view the possible solution [here](#answer-1)

### Question 2
Change the line that calculates y so the box is 75px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator.

view the possible solution [here](#answer-2)

### Question 3
Change the line that calculates x so the box is 250px wide, but the 250 is calculated using two numbers and the remainder (modulo) operator.

view the possible solution [here](#answer-3)

### Question 4
Change the line that calculates y so the box is 150px high, but the 150 is calculated using three numbers and the subtraction and division operators.

view the possible solution [here](#answer-4)

### Question 5
Change the line that calculates x so the box is 200px wide, but the 200 is calculated using the number 4 and an assignment operator.

view the possible solution [here](#answer-5)

### Question 6
Change the line that calculates y so the box is 200px high, but the 200 is calculated using the numbers 50 and 3, the multiplication operator, and the addition assignment operator.

view the possible solution [here](#answer-6)

## Answers
### Answer 1
Possible solution:
`x = (43 + 7);
y = 50;`
simple right? The total, of course, will add up to 50 so the square will not change in size:

![Solution for Question 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/goddb67t806xfdna7a8p.JPG)

back to [question 1](#question-1)

### Answer 2
Possible solution:
`x = 50;
y = (25 + 3);`
Just like the previous question this merely involves a simple subtraction operation to get the desired result:

![Solution for Question 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8idxaxthx3zy9k08ji2l.JPG)

back to [question 2](#question-2)

### Answer 3
Possible solution:
`x = 750 % 500;
y = 50;`

And voila! By dividing 750 by 500 we get a remainder of 250 exactly what we wanted.

![Solution for Question 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewxhqpp4scckcfm84cbv.JPG)

back to [question 3](#question-3)

### Answer 4
Possible solution:
`x = 50;
y = 500 / 2 - 100;`

Not much explanation needed here. Our three numbers are 500, 100 and 2. When we divide 500 by 2 we get 250 which we then subtract 100 from to get 150:

![Solution for Question 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2itf33rsoxy18zvgfqc.JPG)

back to [question 4](#question-4)

### Answer 5
Possible solution:
`x *= 4;
y = 50;`

As we already know, the `*=` operator multiplies the variable value on the left by the value on the right, and returns the new variable value. Since x has been assigned 50 it will multiply it by 4 to get 200:

![Solution for Question 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8n7n5cqf9e3hwtkwjta9.JPG)

back to [question 5](#question-5)

### Answer 6
Possible solution:
`x = 50;
y *= 50 + 3;`

Here we have merely used the `*=` operator then added our two numbers 50 + 3 to get our solution:

![Solution for Question 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m00x7pmhylsk5vku5huf.JPG)

back to [question 6](#question-6)

You can practice making more complex scenarios with assignment operators. To read more on JavaScript assignment operators, take a look at this article on [javaScript.info](https://javascript.info/operators)

If you found this article useful or if you spotted an error drop me a line in the comments I'd love to hear from you😁