Code line wrapping in a long javascript object

Question

I have following object that does not fit into my coding screen:

{"hide(), show(), toggle(), fadeIn(), fadeOut(), fadeTo(), fadeToggle(), slideDown(), slideUp(), slideToggle(), animate(). Something different for text(), html(), and val() , attr() and load() ": "after each functions callback function can be executed?"},

Breaking it after the comma does not work. Neither \n is helping here.

How can I break the code so it would be easier to maintain it?

what IDE/Editor are you using? VSCode has a setting for this — Ayush Gupta, Dec 23 '17 at 10:07
Also consider using prettier (https://github.com/prettier/prettier) for your codebase. You can try it online: https://prettier.io/playground/ — Antonio Narkevich, Dec 23 '17 at 10:20

score 2 · Answer 1 · answered Dec 23 '17 at 10:17

In ES6 you can use bracket notation to define an object key name like this:

const fooObj = {
  [fooName]: 'some nifty message'
}

Where fooName can be a variable holding a valid string. Mixing this with template literal strings you could do something like this:

const fooName = `
fee(),
fi(),
fo(),
fum(),
Homie I am not playing with you
`;
const fooObj = {
  [fooName]: 'some nifty message'
}

And that should work

mike_t · Accepted Answer · 2017-12-23T10:43:25.750

You can use word wrapping/line wrapping features of your IDE.

In Visual Studio Code:

Since v1.0 you can toggle word wrap:

with the new command editor.action.toggleWordWrap,

from the View

menu (View > Toggle Word Wrap), or using the ALT+Z keyboard shortcut (for Mac: ⌥+Z).

Source HERE

Or you can use javascript string concatenation with + sign like this to build the key string and use it in your object:

var key = "hide(), show(), toggle(), fadeIn(), fadeOut(), fadeTo(), "+
          "fadeToggle(), slideDown(), slideUp(), slideToggle(), "+
          "animate(). Something different for text(), html(), "+
          "and val() , attr() and load() "
var obj = { [key] : "after each functions callback function can be executed?"}

or if you prefer in one statement:

var obj = { ["hide(), show(), toggle(), fadeIn(), fadeOut(), fadeTo(), "+
          "fadeToggle(), slideDown(), slideUp(), slideToggle(), "+
          "animate(). Something different for text(), html(), "+
          "and val() , attr() and load() "] : 
          "after each functions callback function can be executed?"}

that will console.log // { key: "whatever" } – Osman Cea Dec 23 '17 at 10:36 — Osman Cea, Dec 23 '17 at 10:36

Code line wrapping in a long javascript object

2 Answers2