Introduction to JavaScript Functions

JavaScript

Functions are one of the fundamental parts of programming and one of the first concepts that we should learn when we first start programming.

Learning how functions work and how to use them efficiently during the development process, took me lots of time to understand when I was a student. Well, 10 years ago we didn’t have that many tutorials and articles like today, thanks to the internet and content creators.

Now based on my experiences for a better understanding, it’s more suitable to explain JavaScript functions under 3 parts, each in separate posts:

In this introductory article, I will cover the fundamentals of a function that explains what a function is, its impact on programming, how to define, use and call it in your code.

What is a Function?

  • A function is a block of code that performs a task or a calculation
  • The code inside the function will only run(execute) if the function is being called(invoked)
  • A JavaScript function is also an object
  • Functions can take value(s) from outside and can return a value

Functions are one of the fundamental building blocks in JavaScript. — MDN Web Docs


Defining a Function

The ES5 Way

In order to create a function, we need 3 things: the function keyword, followed by the name of the function and parentheses:

function name() {
// code
}

and the code block is written between curly braces.

Parentheses are needed for execution.

or we can assign the function to a variable:

let name = function() {
// code
}

See here for more about JavaScript variables and the let keyword.

The ES6 Way

After ES6 has introduced in 2015, it brought a syntax change to JavaScript functions. 

We simply remove the function keyword and replace it with (=>) fat arrow:

let name = () => {
// code
}

This syntax is known as Arrow Functions. I will explain more about arrow functions in the 4th part later.

How does a Function Work?

OK so you’ve learned how to define a function and now let’s see how to use it. 

Considering that we have the code below:

let text = 'My first function';
console.log(text);

What here will happen is that JavaScript will start reading our code (from top to bottom) and will immediately execute the code after reading it.

However, when we put the same code inside a function:

function print() {
let text = 'My first function';
console.log(text);
}

JavaScript will still read the code but this time it won’t be executed because it is inside a function. Functions are code blocks to perform an operation but running(executing) them will only happen if we call(invoke) the function:

// JavaScript reads the code but does nothing here
function
print() {
let text = 'My first function';
console.log(text);
}
// We call the function and now it will be executed
print();

Calling a Function

And to call a function, we need to write its name followed by parenthesis. Without parenthesis, our function won’t be executed:

print();

So one advantage of using functions is that we can decide where and when to execute our code simply by calling the function.

Functions decrease Code Redundancy

We don’t want to write the same code again and again for each different task. Another advantage of using functions is that they can be called as many times as needed and this helps us to decrease code redundancy.

In other words, by using functions we write the code once, and later use it as many times as we need simply by calling it.

print();
print();
print();

We can even give different inputs to a function and get back different outputs. This can be done by using parameters & arguments that I will explain in my following articles.


Functions are very useful and important in programming and also in JavaScript. If you are new to programming, understanding functions can be quite confusing at the beginning and that’s OK. 

The best way to learn to code is by practice, so start writing your own functions and you will feel more comfortable with using them.

Next, you can read the 2nd part: Understanding Scope & the Return Keyword

If you have any questions, ask them in the comment section. If you want to learn more about web development, feel free to subscribe to our newsletter.

Thank you for reading!

2 comments on “Introduction to JavaScript Functions

Leave a Reply

Your email address will not be published. Required fields are marked *