Interview Questions for the Javascript Developer: Hoisting, Prototypal Inheritance, and Attribute vs. Property

#javascript #webdev #career #beginners

Going on a job interview is scary. It can be especially scary if you are interviewing for a new career field. Whether you just graduated from college, completed a coding bootcamp, or are a self-taught web developer, you need to make sure you are prepared for the types of questions that you may be asked during an interview. In this new series, I am going to choose a few topics that you could be asked questions about during a JavaScript frontend developer interview. I am not only doing this to help you, the reader, prepare for your upcoming interview, but I am also doing this as a way to help me prepare for my own upcoming interviews. In this article, I will cover hoisting, prototypal inheritance, and attributes vs. properties.

Hoisting

Hoisting is where variable declarations are “hoisted” or lifted to the top of their scope. If the variable is inside a function, it is lifted to the top of the local/functional scope. If the variable is outside of a function, it is lifted to the top of the global scope. This is done regardless of where the variable declaration was made.

So, if we were to write the following in the global scope:

We would get back undefined. The reason that we get back undefined is that it is recognizing that the variable hello exists, but because of hoisting, the variable declaration is hoisted to the top of the global scope, but the actual value given to the variable is not hoisted. The code is compiled as if it was written as:

Prototypal Inheritance

It is often said that everything in JavaScript is an object. The exception is primitives (numbers, strings, booleans, undefined, and null). Functions, arrays, objects, and wrappers for strings, numbers, and booleans are all objects. Objects are used to store data, keep our code clean, and to structure applications into modules. JavaScript uses constructors or prototypes (other programming languages call these classes) as a sort of blueprint to create other objects (instances). This is typically done by creating a constructor function:

Once the constructor function has been defined, then you can create instances like so:

You might be thinking, this is cool and all, but what does this have to do with prototypal inheritance? Hang on I’m getting there.

Let's define inheritance. Inheritance is simply when one object gains access to the properties and methods of another object. The term prototypal is just referring to the fact that Javascript is a prototype-based programming language.

Now back to our example. Here we will add a method to calculate the age of the dogs (in dog years, of course), but we will add it outside of the constructor function using the prototype property.

By using the prototype property, the objects fido and fefe, have access to the method calculateAge. The reason that they have access to this method is because of prototypal inheritance (I told you that I would bring it all together). So if we were to run fido.calculateAge() and fefe.calculateAge(), we would get the age of the dogs in dog years. Here is the full snippet of code:

Attribute vs. Property

Attributes are defined by the HTML (Hypertext Markup Language). They provide additional information about the HTML elements. Examples of attributes are:

href
src
type
value
alt
etc…

Properties are defined by the DOM (Document Object Model). Once your browser parses your HTML elements, a DOM node is created. Because this node is an object, it has properties. Examples of properties are:

accessKey
attributes
childElementCount
className
accept
children
etc…

The main differences between attributes and properties are:

Attributes are defined by HTML and properties are defined by the DOM.
DOM properties are initialized by HTML attributes.
Attribute values cannot be changed.
Property values can change.

As you can see HTML attributes and DOM properties are two different things.

I hope that this article has helped you to better understand hoisting, prototypal inheritance, and the differences between HTML attributes and DOM properties. It is my even greater hope, that it will help you ace an interview and land you that frontend development job in which you are applying. I wish you the best of luck and thank you for taking the time to read this article.

Photo Credits (in order of appearance):

Daniel Fazio

Samuel Zeller

Melissa Walker Horn

Bruno Figueiredo

Top comments (6)

Antony Garand • Jun 14 '19 • Edited

Few notes:

Hoisting only happen with var and with functions, where the last function with a given name is called
Primitives:

primives (numbers, strings, booleans, undefined, and null)
There are two other: bigint and Symbols (MDN link)

You can have actual classes in javascript, using class Dog {}

Bryant Caruthers • Jun 16 '19

Hi Antony,

Thank you for taking the time to read my article and to leave a comment. I did forget to include bigint and symbols. In regards to hoisting, only function declarations are hoisted. Function expressions do not get hoisted by JavaScript. When it comes to variables, var, let, and const are all three hoisted by JavaScript, but let and const throw an error, as Stoyan stated.

Stoyan Peshev • Jun 15 '19

Actually all declarations are hoisted. Trying to access variables declared with let and const before the declaration will hit the temporal dead zone and will throw.