Self-paced

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Bootcamp

Learn live

Upcoming live events

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Search from all Lessons

← Back to Lessons
• javascript

• functions

Edit on Github

# Working with Functions

What are Functions?

Mastering the use of functions is one of the 5 fundamental skills of building algorithms:

1. Variables.
2. Conditionals.
3. Arrays.
4. Loops.
5. Functions.

## What are Functions?

Basically, a function is a bunch of code wrapped between brackets that you can run anytime, whenever you like. For example:

1//the function name is "multiply" and receives 2 parameters: a & b
2function multiply(a, b) {
3    //the function returns the multiplication between those 2 parameters
4   return a * b;
5}
• Every function must have a purpose (a goal) (like our function “multiply”). The function's purpose is to calculate the multiplication between two given numbers.
• It must have a unique name. In this particular case, our function is called “multiply”, which is a great name because you know exactly what the function is about, it's explicit.
• It must return something. By default, in javascript all functions return “undefined” but you should override and always return something useful. In this example, we want to return the result of a & b multiplication.
• Functions may have parameters. A “parameter” is a variable that the function may receive at the beginning of its code (like a & b in our example).

The whole idea is to have a library of hundreds of functions and use them as you please, you declare all your functions, and later you start using and re-using them all the time.

1let resultOfMultiplication = multiply(2,4);
2// resultOfMultiplication will be 8

## But, why use Functions instead of just doing everything in one big chunk of code?

Coding is very abstract and usually, you forget what you wrote yesterday. Before functions existed, algorithms were this huge, never-ending series of lines of code where developers would have a hard time and get lost. It is hard for your brain to follow a procedure/algorithm of great length; the more lines of code, the more abstract it becomes.

By using functions, you have the following advantages:

• Divide and conquer: divide your algorithm into smaller sub-algorithms and focus on one problem at a time.
• Re-use your code by calling the function several times, dramatically reducing your code length.
• Organize your code: function names will tell you what that piece of code does, you can have all the functions in a separate file and re-use it in all your future developments.

If you think about it, functions are the equivalent of books. They store knowledge and ways of doing things, and in future developments, you re-use them instead of having to figure out everything all over again.

## The Function Scope

All functions must start and end somewhere, that it's called the scope of the function. You can delimit the boundaries using curly brackets like this:

1
2//this part of the code is OUTSIDE the 'multiply' function
3
4function multiply(a, b) {
5
6    //this part of the code is INSIDE the 'multiply' function
7
8   return a * b;
9
10    //this part of the code is INSIDE my function but it will never be executed because it is located AFTER the return statement.
11}
12
13//this part of the code is OUTSIDE the 'multiply' function 

Any variables that you declare inside the function will not be available outside of it.

1function multiply(a, b) {
2
3   let myVariable = 'hello';
4
5   return a * b;
6}
7
8console.log(myVariable);
9// this console.log won't work, it will trigger an error because myVariable was declared inside the function multiply, therefore it is not available outside.
10

☝ It is very important to remember that once you use the return statement the function will stop executing, if there is any code after that statement it will never be executed.

## Anonymous Functions

You can declare functions without names, but only if you store them in variables like this:

1const multiply = function(a, b) {
2   return a * b;
3}

## Calling Functions

The only way to use (a.k.a: call) a function is to use parentheses brackets like this:

1//this is how you call a function without parameters
2multiply();
3
4//this is how you call a function with parameters
5multiply(<first param>,<second param>);
6
7//for example, to multiply 3 times 9
8multiply(3,9);

Please remember to assign the function whatever parameters it should receive. In our example, the multiply function was declared, asking for two numbers to multiply. Play with the following example as you like:

.css-1mog2v{overflow-x:hidden;width:100%;margin:10px 0;}.css-1bx5ylf{display:block;position:relative;}.css-j8laeu{border-radius:4px 4px 0 0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 6px;background:#00041A;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}.css-1hzxxxg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}.css-1g6csra{outline:2px solid transparent;outline-offset:2px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);font-size:var(--chakra-fontSizes-md);padding-top:var(--chakra-space-2);padding-bottom:var(--chakra-space-2);-webkit-padding-start:var(--chakra-space-4);padding-inline-start:var(--chakra-space-4);-webkit-padding-end:var(--chakra-space-4);padding-inline-end:var(--chakra-space-4);color:var(--chakra-colors-blue-500);}.css-1g6csra:focus-visible,.css-1g6csra[data-focus-visible]{z-index:1;box-shadow:var(--chakra-shadows-outline);}.css-1g6csra:disabled,.css-1g6csra[disabled],.css-1g6csra[aria-disabled=true],.css-1g6csra[data-disabled]{cursor:not-allowed;opacity:0.4;}.css-b509i{margin-top:30px;height:2px;background:var(--chakra-colors-blue-500);border-radius:1px;}.css-1c1d3c2{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;white-space:nowrap;vertical-align:middle;outline:2px solid transparent;outline-offset:2px;line-height:1.2;border-radius:var(--chakra-radii-md);font-weight:var(--chakra-fontWeights-semibold);transition-property:var(--chakra-transition-property-common);transition-duration:var(--chakra-transition-duration-normal);height:var(--chakra-sizes-8);min-width:var(--chakra-sizes-8);font-size:var(--chakra-fontSizes-sm);-webkit-padding-start:var(--chakra-space-3);padding-inline-start:var(--chakra-space-3);-webkit-padding-end:var(--chakra-space-3);padding-inline-end:var(--chakra-space-3);color:var(--chakra-colors-white);}.css-1c1d3c2:focus-visible,.css-1c1d3c2[data-focus-visible]{box-shadow:var(--chakra-shadows-outline);}.css-1c1d3c2:disabled,.css-1c1d3c2[disabled],.css-1c1d3c2[aria-disabled=true],.css-1c1d3c2[data-disabled]{opacity:0.4;cursor:not-allowed;box-shadow:var(--chakra-shadows-none);}.css-1c1d3c2:active,.css-1c1d3c2[data-active]{background:var(--chakra-colors-gray-200);}.css-1c1d3c2:hover,.css-1c1d3c2[data-hover]{background:#ffffff29;}.css-8atqhb{width:100%;}.css-1qbr3jw{padding:0px;outline:2px solid transparent;outline-offset:2px;}.css-16jickz{height:290px;border-radius:0 0 4px 4px;overflow:hidden;}Loading...

## Nested Calling

You can combine functions however you want and have chained calls like this:

Loading...

☝️ You can click run on the code above to see the output

## Let’s see an Example:

The following code has 3 functions declared:

function getAverage(array: ages){ ... }

function getYoungest(array: ages){ ... }

function getPersonInfo(string: name){ ... }

As you can see, the function names are pretty specific about what the functions do, as well as the parameters assigned to them.

Here is the more detailed example:

Loading...

Other important things to notice:

• We are calling the function getPersonInfo two times, without using functions we would have to use more code, because we would have no option to re-use the function.
• The function getAverage is to get the average value on a given array. It knows nothing else, and that is great! By separating your code into little functions, you can focus on one thing at a time.