How to work with methods and functions

Anton Ioffe - November 22nd 2021 - 2 minutes read

There are 2 types of elements in Borstch where you can write frontend logic: functions and methods.

Methods live in the context of a component instance. Functions are global and do not have direct access to a component instance-specific data.

Methods can be created and edited within a component screen. Funuctions can be also created and edited from the component editing screen. You can also work with functions from a dedicated functions screen in the admin panel. For that click functions in the admin panel's left menu and select a function.

Methods and funuctions can be syncronous or asyncronous. This means that when a function is asyncronous the system while generating the code wiil prepend the "async" keyword allowing you to write the code using await inside the function.

The system sets a specific environment for each method and function, providing access to different variables:

  • store
  • data - component inistance data, available only in a method
  • props - component props, available only in a method
  • attrs - props passed to a function/method
  • fns - object with dependency functions
  • methods - object with custom methods in the same component, available only in a method

You can call other methods and functions like this: fns.functionCallName() methods.customMethodCallName()

where functionCallName and customMethodCallName are callNames that you define in the function/method settings.

In order for a function to have access to other dependency functions and have them available inside "fns" object you need to mark dependency functions on the right sidebar to indicate it to the system. All methods in the same component are allways availabble in the "methods" object without any special indication.

You can pass props to those functions methods, get sync results or await for returned promises to resolve with a result.

Methods and functions can return values.

You can define internal functions, variables and whatever else you need inside the body of methods and functions.

Basically this is just pure JS code organized in a special environment with access to specific variables relevant to the function/method.

You do not need to write the definition of functions. Just tthe body.

function myFunction(){ // omit this line

// body of the function

} // omit this line as well

Screen Shot 2021-11-26 at 1.06.49

Don't Get Left Behind:
The Top 5 Career-Ending Mistakes Software Developers Make
FREE Cheat Sheet for Software Developers