Day 6 - JavaScript - hoisting, event bubbling, prototype etc.
Hoisting
That’s mean that JS engine moves all variables to beginning of the lexical scope.
Example:
function hoisting() { console.log(x); // undefined - that's mean that variable x aleready exists!
if (true) {
var x = 1;
}
console.log(x); // 1
}
JS engine transform above code:
function hoisting() {
var x; //JS moves variables declaration to begining
console.log(x);
if (true) {
var x = 1;
}
console.log(x);
More informations and examples MDN web docs
Tips
Good practice - declare all variables on the beginning of the code
Event bubbling
Event Bubbling is the event starts from the deepest element or target element to its parents, then all its ancestors which are on the way to bottom to top.
Source javascript.info
More informations Medium javascript.info
Prototype
The prototype is a reference to another object and it is used whenever JS can’t find the property you’re looking for on the current object. Prototype inheritance provide posibility interact with any elements as an object. JavaScript objects have a link to a prototype object. When trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end of the prototype chain is reached.
More informations