[go: up one dir, main page]

0% found this document useful (0 votes)
5 views22 pages

CP476 Internet Computing Week 8 1 Functions

This document covers JavaScript functions, including their declaration, expression, hoisting, and arrow functions. It explains function parameters, invocation methods (call, apply, bind), and highlights the differences between these methods. Additionally, it includes announcements regarding project deadlines and upcoming tests.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
5 views22 pages

CP476 Internet Computing Week 8 1 Functions

This document covers JavaScript functions, including their declaration, expression, hoisting, and arrow functions. It explains function parameters, invocation methods (call, apply, bind), and highlights the differences between these methods. Additionally, it includes announcements regarding project deadlines and upcoming tests.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

CP476 Internet Computing

Week 8 – 1: JavaScript – functions

Shaun Gao, Ph.D., P.Eng.


Agenda
• Introduction
• JavaScript functions
• Function declaration
• Function expression
• Function hoisting
• Arrow function
• Parameters
• call()
• apply()
• bind()
• Summary
Introduction
• How JavaScript code is executed? (all scripting language same)

• Functions
• First, definition/declaration
• Secondary, execution
• The meaning of hoisting
JavaScript - Function declaration
• JavaScript functions are defined with the function keyword in general
• There are two methods to define a JavaScript functions.
• Function Declaration and Function Expression
• Syntax of the function declaration
function functionName([param1[, param2[, ..., paramN]]]) {
statements “the body of the function”;
}
• Example:
function functionName(x, y){
return x * y;
}
JavaScript – Function expression
• Function Expression
• Syntax of the function expression let sayHi = function someName() {
Var variable_name = function [name]([param1[, console.log( "Hello" );
param2[, ..., paramN]]]) { };
statements “the body of the function”; //This is function expression but with name
This function can be called as sayHi()
}
Inside of [ ] are options. var anon = function() {
• Note: console.log('I am anonymous');
}
• An anonymous function is a function without a anon();
function name. Only function expressions can be //This is also function expression but without
anonymous, function declarations must have a name to the function hence
name.
it is anonymous function.
• But not all function expressions are anonymous
functions Demo 00
Function declaration vs. Function Expression
• Function Declaration vs. Function Expression
• Syntax:

• Demo01
Function declaration vs. Function Expression

• Function Declaration vs. Function Expression


• Declaration: Function declarations load before any code is executed.
• Expression: Function expressions load only when the interpreter reaches that
line of code.
• Question?
• Declarations: the function declaration is hoisted to the top of other code.
• Expression: Function expressions aren’t hoisted, which allows them to retain
a copy of the local variables from the scope where they were defined.
• Function expression can define anonymous functions whereas function
declaration cannot.
• Demo02
JavaScript - Function Hoisting
• Hoisting is a JavaScript mechanism where variables and function
declarations are moved to the top of their scope automatically before code
execution.
• Function hoisting – JavaScript code re-ordering
• JavaScript functions can be called before they are declared when function
declaration is used.

var ret=myFunction(5);
console.log(ret);
function myFunction(y) {
return y * y;
}
• Demo03
JavaScript – Arrow Function
• An arrow function expression is a type of function expressions.
• Basic syntax
(1) param => expression
(2) (param1, paramN) => expression
(3) param => {
let a = 1;
return a + param;
}
(4) (param1, paramN) => {
let a = 1;
return a + param1 + paramN;
}
• Demo04
JavaScript – Arrow Function –cont.
• Arrow function Limitations
• Does not have its own bindings to this or super and should not be used as
methods.
• Does not have new.target keyword.
• You can detect whether a function or constructor was called using the new operator.

• Demo 04-1

• Not suitable for call, apply and bind methods, which generally rely on
establishing a scope.
• Can not be used as constructors.
JavaScript Function Parameters
• Function Parameters and Arguments
function functionName(parameter1, parameter2, parameter3) {
// code to be executed
}
• Function parameters are the names listed in the function definition.
• Function arguments are the real values passed to the function.
• In JavaScript:
• function definitions do not specify data types for parameters.
• functions do not perform type checking on the passed arguments.
• functions do not check the number of arguments received → PHP.
JavaScript Function Parameters – cont.
• JavaScript functions have a built-in object called the arguments object.
• The argument object contains an array of the arguments used when the function
was called.
• JavaScript functions have both properties and methods.
• arguments.length property, it returns the number of arguments when the
function is called.
function myFunction(a, b) {
return arguments.length;
}
• toString() method returns the function as a string
function myFunction(a, b) {
return a * b;
}
let text = myFunction.toString();
• Demo05
JavaScript Function Parameters – cont.
• Default Parameters – similar to PHP
• If a function is called with missing arguments (less than declared), the
missing values are set to undefined, JavaScript keeps running.
• A parameter has a default value of undefined. It means that if you
don't pass the arguments into the function, its parameters will use
the default values of undefined.
• Syntax
• function function_name(parameter1, parameter2=value2…){……}
function myFunction(x, y=2) {……}
JavaScript - Function Invocation
• Invoking a Function as a Function
function myFunction(a, b) { return a * b; }
myFunction(10, 2);  inherited from C,
• Invoking a Function as a method of an object
const employee ={ firstName: “Mike”, lastName: “He”,
fullName: function() { return this; }
}
employee.fullName.call();
• Invoking a Function with a Function Constructor (the F is capital)
new Function(functionBody)
new Function(arg1, ... argN, functionBody)
• Demo06
JavaScript - Function call()
• In JavaScript all functions are object methods.
• The call() method is a predefined method of function objects.
const person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
person.fullName.call(person1); // This will return "John Doe":
JavaScript - Function call() – cont.
• The call() method with Arguments
const person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
const person1 = {
firstName:"John",
lastName: "Doe"
}
person.fullName.call(person1, "Oslo", "Norway");
• Demo07
JavaScript Function apply()
• The apply() method is similar to the call() method, it is also a
predefined method of function objects
const person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person1 = {
firstName: "Mary",
lastName: "Doe"
}
person.fullName.apply(person1); // This will return "Mary Doe":
JavaScript Function apply() – cont.
• The apply() method with Arguments
const personY = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
const personY1 = {
firstName:“Mary",
lastName: "Doe"
}
personY.fullName.apply(personY1, ["Oslo", "Norway"]);

• Demo08
JavaScript Function bind().
• bind() creates a new function by using function object, that will force
the this inside the function to be the parameter passed to bind().
• Syntax:
func.bind(thisArg)
• In this syntax, the bind() method returns a copy of the function func with the
specific this value (thisArg).

• Demo09
• bind() only apply to function objects not for function calls
• Demo10
Comparison among call(),apply(), bind() .
• The Difference Between call() and apply()
• The call() method takes arguments separately using comma.
• The apply() method takes arguments as an array.
• A useful mnemonic is "A for array and C for comma."
Summary
• JavaScript functions
• Function declaration
• Function expression
• Function hoisting
• Arrow function
• Parameters
• call()
• apply()
• bind()
Announcement
• Group project progress
• Project report due date: Mar. 21 (Friday)

• Test 2 (cover week 5-8) next week (Mar 14) at 9:30 am in BA102
• Bring your laptop

You might also like