Set Default Parameters for Your Functions -- converting to arrow function

JavaScript
1

Tell us what’s happening:
I converted the original into arrow function but had to make it anon function. How do I name the function using arrow function?

Your code so far


const increment = (number, value = 1) => number + value;
 
console.log(increment(5, 2)); // returns 7
console.log(increment(5)); // returns NaN

following is the original code

const increment = (function() {
  "use strict";
  return function increment(number, value) {
    return number + value;
  };
})();
console.log(increment(5, 2)); // returns 7
console.log(increment(5)); // returns NaN

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions

2

How do I name the function using arrow function?

You can’t. The arrow functions are always anonymous.

You should not modify the challenge structure^^

3

This is a little misleading. It is true that the following does not work:

myFunc () => // do stuff

However, you can name arrow functions. Take a look at the following snippet:

const myFunc = () => // do stuff
myFunc() // Will call myFunc

For almost all purposes, this works. E.g, if there is an error, the name you gave the function will be in the stack trace found in the console. There is one little shortcoming, illustrated below:

function myFunc()  {
    // do stuff
}

console.log(myFunc.name) // returns 'myFunc'

const arrowFunc= () =>  // do stuff

console.log(arrowFunc.name) // returns undefined

However, situations where function.protoype.name is useful are incredibly rare

So, looking at your exmaple, you could write this:

const increment = (() => {
    const increment = (number, value) => number + value;  
    return increment;
})();

console.log(increment(5, 2)); // returns 7
console.log(increment(5)); // returns NaN

Although, giving a function the same name as its parent function is bad practice, and really, this function doesn’t need to be named at all. So I would much rather write

const increment = (() => (number, value) => number + value);

like you have done.

3 Likes
4

However, you can name arrow functions

You can bind your anonymous arrow function to a variable ^^

Anyway, thanks for the good explanation, it provides a lot of useful details :+1:

1 Like
5

You are indeed correct. Binding is a more correct word. Thanks for the correction.

1 Like
6

@christofferaakre

For the sake of not getting confused with semantics later on.

  • Binding refers to what context the function’s this runs in. Not the act of assigning it to a variable.

  • Arrow functions are anonymous function expressions, so therefore can be assigned to a variable.

  • When we refer to named functions, we mean

// Function declaration - statements don't get assignments
function namedFunc() {}

// Function expression - named (optional)
const namedExpression = function namedExpression() {}

Mdn:

The variable assigned to a function expression will have a name property.
function expression - JavaScript | MDN

More on statements and expressions:

2 Likes
7

const increment = (nm,value=1) =>nm+value;
console.log(increment(5, 2)); // returns 7
console.log(increment(5)); // returns 6