Why doesn't my arrow function return a value?

up vote
11
down vote

favorite

I have an arrow function that looks like this (simplified):

const f = arg => { arg.toUpperCase(); };

But when I call it, I get undefined:

console.log(f("testing")); // undefined

Why?

Example:

const f = arg => { arg.toUpperCase(); };

console.log(f("testing"));

(Note: This is meant to be a clean, canonical dupetarget for the specific issue with arrow functions above.)

asked Aug 18 '17 at 10:54

community wiki

T.J. Crowder

add a comment |

up vote
11
down vote

favorite

I have an arrow function that looks like this (simplified):

const f = arg => { arg.toUpperCase(); };

But when I call it, I get undefined:

console.log(f("testing")); // undefined

Why?

Example:

const f = arg => { arg.toUpperCase(); };

console.log(f("testing"));

(Note: This is meant to be a clean, canonical dupetarget for the specific issue with arrow functions above.)

asked Aug 18 '17 at 10:54

community wiki

T.J. Crowder

add a comment |

up vote
11
down vote

favorite

I have an arrow function that looks like this (simplified):

const f = arg => { arg.toUpperCase(); };

But when I call it, I get undefined:

console.log(f("testing")); // undefined

Why?

Example:

const f = arg => { arg.toUpperCase(); };

console.log(f("testing"));

(Note: This is meant to be a clean, canonical dupetarget for the specific issue with arrow functions above.)

asked Aug 18 '17 at 10:54

community wiki

T.J. Crowder

I have an arrow function that looks like this (simplified):

const f = arg => { arg.toUpperCase(); };

But when I call it, I get undefined:

console.log(f("testing")); // undefined

Why?

Example:

const f = arg => { arg.toUpperCase(); };

console.log(f("testing"));

(Note: This is meant to be a clean, canonical dupetarget for the specific issue with arrow functions above.)

const f = arg => { arg.toUpperCase(); };

console.log(f("testing"));

const f = arg => { arg.toUpperCase(); };

console.log(f("testing"));

javascript ecmascript-6 arrow-functions

asked Aug 18 '17 at 10:54

community wiki

T.J. Crowder

asked Aug 18 '17 at 10:54

community wiki

T.J. Crowder

asked Aug 18 '17 at 10:54

community wiki

T.J. Crowder

community wiki

T.J. Crowder

community wiki

T.J. Crowder

add a comment |

1 Answer
1

active

oldest

votes

up vote
15
down vote

accepted

When you use the function body version of an arrow function (with {}), there is no implied return. You have to specify it. When you use the concise body (no {}), the result of the body expression is implicitly returned by the function.

So you would write that either with an explicit return:

const f = arg => { return arg.toUpperCase(); };

// Explicit return ^^^^^^

or with a concise body:

const f = arg => arg.toUpperCase();

Examples:

const f1 = arg => { return arg.toUpperCase(); };

console.log(f1("testing"));



const f2 = arg => arg.toUpperCase();

console.log(f2("testing"));

Slightly tangential, but speaking of {}: If you want the concise arrow's body expression to be an object initializer, put it in ():

const f = arg => ({prop: arg.toUpperCase()});

edited Aug 18 '17 at 11:55

community wiki

3 revs
T.J. Crowder

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f45754957%2fwhy-doesnt-my-arrow-function-return-a-value%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
15
down vote

accepted

So you would write that either with an explicit return:

const f = arg => { return arg.toUpperCase(); };

// Explicit return ^^^^^^

or with a concise body:

const f = arg => arg.toUpperCase();

Examples:

const f1 = arg => { return arg.toUpperCase(); };

console.log(f1("testing"));



const f2 = arg => arg.toUpperCase();

console.log(f2("testing"));

Slightly tangential, but speaking of {}: If you want the concise arrow's body expression to be an object initializer, put it in ():

const f = arg => ({prop: arg.toUpperCase()});

edited Aug 18 '17 at 11:55

community wiki

3 revs
T.J. Crowder

add a comment |

up vote
15
down vote

accepted

So you would write that either with an explicit return:

const f = arg => { return arg.toUpperCase(); };

// Explicit return ^^^^^^

or with a concise body:

const f = arg => arg.toUpperCase();

Examples:

const f1 = arg => { return arg.toUpperCase(); };

console.log(f1("testing"));



const f2 = arg => arg.toUpperCase();

console.log(f2("testing"));

Slightly tangential, but speaking of {}: If you want the concise arrow's body expression to be an object initializer, put it in ():

const f = arg => ({prop: arg.toUpperCase()});

edited Aug 18 '17 at 11:55

community wiki

3 revs
T.J. Crowder

add a comment |

up vote
15
down vote

accepted

So you would write that either with an explicit return:

const f = arg => { return arg.toUpperCase(); };

// Explicit return ^^^^^^

or with a concise body:

const f = arg => arg.toUpperCase();

Examples:

const f1 = arg => { return arg.toUpperCase(); };

console.log(f1("testing"));



const f2 = arg => arg.toUpperCase();

console.log(f2("testing"));

Slightly tangential, but speaking of {}: If you want the concise arrow's body expression to be an object initializer, put it in ():

const f = arg => ({prop: arg.toUpperCase()});

edited Aug 18 '17 at 11:55

community wiki

3 revs
T.J. Crowder

So you would write that either with an explicit return:

const f = arg => { return arg.toUpperCase(); };

// Explicit return ^^^^^^

or with a concise body:

const f = arg => arg.toUpperCase();

Examples:

const f1 = arg => { return arg.toUpperCase(); };

console.log(f1("testing"));



const f2 = arg => arg.toUpperCase();

console.log(f2("testing"));

Slightly tangential, but speaking of {}: If you want the concise arrow's body expression to be an object initializer, put it in ():

const f = arg => ({prop: arg.toUpperCase()});

const f1 = arg => { return arg.toUpperCase(); };

console.log(f1("testing"));



const f2 = arg => arg.toUpperCase();

console.log(f2("testing"));

const f1 = arg => { return arg.toUpperCase(); };

console.log(f1("testing"));



const f2 = arg => arg.toUpperCase();

console.log(f2("testing"));

edited Aug 18 '17 at 11:55

community wiki

3 revs
T.J. Crowder

edited Aug 18 '17 at 11:55

community wiki

3 revs
T.J. Crowder

community wiki

3 revs
T.J. Crowder

community wiki

3 revs
T.J. Crowder

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg