Front-End Fundamentals

So, you’re an awesome JavaScript developer. You love working on the frontend, and you see a ton of job openings for the role. But, do you know your fundamentals? It is very possible you can be an awesome JS developer and when asked a simple question, like the difference between var and let, you are just stumped for a moment.

It is the case with many job opportunities that one is first asked these fundamental type questions, usually over the phone, to gauge whether or not you really know your stuff. And this isn’t to say you can’t be an awesome frontend developer and not know an answer. But there are certain fundamentals and common conceptual questions, that will really help in these first round interviews. In this article, I will highlight a few of those fundamentals.

What is the difference between “==” and “===” in JavaScript?

This is a question I’ve been asked multiple times in these first round type interviews. The first time, I could give a vague answer, one that was acceptable, but not ideal.

The difference between “==” and “===” in JavaScript, is that “==” only compares the values of two expressions, while “===” compares both the value and type of those expressions. Take this as an example:

'1' == 1 // yields true
'1' === 1 // yields false

In the first instance, ‘1’ the string, and 1 the integer will yield true with double equals. With triple equals, we are not only comparing the value, but also the type. As such, the string ‘1’ is not “===” to the integer 1. This can sometimes be a tricky concept, but it’s as simple as an extra level of comparison.

The difference between var, let, const

This is another question very often asked in these types of lightning round, first step interviews. I have actually already covered this in an entire article to itself, and can be found here https://medium.com/@hutselljustin/var-let-const-variable-declarations-with-es6-f3a2f9da37f5 .

The basic idea of the differences is this, let is very similar to the older, var. They both have block scope, and will only be accessable within the block in which they are declared. The difference is that data declared with var is hoisted, in that, the variable will be known before it is decalred, but its value will not, which sometimes leads to tricky bugs in your code. The declarations made with const also have block scope, but these values cannot be reassigned after their initial declaration.

I encourage you to read further into this topic, as stated, I have written an etire article on the matter.

The difference between the values of null and undefined

This is another concept some may not have the strongest grasp of. On the surface, both null and undefined represent an empty value. This might lead one to believe that they are interchangeable, but this is incorrect.

Often times one may get an error stating that a function or variable is “undefined”. Undefined in this case is an empty value, assigned to a variable, that has not be assigned a value. For instance, if you declare a function and don’t include an important detail such as a return value, or incorrectly call it, the function will yield undefined, while you may be expecting a result.

A value that is null, which also represents an empty value, is assigned purposely by the developer. It is sometimes the case that you want a value to be declared as null, or empty. In this case you could assign it as such:

let cat = null

This variable can later be reassigned, or altered, but the point is that you have assigned it the value of null, the differentiation between null and undefined.

Closures

The last concept I will discuss is the one known as “closures”. This is another common interview question, “In JavaScript, what is a closure?”.

The most basic explanation of what a closure is, is any function where you have access to, and can utilize, variables or functions from outside its scope. The idea is that the function preserves the data of its outer function. So if you were to declare a function within another, you will have access to the variables declared in that outer function. A closure can be summed as a function with preserved data. Here’s an example:

function fullName(firstName, lastName) {
  let fullNameExpression = "My name is ";
  function sayName() {
    return fullNameExpression + firstName + " " + lastName
   }
  return sayName();
}

In this case, you have access to the variables passed into the outer function of fullName, and can use them in the inner function, sayName. This is a very simple example, and things can become complicated with closures, but the basic principle is that the inner function has access to the data of the outer function.

Thanks for reading my article, and I encourage you to continue exploring these small concepts which make up key fundamentals in JavaScript. Happy coding!