To Filter: Sifting through Data (Language) & Does it Make Learning More Digestible?
In code developing, there’s always the idea of defining something. To define a variable or to define an object is part of the computer programming lingo and foundations of running and testing code. In a literal sense, us programmers give meaning to the words we implement to which gives those words purpose. This purpose depends on the set of instructions that the programmer decides to use to produce particular results. However, which instructions and or methods to use may not be intuitive and can therefore present a puzzle with too many missing pieces instead of a functioning program.
Everyone has their own approach to learning programming and often times in the early stages a lot of information will bombard our brains. And unfortunately our brains can only retain so much that essential key points may become lost. You create your sets of words and variables, you then either come up empty on how to string these words together or implement the wrong methods or another set of words, and produce an endless loop of errors. If you may humor me a little, doesn’t this experience of growing pains sound familiar? It is almost like learning a new language (maybe math too)— and I get it, this isn’t the first time you’ve heard of about this and is far from anything mind blowing. If you find that you feel like you’re struggling a bit more compared to your colleagues and friends, there’s some good news. Almost everything you’re learning now, in JavaScript, React, CSS, or HTML is written in a language you already know! You are after all reading this blog thus far. Again, apologies for maybe giving you obvious information, but that’s the point I want to drive home and it’s beautiful. You can find comfort in the fact that the methods uses words that are more or less mundane. The methods will do what you think they’ll do if have the slightest idea of what their definitions are, and if you don’t just pull up a Webster’s Dictionary (or google it!). From there it’s all about context and syntax, baby. It’ll just be like English class in middle school, again.
While on the subject, instead of memorizing, understanding and recognizing terms might be the key to you developing a good arsenal for programming. It can separate you being a competent programmer versus one who is also competent but…who also isn’t able to explain simple concepts and fundamentals to someone who’s 5 years old using Reddit. If you catch my drift, then you’ll also acknowledge that taking the time to sit down and understand one single method at a time can do wonders down the line. Break down the structure of one finished code or any working code that’s substantial and FILTER the methods used and pick one. Understanding one thing very well can mean that you don’t heave to second guess yourself the next time you need to use it. You will just know to use the method instead of looking up a resource for syntax to know if it’s appropriate or not. You can write code almost instinctively if you build good habits over time. Isn’t this how we speak our languages fluently? It’s second nature.
From here until the end of the blog we’ll be navigating through some steps in implementing one single method and concept to help understand what I mean by said process of treating the built-in-functions like the language you speak and understanding how they work in code. First and foremost, take a code…and pretend it has the method .filter( ) since filtering is the idea I want you to take away from here anyways and is actually a very useful method to have under your belt and mastered along the way anyways. Also, it’s totally not because I don’t have anything else prepared for this blog…but we can discuss that later. Next, think about what the word Filter means. As a verb, it is passing something through a device or medium to remove unwanted material. There are some everyday things that associate with the word filter. The coffee that drips into the pot; minerals and other impurities that get caught in “cartridge filter” to allow fresh and clean water to pass through a pump or machine for a drink; and even our lungs that filters oxygen from the air that we breathe are some examples.
Above is an array of objects. This array of objects is, in it’s most basic form, a bundle of information organized in blocks. It can be anything other than what’s defined inside each objects. These are whatever you or another person wants these to be. As mentioned earlier, we give variables value and meaning like how words in the dictionary became words in the first place. Then let’s say you’re given an assignment from your teacher or employer to do something with this information, you immediately start to think about the context for your code. You essentially dictate the context of the code for which you want to implement.
We can first pull out a single key and its value as to just see how it sifts through the data using .filter(). If we want to get the first names of each individual we would write something like…
Where we take the array [users] and attach the method to read each block or object within this array to filter out the values of the key called firstName. And pulling up the console in our browser should display those values of first names like so.
Then what about their names, their identities are important after all, but both their first and last names are separate. How would we go about pulling, or filtering both of these two pieces of information out of the data? Well, if we think about other cases in real life where we were asked to write our full name how do we write them? Normally, on a single line we write our names from first name to last such as “John Doe”, but that would just mean that what we wrote as a whole is our full name. In code we could define that as fullName, correct? What about those times you got an application that deliberately asks you to write your last name and then your first name second on one blank line? Can you recall how you would write that? Wouldn’t you write it as “Doe, John”? And if it’s already not clear here, you would need to add a comma as part of the syntax here if we want to pull out additional information. So, you would write one key in the console.log() and write a second key separated by a comma.
You can choose any order you would like these names to be printed out as, but also notice that I added brackets to wrap around my keys. I basically defined them as arrays. Although it is not necessary and that it is completely fine to write them like you would write your name on a piece of paper, there may be times where you want to treat multiple pieces of data as one unit so you can do other things to it later on. For now, of course we’re just here to discuss the most basics of function just so you don’t get confused. We get more than plenty of complex concepts in the process of learning programming anyways.
Then what if your boss wants you to print out a favorite animal and the name of whom has that animal as their favorite? We can run into an issue where the information displayed will appear like a name.
From here, you might consider adding another layer to the context. You already know the first column of info are names of animals and the 2nd column are a set of first names. So, what do you do? Print out a text that tells the user what they are. Essentially write out keys to which say what the printed values are. It’s just like how code is defined and formatted and it makes sense. Read and write just how you would in any situation as you think your strategies out loud. It works!.
Now again, what terms or how you want to name the keys is entirely up to you. What matters here is that you add layers to give more meaning and more sense to the data you want to produce or present. Now you get the gist of how .filter() method works, you can play around this concept over and over again making errors until you get something you want. This would help solidify what you learned and will do a better job of staying inside your own local storage, your brain. This is basically what I want to drive home to you is that you can apply this same filtering (literally filter) approach to learning and know the in’s and out’s of the building blocks even if it feels slow and if reading about things feels like a drag. There are tons of methods I get it, but if you boil it down to a few coding essentials and methods then you build a solid arsenal that you have no trouble recalling when you receive a coding assignment at school or at work. Ten minutes or half an hour of one method each day can eventually lead to 300+ methods familiarized over the course of a year. And if you find you disagree with this and you’d rather practice code and do repeat challenges of the same concepts, that’s fine too. Just know that all we really need to know is to trust your own language and treat programming like a new language because the simplicity of it is often forgotten.
Many beginners such as I find ourselves trying to solve the problem by force rather than really taking the time to understand what these words, what these codes are talking about. Filtering your information does wonders and I’d like to believe that the answers are already in your own vocabulary. Lastly, when in doubt, say the words and let Google handle the rest.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter