-1

I'm brand new to JavaScript and currently learning about writing functions shorthand. I just came across this while studying:

const groceries = (groceryItem) => ' - ' + groceryItem;

Is it acceptable/best practice in the real world to write functions like this? (no return, no brackets) I notice that it may be annoying to expand upon. Or is this just standard practice?

I also notice shorthand if statements that have no brackets as well. Also standard practice?

I want to learn good habits early on, so any advice on this matter would be greatly appreciated.

bax
  • 109
  • 6
  • 1
    There is nothing bad, as long as instruction of this function is short. But in the end it all comes to our individual preferences. – Beri Feb 26 '18 at 19:16
  • It is common, and I would say preferable for short functions like this. I wouldn't say the naming makes particular sense in this example though. – Damon Feb 26 '18 at 19:18
  • Here's a helpful link: https://github.com/airbnb/javascript#arrow-functions – trs Feb 26 '18 at 19:18
  • In my opinion, as long as you can read and understand what the instruction actually do, you can write it as you like it. I would write it like `const groceries = groceryItem => \`- ${groceryItem};\`` – Striped Feb 26 '18 at 19:21

3 Answers3

3

There are several ways to declare functions and there are use cases and pros and cons to each. As a result, there is no "preferred" way. Use the appropriate syntax for your situation.

Below is a summary of the different ways to set up functions with a brief explanation of each. Click on the heading link to be directed to more in-depth resources on that type:

Function Declaration:

function foo(){

}

With a function declaration, the entire function is hoisted (regardless of it's actual location in the code) to the top of the enclosing scope. This makes it possible to invoke the function prior to its declaration point.

Function Expression:

var foo = function(){


}

Function expressions are just variable declarations that assign a function (as data) to the variable. As with function declarations, there is hoisting here too, but only the variable (foo in this example) declaration gets hoisted, not the assignment, so in this case you could not invoke the function prior to its declaration.

Arrow Functions:

const groceries = (groceryItem) => ' - ' + groceryItem;

This is simply a short hand syntax instead of using a function expression. However, there is a difference with an arrow function. With Arrow Functions, the object that this binds to is not affected within the function, while it is affected in a non-arrow function.

Immediately Invoked Function Expression:

(function(){

})();

An Immediately Invoked Function Expression (IIFE) is an anonymous function (a function with no name) that is turned into an expression by wrapping it with parenthesis and then immediately invoked with another set of parenthesis. This syntax is very common in JavaScript and is used to create a scope that doesn't conflict with other scopes.

NOTE:

Functions are the work horses of JavaScript, depending on how you set them up and invoke them, they do many different things:

  • They can be units of directly invocable code.
  • They can be the value of a variable or property.
  • They can be constructor functions that are used to instantiate Object instances.
  • They can be raw data that is passed around via arguments.
Scott Marcus
  • 57,085
  • 6
  • 34
  • 54
  • Wow thank you so much for the explanation. This will help me tremendously. – bax Feb 26 '18 at 19:31
  • Honesty, I don't know how to mark as the answer. Maybe since I'm brand new, I cannot do that? Sorry. – bax Feb 26 '18 at 20:16
0

Yes, I think this is considered acceptable, since arrow functions were specifically designed to allow it. One of the features of arrow functions is that they allow very simple functions to be written as one-liners like this. When you can calculate the return value as a single expression, you don't need to write the body with braces around it or the return statement explicitly. This makes traditional functions needlessly verbose, with more boilerplate than the actual code of the function. The traditional alternative would look like:

const groceries = function(groceryItem) {
    return ' - ' + groceryItem;
}

This isn't so bad when defining a named function, but when you're using an anonymous function as a callback, all that verbosity may obscure the intent. Compare:

newarray = oldarray.map(function(x) {
    return x * x;
}

with:

newarray = oldarray.map(x => x * x);

Arrow functions are a recent addition to the language, so I think we can assume that the design was given significant consideration. If the Javascript community didn't feel that shorthand functions like this were a good idea, they wouldn't have been allowed in the first place.

Barmar
  • 596,455
  • 48
  • 393
  • 495
-1

The function you wrote is what is commonly known as a "arrow function". They can prove very useful when you get to a somehow more advanced level in JavaScript and there is absolutely nothing wrong with them. On the contrary. Very commonly used with "higher order functions" for arrays, to give an example.

Alejandro G.
  • 49
  • 5