Functions in JavaScript: A Comprehensive Overview
The function is a concept that is in every discipline of programming in a particular way. With the functions, a programmer can turn segments of a code that accomplish specific tasks into pieces of code that can be used repeatedly. Functions in JavaScript are also very extensive and fundamental because they help in the structuring of the code. Whether you are thinking about making websites or building applications, it is imperative that you master how you can handle the creation of functions in JavaScript, as you will have to apply this knowledge frequently.What does Function mean in Java Script?
A function in JavaScript is a piece of code that is associated with a specific operation, its given code. After a function has been created, there is no need to create it again, but instead, you can call it any time using the call or invoke keyword if you want to execute that function. Tasks are completed faster through the use of functions because there is no need to write the same source code continuously.The input of a function also called 'argument' can be in the form of values or might be given and the output produced as a product return. Functions can be viewed as a low level building block of code that assists in creating highly structured programs or code in an aspect oriented way. Instead of attacking large tasks head on, when you have functions at your disposal, you could take them and divide them into small, more understandable tasks.
Introduction to Functions
First, to define a function in JavaScript you employ the keyword "function" followed by the name then add the parenthesis plus the braces. Therefore, whatever you want the function to execute will be added between the braces.The syntax of the function from a high level looks like this.
Function Syntax
function functionName() {
// Code you want to be run
} sayHello Function Example
function sayHello() {
console.log("Hello, world!");
} Invoking a Function
So, once a function is defined, the function can be called from anywhere in the code. Add the name of the function together with the parenthesis and this will invoke the function. Additionally, if the function expects arguments, those are also included in the parentheses while calling the function.From the example above the procedure for invoking the `sayHello` function would be:
Invoking a Function
sayHello();//this will print to the console "Hello, World!" Arguments and Parameters
When calling a function, you may also notice the existence of parameters. Because they serve as placeholders, two terms need elaboration here. The first is when you supply a function with parameters or arguments; arguments are the values supplied to a function.Each of the parameters is defined in the function declaration running the basic structure as before and placing the required items to be enclosed in a pair of brackets. For example, if a function is meant to greet a person by their name, it can be defined with a parameter called the `name` such as:
Function with Parameter Example
function greet(name) {
console.log("Hello, " + name + "!");
} Invoking Function with Argument
greet("John"); // Lets say John is a person whose details this program has his name 
Moreover, in some instances, what has been explained above can be considered more generic; for instance, you are free to transfer random names that alter every consecutive time the function is called. This helps applications and programs that utilize this functionality to work more smoothly, as they do not require users to be limited in a blanket approach. For example:
Invoking Function with Different Arguments
greet("Alice"); // Outputs "Hello, Alice!"
greet("Bob"); // Outputs "Hello, Bob!" Return Values
However, as some functions cannot cause things to be done and at the same time produce desired outputs, other functions do return a value by performing a calculation that has a specific necessity and sending or passing such a value to the part of the program or global scope that invoked the function. This is done using the `return` keyword.The output of a function may be used outside of that given function owing to its return value. For example, suppose you wish to implement a function which calculates the sum of two values and displays the answer. In that case, you would define the function like so:
Function with Return Value Example
function add(a,b)
{
return a + b;
} Invoking Function and Storing Result
let sum = add(5, 3); // sum will be now 8
console.log(sum); // Will print 8 on the console Function Expressions
The use cases of a function declaration were mentioned above, but along with that, function declaration is also possible using function expressions in javascript. The term function expression refers to defining a function and assigning that function to some variable.Let's take this as an example:
Function Expression Example
const multiply = function(a, b) {
return a b;
}; Invoking Function Expression
console.log(multiply(4, 2)); // This will output 8 Arrow Functions
After the ES5 standard, arrow functions are one of the additions made to javascript ES6, arrow functions use a different way of writing functions in javascript in a more progressive and shortened form. An arrow function is a function expression accompanied by a pair of parentheses and an arrow between the parameters and the function body.Here's how you can write the same `add` function but instead of a normal function you can use an arrow function:
Arrow Function Example
const add = (a,b) => {
return a + b;} Simplified Arrow Function
const add = (a, b) => a + b; Scope of Functions
Each function in java script operates with its own scope which determines the extent to which a certain variable can be used. Variables defined within the confines of a function are accessible only within that specific function and not outside and are termed as local. On the contrary, global variables which have been defined outside a function can be used anywhere in the program.When using a variable it is particularly important to understand its scope as it may help protect against errors. Scope restricts the use of a variable to the block in which it is defined, hence, a variable that is declared within a function is said to be local to the function and can only be referenced within the particular function:
Local Variable Example
function test() {
let x = 10;
console.log(x); // This will output 10
}
console.log(x); // This will result in an error because x is not defined outside the function Global Variable Example
let x = 5;
function test() {
console.log(x); // This will output 5
}
Article
Be the first comment
