NUS Hackers Wiki
NUS Hackers Wiki
  • NUS Hackers Wiki
  • Hackerschool
    • Virtual Machines and Linux
    • Beginners' Guide to the Terminal
      • Introduction to the Terminal
      • Modern Shell Tools
      • Shell Scripting
      • Real World Scripting
      • Resources
    • Self-Hosting: Three Easy Pieces
      • 1. Setting up your server
      • 2. Running Services
      • 3. Monitoring your server
    • Vim
    • Introduction to Zig
      • Language Basics
      • Error Handling
      • Memory Management
      • Working with C
      • Exploring comptime
    • CI/CD with Github Actions
      • Background
      • Basics of Github Actions
        • Target workflow
        • Running unit tests
        • Linting code
        • Deploying to Github Pages
      • Advanced use cases
        • Pollers
        • Github script
        • Executing third-party scripts
        • Reusable workflows
      • Cookbook
    • Lightning Git
      • Git Concepts
      • Getting Started with Git
      • Making your first commit
      • Branching
      • Merge Conflicts
      • Integrating remote repositories
      • Collaborative Workflows
      • Commit Manipulation and Reflog
      • Interactive rebasing
      • filter-repo
  • Orbital
    • JavaScript
      • Browser Developer Tools
      • Getting Started
      • Datatypes
      • Operators and Operations
      • Loops and Conditions
      • Functions
      • Strings
      • Arrays
      • HTML
        • Getting Started
        • Tag Attributes
        • HTML Forms
        • Browser Inspector
      • CSS
        • Selectors
        • Colors in CSS
        • Measurements in CSS
        • The Box Model
        • Adding Styles - Part 1
        • Adding Styles - Part 2
      • Working with the DOM
        • Querying the DOM - Selectors
        • Querying the DOM - Element Attributes
        • Querying the DOM - Element Styles
        • Events with JS and HTML
        • Exercise: Click Counter
        • Editing the DOM
        • Fetch Requests
        • Exercise: The NUSMods API
    • React
      • Setup
      • State
    • React Native
      • Setup
      • Intro to JSX
      • Basic Syntax
      • Handling UI
      • Props
      • State Management
    • Git
      • Setup
      • Command Glossary
      • Fundamental Concepts
        • Getting Started
        • Integrating Remote Repositories
        • Branching
        • Merge Conflicts
      • Collaborative Workflows
        • Fork and PR Workflow
        • Branch and PR Workflow
      • Advanced Concepts
        • Ignoring Files
        • Commit Message Conventions
        • Github Collaborators
        • CI/CD with Github Actions
        • Advanced Git Commands
      • FAQ
    • Telegram Bot
      • Creating a TeleBot
      • API Calls
      • Telebot Basics
      • Integrating API's
    • Relational Database
      • Database Overview
      • Database Design
      • Entity Relationship Diagram
      • SQL Basics & PostgreSQL
    • TypeScript
      • Types and Interfaces
      • Utility Types
      • Typing Component Props, Events, and Hooks
      • Why You Should Avoid Using any (and What to Do Instead)
      • TypeScript Tricks You’ll Use All the Time in React
Powered by GitBook
On this page
  • Arithmetic operators
  • Other math operators
  • Comparison operators
  • Equality operators
  • Logical operators
  • AND
  • OR
  • NOT
  • Assignment operators
  • Value assignment operator
  • Operation assignment operators
  • Increment and decrement operators
  • Bitwise operators
  • Type conversion
  • Next steps
Edit on GitHub
Export as PDF
  1. Orbital
  2. JavaScript

Operators and Operations

Operators in JavaScript are symbols that can perform operations on certain values and data types. The most basic example are the arithmetic operators: +, -, * and /. Operators each have a corresponding operation, can be binary or unary, and can accept a fixed set of values

A binary operator is one that can operate on two values, and a unary operator can operate only on one value

A value that an operator performs an operation on is called an operand

The following section has a few tables of operators, their corresponding operations and their accepted operand(s).

Arithmetic operators

These are the classic addition, subtraction, multiplication and division operators that are nearly standard across languages:

  • + for addition

  • - for subtraction

  • * for multiplication

  • and / for division

These are all binary operators that take two numbers in as operands.

As an aside, the + operator also allows for string concatenation and array concatenation:

let str1 = "hello";
let str2 = "world";
str1 + str2; // evaluates to "helloworld"

let arr1 = [1, 2];
let arr2 = [3, 4];
arr1 + arr2; // evaluates to [1, 2, 3, 4]

Other math operators

  • The ** operator allows for exponents:

let x = 2;
let y = 3;
x ** y; // 8
  • The % operator gets the remainder after division

let x = 5;
let y = 3;
x % y; // 2

Comparison operators

These operators allow for, as you can guess, comparing two values. They are binary operators that return a boolean value. The symbols are as follows, with their usage with numbers being as expected:

  • a > b returns true if a is greater than b

  • a >= b returns true if a is greater than or equal to b

  • a < b returns true if a is lesser than b

  • a <= b returns true if a is lesser than or equal to b

  • a !== b returns true if a is not equal to b

The comparison operators can also be used to compare two strings; they return true or false based on a character-by-character comparison of the two strings. An example is below:

let str1 = "abcd";
let str2 = "abdc";
str1 > str2; // returns false

The way the above works is that the first character in each string are compared. If they are equal, then the next character in each string are compared. Eventually, when two characters in a string are unequal, then they are compared according to the operator (after internally converting the characters to their numeric ASCII values) and a boolean value returned accordingly.

If one string ends before the other and all characters up till that point are the same, the longer string is deemed the "greater" value:

"abcd" > "abc"; // returns true

Equality operators

The equality operation has two possible operators, each of which function slightly differently.

The first is the "triple-equals" or the "type-strict equals" operator: ===. This operator works as you would expect:

2 === 2; // returns true
2 === 3; // returns false
2 === "abcd"; // returns false
2 === "2"; // returns false
2 === [2]; // returns false

The second is the "double-equals" or the "type-lax equals" operator: ==. This operator works similar to the type-strict equals operator, except that it implicity converts the two operands to the same datatype:

2 == 2; // returns true
2 == 3; // returns false
2 == "abcd"; // returns false
2 == "2"; // returns true, because "2" is converted to 2
2 == [2]; // returns true, because [2] is converted to 2
2 == [2, 2]; // returns false, because there is more than one value in the array now

It is good practice to stick to more strict typing in your program, to prevent the chance of errors propagating. On the other hand, sometimes it may be prefered to use the type-lax equals, such as in cases where a value has to store the number 2 but it is irrelevant whether it is in a string, array, or as a primitive number. But such cases are rare.

Logical operators

These operators can take one or two boolean expressions and returns a boolean value. They are often combined with comparison operators.

AND

The AND operator, && (double ampersand symbol), is a binary operator that compares two boolean values expressions and returns true only if both the expressions evaluate to true. If either one of the expressions evaluate to false, then && returns false.

2 === 2 && 3 < 4; // true because 2 is equal to 2 AND 3 is less than 4
2 === 2 && 3 > 4; // false because 3 is not greater than 4
2 === 3 && 3 > 4; // false

OR

The OR operator, || (double bars), is a binary operator that compares two boolean expressions and returns true if either one of them evaluates to true. If both the expressions evaluate to false, then the operator returns false.

2 === 2 || 3 < 4; // true
2 === 2 || 3 > 4; // true because 2 is equal to 2
2 === 3 || 3 > 4; // false because 2 is not equal to 3 and 3 is not greater than 4

NOT

The NOT operator, !, is a unary operator that reverses a boolean expression's value. If the expression evaluates to true, it returns false; if the expression evalutes to false then it returns true. It does not change the original expression's value

let value = 2 === 2 || 3 < 4; // true
!value; // false
value; // still true

Assignment operators

Value assignment operator

As seen before, this operator has the symbol = and allows you to assign a value to a variable or constant. Example:

let x = 10; // assigning 10 to x

Operation assignment operators

This class of operators are formed by combining a binary logical or mathematical operator with the value assignment operator: op=. They can then be used as an assignment operator, assigning a value to a variable while performing the binary operation on both. Essentially: a op= b is the same as a = a op b. Some examples are below:

let x = 10;
x += 5; // same as x = x + 5; x is now 15
x -= 2; // same as x = x - 2; x is now 13
x *= 10; // same as x = x * 10; x is now 130
x **= 2; // same as x = x ** 2; x is now 16900
x; // 16900

let y = x > 1000; // 16900 is greater than 1000, so y is true
y &&= (x !== 4); // same as y = y && (x !== 4)
// x is not equal to 4, so the expression in brackets evaluates to true
y; // true && true gives true

Increment and decrement operators

These two unary operators allow to increment and decrement numeric variable values by 1. The increment operator is a double plus (++) and the decrement operator is a double minus (--). They can be placed either behind or in front of a variable name, and are accordingly called pre- or post-increment or decrement.

let m = 4;
m++; // post-increment, m is now 5
m--; // post-decrement, m is back to 4
--m; // pre-decrement, m is now 3
++m; // pre-increment, m is back to 4 again

The difference between the pre- and post- version of these operators is to do with their return values:

let x = 10;
let y;
y = ++x; // x is 11, and y is also 11
y = x++; // x is 12, but y remains 11 because the increment happens after assignment

Bitwise operators

Type conversion

Recall that JavaScript is a weakly-typed language. This means that you can end up with situations like this:

"10" + 1; // "101" because 1 gets converted to a string and JS performs string concatenation
"10" - 1; // 9 because "10" gets converted to a number and JS performs subtraction
4 / "2"; // 2 because "2" gets converted to a number
"3" * "2"; // 6 because JS converts both operands to numbers
[3] / "10"; // 0.3, same reason

This is one of the reasons it is important to maintain type consistency and stronger typing in your code. It is also wacky issues like this that contributed to the popularity of languages like TypeScript, a strongly-typed version of JavaScript.

Next steps

Now that we have covered data types and operations concerning these datatypes, the next section will cover a few more coding constructs of JavaScript.

PreviousDatatypesNextLoops and Conditions

Last updated 1 year ago

These operators allow you to perform bitwise operations like bitwise AND, OR and NOT on values. To see how they work in detail, visit .

this site