DONATE  
MENU
CSS
HTML
AJAX
MYSQL
JAVASCRIPT
JSON
PHP

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Introduction » JavaScript Operators
Share Tweet WhatsApp

JavaScript Operators

JavaScript operators enable us to perform various operations with variables and values. There are numerous operators in JavaScript which for the sake of this tutorial can be group into:
  1. Assignment Operators
  2. Arithmetic Operators
  3. Numeric Assignment Operators
  4. Incremental/Decremental Operators
  5. Logical Operators
  6. Comparison Operators
  7. Typeof Operator
Assignment Operators Assignment operators enable us to assign values to variables for storage.
OPERATOREXAMPLEEXPLANATION
=x = 20Assigns 20 to the variable "x".
+=x += 30Assigns 30 in addition to what was previously stored on "x" and stores the new value on "x".
var = var+valuex = x + 1Adds 1 to what was previously stored on "x" and stores the new value on "x".
<script>
var str = "Hello";

str += " World";

alert(str);
</script>

Copy PRACTICE IT

Arithmetic Operators Arithmetic or mathematical operators enable us to perform arithmetic operations with numbers.
OPERATORNAMEEXAMPLEEXPLANATION
+Addition Operator2 + 3Adds 2 to 3 and returns the new value which is 5.
-Subtraction Operator5 - 3Subtracts 3 from 5 and returns the new value which is 2.
*Multiplication Operator2 * 3Multiplies 2 by 3 and returns the new value which is 6.
/Division Operator6 / 3Divides 6 by 3 and returns the new value which is 2.
%Modulus Operator3 % 2Divides 3 by 2 and returns the remainder which is 1.
<script>
var x = 7;
var y = 5;

var z = x % y;

alert("The remainder when "+x+" ÷ "+y+" is "+z);
</script>

Copy PRACTICE IT

Numeric Operators Numeric operators allow us to carry out both arithmetic and assignment operations on numbers.
OPERATOREXAMPLESAME ASEXPLANATION
+=x += 5x = x + 5Adds 5 to whatever value that was previously stored on "x" and assigns the new value to x.
-=x -= 5x = x - 5Subtracts 5 from whatever value that was previously stored on "x" and assigns the new value to x.
*=x *= 5x = x + 5Multiplies 5 with whatever value that was previously stored on "x" and assigns the new value to x.
/=x /= 5x = x / 5Divides whatever value that was previously stored on "x" with 5 and assigns the new value to x.
<script>
var x = 2;

x += 3; //adds 3 to what was previously on x, which is 2. x is now 5
alert(x);
</script>

Copy PRACTICE IT

Incremental/Decremental Operators Incremental or decremental operators allow us to increase and decrease numbers. They are mostly used with loops, which you will learn about in subsequent pages.
OPERATORNAMEEXAMPLEEXPLANATION
variable++Post Incrementalx++Continuously adds 1 to the value of "x" after initial execution.
++variablePre Incremental++xAdds 1 to the value of "x" before initial execution and continues adding 1 for every execution.
variable--Post Decrementalx--Continuously subtracts 1 from the value of "x" after initial execution.
--variablePre Decremental--xSubtracts 1 from the value of "x" before initial execution and continues subtracting 1 for every execution.
<script>
var x = 1;
while (x <= 3){
alert("Execution "+x+": x is "+x);
x++;
}
</script>

Copy PRACTICE IT

var y = 5;
y++; //5 - Post incremental
++y; //6 - Pre incremental
y--; //5 - Post decremental
--y; //4 - Pre decremental
COMPARISON OPERATORS Comparison operators enable us compare two values or variables.
OPERATOREXAMPLEBOOLEAN RESULTEXPLANATION
==5 == 6falseCompare 5 to 6 in order to know if both are of same values.
!=5 != 6trueCompare 5 to 6 in order to know if both are not of same values.
===5 === "5"falseCompares 5 to "5" in order to know if both are of same values and data type.
!==5 !== "5"trueCompares 5 to "5" in order to know if both are not of same values or data type.
<script>
alert(5 === "5");
</script>

Copy PRACTICE IT

LOGICAL OPERATORS Logical operators enable us bring statements together to build stronger conditions.
OPERATORNAMEEXAMPLEEXPLANATION
&&ANDING Operator4 < 5 && 4 > 2Brings two conditions together i.e 4 < 5 and 4 > 2. The statement returns true if both statements are true. That is, if 4 is less than 5 and 4 is greater than 2.
||ORING Operator4 < 5 || 4 > 2Brings two conditions together i.e 4 < 5 and 4 > 2. The statement returns true if any of the statements is true. That is, if 4 is less than 5 or 4 is greater than 2. It is also true if both are true.
!NOT Operator!(4 > 2)Returns true if 4 is not greater than 2 or the expression(4 > 2) is not true.
<script>
var isLogged = false;
    if (!isLogged)
{
alert("You are not logged in.");
}
else
{
alert("You are logged in.");
}
</script>

Copy PRACTICE IT

Typeof Operator The typeof() operator enables us know the data type of a value.
<script>
var x = 1;

alert(typeof(x));
</script>

Copy PRACTICE IT

<script>
var x = "Hello Beginner";

alert(typeof x);
</script>

Copy PRACTICE IT

SUMMARY
  1. Operators enable us perform operations on variables and values.
  2. JavaScript assignment operators enable us to assign values to declared variables.
  3. Arithmetic operators allow us perform mathematical operations.
  4. Numeric operators allow us perform both arithmetic and assignment operations. They carry out an arithmetic operation and assign the value gotten from that operation to a variable.
  5. Incremental/Decremental operators are used to increase or decrease a value outrightly or after an initial execution.
  6. Comparison operators enable us compare a value to another.
  7. Logical operators allow us build comprehensive logics using more than one statement.
  8. The typeof() operator enables us know the data type of a value.
Take a short quiz on JavaScript Operators.
Ask a question or tell us if JavaScript Operators is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode