CP476 Internet Computing Week 8 1 Functions
CP476 Internet Computing Week 8 1 Functions
• 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
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