More Javascript Fundamentals 101

JavaScript Fundamentals 101:

As an assignment for myself, I've taken on github user: Yangshun's front end interview handbook as a textbook for myself as I prepare for interviews. You can find the github link below in my sources if you want to go straight to the source!

Explain Event Delegation

"Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM. The benefits of this technique are:

Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.
There is no need to unbind the handler from elements that are removed and to bind the event for new elements."

Event delegation is great for applying an event listener to listen to all the elements inside the parent element versus adding an event listener to each child element. David Walsh does a great example of this below. Instead of placing the event listener on all the tags in the document, the example sets an event listener at the parent level and conditions it execute if the action is performed on a tag with a classA CSS class.

// Get the element, add a click listener...
// Get the parent DIV, add click listener...
document.getElementById("myDiv").addEventListener("click",function(e) {
    // e.target was the clicked element
  if (e.target && e.target.matches("a.classA")) {
    console.log("Anchor element clicked!");
    }
});

What's the difference between a variable that is: null, undefined or undeclared? How would you check for these states?

Undeclared variables are when values are assigned without var, let, or const.

pinocchio = liar //considered global variable or if in strict mode, it will throw a reference error

An undefined variable is a variable that has been declared but has not been assigned a value

var pinocchio
console.log(pinocchio); // undefined

A variable that is null is strictly assigned to the variable. It has no value.

var pinocchio = null
console.log(pinocchio) // null

Can you describe the main difference between a .forEach loop and a .map() loop and why you would pick one over the other?

"forEach

• Iterates through the elements in an array.
• Executes a callback for each element.
• Does not return a value.

map

• Iterates through the elements in an array.
• "Maps" each element to a new element by calling the function on each element, creating a new array as a result."

const array = ["Dorothy", "Rose", "Blanche", "Sophia"]
array.forEach((name, index) => {
  console.log(name + "'s number in the index is " + index);
});
// Dorothy's number in the index is 0
// Rose's number in the index is 1
// Blanche's number in the index is 2
// Sophia's number in the index is 3

const array = ["Dorothy", "Rose", "Blanche", "Sophia"]
const doubled = array.map(name => {
  return name + ":Golden Girl";
});

doubled
// [ 'Dorothy:Golden Girl',
//   'Rose:Golden Girl',
//   'Blanche:Golden Girl',
//   'Sophia:Golden Girl' ]

When would you use document.write()?

I don't quite understand this so I'll let yangshun explain:

"Document.write() writes a string of text to a document stream opened by document.open(). When document.write() is executed after the page has loaded, it will call document.open which clears the whole document (

There are some answers online that explain document.write() is being used in analytics code or when you want to include styles that should only work if JavaScript is enabled. It is even being used in HTML5 boilerplate to load scripts in parallel and preserve execution order! However, I suspect those reasons might be outdated and in the modern day, they can be achieved without using document.write(). Please do correct me if I'm wrong about this."

If you have anything to add, please do in the comments below, thanks!

Sources:

Huge huge thanks to github user: yangshun for aggregating the most popular JS, CSS and HTML questions and giving us his answers to it. My weekly blog posts are to go over several questions at a time to reinforce my knowledge of fundamental javascript as I grow my expertise in it. Many of my blog will be paraphrasing if not direct quote from his github. Find his tech interview handbook here and please support him!

And an additional thank you to Flatiron alum: Marissa O. who is a badass developer at Forbes magazine for directing me to his blog!

Other sources:

https://davidwalsh.name/event-delegate