Logo

Video: Operators and Expressions in JavaScript (Bulgarian)

  • July 06, 2023
  • Nikolay Kostov (Nikolay.IT)

This lecture provides a comprehensive examination of JavaScript operators, encompassing arithmetic, logical, bitwise, comparison, and assignment operators, each with their unique functions in data manipulation and logical flow control. We also touche on operator precedence, explaining how the language interprets multiple operations in an expression. Additionally, we discuss "other operators" like the ternary and typeof operators, culminating with an exploration of expressions in JavaScript—combinations of values and operators that can be evaluated into a single value, contributing to more effective and efficient code.

Topics covered:

  • Operators in JavaScript
  • Arithmetic Operators
  • Logical Operators
  • Bitwise Operators
  • Comparison Operators
  • Assignment Operators
  • Other Operators
  • Operator Precedence
  • Expressions

Video (in Bulgarian)

Presentation Content

What is an Operator?

  • Operator is an operation performed over data at runtime
    • Takes one or more arguments (operands)
    • Produces a new value
  • Operators have precedence
    • Precedence defines which will be evaluated first
  • Expressions are sequences of operators and operands that are evaluated to a single value

Operators in JavaScript

  • Operators in JavaScript :
    • Unary – take one operand
    • Binary – take two operands
    • Ternary ( ?: ) – takes three operands
  • Except for the assignment operators, all binary operators are left-associative
  • The assignment operators and the conditional operator ( ?: ) are right-associative

Categories of Operators in JS

Category Operators
Arithmetic + - * / % ++ –
Logical &&
Binary &
Comparison == != < > <= >= === !==
Assignment = += -= *= /= %= &=
String concatenation +
Other . [] () ?: new in

Arithmetic Operators

  • Arithmetic operators + , - , * , / are the same as in math
  • Division operator / returns number or Infinity or NaN
  • Remainder operator % returns the remainder from division of numbers
    • Even on real (floating-point) numbers
  • The special addition operator ++ increments a variable

Arithmetic Operators – Example

var squarePerimeter = 17;
var squareSide = squarePerimeter / 4.25;
var squareArea = squareSide * squareSide;
console.log(squareSide); // 4.25
console.log(squareArea); // 18.0625
var a = 5;
var b = 4;
console.log( a + b ); // 9
console.log( a + b++ ); // 9
console.log( a + b ); // 10
console.log( a + (++b) ); // 11
console.log( a + b ); // 11

console.log(12 / 3); // 4
console.log(11 / 3); // 3.6666666666666665

console.log(11 % 3);   // 2
console.log(11 % -3);  // 2
console.log(-11 % 3);  // -2

console.log(1.5 / 0.0);  // Infinity
console.log(-1.5 / 0.0); // -Infinity
console.log(0.0 / 0.0);  // NaN

var x = 0;
console.log(5 / x);

Logical Operators

  • Logical operators take boolean operands and return boolean result
  • Operator ! turns true to false and false to true
  • Behavior of the operators && , || and ^ ( 1 == true , 0 == false ) :
Operation || || || || && && && && ^ ^ ^ ^
Operand1 0 0 1 1 0 0 1 1 0 0 1 1
Operand2 0 1 0 1 0 1 0 1 0 1 0 1
Result 0 1 1 1 0 0 0 1 0 1 1 0

Logical Operators – Example

Using the logical operators:

var a = true;
var b = false;
console.log(a && b); // False
console.log(a || b); // True
console.log(a ^ b); // True
console.log(!b); // True
console.log(b || true); // True
console.log(b && true); // False
console.log(a || true); // True
console.log(a && true); // True
console.log(!a); // False
console.log((5>7) ^ (a==b)); // False

Bitwise Operators

  • Bitwise operator ~ turns all 0 to 1 and all 1 to 0
    • Like ! for boolean expressions but bit by bit
  • The operators | , & and ^ behave like || , && and ^ for boolean expressions but bit by bit
  • The << and >> move the bits (left or right)
  • Behavior of the operators | , & and ^ :
Operation | | | | & & & & ^ ^ ^ ^
Operand1 0 0 1 1 0 0 1 1 0 0 1 1
Operand2 0 1 0 1 0 1 0 1 0 1 0 1
Result 0 1 1 1 0 0 0 1 0 1 1 0

Bitwise Operators (2)

  • Bitwise operators are used on integer numbers
  • Bitwise operators are applied bit by bit
  • Examples:
var a = 3;                // 00000000 00000011
var b = 5;                // 00000000 00000101
console.log( a | b);      // 00000000 00000111
console.log( a & b);      // 00000000 00000001
console.log( a ^ b);      // 00000000 00000110
console.log(~a & b);      // 00000000 00000100
console.log( true << 1);  // 00000000 00000010
console.log( true >> 1);  // 00000000 00000000

Comparison Operators

  • Comparison operators are used to compare variables
    • == , < , > , >= , <= , != , === , !==
  • Comparison operators example:
var a = 5;
var b = 4;
console.log(a >= b); // True
console.log(a != b); // True
console.log(a == b); // False
console.log(0 == ""); // True
console.log(0 === ""); //False

Assignment Operators

  • Assignment operators are used to assign a value to a variable
    • = , += , -= , |= , ...
  • Assignment operators example:
var x = 6;
var y = 4;
console.log(y *= 2); // 8
var z = y = 3; // y=3 and z=3  
console.log(z); // 3
console.log(x |= 1); // 7
console.log(x += 3); // 10
console.log(x /= 2); // 5

Other Operators

  • String concatenation operator + is used to concatenate strings
  • If the second operand is not a string, it is converted to string automatically
var first = "First";
var second = "Second";
console.log(first + second); // FirstSecond
var output = "The number is : ";
var number = 5;
console.log(output + number);
// The number is : 5

Other Operators (2)

  • Member access operator . is used to access object members
  • Square brackets [] are used with arrays indexers and attributes
  • Parentheses ( ) are used to override the default operator precedence
  • Conditional operator ?: has the form: b ? x : y
    • (if b is true then the result is x else the result is y )
  • The new operator is used to create new objects
  • The typeof operator returns the type of the object
  • t his operator references the current context
    • In JavaScript the value this depends on the current scope

Other Operators – Example

Using some other operators:

var a = 6;
var b = 4;
console.log(a > b ? 'a>b' : 'b>=a'); // a>b
var c = b = 3; // b=3; followed by c=3;
console.log(c); // 3
console.log(a is int); // True
console.log((a+b)/2); // 4
console.log(typeof(int)); // System.Int32

Operators Precedence

Precedence Operators
Highest ()
  ++ – (postfix) new typeof
  ++ – (prefix) + - (unary) ! ~
  * / %
  + -
  << >>
  < > <= >= is as
  == !=
  &
  ^
  |
  &&
  ||
  ?:
Lowest = *= /= %= += -= <<= >>= &= ^=
  • Parenthesis operator always has highest precedence
  • Note: prefer using parentheses, even when it seems stupid to do so

Expressions

  • Expressions are sequences of operators, literals and variables that are evaluated to some value
  • Examples:
var r = (150-20) / 2 + 5; // r=70
// Expression for calculation of circle area
var surface = Math.PI * r * r;
// Expression for calculation of circle perimeter
var perimeter = 2 * Math.PI * r;

Expressions (2)


Share