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]

Functions Similar to Java functions but header is somewhat different 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

Anonymous Functions and Function Expressions Functions can be assigned to variables Variables declared in a function are local to the function Parameters are all value No parameter type-checking “Function expression” [see jex3.html]

Immediately Invoked Function Expressions Anonymous functions can be executed once as the interpreter comes across them Grouping operators tell the interpreter to treat this as an expression Parentheses tell the interpreter to call the function immediately

Functions and Default Values (ES6)

Global and Local Scopes (function-level scope) Global scope Naming collision Two JavaScript files, both have a global variable with the same name

How do Web Apps fit in with the World Around Them? revisit How do Web Apps fit in with the World Around Them? Objects group variables and functions to create a model representing something you would recognize from the real world Object type: Hotel Event Happens when Method called Reserve reservation is made makeReservation() Cancel reservation is cancelled cancelReservation() Method What it does makeReservation() increases value of bookings property cancelReservation() decreases value of bookings property checkAvailability() subtracts value of bookings property from value of rooms property and returns number of rooms available Properties Name: Awesome Rating: 5 Rooms: 70 Bookings: 56 Pool: true Gym: true Events are things or interactions that can happen to the objects Properties tell us the characteristics of the objects Methods represent tasks that are associated with the objects (or things we can do with the objects) Object type: Car Event Happens when Method called Break driver slows down changeSpeed() Accelerate driver speeds up changeSpeed() Method What it does changeSpeed() increases or decreases value of currentSpeed property Properties Make: UVA1 currentSpeed: 30 Color: yellow Fuel: gasoline

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?

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

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

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

Updating Properties Update properties using dot notation Update properties using square brackets

Adding Properties Add a property using a dot notation

Deleting Properties Delete a property using the delete keyword