DEV Community: zmiles17

Arrow Functions

zmiles17 — Fri, 16 Nov 2018 20:50:40 +0000

I haven't used arrow functions at all in my journey through JavaScript, but I was introduced to the idea that arrow functions carry over or bind the value of "this". Before ES6, web developers had to bind "this" by setting it equal to a variable or by using the "bind" method. Here is an example of a function I used in one of my homework assignments.

It's just a basic event listener that will fire once the user submits the form. The only thing I want you to take note of is the value of "this" inside the initial function and after the ".then(function ()".

As you can see, "this" has different definitions. If we want the value of "this" to carry over to the next function, then we can simply change ".then(function ()" to ".then(() =>". I won't show the change in the code to avoid redundancy, but I want to demonstrate that "this" will now be equal to what "this" was in the containing function.

Arrow functions also do not require you to use the return keyword, or use parenthesis if only using one parameter.

If we needed more than one parameter, then parenthesis are required.

TL;DR

Arrow functions bind the value "this", implicitly use the "return" keyword, do not require parenthesis if only using one parameter, and make our code much more concise and easier to read. One thing to note is that once you use an arrow function, you cannot unbind the value of "this" inside of that function. For general use, it is better to use "function" in the global scope and avoid using arrow functions as constructors!

Creating objects using the "class" keyword

zmiles17 — Sat, 10 Nov 2018 03:34:16 +0000

This past week in my coding bootcamp, I learned how to make objects using the "class" and "constructor" keywords. Using this method, creating new objects becomes simpler and makes our code much cleaner. To demonstrate, here is what creating objects would look like if we did not have the "class" and "constructor" keywords.

In my demonstration, I have created all of the objects within the students array manually by copying the previous object and replacing the values. I hope you can understand that this can become tedious, especially if I was creating an object for every student in the school. Here is the same output using the aforementioned "class" and "constructor" keywords:

Initially, we can see that the lines of code have been reduced. I don't have to copy and paste the same object over and over. As long as I know how I constructed my class object, I can use the "new" keyword to create a new object easily and quickly. Another thing to note is that class declarations are not hoisted. If I tried to create a new student before the "class Student" is declared, then it would throw an error.

Another cool thing about JavaScript classes is that we can attach methods specific to each object.

Now each student has a method called "enroll()", which will change the value of active to true if it is currently false. If active is already true, then nothing changes. Classes are particularly useful to avoid redundancies and for easily editing object values. Thanks for reading!

Hoisting variables using the "var" keyword

zmiles17 — Mon, 05 Nov 2018 00:13:59 +0000

If you read my most recent blog post, then you may have wondered why I forgot to discuss "var". That is because "var" is considered older syntax, but that doesn't mean it has become obsolete. It turns out that before JavaScript introduced ES6 syntax, "var" was the only way to declare variables. Most codebases probably still implement "var" and I believe it is important to understand what it does and how it works.

"var" works similarly to "let" except "let" is block scoped, which means it only exists within the block of code that it was created in. Whenever we use "var" to declare a variable, that variable is now hoisted. You may ask what does it mean to be hoisted? Simply put, hoisting means that variable declaration occurs before execution. Here's an example if my explanation wasn't clear.

So I made a function called "exampleVar" and it just has a for loop with nothing inside of it with a conditional if/else statement, which will log in the console based on whether or not "i" has been defined. If you notice, I have used var to declare "i" which will hoist that variable to be available inside of the containing function. In other words, the variable "i" is initialized at the top of "exampleVar", but its value is not assigned until the for loop. Now let's look at what happens if I use "let" instead of "var".

As you can see, the functions are practically identical except for how I declare "i". That's about all you need to know about using "var" and hoisting in JavaScript. It is generally good practice to avoid using "var", since you can run into issues and bugs much easier than if you were using "const" or "let".

const vs. let

zmiles17 — Sun, 28 Oct 2018 21:13:12 +0000

If you're new to JavaScript and coding like me, then you may be wondering why people use const or let. I come from a science/mathematics background and constant means to me that the constant will not vary or change. In JavaScript, const means that the variable assigned cannot be reassigned and it only exists in the block of code where it has been declared or lexical scope.

In the example above, I logged sum outside of the function in which it was created and it returned an error because sum is only defined inside the function.

Just to validate my explanation, I provided a log within the variable's lexical scope. Let works in a similar fashion except let can be reassigned, which makes it useful for loops and mathematical purposes.

So I made a basic addition function much like the previous examples, except this function takes an array of numbers. This is where let becomes mandatory. If I were to make the variable sum into a constant, then the code will return an error because we are attempting to reassign its value. The same rule applies for the loop where I let i = 0. If I set const i = 0, then it will never equal anything other than zero. When the code attempts to increment the constant variable, the console returns an error saying "assignment to constant variable".

So that's the difference between const and let. This is my second blog post ever so let me know what you liked or didn't like and I will try to improve on that in my next post.