JavaScript Programming

Tiep Phan – SSE – July 2018

 Agenda

• Course overview.
• Course contents.
• Examination.
 Course Overview

• Introduction to JavaScript.
• Why learn JavaScript?
• The fundamentals of JavaScript.
• JavaScript new features: ES2015 à ES2018.
 Course Contents

• Section 1: Data type, Operators, Variables, Scope, Program

Structure.

• Section 2: Function, Higher-Order Function, Object/Class, Array.

• Section 3: Asynchronous Programming, Events, Block scope
variables, Constant.

• Section 4: Arrow functions, Default parameter value, Rest, Spread,

Class, Module.

• Section 5: Promise, Async/Await.

Section 1
Data type, Operators, Variables, Scope, Program Structure
 Data Type

• Primitive Values.
• Objects.
 Primitive Values

• Boolean: true/false
• Number: 10, 3.14, …
• String: ‘abc’, …
• Null
• Undefined
• Symbol (ES2015)
Note: You can’t define your own primitive types.
 Primitive Values

• Compared by value
 Primitive Values

• Always immutable
 Objects

• All nonprimitive values are objects.

 Objects

• Compared by reference
 Objects

• Mutable by default
 Objects

• User-extensible
 Null and Undefined

• undefined means “no value” (neither primitive nor object).

- Uninitialized variables
- Missing parameters
- Missing properties have that nonvalue
- Functions implicitly return it if nothing has been explicitly returned.
• null means “no object.” It is used as a nonvalue where an object
is expected (as a parameter, as a member in a chain of objects,
etc.).
 Null and Undefined

• undefined and null are the only values for which any kind of
property access results in an exception.
 Null and Undefined

• undefined is not a keyword in JavaScript.

 Null and Undefined

• undefined is not a keyword in JavaScript.

 Wrapper Objects for Primitives

• Boolean
• Number
• String
 Wrapper Objects for Primitives

• As constructors, they create objects that are largely

incompatible with the primitive values that they wrap
 Wrapper Objects for Primitives

• As functions, they convert values to the corresponding primitive

types
 Un-wrapping Primitives

• Unwrap a primitive by invoking the method valueOf(). All objects

have this method.
 Un-wrapping Primitives

• Converting wrapper objects to primitives properly extracts

numbers and strings, but not booleans.
 Type Coercion

• Type coercion means the implicit conversion of a value of one

type to a value of another type.

• Most of JavaScript’s operators, functions, and methods coerce

operands and arguments to the types that they need.
 Truthy and Falsy Values

• undefined, null
• Boolean: false
• Number: 0, NaN
• String: ''
• all objects are truthy
 Operators

• Assignment operators • String operators

• Comparison operators • Conditional (ternary) operator
• Arithmetic operators • Comma operator
• Bitwise operators • Unary operators
• Logical operators • Relational operators

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators
Operators
 Operators

• JavaScript Comparison Algorithms:

- Two strings are strictly equal when they have the same sequence of
characters, same length, and same characters in corresponding
positions.

- Two numbers are strictly equal when they are numerically equal (have
the same number value). NaN is not equal to anything, including NaN.
Positive and negative zeros are equal to one another.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators
 Operators

• JavaScript Comparison Algorithms:

- Two Boolean operands are strictly equal if both are true or both
are false.
- Two distinct objects are never equal for either strict or abstract
comparisons.
- An expression comparing Objects is only true if the operands reference
the same Object.
- Null and Undefined Types are strictly equal to themselves and
abstractly equal to each other.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators
 Operators

• JavaScript Comparison Algorithms - Equality Operators:

- When comparing a number and a string, the string is converted to a
number value.
- If one of the operands is Boolean, (1 if it is true and +0 if it is false).
- If an object is compared with a number or string, JavaScript attempts
to return the default value for the object. Operators attempt to convert
the object to a primitive value, a String or Number value, using
the valueOf and toString methods of the objects. If this attempt to
convert the object fails, a runtime error is generated.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators
 Operators

• JavaScript Comparison Algorithms - Equality Operators:

- If the valueOf method returns a primitive value, the toString method
will never be called.

- Note that an object is converted into a primitive if, and only if, its
comparand is a primitive. If both operands are objects, they're
compared as objects, and the equality test is true only if both refer the
same object.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators
 Operators

• JavaScript Comparison Algorithms - Equality Operators:

 The Plus Operator

• If one of them is a string, the other is also converted to a string

and both are concatenated.

• Otherwise, both operands are converted to numbers and

added.
 Unary Operators

• Unary plus (+): Tries to convert the operand into a number

• Unary negation (-): Tries to convert the operand into a number and negates after
• Logical Not (!): Converts to boolean value then negates it
• Increment (++): Adds one to its operand
• Decrement (--): Decrements by one from its operand
• Bitwise not (~): Inverts all the bits in the operand and returns a number
• typeof: Returns a string which is the type of the operand
• delete: Deletes specific index of an array or specific property of an object
• void: Discards a return value of an expression.
Unary Operators
 Variables, Scope

• Declaring and Assigning Variables.

 Variables, Scope

• An Identifier is an IdentifierName that is not a ReservedWord.

• An identifier must start with $, _, or any character in the
Unicode categories “Uppercase letter (Lu)”, “Lowercase letter
(Ll)”, “Titlecase letter (Lt)”, “Modifier letter (Lm)”, “Other letter
(Lo)”, or “Letter number (Nl)”.
• The rest of the string can contain the same characters, plus
any U+200C zero width non-joiner characters, U+200D zero
width joiner characters, and characters in the Unicode
categories “Non-spacing mark (Mn)”, “Spacing combining mark
(Mc)”, “Decimal digit number (Nd)”, or “Connector punctuation
(Pc)”.
 Variables, Scope

• Valid Identifiers.

https://mathiasbynens.be/notes/javascript-identifiers
 Variables, Scope

• Function scope, global scope, hoisting

 Variables, Scope

• Function scope, global scope, hoisting

 Variables, Scope

• Function scope, global scope, hoisting

 Program Structure

• Conditionals: if-else, switch-case.

• Loops: while, do-while, for, for-in, for-of.
DEMO
Q&A
Section 2
Function, Higher-Order Function, Object/Class, Array
 Functions

• A function is a JavaScript procedure—a set of statements that

performs a task or calculates a value.

• To use a function, you must define it somewhere in the scope

from which you wish to call it.
Functions
 Functions

• Function declarations: A function definition (also called

a function declaration, or function statement) consists of
the function keyword, followed by:
- The name of the function.
- A list of parameters to the function, enclosed in parentheses and
separated by commas.
- The JavaScript statements that define the function, enclosed in curly
brackets, { }.
• Function declarations are hoisted onto the beginning of the
scope.
 Functions

• Function expressions: A function expression may be a part of a

larger expression.
- One can define "named" function expressions (where the name of the
expression might be used in the call stack for example) or
"anonymous" function expressions.
• Function expressions are not hoisted onto the beginning of the
scope, therefore they cannot be used before they appear in the
code.
Functions
Functions
 Functions

• IIFE (Immediately Invokable Function Expression): function

expressions that are invoked as soon as the function is
declared.
 Functions

• The Three Roles of Functions in JavaScript:

- Non-method function (normal function).
- Constructor.
- Method.
 Functions

• “Parameter” Versus “Argument”:

- Parameters are used to define a function.
- Arguments are used to invoke a function.
• The arguments object: The arguments of a function are
maintained in an array-like object.
- Access 1st argument: arguments[0]
- The total number of arguments is indicated by arguments.length
 Closure

• You can nest a function within a function. The nested (inner)

function is private to its containing (outer) function.
• The inner function can be accessed only from statements in the
outer function.
• The inner function forms a closure: the inner function can use
the arguments and variables of the outer function, while the
outer function cannot use the arguments and variables of the
inner function.
• When a function gets declared, it contains a function definition
and a closure. The closure is a collection of all the variables in
scope at the time of creation of the function.
Closure
Closure
 What is this?

• The “this” keyword allows you to reuse functions with different

contexts. Said differently, the “this” keyword allows you to
decide which object should be focal when invoking a
function or a method.
What is this?
call(), apply(), and bind()
call(), apply(), and bind()
 Higher-Order Function

• Functions that operate on other functions, either by taking them

as arguments or by returning them, are called higher-order
functions.
Higher-Order Function
Higher-Order Function
 Object/Class

• All objects in JavaScript are maps (dictionaries) from strings to

values.

• A (key, value) entry in an object is called a property.

• The key of a property is always a text string (number).
• The value of a property can be any JavaScript value, including
a function.

• Methods are properties whose values are functions.

Object/Class
 Object/Class

• Pitfall: Losing this When Extracting a Method

• Pitfall: Functions Inside Methods Shadow this
 Object/Class

• The Prototype Relationship Between Objects

 Object/Class

• The Prototype Relationship Between Objects

 Object/Class

• Constructors—Factories for Instances:

A constructor function (short: constructor) helps with producing
objects that are similar in some way. It is a normal function, but it
is named, set up, and invoked differently. This section explains
how constructors work. They correspond to classes in other
languages.
 Object/Class

• Constructors:
 Object/Class

• The new Operator Implemented in JavaScript:

 Object/Class

• Inheritance in JavaScript:
 Array

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
DEMO
Q&A
Section 3
Asynchronous Programming, Events, Block scope variables, Constant
 Asynchronous Programming

• Both JavaScript in browser, and in Node.js, are single-threaded.

• In synchronous programs, if you have two lines of code (L1
followed by L2), then L2 cannot begin running until L1 has
finished executing.

• In asynchronous programs, you can have two lines of code (L1

followed by L2), where L1 schedules some task to be run in the
future, but L2 runs before that task completes.
 Asynchronous Programming

• Call Stack
 Asynchronous Programming

• Web Browser API

 Asynchronous Programming

• Web Browser API

 Asynchronous Programming

• Event Loop

https://www.youtube.com/watch?v=8aGhZQkoFbQ
 Asynchronous Programming

• Event Loop: The reality is that all JavaScript executes

synchronously - it's the event loop that allows you to queue up
an action that won't take place until the loop is available some
time after the code that queued the action has finished
executing.
 Asynchronous Programming

• Callback:
- Pros: Easy to understand (only for simple callback function).

- Cons: Error handling becomes more complicated, Composition is more

complicated (Callback hell)
 Asynchronous Programming

• Callback:
 Asynchronous Programming

• Callback:
 Asynchronous Programming

• AJAX
 Asynchronous Programming

• Asynchronous programming makes it possible to express waiting for

long-running actions without freezing the program during these
actions.
• JavaScript environments typically implement this style of
programming using callbacks, functions that are called when the
actions complete.
• An event loop schedules such callbacks to be called when
appropriate, one after the other, so that their execution does not
overlap.
 Event

• HTML events are "things" that happen to HTML elements.

https://jsbin.com/cibuyereme/edit?html,js,output
 Event

• Event objects

https://jsbin.com/sugoviziyi/edit?html,js,output
 Event

• Remove Listener

https://jsbin.com/jodiqafulu/edit?html,js,output
 Block Scope Variables

• let
 Block Scope Variables

• let
 Block Scope Variables

• let

https://www.tiepphan.com/es2015-var-let-const-keywords/
 Block Scope Variables

• const

https://www.tiepphan.com/es2015-var-let-const-keywords/
 Block Scope Variables

• const

https://www.tiepphan.com/es2015-var-let-const-keywords/
 Block Scope Variables

• const

https://www.tiepphan.com/es2015-var-let-const-keywords/
DEMO
Q&A
THANK YOU
www.nashtechglobal.com