Functions tutorial in javascript

JavaScript Functions

A JavaScript function is a block of code designed to perform a particular task.

A JavaScript function is executed when «something» invokes it (calls it).

Example

JavaScript Function Syntax

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().

Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

The parentheses may include parameter names separated by commas:
(parameter1, parameter2, . )

The code to be executed, by the function, is placed inside curly brackets: <>

Function parameters are listed inside the parentheses () in the function definition.

Function arguments are the values received by the function when it is invoked.

Inside the function, the arguments (the parameters) behave as local variables.

Function Invocation

The code inside the function will execute when «something» invokes (calls) the function:

• When an event occurs (when a user clicks a button)
• When it is invoked (called) from JavaScript code
• Automatically (self invoked)

You will learn a lot more about function invocation later in this tutorial.

Function Return

When JavaScript reaches a return statement, the function will stop executing.

If the function was invoked from a statement, JavaScript will «return» to execute the code after the invoking statement.

Functions often compute a return value. The return value is «returned» back to the «caller»:

Example

Calculate the product of two numbers, and return the result:

// Function is called, the return value will end up in x
let x = myFunction(4, 3);

function myFunction(a, b) // Function returns the product of a and b
return a * b;
>

Why Functions?

With functions you can reuse code

You can write code that can be used many times.

You can use the same code with different arguments, to produce different results.

The () Operator

The () operator invokes (calls) the function:

Example

Convert Fahrenheit to Celsius:

function toCelsius(fahrenheit) <
return (5/9) * (fahrenheit-32);
>

Accessing a function with incorrect parameters can return an incorrect answer:

Example

function toCelsius(fahrenheit) <
return (5/9) * (fahrenheit-32);
>

Accessing a function without () returns the function and not the function result:

Example

function toCelsius(fahrenheit) <
return (5/9) * (fahrenheit-32);
>

Note

As you see from the examples above, toCelsius refers to the function object, and toCelsius() refers to the function result.

Functions Used as Variable Values

Functions can be used the same way as you use variables, in all types of formulas, assignments, and calculations.

Example

Instead of using a variable to store the return value of a function:

You can use the function directly, as a variable value:

You will learn a lot more about functions later in this tutorial.

Local Variables

Variables declared within a JavaScript function, become LOCAL to the function.

Local variables can only be accessed from within the function.

Example

// code here can NOT use carName

function myFunction() let carName = «Volvo»;
// code here CAN use carName
>

// code here can NOT use carName

Since local variables are only recognized inside their functions, variables with the same name can be used in different functions.

Local variables are created when a function starts, and deleted when the function is completed.

Источник

What are Functions in JavaScript? A Beginner’s Guide

Chinwendu Enyinna

Functions are one of the fundamental concepts in programming. They let us write concise, modular, reusable, and maintainable code. They also help us obey the DRY principle when writing code.

In this article, you will learn what functions are in JavaScript, how to write your own custom functions, and how to implement them.

As a prerequisite, you should be familiar with some fundamental JavaScript concepts such as variables, expressions, and conditional statements to follow along with this article.

What is a Function in JavaScript?

A function is a block of reusable code written to perform a specific task.

You can think of a function as a sub-program within the main program. A function consists of a set of statements but executes as a single unit.

In JavaScript, we have some browser built-in functions like alert(), prompt(), and confirm(). You have probably used these in your project before, right? But you can still create your own custom functions.

There are several ways to define a function. Most commonly, we have function declaration and function expression.

How to Define a Function using Function Declaration

You write a function declaration like this:

Basically, it consists of the following:

• Function keyword
• The name of the function
• Parentheses (which can take in parameters, or also be empty)
• The body of the function (wrapped in curly braces).

This function won’t do a thing – in this case, output Hello world – unless you call it. The term for this is invoking the function.

Here’s how to call the function:

sayHello(); //output: Hello world

To invoke this function, we call it like this:

You can see a slight difference between our first function example and the second.

If you guessed that it’s the content within the parenthesis of the second function, then you’re right!

The function sum() took in two parameters when we defined it – num1 , and num2 . And when we call it, we passed in two values – the arguments, 1 and 2 . Let me explain what these two terms (parameters and arguments) mean.

A parameter is a variable you pass to a function when you declare it.

Suppose you want your function to be dynamic, so that it applies the function’s logic to different sets of data at different times. That’s where parameters come in handy. This way, your function doesn’t just output the same result repeatedly. Instead, its result is dependent on the data you pass in.

An argument, on the other hand, is the value equivalent to the parameter that you pass to the function when you call it.

So the syntax for declaring a function with parameters will look like this:

function nameOfFunction(parameters)< //function body. >

How to Define a Function using a Function Expression

A function expression is another notation for defining a function. In terms of syntax, it is similar to the function declaration. But function expressions allow you to define a named function or omit the function name to create an anonymous function.

Let’s see what a function expression looks like:

let namedFunction = function myFunction()< //some code here. >

Notice that in this example, the function has a name, myFunction . This is not the case with the anonymous function. When defining an anonymous function, you omit the function name just like in this example below:

let anonymousFunction = function()< //some code here. >

You can see that both function examples are assigned to a variable, right?

A function keyword creates a function value that can be assigned to a variable when it is used as an expression.

So, to invoke this function, we call it using the variable name which serves as the new function name.

One major difference between the function declaration and function expression is that, with function declaration, you can invoke the function even before defining it. This is not possible with function expressions.

console.log(greeting()); function greeting() < console.log("Hope you're are good?"); >//output: Hope you're good?

This won’t work if the function is defined as a function expression because the function expression follows a top-to-bottom control flow sequence.

How to Use Arrow Functions in JavaScript

Arrow functions are yet another notation of a function expression but they have a shorter syntax. They were introduced in ES6 and help us write cleaner code.

Here, the function keyword is excluded and we use an arrow symbol (=>) instead. The syntax looks like this:

let nameOfFunction = (parameters) => < //function body >

If the function body within the curly braces contains only a single statement, then the braces can be omitted. An arrow function with curly braces must include the return keyword.

What are Immediately Invoked Function Expressions (IIFEs)?

IIFE is another function expression notation (explicitly an anonymous function) that works in isolation and is independent of any other code. It gets invoked immediately where it is defined.

A use case of IIFE would be to enclose a variable that you may likely not use again inside your code. So, as soon as the function is executed, the variable ceases to exist.

How to Use the Return Keyword in a Function

To create a function that will resolve to a value after the function is invoked, you use the return keyword. You write this within the body of the function.

return is a directive that returns a value to the function after the code within it has been executed.

Here’s an example of a function that returns a value, in this case, the sum of two numbers:

function sum(a, b) < return a + b; >sum(10, 20); //output will be 30 

Using return inside a function makes it easy to manipulate the data the function returns, by either passing it as a value to, say, another function, or performing additional operations on it.

How Do Function Scope and Closures Work in JavaScript?

A scope is a nested namespace that localizes the names created within it such that these names don’t interfere with similar names created outside of that scope. There are certain scope rules that apply within a function.

Each new function you define creates a new scope known as the function scope. Variables created within the function scope are not visible or accessible outside of that scope.

Nevertheless, variables created outside the function scope but within the scope in which the function is defined can be accessed inside the function. Therefore, if you define a function in global scope, it can access all variables declared in that global scope.

Also, suppose you have a child function (that is, an inner function) nested inside a parent function (which is the outer function). The child function can access all variables and functions declared in its parent function as well as all variables and functions the parent function has access to – even when its parent function has finished executing and its variables are no longer accessible outside that function. This concept is known as closures in JavaScript.

However, the parent function cannot access the variables created inside the child function. In this way, the variables and functions inside the child function are confined to their own scope.

Let’s see a code example of this:

//variables defined in the global scope let a = 40; let b = 20; //this function is also defined in the global scope function parentFunc() < //access variables a and b inside this function console.log(a + b); >//output: 60 

Suppose I nest an inner function inside the parent function, like this:

//variables defined in the global scope let a = 40; let b = 20; //this function is also defined in the global scope function parentFunc() < let name = “Doe”; //this inner function is defined inside the parent function scope function childFunc()< console.log(`$is $ years old`); > return childFunc(); > parentFunc(); //ouput: Doe is 20 years old 

Now, if I create a variable inside a function and try to access it from the global scope, we will get a reference error. This is because that variable is local to the function scope and is not visible to the global scope.

console.log(c); function parentFunc() < let c = 30 >//output: reference error - c is not defined

Let’s try to access a variable created inside a nested function in the parent function:

function parentFunc() < console.log(age); function childFunc()< let age = 20; >return childFunc(); > parentFunc(); //output: reference error - age is not defined. 

How Do Default Parameters Work in JavaScript?

Originally, function parameters are assigned undefined when no value is explicitly passed to them. Default parameters let you assign a default value to a parameter when you define a function. For example:

function greeting(name, message = ”Hello”) < console. log(`$$`) > greeting(‘John’); //output: Hello John //you can also assign a new value to the default parameter //when you call the function greeting(‘Doe’, ‘Hi’); //output: Hi Doe 

It is important to note that in declaring a default parameter, it must come after the regular parameter.

How Do Rest Parameters Work in JavaScript?

With rest parameters, you can define a function to store multiple arguments in a single array. This is particularly useful when you’re invoking your function with multiple arguments. Here’s an example:

function sayHello(message, . names) < names.forEach(name =>console.log(`$ $`)); > sayHello('Hello', "John", "Smith", "Doe"); /* output: Hello John Hello Smith Hello Doe */ 

The . is what makes names a rest parameter.

Just like default parameters, rest parameters should appear after any regular parameter in your function.

Conclusion

In this article, you learned what functions in JavaScript are all about and how you can write your own functions.

With functions, you can organize your code by grouping everything into separate blocks that perform different tasks.

I hope you enjoyed reading this article. To learn more about functions, here are some resources you can check out:

That’s all for this piece. Happy coding 🙂

Источник