1

I am currently working through codecademy JavaScript course and in Objects section I found this error. Section is about factory functions and the factory function takes two parameters. Factory function returns an object when called. After return statement when I press enter and start the curly braces on new line the program gives an error but when I move the opening curly brace back to same line as return keyword the error goes away. I have no idea why is this happening. Can anybody please put some light on what's happening with this code.

Code that gives syntax error

const robotFactory = (model, mobi) =>
{
  return 
  {
    model: model,
    mobi: mobi,
    beep()
    {
      console.log('Beep Boop');
    }
  }
};

const one = robotFactory('P-500', true);
console.log(one.model);

Code that does work

const robotFactory = (model, mobi) =>
{
  return {
    model: model,
    mobi: mobi,
    beep()
    {
      console.log('Beep Boop');
    }
  }
};

const one = robotFactory('P-500', true);
console.log(one.model);
knight
  • 625
  • 1
  • 6
  • 19
  • _"the program gives an error"_ please always include the error message in your questions – Phil Sep 03 '19 at 00:02
  • 1
    Extra short version is to wrap the returned object in parentheses, eg `(model, mobi) => ({ model, mobi, beep () { console.log('Beep Boop') } })` – Phil Sep 03 '19 at 00:04
  • SyntaxError as I mentioned in my question, or you are asking for the complete error log? – knight Sep 03 '19 at 00:04
  • I'm talking about the actual error message, ie _"Uncaught SyntaxError: Unexpected token :"_ – Phil Sep 03 '19 at 00:04
  • why use a return with fat arrow? – epascarello Sep 03 '19 at 00:04
  • ``` evalmachine.:6 mobi: mobi, ^ SyntaxError: Unexpected token : at new Script (vm.js:83:7) at createScript (vm.js:277:10) at Object.runInContext (vm.js:310:10) at evaluate (/run_dir/repl.js:133:14) at ReadStream. (/run_dir/repl.js:116:5) at ReadStream.emit (events.js:198:13) at addChunk (_stream_readable.js:288:12) at readableAddChunk (_stream_readable.js:269:11) at ReadStream.Readable.push (_stream_readable.js:224:10) at lazyFs.read (internal/fs/streams.js:181:12) ``` – knight Sep 03 '19 at 00:06
  • sorry don't know how to format this error message properly. – knight Sep 03 '19 at 00:06

1 Answers1

6

JavaScript puts on implicit ;s. So with your following code:

const robotFactory = (model, mobi) =>
{
  return 
  {

JavaScript treats the above code as:

const robotFactory = (model, mobi) =>
{
  return;
  {

This is a Syntax Error. So you should never have any return statement on its own line.

More information: ECMAScript Automatic Semicolon Insertion, Understanding Automatic Semicolon Insertion in JavaScript, What are the rules for JavaScript's automatic semicolon insertion (ASI)?

Praveen Kumar Purushothaman
  • 154,660
  • 22
  • 177
  • 226
  • 1
    Thank you, that was quick and sweet answer to my question. – knight Sep 03 '19 at 00:03
  • You're welcome @knight. – Praveen Kumar Purushothaman Sep 03 '19 at 00:05
  • I refactored my code to use only one parameter and even with the return keyword on its own line and starting curly brace is on the next line the code still works but not with two parameters. Can you explain why is this? – knight Sep 03 '19 at 00:11
  • Hi, when I tried the code with only one parameter to the factory function and one method the code runs without giving an error. But in the method I am accessing the returned objects property using this keyword and it gives an error. Same code runs perfectly with the curly brace moved back to the same line as return keyword. Question is why the program not giving the error at run time like before with two parameters? Thank you. – knight Sep 03 '19 at 22:12
  • @knight Please share the code, I can try debugging. – Praveen Kumar Purushothaman Sep 03 '19 at 22:39