Javascript function fails to return object when there is a line-break between the return statement and the object?

by

tl;dr The line break is causing the ‘undefined’ in the second function. JavaScript doesn’t require semicolons in a lot of cases and just assumes them in certain contexts (Automatic Semicolon Insertion).

In certain cases, to avoid this ASI problem and for aesthetic reasons, I use the so-called grouping operator. For example, with the hoquet templating DSL (it compiles Arrays as s-expressions into HTML), I like to group the Arrays so that they clearly show the HTML structure:

return (
  ["ul"
  , ["li"
    , ["span", {class: "name"}, this.name]
    , ["span", {id: "x"}, "x"]
    ]
  ]
);

which seems somewhat clearer, or more consistent to me than

return [
  "ul",
  [
    "li",
    ["span", {class: "name"}, this.name],
    ["span", {id: "x"}, "x"]
  ]
];

and they end up with the same number of lines. But it’s a matter of aesthetics, really.

The grouping operator just evaluates whatever expression is inside of it. You see this commonly with Immediately Invoked Function Expressions, where you need to turn what would normally be a function declaration into an expression, which can then be immediately invoked (hence, the name). However, a perhaps lesser known feature of the grouping operator is that it can also take a comma-delimited list of expressions, e.g.

function() {
  return (
    doSideEffects(),
    console.log("this is the second side effect"),
    1 + 1
  );
}

In this case it evaluates each of these expressions and returns only the last one (1 + 1).

More Related Contents:

  1. ECMAScript 6 arrow function that returns an object
  2. How do I prevent a parent’s onclick event from firing when a child anchor is clicked?
  3. Sort array by firstname (alphabetically) in Javascript [duplicate]
  4. Getting scroll bar width using JavaScript [duplicate]
  5. How do I check if an element is really visible with JavaScript? [duplicate]
  6. Parsing ISO 8601 date in Javascript
  7. How to avoid global variables in JavaScript?
  8. How can I programmatically invoke an onclick() event from a anchor tag while keeping the ‘this’ reference in the onclick function?
  9. Understanding promises in Node.js
  10. How can I export tables to Excel from a webpage [closed]
  11. How to draw an oval in html5 canvas?
  12. jasmine: Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL
  13. How do I calculate how many seconds between two dates?
  14. Watch for object properties changes in JavaScript [duplicate]
  15. How do you create a custom adapter for ember.js?
  16. Addeventlistener with ajax not working well
  17. What is the Proper Way to Destroy a Map Instance?
  18. Three.js / WebGL – transparent planes hiding other planes behind them
  19. Angular 6: HTML table create dynamic columns and rows
  20. Index an array of arrays with an array of indexes in javascript
  21. document.querySelector(…) is null error
  22. How can I modify the XMLHttpRequest responsetext received by another function?
  23. Issue with window.close and chrome
  24. Javascript console.log(object) vs. concatenating string
  25. how to convert a string to a Unix timestamp in javascript?
  26. How to get the html of a div on another page with jQuery ajax?
  27. Detect if an alert or confirm is displayed on a page
  28. Allow All Content Security Policy?
  29. Is there a function to deselect all text using JavaScript?
  30. Why do these two javascript 2d-arrays behave differently?

Leave a Comment