6. Operator

6. Operator

Expression and Operator

Operator needs operand as value. And the expression is equivalent with value. So expressions can be located

Values ​​can be generated in a variety of ways. The various methods mentioned here are expressions. Expressions in a programming language have a very important meaning.

Expression is combination of tokens(literal, identifier(variable name, function name, etc), operator, function call). The expression is evaluated to produce a single value. That is, an expression is a statement that can be evaluated as a single value.

Expression can be divided into a literal notation, an identifier expression, an operator expression, a function/method call expression, but they are all the same in that they are evaluated and made into a single value.

The value that generated by evaluation of an expression is equivalent with an expression. In other words, expressions can be used like values. This means that an expression can also be placed where the value can be placed.

1
2
3
4
var x = 10;

// expression x + 30 consists of a combination of an identifier expression(x), number literal(30) and operator(+)
console.log(x + 30); //40

Statement and Expression

A statement is a command to a JavaScript engine that consists of a combination of one or more expressions and keywords. A program is made up of a set of statements, and programming is to write the statements and sequence them.

A statement can be divided into

  • declare statement
  • expression statement
  • conditional statement
  • loop statement.

Statement should end up with semicolon(;). Do not add a semicolon after the code block.

All codes of JavaScript are statements. An expression can itself be a statement. But the statement can not be an expression.

It is difficult that distinguish statement and expression. The expression evaluates to produce a value, but can not do anything further. The statement can be used to create variables, functions, and classes using declarative keywords such as var, let, const, function (declare statement), and class and to control the program flow by generating conditional statements such as if, for, and while statements.

The role of expression is that generates value. The role of statement is that command to JavaScript engine using a value that is generated by expression.

Expression statement and Non-expression statement

There are expression statement and non-expression statement. A expression statement is a statement that can be evaluated as a value, and non-expression statement is a statement that can not be evaluated as a value.

For example, assignment statement can not be evaluated as a value. So it’s non-expression statement.

The simplest and most obvious way to distinguish expressions from expressions is to assign them to variables. An expression statement can be evaluated as value so it can be assigned to a variable.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// declare statement : non-expression statement
> var x;
< undefined

// assignment statement : expression statement
> x = 5;
< 5

// function declare statement : non-expression statement
> function foo(){}
< undefined

// conditional statement : non-expression statement
> if(x >= 5) { console.log(x); }
5
< undefined

// loop statement
> for (var i = 0; i < 2; i++) { console.log(i); }
0
1
< undefined

Expression always prints a evaluated value in Chrome developer tool.

What is Operator?

An operator creates one value by performing arithmetic, assignment, comparison, logic, and type operations on one or more expressions.

  • operand : the object of the operation

The operand is also an expression because it is evaluated and a single value, and the expression is also an expression that combines the operand with the operator.

Arithmetic Operator

The Arithmetic Operator performs a mathematical computation on the operands to produce new numeric values. If arithmetic is not possible, NaN is returned.

Arithmetic operators can be classified into binary arithmetic operators and unary arithmetic operators according to the number of operands.

Binary Arithmetic Operator

The binary arithmetic operator creates one Number type value by operating arithmetic on two operands.

All binary arithmetic operators have no side effects that change the value of the operand. In other words, any arithmetic operation does not change the value of the operand. It always creates new values.

Binary arithmetic operator Meaning Side effect
+ Addition X
- Subtraction X
* Multiplication X
/ Division X
% Remainder X

Unary Arithmetic Operator

Unary arithmetic operators perform arithmetic operations on a single operand to produce a numeric type value. The increment / decrement (++ / –) operator has side effects that change the value of the operand.

Unary arithmetic operator Meaning Side effect
++ Increment O
Decrement O
+ No effect. Negative numbers are not reversed to positive numbers. X
- Returns a positive number that is a negative number and a negative number that is a positive number. X

The position of increment/decrement(++/–) operator has meaning.

  • The prefix increment / decrement operator that located before the operand first increments / decrements the value of the operand, and then performs another operation.
  • The postfix increment / decrement operator that located after the operand first performs other operation, and then increments / decrements the value of the operand.

String Concatenation Operator

The + operator acts as a string concatenation operator if at least one of the operands is a string.

1
2
console.log('1' + 2); 	//12
console.log(1 + '2'); //12

This is an implicit type coercion by the JavaScript engine, regardless of the developer’s intent.

Assignment Operator

Assignment Operator assign the operand at right side to the variable at left side. The assignment operator changes the value of a variable by assigning it a value.

Assignment Operator Example Same Expression Side Effect
= x = 5 x = 5 O
+= x += 5 x = x + 5 O
-= x -= 5 x = x - 5 O
*= x *= 5 x = x * 5 O
/= x /= 5 x = x / 5 O
%= x %= 5 x = x % 5 O

An assignment operation is an expression that evaluates to a single value. The assignment expression is evaluated to the assigned value.

Comparison Operator

Comparison Operator compares the left and right operands, and then returns a Boolean value. Comparison operators are often used in conditional expressions of control statements such as if statements and for statements.

Loose Equality Operator and Strict Equality Operator

Loose equality operator and strict equality operator are both returns the Boolean value by comparing whether the left operand and the right operand have the same value.

  • Loose equality operator (==) : loose comparison
  • Strict equality operator (===) : strict comparison
Equality Operator Meaning Example Explanation Side Effect
== Loose equality comparison x == y values of x and y are equal X
=== Strict equality comparison x === y both value and type of x and y are equal X
!= Loose inequality comparison x != y values of x and y are different X
!== Strict inequality comparison x !== y value and type of x and y are different X

Loose equality operator (==) compares the types by implicit type conversion and then compares them with the same value. Thus, the loose equality operator returns true if the operand of the left and right terms is the same value after the implicit type conversion, even if the type is different.

Strict equality operator (===) return false if the types of operands are different. But NaN is the only value that does not match itself.

1
2
// NaN is the only value that does not match itself.
console.log(NaN === NaN); //false

Use the built-in function isNaN to check if a number is NaN.

1
console.log(isNaN(NaN));	//true

Relational Operators

Relational Operator Name Example Side Effect
> Greater than operator x > y X
< Less than operator x < y X
>= Greater than or equal operator x >= y X
<= Less than or equal operator x <= y X

Conditional Ternary Operator

The ternary operator determines the value to return based on the evaluation of the conditional expression. It is the only ternary operator in JavaScript and has no side effects.

1
Conditional expression ? return value when the conditional expression is true : return value when the conditional expression is false

If the evaluation result of the conditional expression is not a Boolean value, it is implicitly typed as a Boolean value.

Conditional ternary operator expressions are expressions that can be evaluated as values. Therefore, the conditional ternary operator expression can be part of another expression and is very useful.

Logical Operator

  • OR ||

    • Return true if only one operand is true
  • AND &&

    • Return false if any operand is false
  • NOT !

    • Return true if operand is false, Return false if operand is true
  • The logical OR operator and logical AND operator do not return only the boolean result of the operation. It returns one of the operands.

  • But the NOT operator must return a boolean.

1
2
3
console.log('Cat' && 'Dog'); 	// 'Dog'
console.log('Cat' || 'Dog'); // 'Cat'
console.log(!'Cat'); //false

Comma Operator

Comma(,) operator evaluate from the left operand in turn, return the result of the last operand and return the result.

1
2
var x, y, z;
x = 1, y = 2, z = 3;

Group Operator

Group operator () evaluates the expression that is the operand first. Therefore, group operators can be used to control the priority of operators.

typeof Operator

The typeof operator returns the string as the data type of the operand after itself. The string returned by the typeof operator does not match the 7 data types.

The typeof operator returns one of the 7 strings “string”, “number”, “boolean”, “undefined”, “symbol”, “object”, or “function” It does not return “null”; it returns “function” for functions.

1
2
3
4
5
6
7
8
9
10
11
12
typeof ''              // "string"
typeof 1 // "number"
typeof NaN // "number"
typeof true // "boolean"
typeof undefined // "undefined"
typeof Symbol() // "symbol"
typeof null // "object"
typeof [] // "object"
typeof {} // "object"
typeof new Date() // "object"
typeof /test/gi // "object"
typeof function () {} // "function"
  • Since typeof null is an object, when checking null, use === operator.

    1
    2
    3
    4
    var foo = null;

    console.log(typeof foo === null); // false
    console.log(foo === null); // true
  • If an identifier not declared by the typeof operator is computed, it returns “undefined”.

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×