Functions in JavaScript
Functions In JavaScript
Functions: any logic/code that you have written, you wrap that and assign a name to it. So that whenever you need that logic again you can get it by that name.
Eg:
- a code to add 2 numbers,
- a code to check if a number is even,
- a code to check if a given phone number is valid, has 10 digits
function twoNumberSum(num1, num2) {
return num1 + num2
}
function isEven(num) {
if (num % 2 === 0) {
return true
} else {
return false
}
}
function isPhoneNumberValid (phoneNumber) {
if (phoneNumber.toString().length === 10) {
return true
} else {
return false
}
}
Functions In JavaScript
Purpose of Functions: they are simply a wrapper around your code, any piece of code that you want to store or use in multiple places, you can put them in functions.
Functions broadly have 4 parts:
- name of function
(isPhoneNumberValid)
-
parameters
(phoneNumber)
- logic code
-
return value
(true/false)
(return is keyword in JavaScript that can be used only inside a function)
function twoNumberSum(num1, num2) {
return num1 + num2
}
function isEven(num) {
if (num % 2 === 0) {
return true
} else {
return false
}
}
function isPhoneNumberValid (phoneNumber) {
if (phoneNumber.toString().length === 10) {
return true
} else {
return false
}
}
Functions In JavaScript
Different languages implement functions differently, still their purpose remains same in all languages.
In JavaScript, based on use case:
- Functions, may be defined to receive no parameters.
- Functions may have no return value
- Functions may have no name as well (anonymous functions)
let userName = "Yash"
function addBatchInfo () { // no parameters
const batchInfo = "WMB2"
userName = `${userName}-${batchInfo}`
// no return statement as well
}
console.log(userName)
const divElement = document.getElementByTagName('div')
divElement.addEventListener('mouseenter', function(){ // function without name, callback
divElement.style.background: "green"
})
Functions In JavaScript
Creating a Function:
In JavaScript, functions can be created in 4 different ways:
// Function Declaration
// function name () {}
function addBatchInfo (userName) {
const batchInfo = "WMB2"
const userWithInfo = `${userName}-${batchInfo}`
return userWithInfo
}
// Arrow Functions
// const name = () => {}
const addBatchInfo = (userName) => {
const batchInfo = "WMB2"
const userWithInfo = `${userName}-${batchInfo}`
return userWithInfo
}
// Function Expression
// const name = function () {}
const addBatchInfo = function (userName) {
const batchInfo = "WMB2"
const userWithInfo = `${userName}-${batchInfo}`
return userWithInfo
}
// Functions as a Method
// name () {}
const userObj = {
userName: "Yash",
batchInfo: "WMB2",
addBatchInfo (userName) {
const batchInfo = "WMB2"
const userWithInfo = `${userName}-${batchInfo}`
return userWithInfo
}
}
the 4th way, function as a method, is a use case of functions, so all the other 3 methods can also be used to create a function inside an object
- Function Declaration,
- Arrow Functions,
- Function Expression,
- Methods
Functions In JavaScript
Calling/Invoking a Function:
Calling/Invoking a function means using it:
- We call a function using parentheses "()"
- the values that function receive at the function definition are called parameters
- the values that function receive at the function invocation are called arguments
- Function is declared only once, but can be invoked any number of times
// Function Declaration
// function name () {}
function addBatchInfo (userName) {
const batchInfo = "WMB2"
const userWithInfo = `${userName}-${batchInfo}`
return userWithInfo
}
addBatchInfo("YashDeclaration")
// Arrow Functions
// const name = () => {}
const addBatchInfo = (userName) => {
const batchInfo = "WMB2"
const userWithInfo = `${userName}-${batchInfo}`
return userWithInfo
}
addBatchInfo("YashArrow")
// Function Expression
// const name = function () {}
const addBatchInfo = function (userName) {
const batchInfo = "WMB2"
const userWithInfo = `${userName}-${batchInfo}`
return userWithInfo
}
addBatchInfo("YashExpression")
// Functions as a Method
// name () {}
const userObj = {
userName: "Yash",
batchInfo: "WMB2",
addBatchInfo (userName) {
const batchInfo = "WMB2"
const userWithInfo = `${userName}-${batchInfo}`
return userWithInfo
}
}
userObj.addBatchInfo("YashMethod")
Functions In JavaScript
Function properties
- Functions which are defined to have parameters, can still be called without passing any arguments. And vice-versa is also true.
-
functionName.length
gives number of parameters that are defined for the function. -
functionName.name
gives function's name
function addBatchInfo (userName) { // a parameter is defined
const batchInfo = "WMB2"
const userWithInfo = `${userName}-${batchInfo}`
return userWithInfo
}
addBatchInfo.length
// Expected: 1
addBatchInfo() // called without argument,
// hence userName is undefined
function addBatchInfo () { // no parameter is defined
const batchInfo = "WMB2"
const userWithInfo = `${"yash"}-${batchInfo}`
return userWithInfo
}
addBatchInfo("priyam") // called with argument,
// hence "priyam" is un-used
Functions In JavaScript
Default Value in Function Parameter:
- Default value for function parameters: you can assign default value for parameters in-case a parameter doesn't get an argument
function addBatchInfo (userName = "Admin", batch = "WMB2") { // a parameter is defined
const userWithInfo = `${userName}-${batch}`
return userWithInfo
}
addBatchInfo() // called without argument,
// hence userName will use default value
// userName = "Admin"
Functions In JavaScript
Calling/Invoking a Function:
- arguments: it's a keyword, used inside a function body only.
- "arguments" is an array of all the arguments that function is passed during invocation, already defined
and accessible inside function body. - No parameters are defined for the function but there is a chance that the function might be called with some arguments, or you are not sure with what/how many arguments the function will be called, then you use arguments in function.
// Here function does not recieve any parameter
// but still it's being called with argument
// Now, you want to access that parameter
// inside the function, you can use
// arguments inside the function
function func1(a, b, c) {
console.log(arguments[0]);
// Expected output: 1
console.log(arguments[1]);
// Expected output: 2
console.log(arguments[2]);
// Expected output: 3
}
func1(1, 2, 3);
function addBatchInfo () { // no parameter is defined
const batchInfo = "WMB2"
const userArg = arguments[0]
const userWithInfo = `${userArg}-${batchInfo}`
console.log(userWithInfo)
// Expected output: "priyam-WMB2"
}
addBatchInfo("priyam") // called with argument,
// hence "priyam" is un-used
Functions In JavaScript
Rest parameters
- Rest parameters: introduced in es6.
- Do exactly the same thing as arguments, just in a better way.
- If you're not sure how many arguments cold come just add (...anyName) in the function parameters.
- You can use rest parameters partially as well.
function func1 (...someArgs) {
console.log(someArgs[0]);
// Expected output: 1
console.log(someArgs[1]);
// Expected output: 2
console.log(someArgs[2]);
// Expected output: 3
}
func1(1, 2, 3);
function addBatchInfo (...args) { // no parameter is defined
const batchInfo = "WMB2"
const userArg = args[0]
const userWithInfo = `${userArg}-${batchInfo}`
console.log(userWithInfo)
// Expected output: "priyam-WMB2"
}
addBatchInfo("priyam") // called with argument,
// hence "priyam" is un-used
// Partial rest syntax
function myFun(a, b, ...manyMoreArgs) {
console.log("a", a);
// a, one
console.log("b", b);
// b, two
console.log(manyMoreArgs);
// ["three", "four", "five", "six"]
// []
}
myFun("one", "two", "three", "four", "five", "six");
myFun("one", "two");
Conditionals in JavaScript
Conditionals In JavaScript
In JavaScript, there are 4 ways to write conditionals:
- if/else,
- if, else-if, else
- Ternary Operator
- switch-case
// if () {
// } else {
// }
const arr = [1,2,3,4]
if (arr.length === 4) {
console.log(arr.length)
} else {
console.log("Array length invalid ")
}
// can do this till only one line of code
// is inside the blocks
if (arr.length === 4) console.log(arr.length)
else console.log("Array length invalid ")
// can use only if
if (arr.length === 4) {
console.log(arr.length)
}
if (arr.length === 4) console.log(arr.length)
//nesting is also allowed
if (arr.length >= 4) {
if (arr.length % 2 === 0) {
console.log(arr.length)
}
} else {
if (arr.length % 2 !== 0) {
console.log("Array length is odd")
} else {
console.log("Array length not even ")
}
}
if/else: it is simple conditional statement, where a condition is added in if block and if that condition turns out true, the if block code is executed and if not then automatically else block code, if present, gets executed.
Conditionals In JavaScript
const choice = "snowing"
let messageValue;
if (choice === "sunny") {
messageValue =
"It is nice and sunny outside today";
} else if (choice === "rainy") {
messageValue =
"Rain is falling outside; take a rain coat";
} else if (choice === "snowing") {
messageValue =
"The snow is coming down — it is freezing!";
} else if (choice === "overcast") {
messageValue =
"It isn't raining, but the sky is grey and gloomy;";
} else {
messageValue = "";
}
if, else-if, else:
- can add multiple cases, with else-if,
- the last else is optional
Conditionals In JavaScript
Ternary Operator: just a different way to write if, else conditional
// (condition) ? (if-block) : (else-block)
const arr = [1,2,3,4]
(arr.length === 4) ? console.log(arr.length) : console.log("Array length invalid ")
// can NOT use only if block
(arr.length === 4) ? console.log(arr.length) // XXXX - Not allowed
// nesting is also allowed
(arr.length >= 4) ? console.log(arr.length) : (arr.length % 2 !== 0)
? console.log("Array length is odd")
: console.log("Array length not even ")
// Also used for assignment
const message = weather === "sunny" ? `weather is ${weather} today` : "weather is not good"
Conditionals In JavaScript
switch-case:
it has 4 keywords - switch - takes condition,
case - takes values/expression,
break - added to each case, stops evaluation of further cases once a case matches with switch,
default - assigns a default value if non of the cases match the switch condition,
const foo = 0;
switch (foo) {
case -1:
console.log("negative 1");
break;
case 0:
console.log("match");
break; // Break encountered; will not continue into 'case 2:'
case 2:
console.log(2);
break;
default:
console.log("default");
}
// Logs 0 and 1
Conditionals In JavaScript
some facts regarding switch-case:
const foo = 1;
let output = "Output: ";
switch (foo) {
case 0:
output += "So ";
case 1:
output += "What ";
output += "Is ";
case 2:
output += "Your ";
case 3:
output += "Name";
case 4:
output += "?";
console.log(output);
break;
case 5:
output += "!";
console.log(output);
break;
default:
console.log("Please pick a number from 0 to 5!");
}
- fall-through - if a case doesn't has "break" at its end, the next case will also be evaluted, even though the previous case has already matched, and even though the next case doesn't match the code inside it will still be executed. Will go on till next break or last case.
Conditionals In JavaScript
some facts regarding switch-case:
const foo = 0;
switch (foo) {
case 1:
case 3:
case 5:
case 7:
case 9:
console.log("foo is odd");
break;
case 2:
case 2:
case 4:
case 6:
case 8:
console.log("foo is even");
break;
default:
console.log("foo is negative");
}
- multiple case statements - if we have to execute same code on matching 3-4 cases, we can write them together
Conditionals In JavaScript
some facts regarding switch-case:
const foo = 0;
switch (foo) {
case 1:
case 3:
case 5:
case 7:
case 9:
console.log("foo is odd");
break;
default:
console.log("foo is negative");
case 2:
case 2:
case 4:
case 6:
case 8:
console.log("foo is even");
break;
}
- default - doesn't has to be at the end, can also be in between, do
Conditionals In JavaScript
some facts regarding switch-case:
const action = "say_hello";
switch (action) {
case "say_hello": {
const message = "hello";
console.log(message);
break;
}
case "say_hi": {
const message = "hi";
console.log(message);
break;
}
default: {
console.log("Empty action received.");
}
}
- case blocks - can also wrap each case in a block ({}).
Operators in JavaScript
Operators In JavaScript
Math operatos:
Math.abs(-10) // 10
Math.max(1, 3, 2) // 3
Math.min(1, 3, 2) // 1
Math.pow(7, 2) // 49 (base, pwr)
Math.random() // between 0 - 1
Math.round(16.4) // 16, actual round
Math.floor(16.78) // 16 lower whole number round
Math.ceil(16.18) // 17 higher whole number round
Math.sqrt(49) // 7, square root
Math.trunc(13.34353) // 13, returns only the whole number
2 + 4 // 6
2 - 4 // -2
8 / 4 // 2
2 * 4 // 8
5 % 4 // 1 // remainder
10 % 2 === 0 // even check
10 % 2 !== 0 // odd check
Operators In JavaScript
Simple Operators
const myValue = 100
myValue == 100 // true
myValue == "100" // true
myValue != "100" // false
myValue === 100 // true
myValue === "100" // false
myValue !== "100" // true
myValue > 100 // false
myValue >= 100 // true
myValue < 100 // false
myValue <= 100 // true
myValue += 10 // myValue = myValue + 10 // myValue = 100 + 10
myValue // 110
++myValue // Prefix increment: increment first, assignment later
myValue++ // Postfix increment: assignment first, increment later
myValue -= 10 // myValue = myValue - 10 // myValue = 100 - 10
myValue // 90
--myValue // Prefix decrement: same as above
myValue-- // Postfix decrement
myValue *= 10
myValue // 1000
assignment =,
equality ==,
strict equality ===,
non equality !=,
strict non equality !==,
less than <,
greater than >,
greater than equal >=,
less than equal <=,
increment assignment +=,
decrement assignment -=,
multiplication assignment *=,
Operators In JavaScript
Logical Operators
const myValue = 100
myValue == 100 && myValue > 90 // true
myValue === "100" || myValue === 100// true
and &&
or ||
W4_D3
By Yash Priyam
W4_D3
- 139