This is my very first post on anything interview related. I figure it would be helpful to cover common Javascript questions during an interview. As mentioned in a previous posts, Javascript is totally different beast. From my experience, my interviews have been pretty tame. They were mainly OOP related questions but this was before ES6, before Javascript classes and constructors were introduced. I remember having to write literal objects on a white board and explaining this object’s properties and methods.
Javascript has evolved since then as well as my understanding of of Javascript and its weird parts. This is a continuation on a series I’m covering based on this youtube channel – Top 10 JavaScript Interview Questions, so again – all credit to TechSith for creating this video.
Alright, time to immerse ourselves into some Javascript questions. Keep in mind that with a Javascript interview – you may get a wide range of questions from DOM, jQuery, Browsers, Javascript concepts related to closures, scope, scope chain, lexical scope and prototypal inheritance to name a few.
Question: 1. What is the difference between keyword “let” and “var”?
* “let” was introduced in ES6.
* “var” was introduced from the beginning
* “let” has block scope – will die (garbage collected) after a block
* “var” has function scope – will die (garbage collected) after a function
* “var” gets hoisted at the top of it’s function.
* “let” does not get hoisted
“let” vs “var” example
let x = function() {
if (true) {
var v = 2;
let l = 1;
}
console.log(v); // Output: 2
console.log(l); // will result in ReferenceError: l is not defined
}
x();
Let’s move the code around a bit. Let’s pretend our interviewer wanted us to move to code around a bit, by moving our logs up at the very top of function before our variables are declared.
let x = function() {
if (true) {
console.log(v); // Output: undefined
console.log(l); // ReferenceError: l is not defined
var v = 2;
let l = 1;
}
}
x();
So why is “v” outputting “undefined” and why is “l” resulting in a ReferenceError? Well if you recall any variables declared with the “var” keyword gets hoisted within a function block, in this case our function x(). “let” on the other hand doesn’t get hoisted, therefore the variable defined with “let” is only available after it is assigned a value.
Question 2: What is the difference between “double equal sign” and “triple equal sign”?
This is one of the easier questions – I personally never had a problem with this one. But if you are then a good rule of thumb to remember is that a “double equal sign” and “triple equal sign” are comparison operators. That’s a good place to start. Second, “double equal sign” only compares the value. Whereas a “triple equal sign” compares not only a variables value but also its data type.
“double equal sign” example.
if ('1' == 1) {
console.log('equal');
} else {
console.log('not equal');
}
// this will Output: equal
So when the if statement above is run, we get “equal”. This is because a “double equal” operator only compares value but not type.
Let’s consider a “triple equals” example now, where both value AND type are being compared.
if ('1' === 1) {
console.log('equal');
} else {
console.log('not equal');
}
// this will Output: not equal
3. Question: What is the difference between “let” and “const” keywords?
* with “const”, after it’s first assignment to a value, you cannot reassign the value again. * with “let” or “var” you can reassign it a value at any time.
“const” vs “let” example
let l = 1; l = 2; console.log(1); // Will output 2 const c = 1; c = 2; console.log(c); // Will output "TypeError: Assignment to constant variable.
Let’s consider another scenario with “const”
const c; c = 1; console.log(c); // Will output SyntaxError: Missing initializer in const declaration
So with “const” we immediately need to assign it a value upon creation. Otherwise we will get a syntax error.
Ok, another example – but this time let’s try initializing an array object and not a primitive type.
const c = [1, 2]; c.push(3); console.log(c); // Will output: [ 1, 2, 3 ]
Because it’s an object, we can modify the object. What we can’t do though is reassign the c constant to an entirely new data type.
4. What is the use of “arrow functions” “or fat arrow” functions?
First let’s create an object with a few objects and properties – a classic example function scope defined inside an object.
const profile = {
firstName: '',
lastName: '',
setName: function(name) {
let splitName = function(n) {
let nameArray = n.split(' ');
this.firstName = nameArray[0];
this.lastName = nameArray[1];
}
splitName(name);
}
};
profile.setName('john doe');
console.log(profile.firstName); // Will output nothing
Why does it output nothing? The reason is because “firstName” is attached to the window object – so if we make the following modification, our program will output the correct value.
const profile = {
firstName: '',
lastName: '',
setName: function(name) {
let splitName = function(n) {
let nameArray = n.split(' ');
this.firstName = nameArray[0];
this.lastName = nameArray[1];
}
splitName(name);
}
};
profile.setName('john doe');
console.log(window.firstName); // will output "John"
Well this is great but we can do better. This is where arrow functions come in handy. Instead of referencing the window object, encapsulating our function within an arrow function resolves this issue for us.
const profile = {
firstName: '',
lastName: '',
setName: function(name) {
let splitName = (n) => {
let nameArray = n.split(' ');
this.firstName = nameArray[0];
this.lastName = nameArray[1];
}
splitName(name);
}
};
profile.setName('john doe');
console.log(profile.firstName); // will output "John"
Now we don’t have to use the window object, we can properly use the profile object which makes more sense for our setName method to be lexically scoped within our profile object.
These are some pretty good interview questions to master – I think you’re ahead of the game if you can at least answer the questions provided here. There are way more interview questions to consider which I will be covering in future posts. So stay tuned and keep immersing!