Intive Blog

Meetup “Frontenders take the lead”. Vol 1: JS

We had our first meetup in intive-FDV last month, “Frontenders al poder” (Frontenders take the lead), an event aimed at sharing things we learn everyday with the community. In this first edition, focused on the Frontend world, Daniel Mata and Mariano Furriel prepared a talk on Javascript, and today –through our blog- we are launching it to the online world.

JS fundamentals

Dari told us the basic JavaScript fundamentals, and he made it clear for us that his language is today the heart of the web, designed mainly to add dynamic behavior to any web site. All modern browsers interpret the JavaScript integrated on any web page. It is an extremely flexible language that allows us to do practically everything, and is constantly updated by ECMAScript, the organization which manages it. We also need to mention that JS is easy to learn but difficult to master, because of it dynamism that is periodically modified.

Paradigm and other types of JS variables

JavaScript can be placed within the paradigm of certain languages. If we had to classify it somehow, we could consider it as an intermediate language between and object-oriented and a functional one, but JS “is utterly independent, it does not use only one paradigm”. In JavaScript, since it is a non-typed language, a variable can store a number and later store a phrase in the variable. It does not need to change its typing by a function to be able to change the type of information that the variable stores (this would happen in a typed language). Among the type of variables that Javascript manages, there are “objects” (the most powerful variables that exist, according to Daniel), that may have references to functions outside the object, as we can see in the example:

Screen Shot 2017-07-19 at 2.46.10 PM

The way to access the object properties is as follows:

Screen Shot 2017-07-19 at 2.52.24 PM

The “builder” defines a plane or a structure for each object to be created, and the plane is filled with the object properties.

Definition of a generic object

Following the same example, many times we want to create many instances of a same object. In this specific case, we want to make many instances of “Person”. For this we do the following:

Screen Shot 2017-07-19 at 2.51.19 PM

“This”

“This” creates the rules inside the compiler, it indicates in which context a function is executed. In the previous example, we set that the new variables (“name”, “lastName”, “foreign”) belong to the context where the function was executed.

“This” is dynamically defined while the program is running, and its behavior may vary.

To define it, two methods can be used:

  • .bind: The method .bind() creates a new function that, when invoked, assigns to its operator “this” the delivered value, with a sequence of given arguments. The use of .bind() is important because each function has its own given context, and it is necessary to specify it in an implicit way before calling a method that uses values associated with the “this”.
  • apply / call: There exist two options for this method:
  1. apply: It allows us to call a function passing it through a context and a series of parameters in the form of an array.
  2. call: It allows us to call a function passing it through a context and a series of parameters individually.

The difference with .bind() is that .bind() returns a new function with an assigned context.

About classes and prototypes

Objects will always have a prototype assigned, which is the mother object from which they “inherit” their properties.

A class, on the contrary, is a “spreadsheet” to define objects. They are used to represent entities or concepts from reality. In the new JavaScript standard (ES6 or ECMAScript 2015) the concept of classes to define objects was introduced.

Let us see an example of a chain of prototyping that Dani showed us in this presentation:

Screen Shot 2017-07-19 at 4.00.37 PM

In this stage we would be redefining the prototype that comes by default with the object “Person”. We then add the function “showName”. Thus, we achieve that by creating a new object “Person”, it inherits such function automatically from its corresponding prototype, as we can see here:

Screen Shot 2017-07-19 at 5.15.21 PM

We then create a prototype for “Employee”. When we create a new object “Employee”, even though its prototype does not have the function “showName”, JavaScript searches the object previous to the chain for the prototype “Person” and attributes it to it anyway. Hence, we can say that the prototype “Employee” is “inheriting” attributes from “Person”.

Screen Shot 2017-07-19 at 4.08.48 PM

On a third level, the same happens with the prototype of “Pensioner”, which will inherit the attributes from “Employee” and “Person”.

Screen Shot 2017-07-19 at 4.07.50 PM

We have to be careful when modifying the corresponding prototypes in order to avoid mistakes that may lead to performance or memory problems, especially in more complex models than the one Daniel showed us. What we learnt in this meetup is that (if it is well used) prototyping is a very useful tool that JavaScript offers.

Do not miss the next article about the meetup of Frontenders, where we will be telling you everything we learnt about React.

Daniel Mata

Daniel Mata is a Frontend developer in intive-FDV and a Systems engineer from the Universidad Nacional Experimental Politécnica de la Fuerza Armada Nacional (UNEFA).

Born in Venezuela, he moved to Argentina a year and six months ago [at the time of this biography: July 2017]. He enjoys reading, cooking and gaming. His main preferences in those fields: detective novels, pasta and adventure games.

Paula Becchetti

Paula is the editor of intive’s blog. She holds a degree in Audiovisual Communication from Universidad Nacional de San Martín (UNSAM) and is a Content Manager specialized in blogs, web content, email marketing and social media. Her extensive experience in the software industry makes her very valuable when it comes to translate technical content into a colloquial language. According to her own words: “I connect with the world through technology, but also through everything that breathes, sport, music and my travels.”

Add comment