DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Bryant Caruthers
Bryant Caruthers

Posted on • Updated on

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

Macbook, Pens, Post-it Pad, and iPhone; Photo by Daniel Fazio on Unsplash

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

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

Man Holding Jar of Money; Photo by Melissa Walker Horn on Unsplash

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

Government Property Sign; Photo by Bruno Figueiredo on Unsplash

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)

Collapse
 
antogarand profile image
Antony Garand • Edited on

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 {}
Collapse
 
bcaruthers profile image
Bryant Caruthers Author

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.

Collapse
 
ogonommo profile image
Stoyan Peshev

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.

Collapse
 
arrogar profile image
Robbie Datkov

Friendly reminder that the "classes" are just syntax sugar.

Collapse
 
aftabksyed profile image
Aftab Syed

One of my mentors was born in Idaho

Collapse
 
_martinjose28_ profile image
martin jose

I love this article. Thanks

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!