JS Methods map, includes, reverse and more explained…with a twist!
(You won’t believe what happens next!)
You’re probably muttering to yourself, “What did I just look at?”
Well, we’re in the last week of phase 4 before the final solo project of the Full-Time Software Engineering Program. Pretty burnt out but I’m feeling extremely proud of what I was able to learn in the past 12 weeks. I’ve wanted to develop a programmer skillset for myself for a long time. It only took about 5 years after college to finally make the leap and start the learning process. I’m so proud of this achievement…
That I’m contemplating getting a programming related tattoo about it. What you just witnessed in the image above was a short brainstorming session of tattoo ideas that I’m considering getting. The ideas are based on common Javascript methods, syntax, and expressions. I’ll be presenting some of the tattoo ideas and the Javascript meanings behind them.
Tattoo #1
Hank.includes(“HEART”) //=> true
Not feeling the script…or this one in general but let’s talk about includes(). includes() is a string class method in Javascript that checks whether a string contains the characters of a specified string.
Example:
let stringOfWords = “flatiron school”
let test = stringOfWords.includes(“school”)
test //=> true
A quick thing to note about includes: This method is CASE SENSITIVE. If you tried
stringOfWords.includes(“SCHOOL”) you would get a return value of false
Tattoo Meaning: HANK(my nickname) is a string containing all of my attributes. Checking to see if I have “HEART” you get true! I got a big heart!.
Tattoo #2
society.map(person => person.beKind() )
A lot going on here. Let’s walk through the map() method. map() is an array class method. Calling it on an array creates a new array with the results of calling a function for every array element. This method calls the provided function once for each element in an array, in order.
Here’s a very simple example of map() in action.
const numberArray = [3, 5, 99, 1000]
let newArray = numberArray.map( num => num*4 )
newArray //=> [12, 20, 396, 4000]
You can see that the every number in the array is multiplied by 4 and each one of those transformations is stored in the corresponding index. Also, understand that map() is a Non-Destructive array method meaning that it does not change the original array. To learn more about destructive and non-destructive array methods visit the following link: https://doesitmutate.xyz/
Tattoo Meaning: Society is an array of all the people on the planet. Let’s transform one by one by running a beKind function on them! Be kind!
Tattoo #3
chaChaRealSmooth.reverse().reverse()
Our good friend .reverse() is the method in play here. reverse() is an array class method. This method reverses the order of the elements in an array.
Example:
let arrayOfThings = [“NY Giants” , “Spacestation Gaming”, “LA Dodgers” ]
arrayOfThings.reverse() //=> [“LA Dodgers” , “Spacestation Gaming”, “NY Giants”,]
reverse() comes in handy when you need to display a list of items in descending order.
Tattoo meaning: Well…reverse reverse *record rewind sound* Charlie Brown!
Tattoo #4
beastMode()
beastMode() is an expert level function used by the 7th dimension monks of Agile enlightenment for hacking the JS engine to change your entire JS app into images and text rendered in 🔥 emojis.
Nope, just kidding. It’s not a standard JS function. But you could make it do something cool by defining the function yourself. Source on how to do that in Javascript: https://www.w3schools.com/js/js_functions.asp
However, I do want to quickly explain the ( ) that you see at the end of some of the functions mentioned throughout this post. The ( ) is a function invocation which you can read more about here: https://www.geeksforgeeks.org/javascript-function-invocation/#:~:text=JavaScript%20Function%20Invocation%20is%20used,when%20the%20function%20is%20invoked.
When a function is referenced in a sea of Javascript code without the parentheses it is not actually being ran. Depending on the context you need to add ( ) with no space between the parentheses if you want the function to run immediately. This could be a fetch in vanilla JavaScript or something like an immediate sort when a page is loaded. In some cases you may just want to reference the function definition to be invoked once something happens. This is common in event listening. In that case, reference the function without the parentheses so that it doesn’t immediately run once its created by the Javascript engine. Learn more here about a special case of these in React here: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state
Tattoo Meaning: Going beast mode on ‘em
Well, thats enough tattoo ideas for today. Looking to get a tech/programming inspired tattoo soon. Comment your favorite tattoo in the comments section below with a 1, 2, 3, or 4. Also, share some funny programming tattoos if you have any ideas. I’ll get the tattoo that is most popular in the comment section.
Cheers!
