Quick Guide to JavaScript Functions

What are arrow functions anyway

Deepak
Deepak
Jun 26 · 2 min read
Photo by Safar Safarov on Unsplash

Functions are the life of JavaScript and at first can be overwhelming. But as you get to know them, they are going to make your life a lot easier.

There are several ways to define a function in JavaScript here is your guide to them. I will try to keep it as simple as possible.

Function declaration

function myName(parameter) {
console.log(parameter);
}

It is the most common methods of declaring a function using function keyword and then giving it a name followed by parenthesis. You can pass arguments in these parenthesis. Multiple arguments can by given separated by commas.

Then you can call a function by its name in order to run it.


Function expression

const myName = function(parameter) {
console.log(parameter);
}

Here we remove the function keyword from the beginning and declare it as a variable. We the assign it a value equal to function. It can also take arguments and when the function gets called, it runs the code within the block.


Arrow functions

const example = () => {
//...
}

This might be the reason why you came here. Arrow functions are great when it comes to simplifying our code and can help you write much cleaner shorter code. Let us take an example and compare arrow function with normal function.

//As function declaration

Now doing it with arrow function

//Declaring it with arrow function

To write arrow function remove the function keyword and instead declare it as const. Add an = sign between name and the parameters and the parameters are followed by the fat arrow => and then the block of expression.

We can omit the curly braces if you need to return only one line of code. Along with this the return keyword is also removed.

If you have only one argument, then the parenthesis can also be removed.

const oneArgument = num1 => num1++ ;

But in case of no argument, you have to keep the parenthesis.

const noArgument = ()=> console.log(2);

Function constructor

const example = new function("parameter", "console.log(parameter)");

This is yet another way of declaring a function.


The Takeaway

There is no best way to do it and it often depends on the job you want to do. One thing to remember is that some frameworks like Vue do not use arrow functions so make sure to check out the manual before using them in your project.

Frontend Weekly

It's really hard to keep up with all the front-end…

Deepak

Written by

Deepak

writing experiences about happiness, love, and productivity, a web developer too. Let’s chat deepakgangwar4265@gmail.com

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Deepak

Written by

Deepak

writing experiences about happiness, love, and productivity, a web developer too. Let’s chat deepakgangwar4265@gmail.com

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store