Zaheer ul Hussain Sani
Mobile Application
JavaScript
Functions
Development
JS Functions
• Block of code designed to perform a particular task.
function myFunction(p1, p2) {
return p1 * p2; // The function returns the product of p1 and p2
}
• A JavaScript function is defined with the function keyword, followed by a
name, followed by parentheses ().
• Function arguments are the values received by the function when it is
invoked.
• Inside the function, the arguments (the parameters) behave as local
variables
JS Functions – What will be the output? 1/2
function func() { return "Function 1"; }
1 function func() { return "Function 2"; }
console.log(func());
function func(a) { return "Function 1"; }
2 function func(a) { return "Function 2"; }
console.log(func());
3 function func(a) { return "Function 1"; }
function func(a, b) { return "Function 2"; }
console.log(func());
4 function func(a) { return "Function 1"; }
function func(a, b) { return "Function 2"; }
console.log(func(5));
5 function func(a) { return "Function 1"; }
function func(a, b) { return "Function 2"; }
console.log(func(5, 6));
JS Functions – What will be the output? 2/2
function func() { return "Function 1"; }
1 function func2() { return "Function 2"; }
console.log(func());
function func(a) { return "Function 1"; }
2 function func2(a) { return "Function 2"; }
console.log(func2());
3 function func(a) { return "Function 1"; }
function func2(a, b) { return "Function 2"; }
console.log(func2(5));
4 function func(a) { return "Function 1"; }
function func2(a, b) { return "Function 2"; }
console.log(func2(5,10));
5 function func(a) { return "Function 1"; }
function func(a, b) { return "Function 2"; }
console.log(func(5));
JS Functions – Check for undefined
• General strategy for setting defaults is to test parameter values in the body
of the function and assign a value if they are undefined or null
function multiply(a, b) {
a = typeof a !== 'undefined’ ? a : 0;
b = typeof b !== 'undefined' ? b : 1;
return a * b;
}
multiply(5); // 5
JS Functions – ES6 Default Parameters
• With default parameters, a manual check in the function body is no longer
necessary
function multiply(a = 0, b = 1) {
return a * b;
}
multiply(); // 0
multiply(5); // 5
multiply(5, 5); // 25
JS Functions – Arguments Object
• The arguments of a function are maintained in an array-like object
• All arguments can be retrieved using arguments object
function myConcat(separator) {
var result = ''; // initialize list
// iterate through arguments
for (let i = 1; i < arguments.length; i++)
result += arguments[i] + separator;
return result;
}
// returns "red, orange, blue, "
var result = myConcat(', ', 'red', 'orange', 'blue');
// returns "elephant; giraffe; lion; cheetah; "
var result = myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah');
// returns "sage. basil. oregano. pepper. parsley. "
var result = myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');
Note: The arguments variable is "array-like", but not an array. It is array-like in that it has a
numbered index and a length property. However, it does not possess all of the array-
manipulation methods.
JS Functions – Rest Parameters
• The rest parameter syntax allows us to represent an indefinite number of
arguments as an array.
• Rest Parameters are received as an Array and all Array operations can be
applied
function fun(arg1, ...args) {
return args.length + 1;
}
console.log(fun(0, 1, 2, 3, 4, 5, 6, 7, 8, 9) + " arguments passed");
// 10 arguments passed
function sumNums(...nums) {
let sum = 0;
for (let i = 0; i < nums.length; i++)
sum += nums[i];
return sum;
}
console.log(sumNums(1, 1, 1, 1, 1));
JS Functions – Pass by Value
• JavaScript is Pass by Value for Primitive Data (Number, String, Boolean)
function sum(n1, n2) {
n1 = n1 + n2;
return n1;
}
var a = 10, b = 10
console.log(a, "+", b, "=", sum(a, b))
function strFun(p1) {
p1 = "Eleven"
}
var a = "Ten"
strFun(a)
console.log(a)
JS Functions – Pass by Reference
• Objects are of Reference Type
• Therefore, JavaScript is Pass by Reference for Objects
function strFun(p1) { function strFun(p1) {
p1.value = "Eleven" p1.value = "Eleven"
} p1.index++
var a = { value: "Ten" } }
strFun(a) var a = { value: "Ten", index: 0 }
console.log(a.value) strFun(a)
console.log(a.index)
Visit this link for the detailed discussion:
https://stackoverflow.com/questions/13104494/does-javascript-pass-by-reference
JS Functions – Function Expression
• While the function declaration above is syntactically a statement, functions
can also be created by a function expression
• Such a function can be anonymous; it does not have to have a name. For
example, the function square could have been defined as:
const square = function(number) { return number * number }
var x = square(4) // x gets the value 16
• However, a name can be provided with a function expression. Providing a
name allows the function to refer to itself
const factorial = function fac(n) { return n < 2 ? 1 : n * fac(n - 1)
console.log(factorial(3))
JS Arrow Functions
• Arrow functions were introduced in ES6
• An arrow function expression has a shorter syntax compared to function
expressions
hello = function () { hello = () => {
return "Hello World!"; return "Hello World!";
} }
console.log(hello()) console.log(hello())
• It gets shorter! If the function has only one statement, and the statement
returns a value
• Arrow Functions Return Value by Default
hello = () => "Hello World!";
console.log(hello())
JS Arrow Function with Parameters
• If you have parameters, you pass them inside the parentheses
hello = (val) => "Hi " + val;
console.log(hello(5))
• If you have only one parameter, you can skip the parentheses as well
hello = val => "Hi " + val;
console.log(hello(5))
What is Expected Output?
const mult = (a, b) => a = a !== undefined ? a : 0; b = b !== undefined ? b : 1; a * b;
console.log(mult(2, 3))
const mult = () => { const mult = () => {
a = a !== undefined ? a : 0; a = a !== undefined ? a : 0;
b = b !== undefined ? b : 1; b = b !== undefined ? b : 1;
a * b; return a * b;
} }
console.log(mult(2, 3)) console.log(mult(2, 3))
const mult = () => { const mult = (a, b) => {
var a = a !== undefined ? a : 0; a = a !== undefined ? a : 0;
var b = b !== undefined ? b : 1; b = b !== undefined ? b : 1;
return a * b; return a * b;
} }
console.log(mult(2, 3)) console.log(mult(2, 3))
References
• MDN Web Docs (https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Guide/Functions)
• W3Schools JavaScript Functions
(https://www.w3schools.com/js/js_functions.asp)
• W3Schools React ES6 (https://www.w3schools.com/react/react_es6.asp)
• StackOverFlow Function by Value vs Reference
(https://stackoverflow.com/questions/13104494/does-javascript-pass-by-
reference)
