SlideShare a Scribd company logo
JavaScript
Operators
Charles Russell
Bennu Bird Media
What is an Operator
●
An Operator is a function with different syntax
●
Operators performs some action and returns a value
●
The values being acted upon are called operands
●
The value returned is the result
●
Operands may be literals, variables, or expressions
●
They are used to make expressions
Operators can be
catagorized by size
●
An expression can consist of many operators but
when broken down to each operation idvidually,
there are three sizes
●
A unary operator is an operator on a single value
– The – sign makes a number negative
●
A binary operator is an operator works with two values
– Your normal addition, subtraction, multiplication and division
●
Ternary Operator that takes three values
The + Operator
●
It is both a unary and binary operator
●
Unary operation, + on a line in front of a variable
and it makes that variable a number.
●
It tries to make sense of the operand. This is called
coercion If the string contains only digits then you get
the value contained in the string, a boolean returns 1
for true 0 for false
●
If it can not make a number that makes sense a NaN
is returned ex: any letters in the string
The + operator in binary
mode
●
Numbers is not all this operator works on
●
This is also the concatenation operator for strings.
●
The various combinations of number and string
resolve to different data types with this language
●
number + number = number
●
string + string = string
●
string + number = string
●
Number () or String() to type cast as needed.
Subtraction or Minus
●
The – operator is again both binary and unary
●
Returns a number no matter the mode
●
A-B
●
The – operator returns A reduced by the value of B
– If the operands can be logically turned to numbers the result
will be the value of the operations otherwise you get NaN
The – operator in Unary
mode
For numeric value changes the sign (pos to neg)
(neg to pos)
●
Tries to make a number out of other data types
Introducing the increment
●
++ unary operator that adds 1 to the current value
●
Pre increment post increment.
●
Although in the end the variable is incremented the
side of the variable you are incrementing that you put
the operater on matters
●
If the operator comes before the variable (pre
increment) the operation occures then assignment
●
If the operator comes second assignment happens
then the increment
●
Strings will try to be converted to numbers non
numeric strings will return NaN
Decrement
●
If there is an increment operator then logically
there must be a decrement operator
●
As you would suspect - -
●
Behaves in a simular fashion to ++
Multiplication
●
*
●
Binary operator
●
Returns NaN if an operand is a non numeric string
Division
●
/
●
Binary operator
●
Behaves in a simular fashion to Multiplication
Modulus
●
%
●
Binary operator
●
Does integer divsion and returns the remainder
●
Again type conversion is attempted
Assignment
●
=
●
Assigns a value to a variable
●
Lvalue assigned to rvalue
●
Not a check for equality that is another operator
●
X=5 Works fine
●
5=5 'X' = 5 or 'X' = 'X' results in a reference error
The Rest of the
Assignment Family
●
+=, -=, *=, %=
●
These operators do a calculation and assign the
value simutaneously
●
Example
●
A=5; A+=3
– Result 8
Comparison
●
These return a boolean
●
Equality ==
●
Super Equality ===
●
Inequality !=
●
Super Inequality !==
●
Less than <
●
Less than or Equal <=
●
Greater Than >
●
Greater than or Equal to >=
Next: More Operators
JavaScript
Operators part2
Charles Russell
Bennu Bird Media
Whats the truth
●
I'm not strange, weird, off, nor crazy, my reality is
just different from yours (Lewis Carol)
●
You would expect && and || to return boolean but
it may or may not
●
Shortcut evaluation
– Evaluation of is done from left to right value returned as
soon as evaluation can be made
– Remember truthy and falsey
●
The truthy or falseyness of any value can be determined
●
This means that a value that is not boolean can be returned and the
truthynesss or falsyness of the expression can be evaluated.
And &&
●
A && B
●
True Only if both opeands are true
●
If A falsey then B returned Data Type unchanged
●
Used to Gaurd B
A B Result
T T B
T F B
F F A
F T A
Or ||
●
A || B
●
If A False B is returned data type unchanged
●
True if A truthy or B Truthy
●
Very useful to check if a value is set
A B Result
T T A
T F A
F T B
F T B
Not !
●
Reverses a Boolean value
Bit opeations
●
& bitwise and
●
| bitwise or
●
^ bitwise xor
●
~ bitwise not
●
<< shift left
●
>> shift right
●
>>> shift right zero fill
Bit twiddling used to
something to avoid
●
This was the convential wisdom.
●
While this improved effiency in other languages in this
one performance degraded
●
This seems to be changing
●
http://dreaminginjavascript.wordpress.com/2009/02/09/bi
●
What you can do with this
●
http://michalbe.blogspot.com/2013/03/javascript-less-kno
●
http://graphics.stanford.edu/~seander/bithacks.html
The conditional operator
●
This is the tenary operator and it roughly equates
to if operand 1 then operand 2 else operand 3
●
Operand1 ? Operand2 : Operand3
●
Operand 1 is the boolean if true
– Do the action specified in Operand 2
●
Else do the action in specified operand 3
Grouping
●
()
●
Groups expressions that need to be evaluated
first
Yes there are others
●
I am not mentioning some operators here
because many of these not mentioned apply to
functions, arrays and Objects topics yet to be
covered these other operaterators will be
introduced and disscussed when and if
appropriate
Operator Precedence
[] ()
++ -- - ~ !
* / %
+ - +
<< >> >>>
< <= > >=
== != === !==
&
^
|
&&
||
? :
= += -= *= ...

More Related Content

PDF
JavaScript operators
PPT
JavaScript Data Types
PDF
Fii Practic Frontend - BeeNear - laborator3
PDF
Functional Swift
PDF
Functional Javascript
PDF
JavaScript: Patterns, Part 3
PPTX
Functional programming with Ruby - can make you look smart
PPTX
Operators in Java
JavaScript operators
JavaScript Data Types
Fii Practic Frontend - BeeNear - laborator3
Functional Swift
Functional Javascript
JavaScript: Patterns, Part 3
Functional programming with Ruby - can make you look smart
Operators in Java

What's hot (20)

PDF
Client sidescripting javascript
PDF
Ruby Functional Programming
PDF
Scala - core features
PPT
Type conversions
PPTX
WHY JAVASCRIPT FUNCTIONAL PROGRAMMING IS SO HARD?
PDF
Functional JavaScript Fundamentals
PPTX
Functional Programming in JavaScript by Luis Atencio
ODP
Functional programming
PDF
Angular 2.0: Brighter future?
PDF
LC2018 - Input Validation in PureScript
PDF
Intro to JavaScript - Week 2: Function
PDF
JavaScript Functions
PPTX
Functional programming and ruby in functional style
PPT
C++ overloading
PPTX
2CPP03 - Object Orientation Fundamentals
PDF
Let's JavaScript
PDF
Introduction to Object Oriented Javascript
PDF
Reactive Programming with JavaScript
PPT
Operator overloading
PPTX
Presentation on overloading
Client sidescripting javascript
Ruby Functional Programming
Scala - core features
Type conversions
WHY JAVASCRIPT FUNCTIONAL PROGRAMMING IS SO HARD?
Functional JavaScript Fundamentals
Functional Programming in JavaScript by Luis Atencio
Functional programming
Angular 2.0: Brighter future?
LC2018 - Input Validation in PureScript
Intro to JavaScript - Week 2: Function
JavaScript Functions
Functional programming and ruby in functional style
C++ overloading
2CPP03 - Object Orientation Fundamentals
Let's JavaScript
Introduction to Object Oriented Javascript
Reactive Programming with JavaScript
Operator overloading
Presentation on overloading
Ad

Similar to JavaScript Operators (20)

PDF
Operators in java
PPTX
Python_Module_3_AFkkkkV_Operators-1.pptx
PDF
C++ notes.pdf BASIC C++ NOTES FOR BEGGINERS
PDF
introduction to c programming - Topic 3.pdf
PPTX
L3 operators
PPTX
L3 operators
PPTX
L3 operators
PPT
C Sharp Jn (2)
PPT
C Sharp Jn (2)
PPT
Operators
Β 
ODP
operators in c++
ODP
operators in c++
PPT
4_A1208223655_21789_2_2018_04. Operators.ppt
PPTX
OPERATORS OF C++
ODP
Operators
DOCX
PPS 2.2.OPERATORS ARITHMETIC EXPRESSIONS/ARITHMETIC OPERATORS/RELATIONAL OPER...
PPTX
Data Types and Operators in Python2.pptx
PPTX
C Operators
PDF
Unit ii chapter 1 operator and expressions in c
Operators in java
Python_Module_3_AFkkkkV_Operators-1.pptx
C++ notes.pdf BASIC C++ NOTES FOR BEGGINERS
introduction to c programming - Topic 3.pdf
L3 operators
L3 operators
L3 operators
C Sharp Jn (2)
C Sharp Jn (2)
Operators
Β 
operators in c++
operators in c++
4_A1208223655_21789_2_2018_04. Operators.ppt
OPERATORS OF C++
Operators
PPS 2.2.OPERATORS ARITHMETIC EXPRESSIONS/ARITHMETIC OPERATORS/RELATIONAL OPER...
Data Types and Operators in Python2.pptx
C Operators
Unit ii chapter 1 operator and expressions in c
Ad

More from Charles Russell (9)

PPT
Js objects
PPT
JavaScript Introductin to Functions
PPT
JavaScript iteration
PPT
Open Source Software
PPT
JavaScript Variables
PPT
JavaScript Tools and Implementation
PPT
JavaScript Comments and Conditionals
PPT
JavaScript Introduction
PPTX
Extending drupal authentication
Js objects
JavaScript Introductin to Functions
JavaScript iteration
Open Source Software
JavaScript Variables
JavaScript Tools and Implementation
JavaScript Comments and Conditionals
JavaScript Introduction
Extending drupal authentication

Recently uploaded (20)

PDF
πŸ’° π”πŠπ“πˆ πŠπ„πŒπ„ππ€ππ†π€π πŠπˆππ„π‘πŸ’πƒ π‡π€π‘πˆ 𝐈𝐍𝐈 πŸπŸŽπŸπŸ“ πŸ’°
Β 
PDF
APNIC Update, presented at PHNOG 2025 by Shane Hermoso
Β 
PDF
FINAL CALL-6th International Conference on Networks & IOT (NeTIOT 2025)
PDF
The New Creative Director: How AI Tools for Social Media Content Creation Are...
PPTX
innovation process that make everything different.pptx
PPTX
E -tech empowerment technologies PowerPoint
PDF
Introduction to the IoT system, how the IoT system works
PPTX
Introduction about ICD -10 and ICD11 on 5.8.25.pptx
PPTX
INTERNET------BASICS-------UPDATED PPT PRESENTATION
PPTX
introduction about ICD -10 & ICD-11 ppt.pptx
PPT
tcp ip networks nd ip layering assotred slides
PPTX
Introuction about WHO-FIC in ICD-10.pptx
PDF
Sims 4 Historia para lo sims 4 para jugar
PDF
Paper PDF World Game (s) Great Redesign.pdf
PDF
Tenda Login Guide: Access Your Router in 5 Easy Steps
PPTX
522797556-Unit-2-Temperature-measurement-1-1.pptx
PPTX
Internet___Basics___Styled_ presentation
PPTX
June-4-Sermon-Powerpoint.pptx USE THIS FOR YOUR MOTIVATION
PPTX
Slides PPTX World Game (s) Eco Economic Epochs.pptx
PDF
How to Ensure Data Integrity During Shopify Migration_ Best Practices for Sec...
πŸ’° π”πŠπ“πˆ πŠπ„πŒπ„ππ€ππ†π€π πŠπˆππ„π‘πŸ’πƒ π‡π€π‘πˆ 𝐈𝐍𝐈 πŸπŸŽπŸπŸ“ πŸ’°
Β 
APNIC Update, presented at PHNOG 2025 by Shane Hermoso
Β 
FINAL CALL-6th International Conference on Networks & IOT (NeTIOT 2025)
The New Creative Director: How AI Tools for Social Media Content Creation Are...
innovation process that make everything different.pptx
E -tech empowerment technologies PowerPoint
Introduction to the IoT system, how the IoT system works
Introduction about ICD -10 and ICD11 on 5.8.25.pptx
INTERNET------BASICS-------UPDATED PPT PRESENTATION
introduction about ICD -10 & ICD-11 ppt.pptx
tcp ip networks nd ip layering assotred slides
Introuction about WHO-FIC in ICD-10.pptx
Sims 4 Historia para lo sims 4 para jugar
Paper PDF World Game (s) Great Redesign.pdf
Tenda Login Guide: Access Your Router in 5 Easy Steps
522797556-Unit-2-Temperature-measurement-1-1.pptx
Internet___Basics___Styled_ presentation
June-4-Sermon-Powerpoint.pptx USE THIS FOR YOUR MOTIVATION
Slides PPTX World Game (s) Eco Economic Epochs.pptx
How to Ensure Data Integrity During Shopify Migration_ Best Practices for Sec...

JavaScript Operators

  • 2. What is an Operator ● An Operator is a function with different syntax ● Operators performs some action and returns a value ● The values being acted upon are called operands ● The value returned is the result ● Operands may be literals, variables, or expressions ● They are used to make expressions
  • 3. Operators can be catagorized by size ● An expression can consist of many operators but when broken down to each operation idvidually, there are three sizes ● A unary operator is an operator on a single value – The – sign makes a number negative ● A binary operator is an operator works with two values – Your normal addition, subtraction, multiplication and division ● Ternary Operator that takes three values
  • 4. The + Operator ● It is both a unary and binary operator ● Unary operation, + on a line in front of a variable and it makes that variable a number. ● It tries to make sense of the operand. This is called coercion If the string contains only digits then you get the value contained in the string, a boolean returns 1 for true 0 for false ● If it can not make a number that makes sense a NaN is returned ex: any letters in the string
  • 5. The + operator in binary mode ● Numbers is not all this operator works on ● This is also the concatenation operator for strings. ● The various combinations of number and string resolve to different data types with this language ● number + number = number ● string + string = string ● string + number = string ● Number () or String() to type cast as needed.
  • 6. Subtraction or Minus ● The – operator is again both binary and unary ● Returns a number no matter the mode ● A-B ● The – operator returns A reduced by the value of B – If the operands can be logically turned to numbers the result will be the value of the operations otherwise you get NaN
  • 7. The – operator in Unary mode For numeric value changes the sign (pos to neg) (neg to pos) ● Tries to make a number out of other data types
  • 8. Introducing the increment ● ++ unary operator that adds 1 to the current value ● Pre increment post increment. ● Although in the end the variable is incremented the side of the variable you are incrementing that you put the operater on matters ● If the operator comes before the variable (pre increment) the operation occures then assignment ● If the operator comes second assignment happens then the increment ● Strings will try to be converted to numbers non numeric strings will return NaN
  • 9. Decrement ● If there is an increment operator then logically there must be a decrement operator ● As you would suspect - - ● Behaves in a simular fashion to ++
  • 11. Division ● / ● Binary operator ● Behaves in a simular fashion to Multiplication
  • 12. Modulus ● % ● Binary operator ● Does integer divsion and returns the remainder ● Again type conversion is attempted
  • 13. Assignment ● = ● Assigns a value to a variable ● Lvalue assigned to rvalue ● Not a check for equality that is another operator ● X=5 Works fine ● 5=5 'X' = 5 or 'X' = 'X' results in a reference error
  • 14. The Rest of the Assignment Family ● +=, -=, *=, %= ● These operators do a calculation and assign the value simutaneously ● Example ● A=5; A+=3 – Result 8
  • 15. Comparison ● These return a boolean ● Equality == ● Super Equality === ● Inequality != ● Super Inequality !== ● Less than < ● Less than or Equal <= ● Greater Than > ● Greater than or Equal to >=
  • 18. Whats the truth ● I'm not strange, weird, off, nor crazy, my reality is just different from yours (Lewis Carol) ● You would expect && and || to return boolean but it may or may not ● Shortcut evaluation – Evaluation of is done from left to right value returned as soon as evaluation can be made – Remember truthy and falsey ● The truthy or falseyness of any value can be determined ● This means that a value that is not boolean can be returned and the truthynesss or falsyness of the expression can be evaluated.
  • 19. And && ● A && B ● True Only if both opeands are true ● If A falsey then B returned Data Type unchanged ● Used to Gaurd B A B Result T T B T F B F F A F T A
  • 20. Or || ● A || B ● If A False B is returned data type unchanged ● True if A truthy or B Truthy ● Very useful to check if a value is set A B Result T T A T F A F T B F T B
  • 21. Not ! ● Reverses a Boolean value
  • 22. Bit opeations ● & bitwise and ● | bitwise or ● ^ bitwise xor ● ~ bitwise not ● << shift left ● >> shift right ● >>> shift right zero fill
  • 23. Bit twiddling used to something to avoid ● This was the convential wisdom. ● While this improved effiency in other languages in this one performance degraded ● This seems to be changing ● http://dreaminginjavascript.wordpress.com/2009/02/09/bi ● What you can do with this ● http://michalbe.blogspot.com/2013/03/javascript-less-kno ● http://graphics.stanford.edu/~seander/bithacks.html
  • 24. The conditional operator ● This is the tenary operator and it roughly equates to if operand 1 then operand 2 else operand 3 ● Operand1 ? Operand2 : Operand3 ● Operand 1 is the boolean if true – Do the action specified in Operand 2 ● Else do the action in specified operand 3
  • 26. Yes there are others ● I am not mentioning some operators here because many of these not mentioned apply to functions, arrays and Objects topics yet to be covered these other operaterators will be introduced and disscussed when and if appropriate
  • 27. Operator Precedence [] () ++ -- - ~ ! * / % + - + << >> >>> < <= > >= == != === !== & ^ | && || ? : = += -= *= ...