react / js function calling

Question

I am very new to react and js and i came across below code during my training.

new Layout()
    .setCollapsible(true)
    .setHeader( { label : __('Approval Steps') } )
    .addRow('approvalStepList')

Here Layout is imported from some file that i don't have access to , so the question is that is above mention code is equivalent to below code

 new Layout().setCollapsible(true).setHeader( { label : __('Approval Steps') } )
.addRow('approvalStepList');

means calling function inside function inside function ?

Answer 1

Yes, the two examples you provided are the same, it's just the first one has improved readability.

It's not calling a function inside a function, it's calling the return value of the previous function with another call.

Another way to write it would be:

var layout = new Layout();
var collapsibleLayout = layout.setCollapsible(true);
var headerLayout = collapsibleLayout.( { label : __('Approval Steps') } );
var rowLayout = headerLayout.addRow('approvalStepList');