From 7f00d07c1195eec32ed194f8b0f5ce2e69d3d7db Mon Sep 17 00:00:00 2001 From: Hayden Young Date: Fri, 22 Nov 2019 16:42:02 +0000 Subject: [PATCH] content(resources): update JS arrow functions This is both adding more content to the existing article, as well as explaining the use of parameters inside immediate return arrow functions. > The correction was changing it from telling the reader it was for one-line expression returns only, to logic-less expression returns as they could take up multiple lines in the case of it being an object or array or such. --- .../javascript/es6/arrow-functions.md | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/content/resources/javascript/es6/arrow-functions.md b/src/content/resources/javascript/es6/arrow-functions.md index 2bd2c64..d62d49c 100644 --- a/src/content/resources/javascript/es6/arrow-functions.md +++ b/src/content/resources/javascript/es6/arrow-functions.md @@ -1,6 +1,7 @@ --- authors: - "T0M#5956" + - "Hayden#5036" created_at: 2019/10/08 updated_at: 2019/10/13 title: Arrow functions @@ -40,12 +41,31 @@ const sayHello = name => { }; ``` -Another interesting feature that also reduces the syntax within arrow functions, is that if a function only returns an expression using one line of code, you can omit the `return` keyword and the curly braces. In arrow functions without braces, the `return` is implicit, meaning you don't need to include the `return` keyword. The following function returns "hello": +Another interesting feature that also reduces the syntax within arrow functions, is that if the function is an expression, you can omit the `return` keyword and the curly braces. In arrow functions without braces, the `return` is implicit, meaning you don't need to include the `return` keyword. The following function returns "hello": ```js const sayHello = () => "hello"; ``` +The same is also true of functions returning an expression using parameters, too. + +```js +const sayHello = name => `hello ${name}`; +``` + +Or even... + +```js +const helloObject = name => ({ + isGreeting: true, + helloName: name, +}); +``` + +This is essentially wrapping an object expression inside a grouped expression, causing it to return an object instead of expanding into a whole function body. + +Long story short, we heard you liked expressions, so we put an expression inside your expression to give you nicer expressions. + ## Handling of the Keyword This The keyword `this` is handled differently in arrow functions. In an arrow function, `this` inherits its binding from the parent scope. That means that the keyword `this` inside of an arrow function references the same object that it does immediately outside of the arrow function where the arrow function is declared. On the other hand, when you use the older `function` syntax, `this` typically refers to the object that the function was called on, if the function is called as an instance method. If the function is not called as an instance method, `this` will usually be undefined (though it is possible to use functions like `call` or `bind` to manually provide a binding).