CODEWITHSUNDEEP
javascriptecmascript-6
Halfpint
Halfpint

Reputation: 4079

ES6 Assign a variable with an arrow function

I've just started getting accustomed with ES6 syntax and I was wondering if it was possible to assign to a variable with an arrow function. I'm writing a basic lightweight AJAX helper library and on a status of 200, I want to return a payload to the user, which I currently do with:

var responseData = "";
switch (payload.returnType.toLowerCase()) {
    case "json" : responseData = JSON.parse(httpRequest.responseText); break;
    case "text" : responseData = httpRequest.responseText; break;
    default : responseData = null; break;
}
callback(null, responseData);

This is fine, but I can't help but think I could make this cleaner, if I do:

callback(null, () => { switch(payload.returnType.toLowerCase()) { ... });

I would expect the return statement to send the result of the expression as the 2nd parameter in my callback, however when I console log from the caller it prints the switch statement.

Alternatively I have tried to do:

var responseData = () => {
    switch (payload.returnType.toLowerCase()) {
        case "json" : return JSON.parse(httpRequest.responseText); break;
        case "text" : return httpRequest.responseText; break;
        default : return null; break;
    }
}
callback(null, responseData);

In this case, responseData is always empty. Is it possible to have the return value as my 2nd parameter or have it bound to responseData as the result of the arrow function?

Upvotes: 16

Views: 29297

Answers (3)

leonheess
leonheess

Reputation: 21391

Even shorter with a self-executing function:

const res = (() => {
  return 'something'
})()

or even shorter if it's a one-liner:

const res = (() => 'something')()

Or with your code:

var getResponseData = (() => {
  switch (payload.returnType.toLowerCase()) {
    case "json" : return JSON.parse(httpRequest.responseText); 
    case "text" : return httpRequest.responseText; 
    default : return null;
  }
})();

You can clearly see the difference in this snippet:

const res1 = () => {
  return 'something'
}

const res2 = (() => {
  return 'something'
})()

const res3 = (() =>  'short something')()

console.log(res1)
console.log(res2)
console.log(res3)

Upvotes: 14

Gerard van Helden
Gerard van Helden

Reputation: 1602

I think your hunch is right, but you're on the wrong track, imho. What I think you want to do is create a map of response types to callbacks:

let parsers = new Map([
    ["json", JSON.parse], 
    ["text", (text) => text], 
    ["_", () => null]
]), t = payload.returnType.toLowerCase();

if (!parsers.has(t)) {
   t = "_";
}
callback(null, parsers.get(t)(httpRequest.responseText))

What makes this subjectively "cleaner" is that you separate logic from implementation. You can move the parser definition anywhere without affecting the code. That's why switch statements feel "unfunctional" (or undeclarative).

But of course, this all remains a matter of taste :)

Upvotes: 2

Laurence
Laurence

Reputation: 1875

You create an anonymous function but do not execute it.

For example:

var getResponseData = () => {
    switch (payload.returnType.toLowerCase()) {
        case "json" : return JSON.parse(httpRequest.responseText); 
        case "text" : return httpRequest.responseText; 
        default : return null;
    }
};
callback(null, getResponseData());

Upvotes: 14

Related Questions