DEV Community: Veronica

Arrow Functions + This keyword

Veronica — Wed, 14 Nov 2018 18:53:19 +0000

Technical blog post number trois, coming at ya!

At the end of my last post about arrow functions, I briefly teased that the arrow function has a special relationship with the JavaScript keyword, this. There's so much to learn about this (Google spit out over 309,000 hits on the topic!), but here is what I've learned so far about it in regards to the lovely fat arrow.

(Sidenote: As evidenced by some mildly-heated debate in my last post's discussion section, the arrow function goes by many names! I even just saw it referred to as the hash rocket, which is a term dubbed by Ruby enthusiasts. And I've gotta say, that may be my favorite term dubbed by anyone for anything.)

From what I've seen, this has as almost many haters as it has super fans. It can be confusing and seemingly unreliable to use in all classic function expressions because this relies on the context of its environment in which its called, e.g., if this lies within a function within a method, this will refer to the global scope and not the method.

Enter... THE ARROW FUNCTION!

As you can see in my example code below, this unfortunately does not work the way I intend it. The alerts that pop up show "loves to bite", "loves to scratch", and "loves to destroy" without including the cat's awesome name, Dragon. This fails to refer to the object but refers to the global scope since it is within a function. I've seen this failure referred to as a "JavaScript quirk," which can be considered an understatement by some. :)

//Trying to use 'this' without an arrow function

let cat = {
  name: 'Dragon',
  favThings: ['bite', 'scratch', 'destroy'],
  showFavThings: function() {
    this.favThings.forEach(function(fav) {
      alert(this.name + " loves to " + fav + "!");
    });
  }
};

cat.showFavThings();
//output does not include cat name, boooo!

But our friend, The Arrow Function (which was developed for JavaScript ES6 in part due to the aforementioned "quirk"), comes to the rescue here because this is lexically-bound to arrow functions, meaning that this will refer to whatever code the arrow function is in before it.

//this with arrow function

let cat = {
  name: 'Dragon',
  favThings: ['bite', 'scratch', 'destroy'],
  showFavThings () {
    this.favThings.forEach((fav) => {
      alert(this.name + " loves to " + fav + "!");
    });
  }
};

cat.showFavThings();
//Dragon loves to bite!
//Dragon loves to scratch!
//Dragon loves to destroy!

Good job, Dragon! You do you!

As a novice coder, I'm still learning how to best use Arrow Functions as not all situations call for them. But what about you? Why do you like or dislike this method?

Brief Intro to Arrow Functions

Veronica — Thu, 08 Nov 2018 00:19:39 +0000

Hey Devvies; technical blog post number two coming your way.

Evidently, one of the most celebrated additions to JavaScript a short three or so years ago (version ES6/ES2015) was the introduction to the Arrow Function. (I've also seen it referred to as the fat arrow function.)

A simple explanation of what an arrow function accomplishes is that it cleans up your function code to be more concise, less messy looking by using shorter syntax.

Take this simple function to double a number:

const double = function (num) {
    return num * 2;
    }

double(3);
// output is 6

double (12);
// output is 24

Now lookee what an arrow function can do:

const doubleArrow = num => num * 2;

doubleArrow(3);
// output is still 6!

doubleArrow(12);
// output is still 24!

The doubleArrow function did the exact same thing as what the double function did but in one line of code instead of three! That's amazing!

That was a very simple example using just one parameter. Let's do another very simple example but with two parameters this time, just for kicks.

// regular function

const sum = function (num1, num2) {
    return num1 + num2;
    }

// arrow function version

const sumArrow = (num 1, num2) => num1 + num2;

sum(1, 10);
// output is 11

sumArrow (1, 10);
// output is still 11

Pretty cool! The only difference between the double and sum syntax is we added the parentheses back in when there was more than one parameter to apply. You can still include the parentheses if there is just one parameter, but they're optional.

There are some other cool features of the arrow function that slightly differ from regular functions (most notably while using the 'this' keyword), but we can delve into that in a later post. :)

Heart Eyes for Array Methods

Veronica — Wed, 31 Oct 2018 04:02:11 +0000

It's been almost three months (aka half-way there!) into my first intensive experience in a coding boot camp, and it's clear that objects and arrays are pretty important to even a novice at JavaScript. Objects are key-value pairs (like a word and its corresponding definition in a dictionary) while an array, which is a special type of object, is an ordered list, which is useful when dealing with a large amount of the same type of data, like a collection of names.

For example, an array of random colors is noted such as:

let colors = ['yellow', 'black', ‘blue’, ‘green’]

With arrays, JavaScript gives you the ability to make basic edits like add, delete, and update the data as well as helps you sort through the information with limited amounts of code. These are called array methods. There is a plethora of these cool little mechanisms, not even a fraction of which I have tried and tested myself yet, but here are a couple of my favorites so far.

Push
Adds new element to the end of an array

let colors = ['yellow', 'black', ‘blue’, ‘green’]

colors.push('white');

alert(colors) 
// Output will be yellow, black, blue, green, white

Splice
Deletes item(s) from an array, from any location. The parameters you pass through indicate where in the array you’re beginning and how many items to remove. Remember the index rule: the first item in an array is defined as 0, second item is 1, third item is 2, and so on.

let colors = ['yellow', 'black', ‘blue’, ‘green’, 'white'] 
// let’s remove black and blue out of there!

colors.splice(1, 2) 
// so starting at index 1 (black), remove 2 items (black, blue)

alert(colors) 
// Output will now be yellow, green, white

Splice is doubly cool because not only can you delete items from anywhere in the array, you can also insert new items at the same time.

let colors = ['yellow', 'black', 'blue', 'green', 'white'] 
// let’s remove blue and green and add a bit more flair

colors.splice(2, 2, 'rose gold')

alert(colors) 
// Output will be yellow, black, rose gold, white

I hope to put to use and get to know many more of these tiny heroes (many of which you can find here) throughout my boot camp journey and beyond. Hooray for arrays!