All about Arrow Functions

Arrow Functions aka Fat Arrow Functions!!!

I struggle with arrow functions. Heck! I believe that most beginners (such as myself) struggle with arrow functions as beginners. I had to turn to individuals who knew more than I did, Bryan Guilas, who graduated from the same bootcamp as I did.

Let’s start with basic functions. Lets say you want to check the value of two numbers, and you want to find out if they are equal to each other or not. In the function you are passing two arguments. Lets just use generic language for the sake of this exercise (argOne, argTwo).

A function is created with an expression that also includes the keyword ‘function’. Functions can take no parameters, a couple parameters, or very many parameters. Although I wouldn’t see the point of several parameters in your functions. If someone can explain why you would need more than two or three parameters…I am all ears.

For the value tracker. The premise behind the value checker is to check and see if any of the two arguments that have passed are true or false. Or equal to, or not equal to (===/!==). Essentially, we are trying to find two variables. True or falseThe beginning of the function will look like this:

function valueChecker(argOne, argTwo) {
}

In the above block of code. You see that we have a function with the name of valueChecker that passes two parameters argOne, argTwo .

But the above function does not solve the problem. How do you solve the above problem to get a Boolean value? There are many ways you can compare two different arguments to return a Boolean, however, I am doing it the way I solved it. You would use an if/else statement. You could also use multiple if conditions, but for the purposes of this exercise. I will stick to using an if/else statement.

Next. We use an if statement with the beginning function.

function valueChecker(argOne, argTwo) {
if (argOne === argTwo) {
    return true
} else {
    return false
    }

How the above syntax is read states that the function called valueChecker passes two arguments argOne, argTwo . We then use the if statement to specify a block of code that will be executed if the statement is true. For instance. To explain this in more simple terms, in the first if condition it reads that if argOne is equal to argTwo then the result will return true. Otherwise, if the statement is false else , then the executed code will return false.

Next. We pass the two parameters argOne and argTwoin order to get a return value of either true or false. We use the let statement to declare a block scope variable to initialize a value.

Here is how that is executed.

function valueChecker(argOne, argTwo) {
if (argOne === argTwo) {
    return true
} else {
    return false
    }
}
let value= valueChecker("55", "20");
console.log(value);

We use the let statement in order to declare a block scope variable called value which then initializes valueChecker and passes two parameters argOne and argTwo . We then console.log (value) in order to get the variable of value defined and print the displayed message. Which in this case will be false, because 55 and 20 are not equal. However, if you pass two numbers of the same value such as 42 and 42 , you will then get true.

“What does the above function have to do with arrow functions?” You may be asking yourself…or not. But I believe that in order to understand arrow functions, you have to understand basic functions first. I am still a beginner programmer, so I am still learning, and I don’t know more than the person that is currently reading this. We learn together, and we learn with a purpose in mind. At least I hope that most programmers do.

Arrow Functions (or fat arrows) are essential in your programming journey/career. Functions in general should be in your daily arsenal since functions are everywhere in programming, and it is going to be a part of your daily repertoire as a programmer. The term ‘fat arrow’ as it suggests. Looks like a fat arrow => .

So lets take a look at the above function again to see a comparison/difference of the two.

function valueChecker(argOne, argTwo) {
if (argOne === argTwo) {
    return true
} else {
    return false
    }
}
let value= valueChecker("55", "20");
console.log(value);

The above function is great. However, we can make this function better, and less verbose. How do we do that? Well…we use arrow functions of course 😁.

In short. Arrow Functions are used to replace the word function. It is pretty much that simple. I know that is a trash explanation, but hey, it is how I have always remembered using arrow functions. An even better explanation is an arrow function, which was introduced in ES6 (ECMAScript 6) in order to write shorter, and more concise functions. In the above code, you can see that the function valueChecker takes approximately 9 lines to complete one block of code. However, with Arrow Functions, we can make this smaller. Like so:

const valueChecker = (argOne, argTwo) => {
    if (argOne === argTwo) return true; else return false;
 }

As you can see. The above block of code is shorter, and easier to read without all of the extra fluff. We essentially replaced the word “function” with an arrow => . We also made the if/else statement more readable by putting it on one line. You could also put your if/else statement on two lines:

const valueChecker = (argOne, argTwo) => {
    if (argOne === argTwo) return true; 
    else return false;
 }

It is all relative and it works. To make this even easier, and possibly more/less confusing, you can also do:

const valueChecker = (argOne, argTwo) => {
     return argOne === argTwo;
 }

I like this way of using an arrow function better, but again. It is a matter of preference. Some will like what I write. Some may not. But these two functions are for educational purposes, and hopefully someone like myself (a beginner programmer) can help someone who is learning how to program.

Don’t think I forgot about finishing the function:

const result = valueChecker('55','55');
console.log(result)

The above code snippet is the same as the original function, but we use const here as a constant variable since the two variables that we are passing through the two arguments will not change unless we go in and change it ourselves. For the sake of educational purposes we are just trying to get either true or false. When we put together the two snippets of code. We get something like:

const valueChecker = (argOne, argTwo) => {
     if (argOne === argTwo) return true; else return false;
}

 const result = valueChecker('55','55');
 console.log(result)

When you console.log(result) you will return true. Since argOne and argTwo are both the same value '55', '55' . In order to get a false return you just have to change either the first argument or the second argument.

Just a side note and I know this article is not about console.log, but whenever you console.log something. Make sure that you console.log the variable to test your code. In this case result is the variable, and after the equals sign valuChecker is the value. Just in case you did not know.

I hope you found this article informative, and educational. I try to write as much as I can about programming, and if I get some interest. I can definitely start writing more if you like my blog. Thanks again for reading, and happy coding everyone.

Follow me on Twitter and let me know what you think about this article Or not. Or tell me that my code is trash 😉.