JavaScript Keeps Growing, and Growing, and Growing
Describe one thing you’re learning in class today.
In today’s class, Regex (Regular Expression) was introduced. Regular Expressions, as defined by MDN Web Docs, “are patterns used to match character combinations in strings.” Regular expressions are also objects in JavaScript and are used with other methods including but not limited to the test() method, search() method, and the split() method.
After diving right into regular expressions, I had to search for a “real-world answer” because at first glance Regex seemed pretty daunting. After asking Google, “What is the point of regular expressions?” my hunch was anything but correct. I thought that Regex was used for implementing security measures on sites because of its pattern matching qualities, but in researching this topic it’s quite the opposite. Using regular expressions actually leads to vulnerabilities. What Regex is actually useful for, according to Faraz Kelhini, is for validating text inputs and greatly simplifying tasks such as replacing multiple instances of substrings, where other methods such as the replace() method will replace a single substring.
This is only the beginning of what Regex, clearly a powerful tool, can do.
Can you describe the main difference between a forEach loop and a .map() loop and why you would pick one versus the other?
The main difference between a forEach loop and a .map() loop, is that a .map() loop will return a new array with transformed elements. Additionally, other methods can be tacked on after the .map() loop in the same line of code such as reduce(), filter(), and sort() to name a few. Doing this with forEach would return undefined.
Ultimately, if a developer plans to use or change the data, like pulling usernames from an array of objects, .map() would be beneficial. Check out Mrinal Raj’s article, JavaScript in Real World for a visual explanation.
Finally, a forEach loop iterates over an array and does things for each item in the array. For a great example and detailed explanation, check out Syk Houdeib’s article “What in the World is a JavaScript Loop?”.
“Indescribable… Indestructible! Nothing Can Stop It!”
— The Blob, 1958
Describe event bubbling.
Have you ever seen the 1958 sci-fi film, The Blob? You know, the one where “An alien lifeform consumes everything in its path as it grows and grows.” This is what I picture when I think of event bubbling or event propagation. Oxford Languages Dictionary defines propagation as “the action of widely spreading and promoting an idea, theory, etc.,” and “transmission of motion, light, sound, etc. in a particular direction or through a medium.” In simpler terms, as expressed by developer and author Amber Wilkie, event propagation is “a way to describe the “stack” of events that are fired in a web browser.” She goes on to explain that in order to grasp event bubbling, one needs to understand that all elements are nested within each other, and of course, everything is nested within the DOM. Like I’ve expressed before, Inception.
Let’s look at an example to understand propagation further. If a developer is adding an event listener such as onClick on a list item <li> for example, the event will be passed to the function that is called. If that function is called on the <ul> parentElement, and the event listener is actually only meant for one of the child elements, bubbling can start to occur. It’s even possible that bubbling could spread outward among parents and parents of parent elements and next thing you know, you’ve got The Blob. Okay, so maybe that’s a bit much, but if you’ve got a little Steve McQueen side to your coding, then you can keep that bubble contained. How? Remember, only you can stopPropagation. In fact, e.stopPropagation() is the King of Cool you need, to get a handle on keeping everything at bay. For a great and easy way to understand event propagation, along with a comparison between stopPropagation and preventDefault, read Amber Wilkie’s article on Free Code Camp, “A simplified explanation of event propagation in JavaScript.”
What is the definition of a higher-order function?
“Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions…
Higher-order functions allow us to abstract over actions, not just values. They come in several forms. For example, we can have functions that create new functions.”
— Marijn Haverbeke, Eloquent JavaScript 3rd Edition
“A function that accepts and/or returns another function is called a higher-order function.
It’s higher-order because instead of strings, numbers, or booleans, it goes higher to operate on functions. Pretty meta.”
— Yazeed Bzadough, “A quick intro to Higher-Order Functions in JavaScript”
ES6 Template Literals offer a lot of flexibility in generating strings. Can you give an example?
In 2015, you would have thought that creating multiline strings wouldn’t have been a hassle. To someone new, brand spanking new in coding, (ahem) I would have thought to just use a <br> break tag. But to my knowledge, that’s not the case for JavaScript. Or even better, just press Enter to start a new line. Even handling apostrophes when writing in Vanilla JS, I’ve come up against issues incorporating possessive nouns in strings. I’m also still looking for the difference between single and double quotes when creating strings and would love to hear someone’s preference between the two. So when I discovered the possibilities of using backticks, I started becoming a fan of this much-neglected key in my world outside of coding.
In his article, “A Guide to JavaScript Literals,” author and programmer Flavio Copes shares examples of just how much flexibility ES6 Template Literals can offer. One way that’s already been mentioned is multiline strings, but another is interpolation by using ${…}. This syntax offers the opportunity to include anything including functions, expressions, and variables.
For a great visual breakdown on ES6 Template Literals, you can read Copes’ article here.
What is an associative array in JavaScript?
Nearly everything in JavaScript is an object which makes an associative array an object. The key difference though (see what happened there) is that instead of JavaScript looking at an array like so:
let deNiro = [“Travis Bickle”, “Vito Corleone”, “James Conway”]
deNiro[0] is “Travis Bickle”, deNiro[1] is “Vito Corleone”, deNiro[2] is “James Conway”
However in JavaScript, while the below line of code is an object, author Tony de Araujo notes in his post that “other languages might call this an array because it acts like an array.”
let taxiDriver = {director: “Martin Scorsese”, writer: “Paul Schrader”, actor: “Robert De Niro”};
taxiDriver[“director”] is “Martin Scorsese”, taxiDriver[“writer”] is “Paul Schrader”, taxiDriver[“actor”] is “Robert De Niro”
Ultimately, de Araujo contends that what are known as objects in JavaScript are known as associative arrays in other languages.
To read de Araujo’s post, answering What is an associative array? click here.
Why should you never use new Array in JavaScript?
One of the most suggested reasons to avoid using new Array is that it will return undefined. Another reason, according to user barkmadley, is that using an array literal [] is preferred because “It has less bytes to transfer over the wire, less bytes to interpret, less mental resources to parse it. Less is more.”
User barkmadley gives this favorite answer on Stack Overflow. You can refer to their post here.
