Assign values to variables and add them together:
Arithmetic operators are used to perform arithmetic on numbers (literals or variables).
| Operator | Description |
|---|---|
| + | Addition |
| - | Subtraction |
| * | Multiplication |
| / | Division |
| % | Modulus |
| ++ | Increment |
| -- | Decrement |
The addition operator (+) adds numbers:
The multiplication operator (*) multiplies numbers.
 |
You will learn more about JavaScript operators in the next chapters. |
|---|
Assignment operators assign values to JavaScript variables.
| Operator | Example | Same As |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x - y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
The assignment operator (=) assigns a value to a variable.
The addition assignment operator (+=) adds a value to a variable.
The + operator can also be used to add (concatenate) strings.
|
When used on strings, the + operator is called the concatenation operator. |
|---|
The result of txt3 will be:
The += assignment operator can also be used to add (concatenate) strings:
The result of txt1 will be:
Adding two numbers, will return the sum, but adding a number and a string will return a string:
The result of x, y, and z will be:
The rule is: If you add a number and a string, the result will be a string!
| Operator | Description |
|---|---|
| == | equal to |
| === | equal value and equal type |
| != | not equal |
| !== | not equal value or not equal type |
| > | greater than |
| < | less than |
| >= | greater than or equal to |
| <= | less than or equal to |
| ? | ternary operator |
|
Comparison and logical operators are described in the JS Comparisons chapter. |
|---|
| Operator | Description |
|---|---|
| typeof | Returns the type of a variable |
| instanceof | Returns true if an object is an instance of an object type |
|
Type operators are described in the JS Type Conversion chapter. |
|---|
A typical thing to do with numbers is arithmetic.
Arithmetic operators perform arithmetic on numbers (literals or variables).
| Operator | Description |
|---|---|
| + | Addition |
| - | Subtraction |
| * | Multiplication |
| / | Division |
| % | Modulus |
| ++ | Increment |
| -- | Decrement |
A typical arithmetic operation operates on two numbers.
The two numbers can be literals:
or variables:
or expressions:
The numbers (in an arithmetic operation) are called operands.
The operation (to be performed between the two operands) is defined by an operator.
| Operand | Operator | Operand |
|---|---|---|
| 100 | + | 50 |
The addition operator (+) adds numbers:
The subtraction operator (-) subtracts numbers.
The multiplication operator (*) multiplies numbers.
The division operator (/) divides numbers.
The modular operator (%) returns the division remainder.
The increment operator (++) increments numbers.
The decrement operator (--) decrements numbers.
Operator precedence describes the order in which operations are performed in an arithmetic expression.
In JavaScript, the operators have a certain order of precedence. In a statement with more than one operator involved, one may be executed before another, even though it is not in that order in the statement.
Is the result of example above the same as 150 * 3, or is it the same as 100 + 150?
Is the addition or the multiplication done first?
If you remember how this works in mathematics, you will know that the multiplication is performed first on the 50*3 part of the statement, even though it does not look like that is the right order when you read from left to right. The reason the multiplication is performed first is that the multiplication operator has a higher precedence in the order of operations than the addition operator. So, any multiplication done within a statement will be performed before any addition, unless you override it somehow.
As with math problems, in JavaScript, the way to override the order of operations is through the use of parentheses to set off the portion of the statement that should be executed first.
When using parentheses, the operations inside the parentheses are computed first.
When many operations have the same precedence (like addition and subtraction), they are computed from left to right:
| Value | Operator | Description | Example |
|---|---|---|---|
| 19 | ( ) | Expression grouping | (3 + 4) |
| Value | Operator | Description | Example |
| 18 | . | Member | person.name |
| 18 | [] | Member | person["name"] |
| Value | Operator | Description | Example |
| 17 | () | Function call | myFunction() |
| 17 | new | Create | new Date() |
| Value | Operator | Description | Example |
| 16 | ++ | Postfix Increment | i++ |
| 16 | -- | Postfix Decrement | i-- |
| Value | Operator | Description | Example |
| 15 | ++ | Prefix Increment | ++i |
| 15 | -- | Prefix Decrement | --i |
| 15 | ! | Logical not | !(x==y) |
| 15 | typeof | Type | typeof x |
| Value | Operator | Description | Example |
| 14 | * | Multiplication | 10 * 5 |
| 14 | / | Division | 10 / 5 |
| 14 | % | Modulo division | 10 % 5 |
| 14 | ** | Exponentiation | 10 ** 2 |
| Value | Operator | Description | Example |
| 13 | + | Addition | 10 + 5 |
| 13 | - | Subtraction | 10 - 5 |
| Value | Operator | Description | Example |
| 12 | << | Shift left | x << 2 |
| 12 | >> | Shift right | x >> 2 |
| Value | Operator | Description | Example |
| 11 | < | Less than | x < y |
| 11 | <= | Less than or equal | x <= y |
| 11 | > | Greater than | x > y |
| 11 | >= | Greater than or equal | x >= y |
| Value | Operator | Description | Example |
| 10 | == | Equal | x == y |
| 10 | === | Strict equal | x === y |
| 10 | != | Unequal | x != y |
| 10 | !== | Strict unequal | x !== y |
| Value | Operator | Description | Example |
| 6 | && | And | x && y |
| Value | Operator | Description | Example |
| 5 | || | Or | x || y |
| Value | Operator | Description | Example |
| 3 | = | Assignment | x = y |
| 3 | += | Assignment | x += y |
| 3 | -= | Assignment | x -= y |
| 3 | *= | Assignment | x *= y |
| 3 | /= | Assignment | x /= y |
|
Expressions in parentheses are fully computed before the value is used in the rest of the expression. |
|---|
Assignment operators assign values to JavaScript variables.
| Operator | Example | Same As |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x - y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
The = assignment operator assigns a value to a variable.
The += assignment operator adds a value to a variable.
The -= assignment operator subtracts a value from a variable.
The *= assignment operator multiplies a variable.
The /= assignment divides a variable.
The %= assignment operator assigns a remainder to a variable.
String, Number, Boolean, Array, Object.
JavaScript variables can hold many data types: numbers, strings, arrays, objects and more:
In programming, data types is an important concept.
To be able to operate on variables, it is important to know something about the type.
Without data types, a computer cannot safely solve this:
Does it make any sense to add "Volvo" to sixteen? Will it produce an error or will it produce a result?
JavaScript will treat the example above as:
|
When adding a number and a string, JavaScript will treat the number as a string. |
|---|
JavaScript evaluates expressions from left to right. Different sequences can produce different results:
In the first example, JavaScript treats 16 and 4 as numbers, until it reaches "Volvo".
In the second example, since the first operand is a string, all operands are treated as strings.
JavaScript has dynamic types. This means that the same variable can be used as different types:
A string (or a text string) is a series of characters like "John Doe".
Strings are written with quotes. You can use single or double quotes:
You can use quotes inside a string, as long as they don't match the quotes surrounding the string:
You will learn more about strings later in this tutorial.
JavaScript has only one type of numbers.
Numbers can be written with, or without decimals:
Extra large or extra small numbers can be written with scientific (exponential) notation:
You will learn more about numbers later in this tutorial.
Booleans can only have two values: true or false.
Booleans are often used in conditional testing.
You will learn more about conditional testing later in this tutorial.
JavaScript arrays are written with square brackets.
Array items are separated by commas.
The following code declares (creates) an array called cars, containing three items (car names):
Array indexes are zero-based, which means the first item is [0], second is [1], and so on.
You will learn more about arrays later in this tutorial.
JavaScript objects are written with curly braces.
Object properties are written as name:value pairs, separated by commas.
The object (person) in the example above has 4 properties: firstName, lastName, age, and eyeColor.
You will learn more about objects later in this tutorial.
You can use the JavaScript typeof operator to find the type of a JavaScript variable:
|
In JavaScript, an array is a special type of object. Therefore typeof [1,2,3,4] returns object. |
|---|
In JavaScript, a variable without a value, has the value undefined. The typeof is also undefined.
Any variable can be emptied, by setting the value to undefined. The type will also be undefined.
An empty value has nothing to do with undefined.
An empty string variable has both a value and a type.
In JavaScript null is "nothing". It is supposed to be something that doesn't exist.
Unfortunately, in JavaScript, the data type of null is an object.
|
You can consider it a bug in JavaScript that typeof null is an object. It should be null. |
|---|
You can empty an object by setting it to null:
You can also empty an object by setting it to undefined:
A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it (calls it).
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().
Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).
The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...)
The code to be executed, by the function, is placed inside curly brackets: {}
Function parameters are the names listed in the function definition.
Function arguments are the real values received by the function when it is invoked.
Inside the function, the arguments behave as local variables.
|
A Function is much the same as a Procedure or a Subroutine, in other programming languages. |
|---|
The code inside the function will execute when "something" invokes (calls) the function:
You will learn a lot more about function invocation later in this tutorial.
When JavaScript reaches a return statement, the function will stop executing.
If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement.
Functions often compute a return value. The return value is "returned" back to the "caller":
Calculate the product of two numbers, and return the result:
The result in x will be:
You can reuse code: Define the code once, and use it many times.
You can use the same code many times with different arguments, to produce different results.
Convert Fahrenheit to Celsius:
Using the example above, toCelsius refers to the function object, and toCelsius() refers to the function result.
Accessing a function without () will return the function definition:
In JavaScript, you can use functions the same way as you use variables.
You can use:
Instead of:
|
You will learn a lot more about functions later in this
tutorial. |
|---|