Introduction Advantages and disadvantages of modular programming Organizing the code in only one file makes programming very complicated. For this reason, in JavaScript, as in many other programming languages, the program code is divided into smaller units, the so-called. modules. The division is made according to a certain scheme, which enables good organization and facilitates … Read more
There are 7 data types within JavaScript. Data can be divided into two groups:
a) Data that store primitive value type:
b) Data that stores reference value type:
Package manager is a tool responsible for automating processes related to working with packages. Software packages are located in archive files, and each package contains meta-data that describes the given software (such as the software name, version, and list of all dependencies).
The most common application of package manager is when installing packages and their dependencies. Package manager eliminates the need to manually install software. In addition, package manager can handle updating, configuring and finally removing all those components.
The biggest package manager is npm, which is primarily made for the node.js (server) environment, so in order for it to work in a browser, it is necessary to use module bundler (browserify or webpack). Yarn package manager is the “new kid in town”, Facebook’s baby, it can use all npm packages and has a very similar syntax but it is considered to execute commands faster than npm.
The “overflow” property The overflow property is used to define the behavior of content that is larger than the container itself. This property is not only reserved for text styling but for all types of content, although it is often used for text. The following cases are possible: “visible” – content is visible even across … Read more
The methods call, apply and bind are used to define the meaning of the reserved word this, however this also allows us that by changing the meaning of “this” an object can “borrow” a method from another object, as in the following example:
|
1 2 3 4 5 6 7 8 9 10 |
objekat1 = { name:'Pera', greet:function(){ alert('Hello, '+this.name) } }; objekat2 = { name:'Mika' }; objekat1.greet.call(objekat2); // Returns: Hello Mika |
It is often the case that one of the methods of Array that are built into its prototype object is borrowed.
|
1 |
Array.prototype.slice.call (someObject); |
In this way, we borrowed Array’s slice method to some object.
JavaScript is a scripting language “placed” in a container that allows it to work (read more about JS environment in the article JS environment). That container (browser or node.js) contains objects that enable JavaScript to communicate with the outside world. These objects are known as “external API” or “Web API”. You can see a list of all Web APIs at https://developer.mozilla.org/en-US/docs/Web/API. In the following part, I tried to gather in one place the most frequently used objects and their methods and properties.
JavaScript is a scripting language, therefore it is necessary to “place” it in some container that would enable it to work, that container is called JS Runtime Environment (Serbian environment). There are two types of environments: browser (for working on the client) and node.js (for working on the server). Runtime Environment consists of :
EXPLANATION:
JavaScript is a “single thread” programming language and cannot itself perform multiple simultaneous parallel actions. However, the execution of several parallel actions (so-called asynchronous execution) is possible with the mutual cooperation of JavaScript and its environment. Read more about this in the article “Principle of work of asynchronous JavaScript”.
In JavaScript, there is a term for a piece of code with nested callback functions called “callback hell” or “pyramid of doom”. Debugging such program code and even just understanding it is very difficult. With the ES2015 standard came a new syntax called “promise” (Serb. promise), which with its API provides a better and clearer way to organize callback functions. This is especially noticeable when working with asynchronous operations because with promises the syntax is very similar to standard synchronous syntax.
The most well-known and most common application of callback functions is “handling” of actions after an event has occurred. It is the “handling” of interdependent events that is most often the cause of “callback hell”. This example shows the appearance of such code:
|
1 2 3 4 5 6 7 8 9 |
callEndpoint("api/getidbyusername/nekoime", function (result) { callEndpoint("api/getifolowersbyid/" + result.userID, function (result) { callEndpoint("api/nekidrugizahtev/" result.folowers, function (result) { callEndpoint("api/nekidrugizahtev/" result.folowers, function (result) { // uhh it's already chaos here! }); }); }); }); |
Classes in JavaScript are just a different way of representing constructor functions and methods from “prototype objects”, but without fundamentally changing the inheritance mechanism itself. Background class inheritance is the well-known mechanism of “method delegation” through the “prototype chain of inheritance”.
In JavaScript, the reserved word “class” only indicates that the query is a special type of function, which, unlike a regular function, cannot be called (invoke), but can only be used with the reserved word “new”.
This functionality was introduced into the language with the ES2015 standard, with the intention of improving readability and facilitating the writing of object-oriented programs. When defining the appearance of the syntax, the designers of the standard were guided by the idea of creating such a syntax that will resemble the syntax of most “class” languages”, and thus help programmers who already program in a “class” language” to more easily adopt the JavaScript syntax.
If in the following examples we compare parts of the code written with different syntaxes, we can see that the class syntax is better readable compared to the ES5 syntax:
|
1 2 3 4 5 6 7 8 9 |
var Osoba = (function () { function Osoba(ime) { this.ime = ime; } Osoba.prototype.objavi = function () { console.log("This is it" + this.ime); }; return Osoba; })(); |
The layout of the class is very similar to the object creation syntax according to the ES5 standard, although it is more readable due to fewer lines and unnecessary parts removed:
|
1 2 3 4 5 6 7 8 |
class Osoba{ constructor(ime) { this.ime = ime; } objavi() { console.log("This is it" + this.ime); } } |
NOTE:
Unlike other “class languages”, creating objects in Javascript (even when using classes) is not static ie. is not immutable after the object‘s declaration. In JavaScript, an object after instantiation remains “bound” to the class, with its “prototype object” through the chain of inheritance. Therefore, if we subsequently add or change a method in the class itself, that change will be felt by every object instantiated on the basis of that class.
Prototypal inheritance (eng. prototypal inheritance) is a type of inheritance where an object inherits properties directly from another object (not from a template, ie class). There are two basic mechanisms that enable prototypical inheritance:
|
1 2 3 4 5 6 |
var o1 = { a: 1, b: 1, c: 1 }; var o2 = { b: 2, c: 2 }; var o3 = { c: 3 }; var velikiObjekat = Object.assign({}, o1, o2, o3); console.log(velikiObjekat); // { a: 1, b: 2, c: 3 } |
NOTE:
In the framework of the ES2015 standard, a syntax for creating objects via classes is presented, however, this is only an aesthetic change, because in the background, all work related to inheritance is performed according to the previously mentioned mechanism “prototype delegation”.
