Common Javascript Operators

Last class we learned about the basics of Javascript and how to store variables. That's a great start, but without doing anything else with our data, the number of programs we can write is going to be very limited.

An operator is used to manipulate data. These could be in the form of variables or static values (1, "Frank", etc).

Common operations involve math, manipulation of data and objects, and others.

Often the same operators do different things depending on the types of variables being operated on.

As always, you can follow along with examples by running Node in interactive mode.

console.log(2 + 5) // 7
console.log("hello" + "there") // "hellothere"
console.log(10 - 2) // 8
console.log(10 / 5) // 2
console.log(7 * 7) // 49
console.log(true === false) // false
console.log(true === true) // true
console.log(1 == "1") // true - WHY?

Here are some common operators.

assignment operator

// this lets you set a value or create a new value
let a = 7
let b = 10
let swap = a
a = b // now a is 10 
b = swap // now b is 7

basic math operations

let a = 10
let b = 5
a + b // 15
a - 10 // 0
b * 5 // 25
a / 5 // 2

combined math and assignment

let a = 10
a += 5 // now a is 15
a -= 3 // now a is 12
a /= 4 // now a is 3
a *= 10 // now a is 30

modulus operator

This means "divide and take the remainder". It's often used when you're going through many different variables at once.

let a = 5
let mod = a % 3 // now mod is 2, because 5 / 3 gives a remainder of 2
mod = a % 5 // now mod is 0, because 5 / 5 has no remainder
mod = a % 9 // now mod is 4, because 5 / 9 doesn't divide exactly

circle brackets / parentheses

These change the order math and logic operations happen in.

1 + 1 // 2
2 * 5 + 7 // 17
2 * (5 + 7) // 24

comments

There are used to add text to code to help other people understand what you've written.

/*
This is a multi-line comment.

You'll often find them at the top of files or explaining in detail what some part of a piece of code does.
*/
let a = 10 // now a is 10 - a one-line comment

equality and not equality

Used to check if two variables are the same. There's a lot of complexity to equality rules in Javascript, but if you use them in a common-sense way then you'll usually be OK.

10 == 5 + 5 // true
1 == 2 // false
// == changes types; "hello" == true because it's not an empty string
"hello" == true // true 
// === checks the type; "hello" doesn't equal true because they're different types
"hello" === true // false
// !== and != mean "not true"
"hello" != true // false O_o
"hello" !== true // true :)

comparison operators

Used to compare two variables, usually but not always numbers.

10 < 5 // false
10 > 5 // true
10 <= 10 // true
10 >= 11 // false
"b" > "a" // true - it compares them alphabetically

and

Returns true if both operands (values on both sides) are true.

true && false // false
true && true // true
(10 > 5) && (5 < 7) // true

or

This is a mathematical OR. This means it's true if one or more operands are true.

true || false // true
true || true // true
false || false // false

not / negation

Used to reverse a boolean value.

!(true) // false
!(false) // true
!(true && false) // true
!(true || false) // false

Questions

What does each line of the following code output?

a = 1 + 1
b = a / 4
c = b * 10
d = c % 5
e = (d - 1) * c
f = true && true
g = true && false
h = false || false
i = false || true
j = a > 0
k = b > a
l = (a + b) * 2 === 3
m = (a + b) * 2 === "3"
n = ((a + b) * 2 === 3) == "3"

Project I: Calculator

Now that we know the basics of manipulating variables we can start to build a basic calculator app. This app needs to do 3 things:

  1. Take 2 user inputs using prompt().
  2. Add them together.
  3. Output the result.