JavaScript: Operators and Expressions by LearnNowOnline

Operators and Expressions

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

Objectives • Learn about expressions in JavaScript • 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

• Can build complex expressions from simpler expressions, using operators  Operators combine from one to three operands to a single value

• Simplest expressions are primary expressions  Literal values  Some language keywords  Variable references Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Operator-Based Expressions • Not all expressions require operators  But you can use operators to build complex expressions

• JavaScript has a rich set of operators  Most operators are punctuation: + - &&  Some are keywords: delete typeof

Arithmetic Operators and Expressions • Perform arithmetic and other operations on numerical values • Result is a single numeric value or NaN • Implicit conversion of non-numeric operands

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--) Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

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 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  Bitwise logical operators  Bitwise shift operators

Bitwise Logical Operators Operator

Description

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.

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

Bitwise Shift Operators Operator

Description

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 position is equivalent to dividing by 2. Zero-fill right shift that shifts bits to the 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.

>>>

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

Assignment Operators and Expressions • Assignment operator is a single = sign  Used to assign a new value to a variable, property value, or array element  Operand on left must be an lvalue  Operand on right can be any value  Value of expression is the right-side value

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

Assignment with Operation Operators Operator

Equivalent Expression

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

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

Relational Operators and Expressions • Test for relationship between operands  Return a Boolean value based on comparison  Usually use for branching or looping code

• Two groups  Equality operators  Comparison operators

Equality and Inequality Operators Operator

Description

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 1. Same type, test for strict equality 2. Not same type, convert and test for equality  If operands are null and undefined, they are equal  One a number, one a string: convert the string to a number and test for equality  If one is a Boolean, convert to a number and check 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Evaluating Strict Equality 1. If operands are different types, not equal. 2. If both values are null or undefined, they are equal. 3. If both are Booleans, equal if both true or both false. 4. If either operand is NaN, not equal. 5. If both numbers, equal if values are equal. 6. If both strings, equal if same length and same characters 7. If object references, equal if both reference same object. Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

Comparison Operators â&#x20AC;˘ Compare relative values, return Boolean Operator

Description

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.

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

Logical Operators and Expressions • Boolean algebra • Use of AND and OR operators Operator

Description

Logical AND. Returns true if both operands are true and false otherwise.

Logical OR. Returns true if either operand is true.

• Use short circuiting ! Logical NOT. Returns false if the single operand is false. • Return valuestrue, of otherwise && and || Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

String Operators and Expressions • + is overloaded for string concatenation • Kicks in when either operand is a string • += works for concatenation as well

Special Operators and Expressions • Conditional operator ?:  op1 ? op2 : op3

• Comma operator ,  x = 1, y = 2, z = 3;

• typeof operator • Others       

Member access operators delete operator in operator instanceof 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  Order in which performs operations  3 + 6 * 2

• Operator Associativity  Order that JavaScript performs operations of same precedence  Left-to-right: ((x op y) op z)  Right-to-left: (x op (y op z))

Other Expression Types • 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 • Easiest is with curly brackets and commadelimited list of properties and initial values

Property Access Expressions • Provides access to value of object property or array element • Two syntaxes  expression.identifier  expression[expression]

Process to Evaluate Access 1. Evaluate expression before . or [  If null or undefined, throw error

1. If not an object or array, convert the value 2. If uses the . notation with identifier  Retrieve value of property

1. 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  func(x, y, z)  obj.meth(x, y, z)

• Difference between function and a method • Process 1. Evaluate function or method and throw error if not callable  Evaluate argument expressions and assign to parameters  Perform operations  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      

new new new new new new

Number(5) String("AppDev") Boolean(true) Object Rectangle(3, 4, 5, 6) Date()

Evaluation Expressions • Ability to interpret strings of code on the fly • Use the global function eval() • Takes a single string as argument

Learn More! • This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details! • Learn more about JavaScript on SlideShare! • Introduction to JavaScript • JavaScript: Values, Types, and Variables