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.
Oldest comments (6)
Few notes:
var
and with functions, where the last function with a given name is calledclass Dog {}
Friendly reminder that the "classes" are just syntax sugar.
Actually all declarations are hoisted. Trying to access variables declared with
let
andconst
before the declaration will hit the temporal dead zone and will throw.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
, andconst
are all three hoisted by JavaScript, butlet
andconst
throw an error, as Stoyan stated.One of my mentors was born in Idaho
I love this article. Thanks