This is part 2 in the Coding Bytes series, earlier parts are listed below:
What is a Function?
A function
is in fact an object
designed to perform a specific task, often on a repetitive basis.
Defining a Function
There are a few ways of defining a function
, but we will focus on the most basic, so arrow functions/ ES6 functions
will be overlooked for now.
function nameOfFunction (parameters) {
statement;
}
As seen in the example above, the function
keyword is used to define a function
. The keyword is followed by a name of your choosing but it is normally good practice to describe what the function
does - more on this below.
After naming the function
we have the parameters
in parentheses ( )
followed by our statement in curly braces { }
. You can have up to 255 parameters
defined separated by a comma. Parameters
are similar to placeholders wherein the function
knows to look for these to perform its intended use. You may encounter the term arguments
used inter-changeably, but there is a slight difference, which is better explained in an example.
ℹ️ If you are using Chrome, you can try following along in the console.
Example
In our example, my friend is a carpet fitter who needs to work out the area
of a room so he knows how much carpet is required. We know that area = length x width
, so how do we put this in a function
?
function area (length, width) {
return length * width;
}
In the example, our function
is named area and the parameters
are length, width
. You can see a return
statement which stops the execution of the function and tells the function what we are expecting to see as a response. In the statement, we are asking for the length
and width
to be multiplied. In short, the task of our function is to multiply the parameters
.
Invoking a Function
Invoking
a function
is just a fancy way of 'calling' a function
. To call a function
we just need to reference it by its name followed by parentheses. We can refer back to our example above and invoke
the area function
.
area(10, 5);
As you can see, we call the area
function but you will notice the 10,5
in the ()
. The two numbers represent the length, width
we mentioned earlier, otherwise known as parameters
. But here, because they are data being given to the function - we call them arguments
. Hopefully it is easier to see the difference between the two now 😃 .
All we are saying in the invocation
above is, run the area
function
and use 10,5
as arguments
. As we know our function
is set to multiply the two arguments
, resulting in the output of 50. Congratulations 🎉 we created and invoked
our first function
.
Further Learning
This was just a very basic function
, but you can do so much more! To practice further, think about where a function
can come in handy and try to create one. There is another example below, try to understand what it may do before copying it in to your console
.
function sayHello(name, age){
console.log(name + " is " + age + " years old.");
}
You will need to research what console.log()
does, and remember strings are wrapped with " "
. Good Luck!
Thanks for reading. To keep up with my coding journey come say hi 👋 on twitter or on our #devNewbie Discord server where we have a friendly group of learners sharing their experiences.
Top comments (2)
This is awesome, Waqar! Thank you for sharing.
Thank you. Glad you found it useful.