Have you ever found yourself writing the same code repeatedly to achieve the same result as a JavaScript beginner?
Then you need to read this article meticulously because this is definitely the game-changer you need to make you a better developer who writes clean and well structured readable code using functions.
At the end of this article, you should already understand
1. What a functioned and how essential it is to programming
2. How to define a function using a variable and built-in function keyword
3. Types of function in JavaScript and what the differences arebetween them
4. Scoping and how they relate to function
What is a function and how essential is it to programming?
The function is the holy grail of programming. The way it helps us abstract away lots of code and saves it in a value is simply amazing.
Let me use a real-life picture to give you a better understanding of what a function is before delving into function programmatically:
Imagine how the car functions, how each function is abstracted away from the other and yet works simultaneously. So, the car can be doing several things at the same time without interrupting itself.
The driver doesn’t have to worry about what happens when he steps on the brake. He knows within himself that measures have been put in place to ensure that the brake does it’s job without interrupting the AC.
I can go on explaining what happens under the hood when a driver steps on the brake, but that would be me flexing my muscles in mechanical engineering. Though by now I think you already have an idea about what I’m talking about.
Segregating our codes into functions gives us a way to structure our larger program into smaller chunks. This makes sure that the variables defined within, remain local to the function and don’t interfere with other parts of our programs.
Functions also help avoid code repetition and flooding our namespace with so many variables.
How do you define a function?
You now understand what a function is and how useful it is to developers, so what ways can we define one?
One way is by declaring a variable where the value is written as a function.
let’s look at an example
“`
let square = function (x) {
return x * x;
};
console.log(square(2));
// prints 4 to the console
“`
What we did in the code above is – we declared a function and saved it in a variable name we defined as a square. What that means is that whatever the function returns will be the value saved in our square variable. Our function also takes in an input which is referred to as a function parameter and multiplies that input by itself.
In JavaScript, a function is declared starting with the function keyword. The function body must be wrapped in curly braces and that is where the main action happens. Functions can have multiple parameters or no parameter at all.
Let us look at another way we can define our function with another code example
“`
function greet() {
console.log(“Hello, World”);
}
greet();// prints Hello, World
“`
If you understood the first example, this wouldn’t be hard to comprehend either. What I did differently here is to start my function declaration with the JavaScript function keyword before its name.
The greet function has no parameter and a return keyword, which brings me to another point. In fact, it was one of the things I struggled with when I was learning JavaScript functions.
I always found myself asking how a return keyword differs from console.log in a function and since I don’t want you to pass through the same vicious circle let me elaborate.
Return keyword returns a value that can be saved separately in a variable and used afterward while console.log just prints out stuff and can’t hold a reusable value within the function.
Let us look at an example with our square function
“`
let square = function (x) {
return x * x;
};
let squareValue = square(2)
console.log(squareValue)
// prints out 4 to the console
function greet() {
console.log(“Hello, World”);
}
let greetValue = greet();
console.log(greetValue);
// return undefined
“`
I said earlier that functions can be declared with multiple parameters right so let us look at an example with an add function
“`
function add(a, b) {
return a + b;
}
add(2, 5);
// 7
“`
If you declare a function with two-parameter and finally give it one, it will return the second parameter as undefined, alternative if you declare a function with one parameter and gives it more than one argument, it will use the first argument and ignore the rest
“`
function add(a, b) {
return a + b;
}
add(2, 5, 7, 7);// 7
“`
Types of functions in JavaScript
Apparently, we have been looking at different types of ways we can write a function above and we have been using one type which is defining a function with the function keywords but let us look at another way we can achieve the same result without the function keyword.
Arrow function
Arrow function was recently introduced in ES6, honestly, I don’t see any major advantage of one over the other except for the fact that it deals with this problem when working with JavaScript classes (Classes will be discussed in a future article) but since it’s at our disposal, we should also know how it is defined in case we want to use it anytime.
“`
const add = (a, b) => a + b;
add(1, 2);
//prints 3
“`
First, we define our variable which will be the function name, and then the brackets that take in our parameters just like our normal function, and then the arrow before the return body. Don’t confuse the arrow with the “`>“` sign which means greater than. One good reason I prefer to use this function is that when my argument is one, I can omit the brackets for the parameter and also I don’t have to include the return keyword.
“`
const addSelf = (a) => a + a;
addSelf(1);
//prints 2
“`
IIFEs
Immediately invoked functions as they are known is just a convenient way for us to define anonymous functions on the go.
Let me elucidate so you can understand what I mean. There are times you don’t want to reuse a function and instead of declaring a function and keeping it in the namespace, you can just declare it and use it on the go. IIFEs gets called after it is declared.
let’s see some example
“`
const person = (age) => {
if (age < 21) {
(function () {
console.log(“young”);
})();
} else {
(function () {
console.log(“old”);
})();
}
return age;
};
person(30);
// old
//30
“`
Scoping and how they relate to functions
Now to be able to define useful functions that run without errors, you need to understand scoping and how they can affect the variables in your functions
They are two types of scoping in JavaScript and programming in general.
– Global scope
– Local Scope
All variables in the Global scope can be accessed in all parts of your program while those in your local scope can only be accessed in the scope in which they are defined.
“`
let a = 10;
function scopeSample() {
let b = 20;
console.log(a);
}
console.log(b);
scopeSample();
// b not visble in the global scope
// 10
“`
but when there is the same variable name in a different scope, the code will take the one in its innermost scope
“`
let a = 10;
function scopeSample() {
let b = 20;
let a = 5;
console.log(a);
}
console.log(b);
scopeSample();
console.log(a);
// b not visble in the global scope
// 5
//10
“`
Conclusion
By now you should understand what a function means, how useful they are, the different ways you can define them, and how you can prevent running into errors by scoping your variables the right way.
If you understood everything above, then you are on your way to becoming a better JavaScript developer and I am glad to be one of your guides through this journey.
I would appreciate your feedback in the comment section and I’m also curious about topics you would like to write about.
Share this article if you found it useful.
Keep coding 👍🏾
1 Comment
Thanks so much for this class, It truly gives me an insight of what function is.