DEV Community

Cover image for Getting started in Software development: A Path to a rewarding career (Part 3B, Operators)
Abdurraheem Abdul-majeed
Abdurraheem Abdul-majeed

Posted on • Edited on

Getting started in Software development: A Path to a rewarding career (Part 3B, Operators)

Hello and welcome

Thanks for stopping by yet again.

Table of Content

Full table of content for the entire series is here

Today, we will continue the following

  • Getting started (cont'd)
    • Learn Programming concepts (cont'd)

Programming Concepts

Where were we? πŸ’Ώ πŸ€” Oh yeah, last time we started learning some basic programming concepts. Let us continue.

Yeeeeeaaaah

Operators

Operators, like in mathematics, allow you to perform some operations on values. For example, in the operation: 1+1, the plus sign β€˜+’ is the operator and it lets you add the numbers on its 2 sides. Similarly, in code, operators tell the computer to perform certain operations with the adjoining values.

There are several operators in the typical programming language and Javascript is no different. Here are some of the more common ones you will encounter in the early days of your software development life; fair warning, some of them may look like the ones you already know 😜.

Also, the aim here is to understand how they work on a surface level, we will do a lot of practice with them when the time comes. 😎

Mathematical operators

Mathematical operators are used for mathematical operations like adding, multiplying and so on.

maths
Now before your fear of maths makes you run off, it is enough to know basic arithmetic to understand these concepts so no fear, you gat this.

escape

They are as follows

  • Addition (+): Adds two values together e.g.: 1+1 will return 2

  • Subtraction (-): Subtracts one value from another e.g.: 2-1 will return 1

  • Multiplication (*): Multiplies two values e.g.: 4*5 will return 20

  • Division (/): Divides one value by another e.g.: 16/2 will return 8

  • Modulus (%): Returns the remainder of a division operation e.g.: 5%2 will return 1 (because 5/2 will return 2 and a remainder of 1)

  • Increment (++): Increase the value of a variable by 1 e.g.: if variable a has the value of 1 and we do a++ we will get 2 in return (it is the same as 1+1)

  • Decrement (--): Decrease the value of a variable by 1 e.g.: if a has the value of 2 and we do a-- we will get 1 in return (it is the same as 2-1)

  • Exponent or Exponentiation operator (**): Raise the first operand to the power of the second operand e.g.: 2**5 will return 32 (meaning 2 raised to the power of 5 or 2 raised to the 5th power; 2*2*2*2*2)

Assignment Operators

  • Assignment (=): Assigns a value to a variable. Remember we spoke about assigning a value to a variable in the last post, this is the operator to do that.

If you have a variable called someCoolVariable, in order to assign a value (like the number 5) to that variable, you say

someCoolVariable = 5
Enter fullscreen mode Exit fullscreen mode

Now, in the memory of the computer, there is a storage area (variable) named someCoolVariable and it has the value of 5.

What we did there was assigning the value of 5 to the variable someCoolVariable

To change the value in that memory location or variable to something else (say 22), we simply assign another value to it like so:

someCoolVariable = 22
Enter fullscreen mode Exit fullscreen mode

Now let us say we want to change the value of someCoolVariable to its original value plus 2;

We can say

someCoolVariable =  someCoolVariable + 2
Enter fullscreen mode Exit fullscreen mode

Meaning we take whatever is in the someCoolVariable memory location, we add 2 to it using the addition operator from above;

someCoolVariable + 2
Enter fullscreen mode Exit fullscreen mode

and store/assign the result back to the same location so we say

someCoolVariable =  someCoolVariable + 2
Enter fullscreen mode Exit fullscreen mode

If this is not clear, fear not, we will practice later on, and you will understand it with real examples.

  • Addition assignment (+=): Adds a value to the variable and assigns the result to the same variable giving it a new value. This is simply a shorter way of doing the following
someCoolVariable =  someCoolVariable + 2
Enter fullscreen mode Exit fullscreen mode

By making it:

someCoolVariable += 2
Enter fullscreen mode Exit fullscreen mode

The 2 lines above do the exact same thing but the second one using the addition assignment is shorter to type

  • Subtraction assignment (-=): Subtracts a value from the variable and assigns the result to the variable. This is simply a shorter way of doing the following
someCoolVariable =  someCoolVariable - 2
Enter fullscreen mode Exit fullscreen mode

By making it:

someCoolVariable -= 2
Enter fullscreen mode Exit fullscreen mode

The 2 lines above do the exact same thing but the second one using the subtraction assignment is shorter to type

  • Multiplication assignment (*=): Multiplies the variable by a value and assigns the result to the variable. This is simply a shorter way of doing the following
someCoolVariable =  someCoolVariable * 2
Enter fullscreen mode Exit fullscreen mode

By making it:

someCoolVariable *= 2
Enter fullscreen mode Exit fullscreen mode

The 2 lines above do the exact same thing but the second one using the multiplication assignment is shorter to type

  • Division assignment (/=): Divides the variable by a value and assigns the result to the variable. This is simply a shorter way of doing the following
someCoolVariable =  someCoolVariable / 2
Enter fullscreen mode Exit fullscreen mode

By making it:

someCoolVariable /= 2
Enter fullscreen mode Exit fullscreen mode

The 2 lines above do the exact same thing but the second one using the division assignment is shorter to type

  • Modulus assignment (%=): Performs modulus division on the variable and assigns the result to the variable. This is simply a shorter way of doing the following
someCoolVariable =  someCoolVariable % 2
Enter fullscreen mode Exit fullscreen mode

By making it:

someCoolVariable %= 2
Enter fullscreen mode Exit fullscreen mode

The 2 lines above do the exact same thing but the second one using the modulus assignment is shorter to type

Comparison Operators

compare

  • Equal to (==): Compares two values for equality. This equality (==) operator checks whether its two operands are equal, and returns a Boolean (true or false) result.

Something to note about this is that if it is given 2 operands of different data types like a string and a Boolean or a string and a number, it will attempt to convert the operands to the same type before comparing.

Example:

1 == 1
// read as β€˜is 1 equal to 1’ and the answer in Boolean is true
// same data type. Expected output: true

'hello' == 'hello'
// same data type. Expected output: true

'1' ==  1
// different data types, β€˜1’ is a string and 1 is a number. Expected output: true
// this is because when converted to a string, 1 is β€˜1’ which is equal to the other string 
// and when converted to a number, β€˜1’ is 1 which is equal to the other number 

0 == false
// different data types, number and Boolean. Expected output: true
// because when converted to a number, false is 0, equal
// and when converted to a Boolean, 0 is false, equal
Enter fullscreen mode Exit fullscreen mode
  • Not equal to (!=): Compares two values for inequality, allowing type coercion. This is the reverse of the equal operator, it returns true if the 2 operands are not equal even after type coercion and false when they are equal.

Example:

1 != 1
// read as β€˜is 1 not equal to 1’ and the answer in Boolean is false
// same data type. Expected output: false
Enter fullscreen mode Exit fullscreen mode

The ! is the negation operator and it usually just returns the opposite of its operand
So if you have a variable isCool and it is assigned the value of false, !isCool will be true because the ! operator reverses it

  • Strict equal to (===): Compares two values for equality without type coercion. In this case, unlike == above, the operands will be compared as they are supplied without any type changes

Example:

1 === 1
// read as β€˜is 1 strictly equal to 1’ and the answer in Boolean is true
// same data type. Expected output: true

'hello' === 'hello'
// same data type. Expected output: true

'1' ===  1
// different data types, β€˜1’ is a string and 1 is a number. Expected output: false 
// this is because there is no type coercion and string β€˜1’ is not the exact same strictly speaking as number 1 
// the data type mismatch already makes them unequal so the result is false

0 === false
// different data types, number and Boolean. Expected output: false
// because there is no type coercion 
// the data type mismatch already makes them unequal so the result is false
Enter fullscreen mode Exit fullscreen mode
  • Strict not equal to (!==): Compares two values for inequality without type coercion. This is the reverse of the strict equal above, it returns true if the 2 operands are not equal with no type coercion and false when they are equal.

Example:

β€˜1’ !== 1
// read as β€˜is β€˜1’ not strictly equal to 1’ and the answer in Boolean is true
// different data type means it is true to say they are not equal. Expected output: true
Enter fullscreen mode Exit fullscreen mode
  • Greater than (>): Checks if one value is greater than another. This is easy enough, returns true only if value on the left is greater than value on the right

Example:

5 > 3
// read as β€˜is 5 greater than 3’. Expected result: true

3 > 4
// read as β€˜is 3 greater than 4’. Expected result: false

3 > 3
// read as β€˜is 3 greater than 3’. Expected result: false
// because 3 is not greater than 3, seriously, its not, I promise you.

Enter fullscreen mode Exit fullscreen mode
  • Less than (<): Checks if one value is less than another. This is the reverse of the greater than and returns true only if value on the left is less than value on the right

Example:

5 < 3
// read as β€˜is 5 less than 3’. Expected result: false

3 < 4
// read as β€˜is 3 less than 4’. Expected result: true

3 < 3
// read as β€˜is 3 less than 3’. Expected result: false
// because 3 is not less than 3, no seriously, shocking stuff.

Enter fullscreen mode Exit fullscreen mode
  • Greater than or equal to (>=): Checks if one value is greater than or equal to another. This returns true either if value on the left is greater than value on the right or if they are equal

Example:

5 >= 3
// read as β€˜is 5 greater than or equal to 3’. Expected result: true
// because it meets one of the conditions (it is greater than)

3 >= 4
// read as β€˜is 3 greater than or equal to 4’. Expected result: false
// because it doesn’t meet any of the conditions (it is not greater than and not equal to)

3 >= 3
// read as β€˜is 3 greater than or equal to 3’. Expected result: true
// because it meets one of the conditions (it is not greater than but it is equal to) whew, finally

Enter fullscreen mode Exit fullscreen mode
  • Less than or equal to (<=): Checks if one value is less than or equal to another. This returns true either if value on the left is less than value on the right or if they are equal

Example:

5 <= 3
// read as β€˜is 5 less than or equal to 3’. Expected result: false
// because it doesn’t meet any of the conditions (it is not less than and not equal to)

3 <= 4
// read as β€˜is 3 less than or equal to 4’. Expected result: true
// because it meets one of the conditions (it is less than)

3 <= 3
// read as β€˜is 3 less than or equal to 3’. Expected result: true
// because it meets one of the conditions (it is not less than but it is equal to) awesome!

Enter fullscreen mode Exit fullscreen mode

There are other operators that we will encounter as we go along but in order not to overwhelm us, we will take a pause here until next time.

Stay frosty guys, leave comments or questions down there because we are here to help

Iron legion

Previous post is here

Next post is here

Top comments (0)