Notation in the notes

• Placeholders are denoted with angular brackets (< and >). When you see a placeholder in example code, it means you should type in something that meets the description between the brackets instead of the brackets and what is in them. For example, if an example to type into the console is:

  
  console.log("<your name>")
  				

  that means that, if your name is Bob, you should really type in:

  
  console.log("Bob")
  				

• Code in a pink box, like below, is for you to try out. The caption explains where and how.

  7 + 5
  "catch" + 22
  					

Javascript Data Types

A full list of Javascript datatypes can be found here. In this module, we will be using these primitive data types:

• boolean
• number
• string
• undefined

and the structural data types:

• function
• object

34
"abcd"
true
3.44
undefined		    

Javascript Operators

A full list of Javascript operators can be found here but we will be working with only some of them, introducing them gradually.

Arithmetic operators

+  -  *  /  **

• Operand (input) type: number
• Return (result) type: number
• Type w.r.t. number of operands: binary

3 + 4
7.77 - 0.77
12 / 3.1
18 * 0.5
3**2

Comparison operators

>  >=  <  <=  ==  !=  ===  !==		    

• Operand (input) type: number
• Return (result) type: boolean (true or false)
• Type w.r.t. number of operands: binary

3 < 4      // less than
3 > 4      // greater than
4 <= 3     // less or equal
4 <= 4 
5 >= 2     // greater or equal
4 == 4.0
1 == true
4 != 4     // not equal
1 === true // strict equal
1 === "1"
1 == "1"
1 !== "1"  // strict not equal
				

Strict comparison (===) requires the value and the type to be equal. Lenient comparison (==) converts the values to the same type before comparing.

Logical operators

&&  ||  !

• Operand (input) type: boolean
• Return (result) type: boolean
• Type w.r.t. number of operands: binary (&&, ||) and unary (!)

3 < 4 && 3 == 3 // and (both expressions must be true)
3 > 4 && 3 == 3 
3 > 4 || 3 == 3 // or (at least one expression must be true)
!(3 > 4)        // not (is the expression not true?)
				

typeof operator

typeof

• Operand (input) type: [any]
• Return (result) type: string
• Type w.r.t. number of operands: unary

The operator typeof takes any value or expression and returns its type.

typeof "abc"
typeof 4
typeof true
typeof undefined
typeof 4 - 22
typeof (4 < 22) // try without parentheses as well

String operators

[] +  <  <=  >  >=  ==  !=  ===  !==

All the operators we will be looking at here are used on other types, except for []. When operators or functions operate on entirely different types and do slightly different things as a consequence, this is called overloading.

• + (concatenation operator):
  • puts strings together into a single string
  • concatenation with other types also allowed (other types are converted to string first)
• < <= > >= == != === !== (comparison):
  • this is based on underlying character codes
  • alphabetic if characters all lower case or all upper case
  • comparison with other types possible for equality
• [] (indexing operator): returns the character at given position, as a string

"abc" + "123"
"abc" + 123 // concatenate with other type
"abc" == "abc"
"abc" == "ABC"
"abc"[0] // indexing: first element has index 0 etc.
"abc"[1] 

Operator precedence and associativity

• When using operators, we must keep in mind precedence and associativity. Precedence defines the order in which different operators are applied when appearing in the same expression (higher precedence means earlier execution, e.g. multiplication has a higher precedence than addition). Associativity defines whether a chain of the same operator is executed from left to right or the other way around (for example in 12 / 6 / 2 division is applied from left to right, resulting in the answer 1, but if division were right-associative then the first calculation would be 6 / 2 = 3 and the second one 12 / 3, with the final result of 4).
• Operators are listed by precedence here. A more detailed table, including associativity information is here.
• A chain of different operators with the same precedence is always executed from left to right.
• Parentheses can be used to change the order of operation.

2 + 3 * 2
(2 + 3) * 2
typeof 3 * 7 // error! why?
typeof (3 * 7)
typeof 3 + 7 // ok. why? 

Functions and methods

• Functions and methods are reusable pieces of Javascript code.
• Once a function or method is defined (i.e. a specification is made as to what the function should do), it can be called i.e. executed over and over again. This is the main benefit of a function or method. The other advantage to using functions and methods is that code organised into smaller chunks is easier to understand and maintain.
• There are many functions and methods that come with Javascript. These are already defined and are available to the developer to call when needed. They are organised into standard APIs (application programming interfaces).
• Other functions and methods, defined by third parties (e.g. Google Maps API) can be included and used by the developer.
• New functions and methods can be defined by the developer and this is something we will learn to do as part of the module.
• The difference between functions and methods will be discussed later in the module but for the moment it is enough to know that they are both reusable chunks of functionality. You will recognise methods by the fact that they have one or more dots in the call.

// calling some functions and methods
alert("Hello world")
console.log("Hello again")
"abc".toUpperCase()

// evaluating some functions and methods (this just
// tells us what the name represents i.e. a function)
alert
"abc".toUpperCase