JavaScript: Functions,

methods and objects

CS 4640
Programming Languages
for Web Applications

[Robert W. Sebesta, “Programming the World Wide Web

Jon Duckett, Interactive Frontend Web Development]
Summer 2022 – University of Virginia © Praphamontripong 1
 Functions
Self-contained bits of JS code that allow us to
• Organize code
• Reuse the same code any number of times, from different
parts of the script

JS supports several types of function. Commonly used types are:

• Named functions
• Anonymous functions

Summer 2022 – University of Virginia © Praphamontripong 2

 Named Functions
• Similar to Java functions but header is somewhat different
parameters
Function
declaration

Function call

• Return type not specified (like PHP, since JS has dynamic

typing)
• Parameter types also not specified

• Functions execute when they are called, just as in any language

Summer 2022 – University of Virginia © Praphamontripong 3

 Anonymous Functions and
Function Expressions
• Functions can be assigned to variables

“Function expression”

• Variables declared in a function are local to the function

• Parameters are all value

• No parameter type-checking

Summer 2022 – University of Virginia © Praphamontripong 4

 Immediately Invoked
Function Expressions
• Anonymous functions can be executed once as the interpreter
comes across them

Grouping operators tell

Parentheses tell the the interpreter to treat
interpreter to call the this as an expression
function immediately

Summer 2022 – University of Virginia © Praphamontripong 5

 Functions and
Default Values (ES6)

Summer 2022 – University of Virginia © Praphamontripong 6

 Global and Local Scopes

Local scope
Global scope (function-level
scope)

Local scope
(function-level
scope)
Global scope

Naming collision
• Two JavaScript files, both have a global variable with the same name
It’s better to avoid creating too many global variables. Use function
parameters if you need to share specific values with a function
Summer 2022 – University of Virginia © Praphamontripong 7
 Howgroup
Objects dovariables
WebandApps functionsfit in with
to create a model revisit
thesomething
representing World Around
you would recognizeThem?
from the real world

Object type: Hotel

Event Happens when Events
Method are things or
called Properties
Reserve reservation is made makeReservation()
Cancel reservation is cancelled interactions that can
cancelReservation()
Name: Awesome
Rating: 5
happen to the objects Rooms: 70
Method What it does Bookings: 56
Pool: true
makeReservation() increases value of bookings property Gym: true
cancelReservation() decreases value of bookings property
checkAvailability() subtracts value of bookings property from value
of rooms property and returns number of rooms Properties tell us
available
the characteristics
Methods represent tasks that are
Object type: Car of the objects
Event
associated with the objects
Happens when Method called Properties
(or things driver
Break we can slowsdo with the
down objects)
changeSpeed() Make: UVA1
Accelerate driver speeds up changeSpeed() currentSpeed: 30
Color: yellow
Fuel: gasoline
Method What it does
changeSpeed() increases or decreases value of currentSpeed
property

Summer 2022 – University of Virginia © Praphamontripong 8

 JavaScript Objects
• JavaScript is an object-based language
• It supports for object-oriented programming but not at the same level as
other languages (ES6: introduced class – still lacks private property)

• Objects are represented as property-value pair

• The property values can be data or functions (methods)

• A property is something that can be modified :

• Data properties : primitive values or references to objects
• Method properties : can be executed

• Objects can be created and their properties can be changed

dynamically
• JS is not really typed .. If it doesn’t care between a number and a string, why
care between two kinds of objects?

Summer 2022 – University of Virginia © Praphamontripong 9

 Creating Objects
Create an object and assign variables and functions directly by using
{ } syntax

Summer 2022 – University of Virginia © Praphamontripong 10

 Creating Objects
with Constructors
Create an instance of the object using the constructor function and
the new keyword

Summer 2022 – University of Virginia © Praphamontripong 11

 Accessing Objects
• Access properties or methods of an object using dot notation

• Access properties or methods using square brackets

Summer 2022 – University of Virginia © Praphamontripong 12

 Updating Properties
• Update properties using dot notation

• Update properties using square brackets

Summer 2022 – University of Virginia © Praphamontripong 13

 Adding Properties
• Add a property using a dot notation

Summer 2022 – University of Virginia © Praphamontripong 14

 Deleting Properties
• Delete a property using the delete keyword

Summer 2022 – University of Virginia © Praphamontripong 15