Fundamental Concepts in JavaScript

HOW A SCRIPT REACH THE BROWSER.
Firstly, when the engine of the Browser detects the indes.html, this organize the code by blocks and nodes in a structure like a tree. Now we have two types of scripts we can add to the document: embed and extern.
Normally and following the cascade way the browser build code is a good practice to situate this script label at the end, before the body label closes.
When the browser finds a script, it detains all to focus on the label. This is called synchronism but with the attribute async we can transform this process into asynchronous. Now what is the case if we have multiple scripts asynchronously? Basically, it sends the tasks simultaneously and depending how fast they are process, they will be brought.
Now there is the attribute defer, this will act the same as async with the difference that defer will always process the script at the end, does not matter where you position the label.
SCOPE.
Scope of a variable can be described as the lifetime of this one. This will help as mark and sweep because it will free space for more variables or code. Scope is a environment where the variable was born and will live, these can be: Global Scope, Function Scope, Block Scope and Module Scope.
• Block Scope: It affect to the block of code between brackets “{}”. These are variables as const and let.
• Module Scope: recent addition, the lifetime of the variable is determined by the file it is found. This is in recent versions of Bowsers but can be used also when modulate among JavaScript files.
The scope is related with the Heap Memory, space where all variables and function values will save for its future use. Scope is necessary but it can cause some confusions specially in older versions of JavaScript with the variable var and how this is declared beforehand.
CLOSURES.
Scope and functions can derive into Closures, this allow us to have private values because when functions are created this have a function lifetime so later on is impossible to access those values.
A perfect example of closure are those inner functions that can access to the variables of upper functions they are in, Scope. This makes possible the creation of private variables, unmodified from objects or external users.
FIRST PLUGGIN.
Going back to the project, it is necessary to know the strategies and how to add pluggins.
Firstly in the prototype is necessary to indicate this.pluggin with a initial value as an empty array or no value. After this.plugin can be made in a file we export to index.js, and what will this plugin do? In this case it will auto play the video.
Now in the file Autoplay we can make the code for the plugin, it is a class where it has to be indicate the initializing of the plugin. Access to the prototype and create a method function, but remember, the video to be auto played needs to be unmuted, so accessing the properties of the video, this can play if it is muted.
Conclusion: when the object is created MediaPlayer, it receives other object Autoplay. These both are classes, but the main prototype is MediaPlayer. The other one is a Plugin which prototypes are related to the main object created, in this case to auto play the video. These plugins need to be initialized with the main object this as parameter, so this plugin can be active now of running.
THIS.
This is used commonly in languages orientated to object (POO) like JavaScript in this case. This makes references to the instance of a class. There are some types of this we can find:
• Global scope: the browser will always refer to the object window.
• Function scope (strict more / no strict mode): without strict mode the browser by default will assign the window object. But with strict mode it will return undefined.
• Inside an object: this point to that property of the object, for example in a method. But inside and called by this object.
• Inside a class: Here this works as a constructor. It can consider as an empty object that will be filled with a value. For example, “this.name = name”.
Conclusion: this point to objects or instances, we can use it to call variables’ values from these or to reference instances when building classes. There are four kind of scopes for this, the global and functional scope where it will point to window, except in function scope if ‘strict mode’ is used; objects, to point values of this; and classes, to refer to instances.
CALL APPLY AND BIND.
There are methods in the function’s prototype that will help us to specify which this we are working with.
• This with call: the function with or without arguments is executed by .call and as first parameter has to be sent the object we want this to point to.
• This with. apply: As .call method but in this case the arguments are sent with an array, if the function has arguments it will be with .apply the object and array of arguments.
• This with. bind: This method just links and does not execute the function. So frequently the function with this method is content in a variable and when this variable is called is when it is possible to pass the arguments. Also, it is possible to add partially arguments with bind and then when calling the function, this process it is calling currying.
A very useful example of how these methods apply is in the case of working with List Nodes, this are not array but has some properties as length. In this case we call the prototype of the array and execute it with call and sending the object Node List and the arguments that can be a function or variables.
Conclusion: these functional methods are very helpful when working with objects and classes when mentioning or managing its variables and functions. Basically, these methods link, and some execute the function, when needing arguments some uses arrays, or not, or can currying them.
PROTOTYPE.
In JavaScript there are no classes so to work with prototypes we use objects and their methods to create new instances.
Firstly, we have the simple object, declared with brackets and properties with its values inside. To create methods then it needs to be mentioned the method and create the value. To make this more practical, it can be an original object when called we can send arguments as name and can called methods as “greeting”.
To increment the efficiency, this object can inherit the properties of other one with Object.create(), where the argument is the object we want to extract from. Also, these Objects has prototypes, base where they build up. We can access that prototype with .prototype and add or remove certain properties.
Finally, the implementation of all this past practice has derived into a the keyword New that creates a new object with the properties of a prototype we can construct. It is known as a “sugar syntax” it means a shorthand to create object. There is other known sugar syntax as class.
Conclusion: Everything in JavaScript is manage by objects and its prototypes. To make instances we can do it manually in several levels of complexity or just with the shorthand New. In any case it is important to have a strategy and understanding about creating instances.
PROTOTYPAL INHERITANCE.
This process it makes JavaScript easy to manage because natively all objects are constructed by a prototype, so they are accessible, making the language manageable at personalized levels.
Objects has a property that is also an object, this one contains all the path and references that gave birth the object declared. To know if the properties or methods we are calling are native or from the own object, it is used “.hasOwnProperty”.
This means Objects has a genetic tree where the higher one is the result of the develop of the branches bellow. There will be new branches but all of those will have the ADN and history of the ones before.
Conclusion: JavaScript is constructed by objects, but these are native and have their own structure. When we create new objects, these are instances will have the history of the objects that made it and all the properties, accessible. So, when a method or property from an object is undefined that means it does not exist in any of the prototypes related.