JAVASCRIPT
THE BASICS
Expressions & Operators
I
an expression is a phrase
that an interpreter
can evaluate to produce a value
complex expressions
are built from simpler expressions
using operators
3 + 4
a * b
c = 7
an operator combines the values of its operands
&
evaluates to a new value
Primary Expressions
primary expressions
are constant or literal values
language keywords & variable references
15.67 //=> number literal
'JavaScript' //=> string literal
/[a-zA-Z0-9]/ //=> regular expression literal
null //=> evaluates to `null` value
false //=> evaluates to boolean `false` value
this //=> evaluates to `current` object
undefined //=> evaluates to global variable `undefined`
title //=> evaluates to the value of `title` variable
Object & Array
Initializers
object & array initializers
are expressions whose values
are a newly created object or array
array initializer
are a comma-separated list of expressions
placed between square brackets
[14 + 1, 10 + 5, 30 / 2] //=> [15, 15, 15]
object initializer
are a comma-separated list of expressions
placed between curly brackets
where each expression is prefixed by a name
var obj = {
first: 14 + 1,
second: 10 + 5,
third: 30 / 2
};
console.log(obj); //=> Object {first: 15, second: 15, third: 15}
the expressions in an object or array initializer
are evaluated each time the initializer is evaluated
this means that the value of the expressions
may be different each time it is evaluated
Function Definition
Expressions
a
function definition expression
defines a JavaScript function
&
the value is the newly created function
var multiply = function (a, b) {
return a * b;
};
Property access
expressions
property access expressions
evaluate to the value of an object property
or an array element
there are two syntaxes defined for property access
dot notation
expression.identifier
var obj = {
a: 15
};
obj.a //=> 15
where the expression specifies the object & the identifier specifies the name of the property to be accessed
&
bracket notation
expression[expression]
var obj = {
ab: 15
};
obj['a' + 'b'] //=> 15
obj['ab'] //=> 15
where the first expression is followed by another expression enclosed in square brackets whose value has to be the name of the desired property
the expression before the . or [ is first evaluated
if the value is null or undefined it throws a TypeError
dot notation syntax is the simpler of the two
BUT
it can only be used when the property that needs to be accessed
is a legal identifier
var obj = {
a: 15,
b: [7.5, 7.5],
c: {
d: {
e: 30 - 15
}
}
};
var arr = [ 1, 'JavaScript', obj, function () { return obj; } ];
obj.a //=> 15
obj.b[1] //=> 7.5
obj.c.d.e //=> 15
obj['c']['d'].e //=> 15
obj['a' + 'b'][0] //=> TypeError: Cannot read property '0' of undefined
arr[0] //=> 1
arr[2].a //=> 15
arr[2]['c']['d']['e'] //=> 15
arr[3]().c.d.e //=> 15
a more complex example
Invocation Expressions
invocation expressions
are JavaScript's syntax for executing functions or methods
someFunction(15); // `someFunction` is the function expression & `15` is the argument expresion
var obj = {
age: null,
setAge: function (age) {
this.age = age;
},
getAge: function () {
return this.age;
}
};
obj.setAge(15); //=> obj.age value is now 15
obj.getAge(); //=> 15 - returns the obj.age value
when an invocation expression is evaluated
the function expression is evaluated first
&
then the argument expressions are evaluated
to produce a list of argument values
if the value of the function expression
is not a callable object it throws a TypeError
Object.push(obj, 'title', 'JavaScript - The Basics');
//=> TypeError: undefined is not a function
next if callable
argument values are assigned to parameter names
&
then the function body is executed
Object Creation
Expressions
an
object creation expression
creates a new object & invokes a function to initialize the properties of that object
this function is called constructor
object creation expressions
are like invocation expressions
except they are prefixed by the new keyword
function Course(title) {
this.title = title || 'Untitled';
}
var course = new Course('JavaScript - The Basics');
console.log(course); //=> Course {title: "JavaScript - The Basics"}
Operators overview
operators
are used in
arithmetic / comparison / logical /
assignament / relational / evaluation / special
expressions
operators
are punctuation characters like + or =
or
keywords such as delete and typeof
Operator | Operation | Associativity | Number of operands | Types |
++ | pre- or post-increment | right-to-left | 1 | lval ⇒ num |
-- | pre- or post-decrement | right-to-left | 1 | lval ⇒ num |
- | negate number | right-to-left | 1 | num ⇒ num |
+ | convert to number | right-to-left | 1 | num ⇒ num |
~ | invert bits | right-to-left | 1 | int ⇒ int |
! | invert boolean value | right-to-left | 1 | bool ⇒ bool |
delete | remove a property | right-to-left | 1 | lval ⇒ bool |
typeof | determine type of operand | right-to-left | 1 | any ⇒ str |
void | return undefined value | right-to-left | 1 | any ⇒ undef |
*, /, % | multiply, divide, remainder | left-to-right | 2 | num, num ⇒ num |
+, - | add, subtract | left-to-right | 2 | num, num ⇒ num |
+ | concatenate strings | left-to-right | 2 | str, str ⇒ str |
<< | shift left | left-to-right | 2 | int, int ⇒ int |
the below table lists all JavaScript operators
ordered by their precedence
(first having heigher precedence)
horizontal blue lines separate operators with different precedence levels
Operator | Operation | Associativity | Number of operands | Types |
>> | shift right with sign extension | left-to-right | 2 | int, int ⇒ int |
>>> | shift right with zero extension | left-to-right | 2 | int, int ⇒ int |
<, <=, >, >= | compare in numeric order | left-to-right | 2 | num, num ⇒ bool |
<, <=, >, >= | compare in alphabetic order | left-to-right | 2 | str, str ⇒ bool |
instanceof | test object class | left-to-right | 2 | obj, func ⇒ bool |
in | test whether property exists | left-to-right | 2 | str, obj ⇒ bool |
== | test for equality | left-to-right | 2 | any, any ⇒ bool |
!= | test for inequality | left-to-right | 2 | any, any ⇒ bool |
=== | test for strict equality | left-to-right | 2 | any, any ⇒ bool |
!== | test for strict inequality | left-to-right | 2 | any, any ⇒ bool |
& | compute bitwise AND | left-to-right | 2 | int, int ⇒ int |
^ | compute bitwise XOR | left-to-right | 2 | int, int ⇒ int |
| | compute bitwise OR | left-to-right | 2 | int, int ⇒ int |
&& | compute logical AND | left-to-right | 2 | any, any ⇒ any |
|| | compute logical OR | left-to-right | 2 | any, any ⇒ any |
? : | choose scond or third operand | right-to-left | 3 | bool, any, any ⇒ any |
= | assign to a variable or property | right-to-left | 2 | lval, any ⇒ any |
*=, /+, %=, +=, -=, &=, ^=, |=, <<=, >>=, >>>= |
operate and assign | right-to-left | 2 | lval, any ⇒ any |
, | discard first operand, return second | left-to-right | 2 | any, any ⇒ any |
operators
can be categorized by
number of operands
precedence
associativity
JavaScript - The Basics - Expressions & Operators - Part I
By Raul Matei
JavaScript - The Basics - Expressions & Operators - Part I
- 1,399