Skip to content

Common Patterns

Here are some of the most common patterns used in functions:

Return a value

To return a value from a function, use the return keyword:

js
(c, f, i, n, r, v, e, t) => {
  return 'Hello World'; 
};

If no value is returned, the function will evaluate to undefined which often is not the desired result:

js
(c, f, i, n, r, v, e, t) => {
  'Hello World'; // Will evaluate to undefined and not 'Hello World'
};

You can add as much logic as you want in the function, but only the value returned by the return keyword will be used:

js
(c, f, i, n, r, v, e, t) => {
  const words = ['Hello', 'World']; 
  const greeting = words.join(' ');

  return greeting; // Will evaluate to 'Hello World'
};

Return data from the Data Store

To return a variable from the Data Store, use the v parameter and the dot notation to access the variable:

js
(c, f, i, n, r, v, e, t) => {
  return v.my_variable; 
};

Following the same pattern, you can also return a Request's data by using the request name in the r parameter:

js
(c, f, i, n, r, v, e, t) => {
  return r.my_request.data; 
};

This works for any other function parameter too.

Return a conditional value

To return a value from a function based on a condition, use the return keyword and a conditional statement:

js
(c, f, i, n, r, v, e, t) => {
  if (c.has_logged === 'true') {
    return 'Hello again!';
  } else {
    return 'Nice to meet you!';
  }
};

Conditional statements can be combined with logical operators to create more complex conditions:

js
(c, f, i, n, r, v, e, t) => {
  if (c.has_logged === 'true' && r.get_user.data.name) {
    return `Hello again ${r.get_user.data.name}!`;
  } else {
    return 'Nice to meet you!';
  }
};

Return a conditional value using a ternary operator

Ternary operators simplify conditional statements and can be used to return a value from a function:

js
(c, f, i, n, r, v, e, t) => {
  return c.first_login === 'true' ? 'Nice to meet you!' : 'Hello again!'; 
};

Return if the current path matches a given path

The current navigation path can be accessed via the n parameter. You can combine it with an equality operator to check if the current path matches a given path:

js
(c, f, i, n, r, v, e, t) => {
  return n.path === '/about'; // Will return `true` if the current path is `/about`
};

Access the JavaScript API

WARNING

This is an advanced feature and should only be used if you know what you're doing.

The Wized object provides access to the JavaScript API. See the JavaScript API section for more information.

js
(c, f, i, n, r, v, e, t) => {
  const greetingElement = Wized.elements.get('greeting'); 
  greetingElement.node.innerHTML = 'Hello World!';
};