From c1af78df5f3c901f12d439d17c92f4b48b85d475 Mon Sep 17 00:00:00 2001
From: T0MGithub <47010185+T0MGithub@users.noreply.github.com>
Date: Sun, 13 Oct 2019 17:09:10 +0100
Subject: [PATCH] content(resources): first write up about arrow functions in
 Javascript

Improved Arrow Functions Guide
---
 .../javascript/es6/arrow-functions.md         | 64 +++++++++++++++++--
 1 file changed, 60 insertions(+), 4 deletions(-)

diff --git a/src/content/resources/javascript/es6/arrow-functions.md b/src/content/resources/javascript/es6/arrow-functions.md
index e3efc93..2f02373 100644
--- a/src/content/resources/javascript/es6/arrow-functions.md
+++ b/src/content/resources/javascript/es6/arrow-functions.md
@@ -1,11 +1,67 @@
 ---
 authors:
-  - "veksen#1060"
+  - "t0m#5956"
 created_at: 2019/10/08
-updated_at: 2019/10/08
+updated_at: 2019/10/13
 title: Arrow functions
 ---
 
-## Arrow functions
+## Arrow Function Syntax
 
-// TODO: finish this
+Brought into ES6, arrow functions are a new way to declare functions, and allow for shorter syntax. For example, below is a regular function, as usually seen before ES6.
+
+```js
+const sayHello = function() {
+  console.log("hello");
+};
+```
+
+The same function can be rewritten with arrow function syntax, as seen below.
+
+```js
+const sayHello = () => {
+  console.log("hello");
+};
+```
+
+Parameters are listed between the parentheses, in the same way a regular function does it:
+
+```js
+const sayHello = (nameOne, nameTwo) => {
+  console.log(nameOne, "says hello to", nameTwo);
+};
+```
+
+For a single parameter, the parentheses can be omitted:
+
+```js
+const sayHello = name => {
+  console.log("hello", 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":
+
+```js
+const sayHello = () => "hello";
+```
+
+## 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).
+
+Using regular anonymous function, `this` is refers to the `HTMLButtonObject` that called it, and therefore the function outputs `[object HTMLButtonElement]` to the console.
+
+```js
+document.querySelector("#btn").addEventListener("click", function() {
+  console.log(this); // outputs "[object HTMLButtonElement]"
+});
+```
+
+However, if an arrow function is used, `this` would refer to `[object Window]`, as that is the object that defined the function.
+
+```js
+document.querySelector("#btn").addEventListener("click", () => {
+  console.log(this); // outputs "[object Window]"
+});
+```