DEV Community: Tanner Kirkpatrick

5 JavaScript Array Methods to make your code lean and mean

Tanner Kirkpatrick — Sat, 13 Feb 2021 23:19:00 +0000

One of the most important aspects of programming in JavaScript is learning how to manipulate data within arrays. The good ol "for loop" is a tried and true way to iterate through an array, but there are much easier, cleaner, and more efficient ways to handle the same data. Still iterating through arrays only using the for loop? Totally fine. It is important to understand what's going on under the hood, but once you have a firm grasp on the foundational for loop, I strongly recommend moving onto these array methods. There are many different array methods, but I will be covering 5 different methods that you will likely see and use often. Let's take a look.
Note: I will use both es6 and pre-es6 syntax, in order to show the differences and to offer a better understanding of the methods themselves.

Sample dataset for demonstration purposes:

1. map()

The map method is one of the most frequently used array methods out there. In short, the map method returns a new array with whatever values specified by the developer. For example, if we wanted to only grab the names of the items from the items array, we can use the map method. Let's see how it works.

Without array methods like map, we would have to do something like this:

Does it work? Sure. But there are much cleaner ways to achieve the same result! In the long run, this saves time, memory, and enhances the readability of your code, which is beneficial for everyone involved.

Pre-ES6 Syntax:

So what's going on here? We are declaring a variable called "itemNames" and inside of it is where all of the magic happens. All you have to do is take the name of the array, tack a .map() method onto it, and pass in a callback function as an argument. The callback function also takes a parameter, and this can be named whatever you like. In this case, it made sense to use the word "item" for iterating through our items array. Since we want the names of the items, we are simply returning item.name. This will create a brand new array (which can now be accessed by using the "itemNames" variable) containing the names of the items.

Output:

Let's break this down even more.

ES6 syntax:

Thanks to ES6, we can consolidate this into ONE single line of code and achieve the same result. Pretty cool. Okay, so that's great, but what's going on here? Since we are using an ES6 arrow function and there is only one expression being executed in the callback function, we are able to eliminate the curly braces and even the return keyword(implicit return).

2. forEach()

forEach is a bit different in that it does not return an array like map, filter, etc. So what does forEach do? When an anonymous or callback function is passed to the forEach method, it will execute that function for every item in the array. You can also pass in the index of the array item, and even the entire array itself. For this use case, we want to iterate through the items array, and console.log the item name and which position it is in. We can achieve this with a forEach method.

Output:

Let's clean this up a little bit with some ES6 syntax.

Arrow functions are your friend!

3. filter()

The filter method is one that you will grow to absolutely love. Throughout your development career, there will be many use cases where you will want only certain items in an existing array, and filter is the way you can execute that. Just like map, the filter method returns an array. However, the new array is constructed by conditionals set by the developer. Say we wanted to remove items from the array that are over $150:

Output:

So on every iteration, the filter method is looking at the price of each item, and if the conditional is met (if the price is less than or equal to 150), the item stays, if not, the item is tossed from the array.

Let's clean it up with ES6 syntax:

4. reduce()

This can be a tricky method to learn at first, but once the concept solidifies, it is extremely useful. Imagine we want to add up the prices of our items to get an idea of how much all of our assets are worth. We can use the reduce() method to "reduce" the prices in the array to one single value. Let's take a look:

Now, the callback function in a reduce method normally takes two parameters. One is the accumulator, and the other is the current value. In this example, they are represented as "a" and "c". So essentially, on every iteration, the current value is being added to the accumulator (accumulator is set to 0 by passing 0 as a second argument to the reduce method), and then ultimately returned as one single value.

Output:

It is important to note that if an initial value is not provided for the accumulator, it will default to the value of the first index of the array.

Let's clean this up.

Less code, same results.

5. find()

For the 5th and final method, let's talk about find(). Find is a super simple, yet useful method. Essentially, it scans the array and returns the first object that meets certain criteria. For example, if we wanted to isolate the object containing the "TV" item, we would write our code like this.

Output:

And of course, let's clean it up with ES6:

Conclusion

There are many different array methods out there to dry out your code and simplify your life as a developer, so take advantage of them! There's no better feeling than converting a clunky for loop into an efficient one-liner. I hope this helped solidify some of the foundational concepts of array methods and ES6 syntax. Stay well and keep coding!

Var, Let, and Const...What's The Difference?

Tanner Kirkpatrick — Sat, 14 Nov 2020 23:36:13 +0000

So if you're a JavaScript beginner you might be wondering, what is the difference between var, let and const...and why does it matter? They are essentially all the same, with a few different quirks. Var, let, and const are all keywords for declaring a JavaScript variable. Since the inception of JavaScript, var has been the primary method for declaring a variable, until let and const came around with ES6 in 2015.

First, let me begin by explaining the technicalities of each keyword.

var

var is function scoped

If you're not familiar with the JavaScript use of the word scope, it refers to the context of the codeblock you're in, which determines the accessibility of certain variables. If your variable is declared outside of a function, it is globally scoped, meaning it is accessible anywhere in your code. In the case of var, it is function scoped. Refer to the example below.

In this example, since x is declared within a function, it can only be accessed inside of said function.

var can be re-assigned AND re-declared

var can be re-assigned and even re-declared without throwing an error. You might be thinking that this leads to more flexibility within your codebase, but the truth is, it can lead to issues. Since var is able to be re-declared, there's a possibility you will completely forget you declared a certain variable, and accidentally override it later on. In a small application, you will most likely be able to avoid this. However, as your codebase gets larger, best practice is to use let in place of var wherever you can.

So what about let and const?

let and const

let and const behave in very similar ways, with one major distinction. Let's start with the similarities.

They are block scoped

With let and const, variables are able to be accessed only within the scope of the block that they live in. So you might ask, what constitutes a block? A block is anything surrounded by a pair of {}(ie. For loop, if statement, etc). Refer to the example below.

In this example, the variable x is declared inside of the block scope of the function, which makes it accessible inside of that entire function. However, the variable y is declared inside of the block scope of the if statement, making it accessible only within that statement, even if the statement is inside of the function.

let is able to re-assigned, but NOT re-declared

let is similar to var in that it can be re-assigned, but not re-declared. This helps with the overwriting issue I mentioned with the var keyword. You can re-assign a let variable as many times as you'd like, but the original declaration will always remain the same.

const cannot be re-assigned OR re-declared (kinda)

const in JavaScript quite literally means constant. When choosing a keyword for a variable that will NEVER change throughout your codebase, go with const. This will help increase readability for you and other developers.

Note: Even though const variables are not able to be re-assigned or re-declared, their values can be manipulated. For example, if you have an object assigned to a const variable, JavaScript will allow the values and properties within the object to be manipulated as long as the original object is not re-assigned to a new object. Example:

The Skinny:

Avoid using var. If you have a variable that will never change, use const. Otherwise, use let! I hope this cleared up the "what" and "why" on JavaScript variables!

How I felt entering bootcamp vs. how I feel after 2 months

Tanner Kirkpatrick — Wed, 07 Oct 2020 13:57:36 +0000

Hey guys, my name is Tanner. I'm a 28 year old bootcamp student from Richmond, Virginia. A few months ago, I decided to enroll in a Full Stack Web Development Bootcamp after working in the special education field for a little over 5 years. Quite the transition, huh? I knew I needed a change, but didn't know which direction to head. A friend of mine recommended I enroll in a Web Development Bootcamp. I was hesitant about this field considering I had no previous experience with programming or even computers in general.

I decided to test the waters by taking a few free courses on HTML and CSS. I was surprised to find that it was interesting and something I could see myself really diving into and enjoying. After getting my ducks in a row and figuring out a plan of action, I enrolled in the University of Richmond Full Stack Bootcamp.

I knew this was going to be a challenge, but I felt pretty good leading up to the first day of class. I had some time to prepare and familiarize myself with the basics of front-end programming. The first couple weeks of class felt like a breeze, spent mainly getting familiar with all of our tools as well as basic HTML and CSS and then BAM! - JavaScript hit.

I knew that we would get into JavaScript somewhat early in the course, but I was not prepared for how intensive it would be. I was like, wait a minute, we were literally JUST figuring out how to implement Bootstrap on a static page and now we are programming functional applications from scratch?

The learning curve is massive. It will test you. It is demoralizing at times. You will have no idea what you are doing most of the time, and you have to get used to that. That is the bootcamp feel. This is in no way a conventional learning process that most of us are used to. There are no quizzes, there are no tests - just homework assignments and projects where you have to display the knowledge you have been taught and then a lot more. Don't be surprised if you have to spend multiple hours on each assignment trying to fix a bug that you were in no way taught to handle in class. If you can imagine trying to juggle (when you already don't know to juggle) while someone is constantly throwing new balls at you to incorporate into your routine, this is exactly what it feels like to be in a bootcamp.

When the course got tough, I made the huge mistake of comparing myself to others in my cohort. It is imperative that you do not make this mistake if you want to be successful in this environment. Everyone has their own style of learning, and at the end of the day, it's all about what you can absorb from the course and how that influences your individual goals and aspirations. In reality, we have no idea what is going on behind the scenes with other students. They might be receiving extra outside help, have prior experience, or are just picking up the current information at a faster pace for whatever reason.

After 2 months in the course, I can say that I am amazed at how far I've come and all I've learned in such a short period of time. I have been given the opportunity to work and collaborate with a talented group of individuals that have only boosted my knowledge and practical development skills. This is one major takeaway from the bootcamp environment that I will always try to harp on. The community you are involved with is everything. You spend hours with your fellow students collaborating, creating new ideas, fixing bugs, and more. If you are involved with a good group of people, you will see your productivity skyrocket, and hopefully, your self confidence as well. It might not feel like it in the present time, but if you are putting in the effort, working diligently on your assignments and taking advantage of all the resources the bootcamp has to offer, you will see results! With that said, I still have no idea what I'm doing, and that's okay.

If you are considering enrolling in a bootcamp, I hope this article inspires you to take this challenge head on, without looking back. In the end, you will be glad you did it.