Get sufficient info to learn the predefined rules and best practices when working with functions in JavaScript along with creating reusable functions.
Table of Contents
Contents of JavaScript
- INTRODUCTION OF JAVASCRIPT
- JAVASCRIPT FUNCTIONS
- DECLARING FUNCTIONS
- CALLING A FUNCTION
- FUNCTION PARAMETERS
- FUNCTION RETURN
- FUNCTION OF EXPRESSIONS
Introduction of JavaScript:
- JavaScript is a high-level programming language that makes users interact with applications.
- It depends on the basic HTML and CSS and formats the context.
- The most dynamic part of the content to be formatted by the javascript, it works as a backend of the application.
- So here we will be discussing the usage and JavaScript Functions
- So let’s get into this.
JavaScript Functions:
In JavaScript, we deal with different types of functions that can be reusable and non-reusable.
We have 3 different types of functions:
- Arrow functions
- Named functions
- Functions expressions
Declaring a function:
- Here in the below image, we have declared a function named logger.
- Inside the function, we have the body content that tells what must be executed in the output.
- Functions can be declared using the function keyword.
- It is always better to start descriptive writing for the function name.
- The overall body of the function will be declared within flower brackets
- In this image given below, it is simply declared with console.log of the context to be executed from the body
- You might be getting doubt that this is the only procedure to get the output? The answer is no! We have many procedures to get the content that will be explained in detailed methods further
function logger(){
console.log("my name is jonas");
}
//calling a function
logger();
logger();
logger();
Calling a function:
In the above program, we have declared a function named logger(). To use that function, we need to call it.
Here’s how you can call the loggers() function
- These are the defined procedures that function followed by semicolon logger();
- In the image below you can find the function call as logger();
- And there is another rule that you can call the function as many times as you want to.
- As long as you call the function it checks whether the function name is declared are not, If it is declared and the body is present it will execute the function
- So here in the below example, we have called the functions three times so the output will be printed three times.
- The body present in the logger function is My name is Jonas and this will be printed three times in the output.
Function Parameters
- The function parameters play a major role in the function call
- When you call a function you can pass the parameters (a value) through the function call
- In the below example code we have a function named fruit processor
- In the function, we have declared a variable called juice which has context juice with ${} apples and ${} oranges
- So here in the below example line no 29 we are passing two parameters for apples and oranges and calling the function
- When a function call happens these values pass into the declared functions which have arguments predefined and execute the required content
- That is how you pass the parameters while calling the function, Later you will get to know how do we store the function calls and return the variable in further lectures
function fruitProcessor(apples, oranges){
const juice = "juice with" $(apples) apples and $(oranges) "oranges.";
return juice;
}
const appleJuice = fruitProcessor(5,0);
console.log(appleJuice);
const appleOrangeJuice = fruitProcessor(2,4);
console.log(appleOrangeJuice);
const num = Number('23');
Function Return:
- This is another method that says how to print the variable
- The return statement is also a predefined rule of JavaScript functions which returns the value to be executed.
- It also states that the function declarations have come to an end
- If there is no value declared in the variable it prints an undefined value in the output
- In the code above we have specified return juice (variable)
- This returns the variable juice which has the content present in it when the function is called
- The return statement returns all types of data type
Function Expressions:
- In this lecture, you will get to know about function expressions and what is the difference between functions expressions and functions declaration
- Here in the image below, I have declared two functions in that one is functions followed by the function name and another one is a direct function that is stored in the variable name
- The storing of function in a variable and calling that function variable is called as functions expressions
- Here is the predefined syntax that one has to follow while declaring functions expressions
- Const variable = function name() {}
- Now you can call that function variable by passing the parameters
- So you know you have got to know about functions expressions
function calcAge1(birthYear){
return 2037-birthYear;
}
const age1 = calcAge1(1991);
console.log(age1);
const calcAge2 = function (birthYear){
return 2037-birthYear;
}
const age2 = calcAge1(1991);
console.log(age1, age2);
Conclusion
We should be able to create reusable functions in order to be more efficient in programming. We must complete all of the steps necessary to create a function. Now is the time to write some JavaScript functions and have some fun.
FAQ
1. Are JavaScript functions case-sensitive?
Yes, JavaScript is a case-sensitive language. The functions names in JavaScript typically must be in lowercase.
2. What types of functions will be supported by javascript?
It supports both named and anonymous functions while processing.
3. What is an anonymous function in javascript?
Usually, they are declared similarly as normal functions but without the name of the function.