DEV Community

Cover image for Understanding Functions in JavaScript
Maria Nazaryan
Maria Nazaryan

Posted on

Understanding Functions in JavaScript

A function is a block of code that performs an action or returns a value. Functions are custom code defined by programmers that are reusable and can therefore make your programs more modular and efficient.
How to define a function in JavaScript
Functions are defined, or declared, with the function keyword.

Image description
For example, here I created a function sum writing function then its name: sum then arguments; a and b.
The declaration begins with the function keyword, followed by the name of the function. Function names follow the same rules as variables — they can contain letters, numbers, underscores, and dollar signs, and are frequently written in camel case. The name is followed by a set of parentheses, which can be used for optional parameters. The code of the function is contained in curly brackets, just like a for statement or an if statement.
Okay, in our function sum we gave it arguments a and b in () brackets. Then in the curl brackets {} we should write console.log or in my case alert and the “thing” we want our function to do. In my case it’s the sum of a and b. The function will not work if we let it like that. After everything we have done, we should call the function for it to work. As you see I have written sum (5,4). This means a is 5 and be is 4. After running the code, I got 9 because 5+4 is 9. Easy!

Function Parameters and arguments

Arguments are objects or primitive values being passed to the function; parameters are declarations for the local variables used inside the function to access the arguments.
Using parameters, we can add additional functionality that will make the code more flexible. Parameters are input that get passed into functions as names and behave as local variables.

Image description
In this function the parameters of function are a and b. And then in the end I added values of a and be as 5 and 4. We ad parameters in our function for commanding what to do with those parameters then. In this case we said to do a +b, the sum of our paraments.
In addition to parameters, variables can be declared inside of functions. These variables are known as local variables and will only exist inside the scope of their own function block. Variable scope determines variables’ accessibility; variables that are defined inside of a function are not accessible from outside of the function, but they can be used as many times as their function is used throughout a program.

Returning Values
More than one parameter can be used in a function. We can pass multiple values into a function and return a value. We will create a function to find the subtraction of two values, represented by x and y.

Image description

Image description

In the program above, we defined a function with the parameters x and y, and then passed the values of 10 and 9 to the function. When we run the program, we’ll receive the subtraction of those numbers as the output. (1)
When the return keyword is used, the function ceases to execute and the value of the expression is returned. Although in this case the browser will display the value in the console, it is not the same as using console.log () (in my case it is alert) to print to the console. Invoking the function will output the value exactly where the function was invoked. This value can be used immediately or placed into a variable.

Function Expressions
We can also create a function expression by assigning a function to a variable.

Image description

I have created a constant named “hanum” and I put the same sub function in variable hanum. In the end I called the variable hanum with parameters 10 and 15.
As we see the result is -5.

Image description
Nested Functions
You can create functions anywhere, even nested inside another function:
Functions & Scope
In JavaScript, there are two types of variables based on where they're accessible: global variables and local variables. Global variables are available throughout a program, while local variables are confined to a function or a block.

The keyword you use to declare a variable and the location where you declare it combine to determine whether it is global or local. Ignoring var for now, we'll focus on let and const instead.
Global Variables

Image description

Image description

As the name suggests, global variables have global scope, which means they are available everywhere within a program. You can read and reassign them at any time. Any variable declared inside a function or block is a local variable - everything else is a global variable.

This program produces the same output as before. However, here we use greeting from within the function. We created a variable and then we assigned that variable’s value into function. Both of them print “Good Morning” as a result.

Local Variables
As the name suggests, local variables in JavaScript have a local scope, meaning that you can't access them outside the function that declares them. As with global variables, where you declare a local variable determines its scope.

Image description

In this case I put let greeting into this function. It will work only in the function. If I try to use this let greeting in somewhere else, outside of function it will bring and ERROR.

Top comments (0)