JS functions from easy to elaborateHow to define functionsblock of a code without defined function
var myFirstFunction = 2+2; alert(myFirstFunction); the same code with defined function function myFirstFunction (a,b) { return a+b; } alert(myFirstFunction(2,2)); |
The main advantage of using functions vs. straight code is very simple. Imagine a need to move an entire sofa from one room to another. You would not put a sofa apart in order for it to be in another room.
So, you take the whole entire block and use it. Functions make your code to be mobile and reusable. How to build a function
// whatever you are using myFirstFunction for return () }; 6. The very last thing we need to do is to call function. It is either console.log, alert window or document.write. |
Example 1
function printOrder(orderId){
console.log("your order is " + orderId); }; printOrder('9002'); |
Example 2
function printOrder1 (orderId){
var orderId = '9002'; console.log("your order is " + orderId); }; printOrder1(); |
Example 3
printOrder2('B9002');
function printOrder2(orderId2){ console.log("Your cancelled order is " + orderId2); } |
Let's say you need a function that has parseInt and parseFloat. Obviously, if you are buying something, you want to prevent people from typing decimal point for the quantity and you need floats for price.
This is your solution. function calcTotalPrice(quantity, price){ var quantity = parseInt(4); var price = parseFloat(4.89); console.log('Total Price: ' + (quantity * price)); } calcTotalPrice(); |
You can add multiple arguments to your function, but in order to use them you need to define them, otherwise, you will get undefined error message. Let's build a function with four arguments but assign values only to three.
function bookTitle (author, price, numOfBooks) {
var bookTitle = "Count Of Monte Cristo"; var author = "Alexandre Dumas"; var price = 19.95; console.log("Your book is " + bookTitle+ ". " + "It was written by " + author + ". The price is " + price); console.log (numOfBooks); }; bookTitle(); You should see undefined for console.log(numOfBooks):
I added a concat with the undefined variable, so you can see the error. I should mention that if a Javascript sees a variable without a value, it will automatically assign a undefined value! |
"All roads lead to Rome" ... this is it.
There is another way to use functions..... by using RETURN |
Let's say, you absolutely need the variable output from a function and use it for something else to connect another function. We can do something like this
function bookCollection1 (book1, book2, author) { return book1 + " and " + book2 + " were written by " + author; }; var booksVerne = bookCollection1 ("Around the World in Eighty Days", "The Mysterious Island", "Jules Verne"); console.log(booksVerne); var booksTwain= bookCollection1 ("A Connecticut Yankee in King Arthur’s Court", "Following the Equator", "Mark Twain"); console.log(booksTwain); var totalBooks = "Currently, we have books: " + booksVerne + " and " + booksTwain; console.log(totalBooks); As you can see the functions are written as separate modules sort of speak and we bring them together. It is easier to maintain and troubleshoot the code. Besides that, we are also reusing function bookCollection1 for booksTwain and booksVerne variables since the values are not changed.
|
More Undefined .... |
Functions can output undefined. Here is an example....
//undefined
function pizzaOrder(){ //no returns }; var order = pizzaOrder(); console.log("I want my " + order); //working one function pizzaOrder(){ var size = "extra large"; var topping = "extra cheese"; return size + " pizza with " + topping; }; var order = pizzaOrder(); console.log("I want my " + order); |
Function ExpressionWe assign a function to a variable.
Let's say, we remove () from activeOrder, activeOrder will be just a variable reference. |
//output is function
var activateOrder = function() {
console.log('order activate'); }; console.log(typeof activateOrder); //output is "we are activating your order
var activateOrder = function() {
console.log("We are activating your order"); }; activateOrder(); |