JavaScript: Operators and Expressions

Operators and Expressions

Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

Objectives


Objectives
• Learn about expressions in JavaScript


Objectives
• Explore JavaScript’s operators and the complex
expressions they enable


Objectives
• Explore JavaScript’s operators and the complex
expressions they enable
• Understand the non-operator-based expressions
available in JavaScript


Expressions in JavaScript


• Expressions are the building blocks of code


 Any unit of code that JavaScript can evaluate to a
value


value
• Can build complex expressions from simpler
expressions, using operators


value
 Operators combine from one to three operands to a
single value


value
single value
• Simplest expressions are primary expressions


value
single value
 Literal values


value
single value
 Literal values
 Some language keywords


value
single value
 Literal values
 Some language keywords
 Variable references

Operator-Based Expressions


• Not all expressions require operators


 But you can use operators to build complex
expressions


expressions
• JavaScript has a rich set of operators


expressions
 Most operators are punctuation: + - &&


expressions
 Most operators are punctuation: + - &&
 Some are keywords: delete typeof


Arithmetic Operators and
Expressions


Expressions
• Perform arithmetic and other operations on
numerical values


Expressions
numerical values
• Result is a single numeric value or NaN


Expressions
numerical values
• Result is a single numeric value or NaN
• Implicit conversion of non-numeric operands


Arithmetic Operators


Arithmetic Operators
Operator Description

+ Addition when used with two operands (x+y) or converts to
a number as a unary operator (+x)
- Subtraction when used with two operands (x-y) or negation
as a unary operator (-x)
* Multiplication

/ Floating-point division

% Modulus, which returns the remainder after dividing the
operands
++ Increment, which you can use as either a prefix operator
(++x) or postfix operator (x++)
-- Decrement, which you can use as either a prefix operator
(--x) or postfix operator (x--)

Increment and Decrement Operators



• Add or subtract 1 to or from operand



• Convert to a number, perform the operation, and
assign new value to variable



 Pre-increment operator: ++x



 Post-increment operator: x++



 Pre-decrement operator: --x



 Pre-decrement operator: --x
 Post-decrement operator: x--


Bitwise Operators and Expressions


• Perform low-level bit manipulation of numbers


 Treat operands as 32 bit, base 2 numbers


• Two types


• Two types
 Bitwise logical operators


• Two types
 Bitwise logical operators
 Bitwise shift operators


Bitwise Logical Operators


Bitwise Logical Operators

& Bitwise AND that returns a 1 in each position for which the
corresponding bits of both operands are 1s.

| Bitwise OR that returns a 1 in each position for which the
corresponding bits of either or both operands are 1s.

^ Bitwise XOR that returns a 1 in each position for which the
corresponding bits of either, but not both, operands are
1s.
~ Bitwise NOT that inverts the bits of its operand. Applying
this operator is equivalent to changing the sign of the
number and subtracting one.


Bitwise Shift Operators


Bitwise Shift Operators

<< Left shift, which shifts the bits in the first operand to the left by
the number of places specified in the second operand, which
should be in the range 0 to 31, shifting zeros in from the right.
Shifting a value left by one position is equivalent to multiplying
by 2.
>> Sign-propagating right shift that shifts bits in the first operand
to the right by the number of places specified in the second
operand, discarding bits shifted off. The bits filled in on the left
depend on the sign bit of the original operand in order to
preserve the sign of the result. Shifting a value right by one
>>> Zero-fill is equivalent to dividing to the
position right shift that shifts bitsby 2. right, discarding bits
shifted off, and shifting in zeros from the left. Unlike >>, the
bits shifted in on the left are always zero, no matter what the
sign of the original operand is.

Assignment Operators and
Expressions


Expressions

• Assignment operator is a single = sign


Expressions

 Used to assign a new value to a variable, property
value, or array element


Expressions

 Operand on left must be an lvalue


Expressions

 Operand on right can be any value


Expressions

 Value of expression is the right-side value


Expressions

• Can be part of a larger expression


Expressions

• Can be part of a larger expression
 (x = y) == 5


Assignment with Operation
Operators


Operators
Operator Equivalent Expression

x += y x = x + y
x -= y x = x - y
x *= y x = x * y
x /= y x = x / y
x %= y x = x % y
x <<= y x = x << y
x >>= y x = x >> y
x >>>= y x = x >>> y
x &= y x = x & y
x ^= y x = x ^ y
x |= y x = x | y


Operators

x += y x = x + y
x -= y x = x - y
x *= y x = x * y
x /= y x = x / y
x %= y x = x % y
x <<= y x = x << y
x >>= y x = x >> y
x >>>= y x = x >>> y
x &= y x = x & y
x ^= y x = x ^ y
x |= y x = x | y

• x op= y is equivalent to x = x op y


Operators

x += y x = x + y
x -= y x = x - y
x *= y x = x * y
x /= y x = x / y
x %= y x = x % y
x <<= y x = x << y
x >>= y x = x >> y
x >>>= y x = x >>> y
x &= y x = x & y
x ^= y x = x ^ y
x |= y x = x | y

• x op= y is equivalent to x = x op y
• Potential side effects

Relational Operators and
Expressions


Expressions
• Test for relationship between operands


Expressions
 Return a Boolean value based on comparison


Expressions
 Usually use for branching or looping code


Expressions
• Two groups


Expressions
• Two groups
 Equality operators


Expressions
• Two groups
 Equality operators
 Comparison operators


Equality and Inequality Operators


Equality and Inequality Operators

== Equality. Returns true if the operands—
as implicitly converted, if the types are
different—are equal.
!= Inequality. Returns true if the operands
—as implicitly converted, if the types
are different—are not equal.
=== Strict equality. Returns true if the
operands are of the same type and are
equal.
!== Strict inequality. Returns true if the
operands are not of the same type and/
or are not equal.


Evaluating Equality


Evaluating Equality
1. Same type, test for strict equality


Evaluating Equality
2. Not same type, convert and test for equality


Evaluating Equality
 If operands are null and undefined, they are equal


Evaluating Equality
 One a number, one a string: convert the string to a
number and test for equality


Evaluating Equality
 If one is a Boolean, convert to a number and check
for equality


Evaluating Equality
for equality
 If one is an object and the other is a number or
string, convert and check for equality


Evaluating Equality
for equality
 If one is an object and the other is a number or
string, convert and check for equality
 All other combinations are not equal


Evaluating Strict Equality


1. If operands are different types, not equal.


2. If both values are null or undefined, they are
equal.


equal.
3. If both are Booleans, equal if both true or both
false.


equal.
false.
4. If either operand is NaN, not equal.


equal.
false.
5. If both numbers, equal if values are equal.


equal.
false.
6. If both strings, equal if same length and same
characters


equal.
false.
6. If both strings, equal if same length and same
characters
7. If object references, equal if both reference
same object. @ http://www.learnnowonline.com
Learn More

Comparison Operators


• Compare relative values, return Boolean


• Compare relative values, return Boolean

> Greater than. Returns true if the left operand is greater
than the right operand.
< Less than. Returns true if the left operand is less than
the right operand.
>= Greater than or equal. Returns true if the left operand is
greater than or equal to the right operand.
<= Less than or equal. Returns true if the left operand is
less than or equal to the right operand.


Logical Operators and Expressions


• Boolean algebra


• Boolean algebra
• Use of AND and OR operators


• Boolean algebra

&& Logical AND. Returns true if both operands are true
and false otherwise.
|| Logical OR. Returns true if either operand is true.

! Logical NOT. Returns false if the single operand is
true, otherwise false.


• Boolean algebra

&& Logical AND. Returns true if both operands are true
and false otherwise.
|| Logical OR. Returns true if either operand is true.

• Use short circuiting Returns false if the single operand is
! Logical NOT.
• Return values ofotherwise false.
true, && and ||


String Operators and Expressions


• + is overloaded for string concatenation


• Kicks in when either operand is a string


• Kicks in when either operand is a string
• += works for concatenation as well


Special Operators and Expressions


• Conditional operator ?:


 op1 ? op2 : op3


 op1 ? op2 : op3
• Comma operator ,


 op1 ? op2 : op3
 x = 1, y = 2, z = 3;


 op1 ? op2 : op3
 x = 1, y = 2, z = 3;
• typeof operator


 op1 ? op2 : op3
 x = 1, y = 2, z = 3;
• typeof operator
• Others


 op1 ? op2 : op3
 x = 1, y = 2, z = 3;
• typeof operator
• Others
 Member access operators


 op1 ? op2 : op3
 x = 1, y = 2, z = 3;
• typeof operator
• Others
 delete operator


 op1 ? op2 : op3
 x = 1, y = 2, z = 3;
• typeof operator
• Others
 delete operator
 in operator


 op1 ? op2 : op3
 x = 1, y = 2, z = 3;
• typeof operator
• Others
 delete operator
 in operator
 instanceof operator


 op1 ? op2 : op3
 x = 1, y = 2, z = 3;
• typeof operator
• Others
 delete operator
 in operator
 new operator


 op1 ? op2 : op3
 x = 1, y = 2, z = 3;
• typeof operator
• Others
 delete operator
 in operator
 new operator
 this operator


 op1 ? op2 : op3
 x = 1, y = 2, z = 3;
• typeof operator
• Others
 delete operator
 in operator
 new operator
 this operator
 void operator

Characteristics of Operators


• Number and Type of Operands


 From one to three operands


 Some work with any type, return any type


• Precedence


• Precedence
 Order in which performs operations


• Precedence
 3 + 6 * 2


• Precedence
 3 + 6 * 2
• Operator Associativity


• Precedence
 3 + 6 * 2
 Order that JavaScript performs operations of same precedence


• Precedence
 3 + 6 * 2
 Left-to-right: ((x op y) op z)


• Precedence
 3 + 6 * 2
 Right-to-left: (x op (y op z))


• Precedence
 3 + 6 * 2
• Examples


• Precedence
 3 + 6 * 2
• Examples
 10 - 4 + 7


Other Expression Types


• Not all expressions rely on operators


• Not all expressions rely on operators
• Some of the most interesting parts of JavaScript


Object Initializer Expressions


• Has the value of the newly created object


• Several ways to create


• Several ways to create
• Easiest is with curly brackets and comma-
delimited list of properties and initial values


Property Access Expressions


• Provides access to value of object property or
array element


array element
• Two syntaxes


array element
• Two syntaxes
 expression.identifier


array element
• Two syntaxes
 expression.identifier
 expression[expression]


Process to Evaluate Access


1. Evaluate expression before . or [


 If null or undefined, throw error


2. If not an object or array, convert the value


3. If uses the . notation with identifier


 Retrieve value of property


 Retrieve value of property
4. If use the [] notation, evaluate expression and
read property or array element


Invocation Expressions


• Syntax for calling or executing a function or method


• General syntax


• General syntax
 func(x, y, z)


• General syntax
 func(x, y, z)
 obj.meth(x, y, z)


• General syntax
 func(x, y, z)
• Difference between function and a method


• General syntax
 func(x, y, z)
• Process


• General syntax
 func(x, y, z)
• Process
1. Evaluate function or method and throw error if not callable


• General syntax
 func(x, y, z)
• Process
2. Evaluate argument expressions and assign to parameters


• General syntax
 func(x, y, z)
• Process
3. Perform operations


• General syntax
 func(x, y, z)
• Process
3. Perform operations
4. If return, that becomes value of the function or method.
Otherwise undefined.


Object Creation Expressions


• Creates a new instance of an object in memory


 Invokes a constructor function


• Samples


• Samples
 new Number(5)


• Samples
 new Number(5)
 new String("AppDev")


• Samples
 new Number(5)
 new Boolean(true)


• Samples
 new Number(5)
 new Object


• Samples
 new Number(5)
 new Object
 new Rectangle(3, 4, 5, 6)


• Samples
 new Number(5)
 new Object
 new Rectangle(3, 4, 5, 6)
 new Date()


Evaluation Expressions


• Ability to interpret strings of code on the fly


• Use the global function eval()


• Use the global function eval()
• Takes a single string as argument


Learn More!


Learn More!
• This is an excerpt from a larger course. Visit
www.learnnowonline.com for the full details!


Learn More!

• Learn more about JavaScript on SlideShare!


Learn More!

• Introduction to JavaScript


Learn More!

• Introduction to JavaScript
• JavaScript: Values, Types, and Variables


JavaScript: Operators and Expressions

More Related Content

What's hot

Similar to JavaScript: Operators and Expressions

More from LearnNowOnline

Recently uploaded

JavaScript: Operators and Expressions

Editor's Notes