Interview Questions for the Javascript Developer: Hoisting, Prototypal Inheritance, and Attribute vs. Property
Tags: javascript, webdev, career, beginners
Published: 2019-06-13 04:00:41

![Macbook, Pens, Post-it Pad, and iPhone; Photo by Daniel Fazio on Unsplash](https://res.cloudinary.com/dqejlzsb4/image/upload/v1560393782/daniel-fazio-558736-unsplash.jpg)

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

![Crane Hook; Photo by Samuel Zeller on Unsplash](https://res.cloudinary.com/dqejlzsb4/image/upload/v1560393884/samuel-zeller-368928-unsplash.jpg)

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:

{% replit @bcaruthers/Hoisting-Example %}

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:

{% replit @bcaruthers/Hoisting-Example-2 %}

### Prototypal Inheritance

![Man Holding Jar of Money; Photo by Melissa Walker Horn on Unsplash](https://res.cloudinary.com/dqejlzsb4/image/upload/v1560395872/melissa-walker-horn-1072597-unsplash.jpg)

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:

{% replit @bcaruthers/Prototypal-Inheritance %}

Once the constructor function has been defined, then you can create instances like so:
{% replit @bcaruthers/Prototypal-Inheritance-2 %}

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.

{% replit @bcaruthers/Prototypal-Inheritance-3 %}

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:

{% replit @bcaruthers/Prototypal-Inheritance-4 %}

### Attribute vs. Property

![Government Property Sign; Photo by Bruno Figueiredo on Unsplash](https://res.cloudinary.com/dqejlzsb4/image/upload/v1560395878/bruno-figueiredo-1160282-unsplash.jpg)

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):*
###### <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@danielfazio?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Daniel Fazio"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Daniel Fazio</span></a>
###### <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@samuelzeller?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Samuel Zeller"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Samuel Zeller</span></a>
###### <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@sugercoatit?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Melissa Walker Horn"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Melissa Walker Horn</span></a>
###### <a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@bfigas?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Bruno Figueiredo"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Bruno Figueiredo</span></a>