I was solving some JS challenges and noticed that when using arrow function the result es as expected, when i try same code using normal function it doesn't. Can someone explain the difference or i might have a typo!!

here is the first solution (works):

function titleCase(str) {
    str = str.split(' ').map(i =>  i[0].toUpperCase() + i.substr(1).toLowerCase()).join(' ')
    return str;
  }
   console.log(titleCase("I'm a liTTle tea pot")); // I'm A Little Tea Pot

And the second solution with normal function (returns empty string):

function titleCase2(str) {
    str = str.split(' ').map(function(i, index){ i[0].toUpperCase() + i.substr(1).toLowerCase()}).join(' ')
    return str;
  }
   console.log(titleCase2("I'm a liTTle tea pot")); // empty string

You can use My Plunker here

I was solving some JS challenges and noticed that when using arrow function the result es as expected, when i try same code using normal function it doesn't. Can someone explain the difference or i might have a typo!!

here is the first solution (works):

function titleCase(str) {
    str = str.split(' ').map(i =>  i[0].toUpperCase() + i.substr(1).toLowerCase()).join(' ')
    return str;
  }
   console.log(titleCase("I'm a liTTle tea pot")); // I'm A Little Tea Pot

And the second solution with normal function (returns empty string):

function titleCase2(str) {
    str = str.split(' ').map(function(i, index){ i[0].toUpperCase() + i.substr(1).toLowerCase()}).join(' ')
    return str;
  }
   console.log(titleCase2("I'm a liTTle tea pot")); // empty string

You can use My Plunker here

• javascript
• arrow-functions

Share Improve this question Follow asked Mar 18, 2017 at 22:52 shireef khatabshireef khatab 1,00522 gold badges1818 silver badges3333 bronze badges 2

• 1 if I remember the spec correctly, one line arrow functions return whatever that line is. Regular functions don't do that by default – Jhecht Commented Mar 18, 2017 at 22:54
• 1-line arrow functions implicitly return the line - regular functions need explicit return – hackerrdave Commented Mar 18, 2017 at 22:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You miss a return keyword inside the callback function.

Fat-arrow function returns a value by default, the return keyword is built-in. To get the value from the normal function expression, you have to return it.

function titleCase2(str) {
  str = str.split(' ').map(function(i, index) {
    return i[0].toUpperCase() + i.substr(1).toLowerCase()
  }).join(' ')
  return str;
}
console.log(titleCase2("I'm a liTTle tea pot"));

You need explicit return for non-arrow functions. 1-line arrow functions implicitly return the result of that one line.

function titleCase2(str) {
  return str.split(' ').map(function(i, index){ return i[0].toUpperCase() + i.substr(1).toLowerCase()}).join(' ')
}
console.log(titleCase2("I'm a liTTle tea pot")); // I'm A Little Tea Pot