Understanding Prototypes in JavaScript – ITNEXT

Prototypes is a weird and much avoided topic but vital towards mastering JavaScript. While classes are much easier to understand and is often the starting point for many when learning object oriented programming, prototypes is the foundation on which JavaScript is built....

Read full original article here.

#javascript #web-development

What is GEEK

Buddha Community

Niraj Kafle

1589255577

The essential JavaScript concepts that you should understand

As a JavaScript developer of any level, you need to understand its foundational concepts and some of the new ideas that help us developing code. In this article, we are going to review 16 basic concepts. So without further ado, let’s get to it.

#javascript-interview #javascript-development #javascript-fundamental #javascript #javascript-tips

Madilyn  Kihn

Madilyn Kihn

1591242495

Prototypal Inheritance — The second pillar of Javascript

All you need to know about Prototypal Inheritance — The second pillar of Javascript
What we will learn here will help us understand Object-oriented programming(OOP).

#javascript #prototyping #prototype #prototype-chain #js

Rahul Jangid

1622207074

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

  • For single line comment in JavaScript we have to use // (double slashes)
  • For multiple line comments we have to use / * – – * /
<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

JavaScript Prototypes. It Doesn't Have to Be Complicated.

It’s hard to skip prototypes (or the prototype chain or prototypal inheritance) if you want to dive deeper into JS development (Not only pure JS, but also Node.js, Frameworks like Vue.js, React.js, Angular,…).

If you are like me a few years ago and get some serious headache each time you have to deal with prototypes in JavaScript, this will probably be THE article you were looking for to get your head wrapped around the principle of prototypes in JS.

From the  MDN documentation (don’t be scared, we’ll clarify everything below):

When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property (referred to as [[Prototype]]) which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain.

Private [[Prototype]] property

Refer back to the below illustration whenever you feel the need, it might help you to wrap your head around this concept easier.

Prototype chain

So let’s start from the base. Every object in JavaScript has a private [[Prototype]] prototype, which holds a reference to another object (or null). This means, that our new object will have access to methods and properties of that referenced object.

#javascript #prototypes #prototypal inheritance #prototype chain

Understanding Prototypes in JavaScript

I am sure you must have been through the _basics _of JavaScript.By now, you might know that arrays, functions, objects, dates are all _objects._JavaScript is a prototype-based language which means that inheritance works by something called prototypes. Each and every object in JS has a prototype property.

OK, now enough if the fuss about prototypes , let’s understand it.

The usual function constructor approach

As you might be aware of the function constructor approach in JS to create objects so we are going to create a function constructor as such:

var Person = function(name,yearOfBirth,job) {
                      this.name = name;
                      this.yearOfBirth = yearOfBirth;
                      this.job = job;
                      this.calcAge = function(){
                      console.log(2020 - this.yearOfBirth)
                      }
              }

Now, we’ll create two objects Adam and Eve using the Person constructor function:

var Adam = new Person('Adam', 1998, 'teacher');
var Eve = new Person('Eve', 1993, 'painter');

The problem with the above approach is that upon executing the code JS will create two copies each of the properties and methods for the two objects.It isn’t efficient to have two instances of the function calcAge() as storing separate instances of functions for each object ends up wasting memory.Now that’s where prototypes come in.

Prototypes

Every object in JS has a prototype property.This prototype property is an object known as prototype object.It’s the prototype property which makes inheritance easier in JS.

Image for post

Considering the same example if the object Adam wants to inherit a method or a property from the Person object we have to add that method or property to the Person’s prototype property.What is really important to note here is that the Person’s prototype is not the prototype of the Person itself but of all instances that are created through the Person blueprint.So, in this example the Person’s prototype property is the prototype of Adam.

So,the modified Person constructor is as:

var Person = function(name,yearOfBirth,job) {
                      this.name = name;
                      this.yearOfBirth = yearOfBirth;
                      this.job = job;
              }
Person.prototype.calcAge = function(){
                      console.log(2020 - this.yearOfBirth)
                      }

So now when the calcAge() method is called on both the Adam and Eve objects:

Adam.calcAge(); //22
Eve.calcAge(); //27

Now you can observe that while the method calcAge() is not directly in the Person object but we can still access it because it is in the prototype property of the Person function constructor.

#prototype-chain #javascript #prototype #programming