- \n
- JavaScript can work offline inside the web browser.<\/li>\n
- It supports multiple programming paradigms. For example, we can make use of Object-Oriented, Functional, and Imperative programming concepts.<\/li>\n
- It has the biggest collection of open source libraries and frameworks.<\/li>\n
- JavaScript is capable of creating online and offline games, desktop software, websites, and mobile apps.<\/li>\n
- No need to learn separate programming languages to create frontend and backend of a website. JavaScript is supported on all major web browsers and it can run on the server using Node.js.<\/li>\n
- It is an interpreted language. Meaning we don\u2019t have to build or compile its code before use. JavaScript instructions execute directly.<\/li>\n<\/ul>\n
Should we use internal or external JavaScript?<\/h2>\n
Internal JavaScript is more suitable when we just need to use it on a single web page. Whereas, always use an external JavaScript file for websites that have multiple web pages.<\/p>\n
Why do WordPress plugins like Autoptimize aggregate JavaScript Code in one file?<\/h2>\n
Aggregation of JavaScript source code in a single file reduces the number of requests made to the server while generating a web page. In turn, it makes a website load faster.<\/p>\n
For example, let\u2019s say we\u2019ve included ten JavaScript files on a web page. Now, when we open this web page our web browser sends ten HTTP requests to the server in order to retrieve these files. On the other hand, if we aggregate the code of all these files into one then we just need to make one request to the server.<\/p>\n
What is JavaScript \u2018hoisting?<\/h2>\n
Hoisting is a concept in JavaScript which allows us to use variables and functions even before they are declared.<\/p>\n
Basically, when we execute a JavaScript code then at first it automatically extracts all variable and function declarations from the code and moves them to the top of their scope. After that, it starts executing the code.<\/p>\n
The major benefit of hoisting is our code works correctly and doesn\u2019t display any errors like \u201cundefined variable\u201d or \u201cundefined function.\u201d<\/p>\n
Learn more about hoisting with my article \u2018Understanding Variables, Scope, and Hoisting in JavaScript<\/a>.\u2019<\/p>\n
Can you predict the output of the following code?<\/h2>\n
Code:<\/p>\n
<\/p>\n
![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/10\/Screen-Shot-2020-10-13-at-2.10.22-PM.png\")
<\/figure>\n<\/span><\/p>\n
Output:<\/p>\n
Juan Cruz Martinez <\/code><\/pre>\nExplanation:<\/p>\n
- \n
- First of all, the variable declaration at line # 2 and line # 3 will be considered as one statement.<\/li>\n
- Now, the concept of hoisting will be applied. Meaning JavaScript will move the variable declaration to the top. After that, the code will be executed.<\/li>\n
- Also, remember that the value stored in a variable will not be lost even if we redeclare the variable.<\/li>\n<\/ul>\n
What is JavaScript \u2018Strict Mode\u2019?<\/h2>\n
The default behavior of JavaScript is very forgiving in case we make a minor mistake. It means it will not display any error messages. But, sometimes in development, we need to see all kinds of errors and warnings to debug the code.<\/p>\n
Here comes the use of \u201cStrict Mode\u201d in JavaScript. Basically, it\u2019s a restricted variant where JavaScript displays all errors and warnings, even if they are silent ones.<\/p>\n
We can enable \u201cStrict Mode\u201d by using the
\"use strict\";<\/code> directive at the beginning of our script.<\/p>\nWhat are some alternatives to Svelte?<\/h2>\n
Svelte is a front-end development framework for the JavaScript programming language. Some of its popular alternatives include:<\/p>\n
- \n
- React<\/li>\n
- Vue.js<\/li>\n
- Angular<\/li>\n<\/ul>\n
What are \u2018Self Invoking Functions\u2019?<\/h2>\n
Self Invoking Functions are a little different from normal functions because they are executed immediately where they were declared.<\/p>\n
Normally, we first declare a function and later just call it. But, JavaScript automatically executes the code of Self Invoking Functions at run-time.<\/p>\n
A point to be noted is that these functions do not have any name. In turn, we are unable to recall these types of functions. They are also known as \u201cAnonymous Functions\u201d.<\/p>\n
Here\u2019s an example of Self Invoking Functions:<\/p>\n
<\/p>\n
![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/10\/Screen-Shot-2020-10-13-at-2.14.16-PM.png\")
<\/figure>\n<\/span><\/p>\n
What is the difference between \u2018var,\u2019 \u2018let,\u2019 and \u2018const\u2019?<\/h2>\n
\n
![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/10\/Screen-Shot-2020-10-13-at-2.14.31-PM.png\")
<\/figure>\n<\/h2>\nLearn more about them in my article \u2018Understanding Variables, Scope, and Hoisting in JavaScript<\/a>.\u2019<\/p>\n
What is the difference between \u2018==\u2019 and \u2018===\u2019?<\/h2>\n
Both of them are used in JavaScript to perform a comparison between two values.<\/p>\n
![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/10\/Screen-Shot-2020-10-13-at-2.16.14-PM.png\")
<\/figure>\n<\/p>\nIs there any difference between \u2018null\u2019 and \u2018undefined\u2019 keywords?<\/h2>\n
Both of these keywords represent an empty value<\/span>. But, there are two basic differences between null and undefined<\/span>.<\/span><\/p>\n
![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/10\/Screen-Shot-2020-10-13-at-2.17.20-PM.png\")
<\/figure>\n<\/p>\nCan you tell the difference between \u2018function declaration\u2019 and \u2018function expression\u2019?<\/h2>\n
Basically, \u2018Function Declaration<\/span>\u2018 is nothing but the normal process<\/span> of defining a function using the keyword<\/span> <\/span>
function<\/code>, its unique name<\/span>, parameters, and the function body. Whereas, when we assign a function<\/span> declaration to a variable<\/span> then it becomes \u2018Function Expression.\u2019 <\/span>It\u2019s interesting to note that function expressions are not hoisted, meaning, they\u2019ll display an error if you try to call them before defining.<\/p>\nFunction Declaration:<\/p>\n
<\/p>\n
![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/10\/Screen-Shot-2020-10-13-at-2.18.49-PM.png\")
<\/figure>\n<\/span><\/p>\n
Function Expression:<\/p>\n
<\/p>\n
![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/10\/Screen-Shot-2020-10-13-at-2.19.02-PM.png\")
<\/figure>\n<\/span><\/p>\n
What is a \u2018Closure\u2019?<\/h2>\n
A \u2018closure\u2019 in JavaScript is a function inside another function. The inner function has access to its own variables, the variables defined in the outer function as well as the global variables.<\/p>\n
Closure Example:<\/p>\n
<\/p>\n
![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/10\/Screen-Shot-2020-10-13-at-2.20.04-PM.png\")
<\/figure>\n<\/span><\/p>\n
Can you predict the output of these two functions? And will they return same the output or not?<\/h2>\n
![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/10\/Screen-Shot-2020-10-13-at-2.20.23-PM.png\")
<\/figure>\n<\/p>\nOutput of Function user1()<\/p>\n
{name: \"Juan\"} <\/code><\/pre>\nOutput of Function user2()<\/p>\n
undefined <\/code><\/pre>\nWhat is \u2018NaN\u2019?<\/h2>\n
In JavaScript, NaN stands for \u201cNot a Number.\u201d It\u2019s a special value that occurs when we\u2019re unable to perform an operation.<\/p>\n
For example, what if we try to divide a string using a number (e.g. \u201cHello World\u201d \/ 5).<\/p>\n
Can you explain the for-in loop?<\/h2>\n
The for-in loop is specifically designed to loop through all the object\u2019s properties in a step by step manner. It selects one property from the object in each iteration and performs the required operations on it.<\/p>\n
Let\u2019s try to understand it with the help of an example:<\/p>\n
<\/p>\n
![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/10\/Screen-Shot-2020-10-13-at-2.20.44-PM.png\")
<\/figure>\n<\/span><\/p>\n
Output:-<\/p>\n
name -> Juan country -> Germany website -> livecodestream.dev <\/code><\/pre>\nWhat\u2019s \u2018Event Bubbling\u2019 and \u2018Capturing\u2019?<\/h2>\n
In JavaScript DOM, HTML elements are nested inside one another to form a hierarchy.<\/p>\n
Now, if both parent and child elements have registered a handle for a specific event then what will be the order of event propagation?<\/p>\n
It can be determined in two ways which are known as event bubbling and capturing.<\/p>\n
In event bubbling, the child element will capture the event first and then propagate it to parent elements. Whereas, in event capturing, the parent element will capture the event first and then propagate it to the child elements.<\/p>\n
What\u2019s the difference between JavaScript and ECMA Script?<\/h2>\n
JavaScript is a scripting language whereas ECMA Script is a collection of guidelines and rules to standardize JavaScript across different web browsers.<\/p>\n
How do you create a cookie using JavaScript?<\/h2>\n
In JavaScript, a cookie can be created using a document.cookie object. Simply assign it a string value that is just a series of key-value pairs separated with semi-colons.<\/p>\n
JavaScript Create Cookie Example:<\/p>\n
<\/p>\n
![](\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2020\/10\/Screen-Shot-2020-10-13-at-2.21.08-PM.png\")
<\/figure>\n<\/span><\/p>\n
Conclusion<\/h2>\n
Employers usually try to confuse the applicants by asking tricky questions. So, if you\u2019re not well-prepared then chances are you\u2019ll end up losing the opportunity.<\/p>\n
So, today, I tried to answer some commonly asked JavaScript interview questions. You may even use it as a reference just before going to an interview.<\/p>\n
\nThis <\/span><\/i>article<\/span><\/i><\/a> was originally published on <\/span><\/i>Live Code Stream<\/span><\/i><\/a> by <\/span><\/i>Juan Cruz Martinez<\/span><\/i><\/a> (twitter: <\/span><\/i>@bajcmartinez<\/span><\/i><\/a>), founder and publisher of Live Code Stream, entrepreneur, developer, author, speaker, and doer of things.<\/span><\/i><\/p>\n