Biking Home, Part III

So if you haven't read my blog before then Biking Home is a song from the soundtrack of my favourite movie, "Whale Rider". The movie is really important to me and it really sustained me throughout my early-to-mid twenties. It's about a Maori girl called Paikea who is meant to be the hereditary leader of her tribe, but her grandad can't accept that it's a woman. By following her destiny, Paikea puts everything back into alignment, and saves the whales which her ancestors legendarily rode in on. This film keeps me going at every fibre of my being. I am such a big believer in following your destiny, no matter what it is, whatever everyone else thinks of you, and even when it is hard. As a woman in tech, with a definitely non-traditional background, and who is so passionate about software engineering, and feels very close to it, I love, love, love, love, and need, that feeling of being one with, and following, your destiny.

Arrow Functions 

The typical syntax for an arrow function is:

const functionA = (parameter1, parameter2, ..., parameterN) =>  {

  // Function body here

}

This is according to the Codecademy documentation. 

Fat Arrow

=> Really? This is called a 'fat arrow'? Really? 

Reading the Documentation

There are so many questions that have come up for me as a result of reading the documentation on arrow functions.

• What is a default parameter (wait, why am I typing this out, I am such a mug, I already know this)?
• What is a rest parameter (okay this, I don't know)?
• What is a destructured object (okay this, I definitely do not know)?

Some of these, it is probably too soon for. 

Continuing to read the Documentation

"Arrow functions with a single expression have no curly brackets ({})" - wait, what??! 

"And can use the concise function body to return the result of the expression without the return keyword". 

For some really weird reason, this is actually clicking for me. Like on a deeper, certain level, it is actually clicking for me. Even if I don't understand the exact context, this is beginning to make sense for me. 

Hmm, maybe all those hours I put into learning the basics of functions DID pay off.

Limitations of Arrow Functions

Okay, so this is definitely too advanced for me at the moment, but I want to learn it anyway. 

According to Codecademy and the MDN (Mozilla Developer Network - best source of documentation for code), arrow functions:

(ALERT FIRST: MDN refers to them as 'Arrow function expressions'.

This makes SO MUCH MORE sense to me. Because basically they are function expressions (as opposed to function declarations) - they just have arrows involved in them as well...).

Ahem. 

• Arrow functions do not have "their own bindings" to this, arguments, or super
• And they should also not be used as methods
• I don't know what any of this means. 
• Arrow functions cannot be used as constructors
• Whatever it is that means
• You also can't call them with new, and they don't have access to the new.target keyword.
• new.target is a 'meta-property'.
• it lets you know whether a function or constructor was called using the new operator
• They also:
• Cannot use yield (whatever that thing is) within their body.
• Cannot use the special arguments keyword
• Cannot be created as generator functions

Examples

Example 1

Here's one I made up myself (erm... based off the example on Codecademy):

const printYo = () => {

    console.log('YO WAZZUP');

}

const printHeight = (height) => {

    console.log(`You are ${metres} metres tall.`);

};

printYo();

printHeight(1.7); 

The output will be:

YO WAZZUP

You are 1.7 metres tall.

Example 2

The example on the MDN is WAY TOO FRICKIN' COMPLICATED.

It requires a knowledge of arrays etc. 😭😢 

As such, there will be no example 2 (at least for now) 😂😁

Arrow Functions Made Simple

I could've saved myself so much time and days of being stuck. But I'm glad for the journey and it probably was required for me to understand this 😂😹

"You first include the parameters inside the ( ) and then add an arrow => that points to the function body surrounded in { } like this."

Here's another great example of arrow function expression syntax. I'm sorry, I can never get enough of these:

const rectangleArea = (width, height) => {

    let area = width * height;

    return area;

};

I think this is pretty easy to grasp in the end - just the const keyword, and then the variable name, and then:

• the equals = sign
• the parameters - brackets () either with something or not (either way this symbolises/represents the parameters) 
• then the function body, surrounded in the curly brackets {}

Here's one more example (I TOLD you that I can never get enough!!!).

const newFunction = () => {

    //Function body goes here

};

But then this is basically what Adam sent me the other day when he sent me this:

// Declaration i.e. declaring the variable as a function called someFunc does something
const someFunc = () => {
  return 'something'
}

Or just this, which he also sent me:

const someFunc = () => {}

Sorry if it seems like I've done them to death. I'm neurodivergent - this is how I learn - and more often than not, it has always been my secret to success.

Concise Body Arrow Functions

I took one look at these and decided... Yeah, that's a thing for tomorrow.

One last thought from me: it's important to do things out of love.