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