diff --git a/guides/release/components/helper-functions.md b/guides/release/components/helper-functions.md index 58d296556b..00b4b3aa8a 100644 --- a/guides/release/components/helper-functions.md +++ b/guides/release/components/helper-functions.md @@ -184,32 +184,12 @@ Next to local helpers, ember provides a way to use global helpers. We define glo -To implement the helper, we write a JavaScript function that takes its arguments as an _array_. This is because helpers can also receive _named_ -arguments, which we'll discuss next. +To implement the helper, we define and export a regular JavaScript function: ```js {data-filename="app/helpers/substring.js"} -import { helper } from '@ember/component/helper'; - -function substring(args) { - let [string, start, end] = args; - return string.substring(start, end); -} - -export default helper(substring); -``` - -We can tighten up the implementation by moving the [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) into the function's signature. - -```js {data-filename="app/helpers/substring.js" data-diff="+3,-4,-5"} -import { helper } from '@ember/component/helper'; - -function substring([string, start, end]) { -function substring(args) { - let [string, start, end] = args; +export default function substring(string, start, end) { return string.substring(start, end); } - -export default helper(substring); ``` We can then use this helper in the component's template to get the first letter of the username. @@ -255,36 +235,72 @@ Similar to local helpers, global helpers also can mix positional and named argum ``` +```js {data-filename="app/helpers/substring.js"} +export default function substring(string, { start, end }) { + return string.substring(start || 0, end); +} +``` + +### Classic Helpers + +Sometimes, you may encounter helpers defined using the `helper` function: + ```js {data-filename="app/helpers/substring.js"} import { helper } from '@ember/component/helper'; -function substring([string], { start, end }) { +function substring(positional, { start, end }) { + const string = positional[0]; return string.substring(start || 0, end); } export default helper(substring); ``` +