50 JavaScript Interview Questions To Prepare For In 2021

50 JavaScript Interview Questions To Prepare For In 2021

Need to prepare for an upcoming JavaScript interview? Check out these JavaScript interview questions and answers.

Yash Tiwari
·Jun 14, 2021·

15 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

A majority of web applications today use JavaScript, including Google and Facebook. It has also become one of the most popular languages for building server-side software since the Node.js launch. Even today, the web is not large enough to hold JavaScript's versatility. The fact that you have found this JavaScript Interview Questions article means you already know about these facts.

Thus, if you are thinking of starting a career in JavaScript and need to acquire the skills related to it, now is the perfect time to get involved. These JavaScript Interview Questions will equip you with in-depth knowledge and enable you to prepare for your interview.

Learning Javascript is a highly recommended skill since it is extensively used for front-end development, web designing, game development, and graphics creation.

JavaScript Questions & Answers Based On Beginner and Advanced Level

1) What is JavaScript?

The JavaScript language is a lightweight, interpreted language that can be used to create interactive HTML pages that are otherwise static. Netscape, Internet Explorer, and other web browsers have embedded the general-purpose core of the language.

2) What are the features of JavaScript?

JavaScript has the following features:

  • It is interpreted and lightweight.
  • Open and cross-platform scripting language.
  • It is designed to create network-centric applications.
  • It provides a complementary and integrated approach to Java.

3) What data types does JavaScript support?

JavaScript supports the following data types:

  • Boolean
  • Object
  • Undefined
  • Number
  • Symbol
  • Null
  • String

4) What are the advantages of JavaScript?

JavaScript has the following advantages: −

  • Richer interfaces − You can use JavaScript to include items such as drag-and-drop components and sliders to provide your visitors with a rich interface.
  • Less server interaction − User input can be validated before the page is sent to the server. It saves server traffic, thereby reducing server load.
  • Immediate feedback to the visitors − Visitors don't have to wait for the page to reload to see if they forgot something.
  • Increased interactivity - You can create a user interface that responds when the user hovers over it with a mouse or activates it with a keyboard.

5) What is the difference between Java & JavaScript?

Java

  • Java is an object-oriented programming language.
  • Applications are created to run in the browser or a virtual machine.
  • Java code must be compiled.

JavaScript

  • JavaScript is an object-oriented scripting language.
  • It can only be run on a browser.
  • JavaScript code is entirely text-based.

6) How can you create an object in JavaScript?

Object concepts are well supported in JavaScript. Using the object literal, you can create an object as follows −

  1. var emp = {
  2. name: "Daniel",
  3. age: 23
  4. };

7) How can you create an Array in JavaScript?

The array literal can be used to define arrays as follows:

  1. 1var x = [];
  2. var y = [1, 2, 3, 4, 5];

8) Can you assign an anonymous function to a variable and pass it as an argument to another function?

Definitely! You can assign an anonymous function to a variable. Additionally, it can be passed as an argument to another function.

9) Is JavaScript a case-sensitive language?

Yes, JavaScript is a case-sensitive language. You must capitalize all language keywords, variables, functions, and other identifiers.

10) What is a Name function in JavaScript & how to define it?

A named function declares its name as soon as it is defined. The function keyword can be defined as follows:

  1. function named(){
  2. // write code here
  3. }

11) What are argument objects in JavaScript & How to find the type of arguments passed to a function?

JavaScript variable arguments represent the arguments passed to a function. We can get the type of arguments passed to a function with the typeof operator. For example:

  1. function func(x){
  2. console.log(typeof x, arguments.length);
  3. }
  4. func(); //==> "undefined", 0
  5. func(7); //==> "number", 1
  6. func("1", "2", "3"); //==> "string", 3

12) What is the purpose of ‘This’ operator in JavaScript?

This operator in JavaScript refers to the object to which it belongs. Depending on where it is used, it has different values. This refers to the owner object in a method, and to the global object in a function.

13) What are the scopes of a variable in JavaScript?

The scope of a variable is the area of your program in which it is defined. JavaScript variables will only have two scopes.

  • Global Variables − Global variables have a global scope, which means they are visible throughout your JavaScript code.
  • Local Variables − A local variable is only visible in the function where it is defined. The parameters of a function are always local to that function.

14) What is Closure? Give an example.

A closure is created whenever a variable definition that is defined outside of the current scope is accessed from inside another scope. It allows you to access an outer function's scope from an inner function. When a JavaScript function is created, a closure is created too. You can use closure by simply defining it within another function and exposing it.

15) What is Callback?

Callbacks are JavaScript functions passed as options or arguments to methods. It is a function that is run after another function has finished running, hence the name 'call back'. Functions are objects in JavaScript. As a result, functions can take functions as arguments and can return them.

16) What are the variable naming conventions in JavaScript?

JavaScript variables must be named according to the following rules:

  1. You should not use any of the JavaScript reserved keywords for variable names. Break and boolean variables, for instance, are invalid.
  2. JavaScript variable names should not begin with a number (0-9). You must begin them with a letter or the underscore character. For example, 123name is an invalid variable name, but _123name or name123 are valid.
  3. Variable names in JavaScript are case-sensitive. Test and test, for example, are two different variables.

Creating a cookie is as simple as assigning a string value to the document.cookie object, which looks like this:

Syntax:

  1. document.cookie = "key1 = value1; key2 = value2; expires = date";

18) How does TypeOf Operator work?

The typeof operator returns the data type of its operand. An operand can either be a literal or a data structure like a variable, a function, or an object. As a unary operator, it is placed before its single operand, which may be of any type. The value of this field is a string indicating the data type of the operand.

Reading a cookie is just as simple as writing one, since the document.cookie object represents the cookie. Therefore, you can use this string whenever you want to access a cookie.

  • Each cookie name = value pair will be separated by a semicolon in the document.cookie string. Name represents the cookie's name, and the value represents its string value.
  • Strings can be broken up into keys and values using the split() function.

To delete a cookie so that subsequent attempts to read the cookie in JavaScript yield nothing, you simply need to set its expiration date to a previous date. Make sure you delete the correct cookie by defining the cookie path. Depending on your browser, you may not be able to delete a cookie if you do not specify the path.

21) List out the different ways an HTML element can be accessed in JavaScript code.

The following are the ways through which an HTML element can be accessed in Javascript:

  • getElementById(‘idname’): Retrieves an element by its ID.
  • getElementsByClass(‘classname’):Returns all elements with the given classname.
  • getElementsByTagName(‘tagname’): Returns all elements with the given tagname.
  • querySelector(): Returns the first element selected by a CSS style selector.

22) What are the ways to define a variable in JavaScript?

In JavaScript, you can define variables in three different ways:

  • Var – The JavaScript variables statement declares a variable and, optionally, initializes its value. Example: var a =10; Variable declarations are processed before code execution.
  • Const - Const functions are not permitted to modify the object to which they are called. A const function can be called on any type of object.
  • Let – It tells us that the variable may be reassigned, as with a counter in a loop, or a value swap in an algorithm. Additionally, it indicates that the variable will only be used in the block in which it is defined.

23) What is the difference between Attributes and Property?

Attributes provide information about an element, such as its id, type, or value. Meanwhile, Property is the value assigned to the property, such as type="text", value="Name", etc.

24) In how many ways a JavaScript code can be involved in an HTML file?

An HTML file can involve JavaScript code in one of three different ways:

  1. Inline
  2. Internal
  3. External

Inline functions are JavaScript functions that are assigned to variables at runtime. They can be distinguished from anonymous functions since they are assigned to a variable and can be reused. JavaScript can either be integrated into the page you are working on, or it can be placed in a separate file that you can call when necessary. Internal scripts differ from external scripts in this regard.

25) What is a Typed language?

In a typed language, values are associated with values rather than variables. It can be divided into two types:

  • Dynamically: The variable can hold multiple types in this; for example, in JS a variable can take number, chars.
  • Statically: In this case, each variable can hold only one type, just as a string variable in Java can take only a set of characters.

26) What is the difference between Local storage & Session storage?

  • Local Storage – The data is not sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) – reducing client-server traffic. If you don't manually clear it through the settings or programs, it will stay.
  • Session Storage – While session storage is similar to local storage, the only difference is that local storage has no expiration date while session storage gets cleared when the page session ends. The browser will terminate the Session Storage after it is closed.

27) Name some of the JavaScript Frameworks

JavaScript frameworks are application frameworks written in JavaScript. In its control flow, it differs from a JavaScript library. JavaScript Frameworks come in many varieties, but some of the most commonly used frameworks are:

  • Vue
  • React
  • Angular

28) What is the difference between the operators ‘==‘ & ‘===‘?

The major difference between "==" and "===" is that "==" compares variables by making type corrections, e.g. if you correlate a number with a string with numeric literal, == allows that, but === doesn’t allow that, because it not only checks the value but also the type of two variable if two variables have different type “===” return false, while “==” return true.

29) What is the difference between undeclared & undefined?

Variables that are not declared in a program are called undeclared variables. An undeclared variable leads to a runtime error if the program attempts to read the value of the variable.

Variables declared in the program but not assigned a value are undefined variables. When the program attempts to read a value from an undefined variable, it returns an undefined value.

30) What is the difference between null & undefined?

A variable that has been declared but not yet assigned a value is undefined. Null, on the other hand, is an assignment value. This value can be assigned to a variable as a representation of no value. Furthermore, undefined and null are distinct types: undefined is a type itself (undefined), and Null is an object.

31) What is the difference between innerHTML & innerText?

  • innerHTML – If found within a string, it will process the HTML tag.
  • innerText – If there is an HTML tag found in a string, it will not be processed.

32) What is the difference between Window & Document in JavaScript?

  • Window: Objects with variables, functions, history, and locations are stored in JavaScript windows.

  • Document: Documents also fall under the window and can be considered as properties of the window.

33) What is NaN in JavaScript?

NaN stands for Not a Number. It is commonly used as an error condition when a function that should return a valid number returns NaN. Because NaN compares unequally to any number, including NaN, it is used for this purpose. As long as you can't convert a string or something else into a number, you're going to see NaN.

34) What is an event bubbling in JavaScript?

The idea of event bubbling describes an event propagation technique in HTML DOM, which occurs when an event occurs within an element that is part of another component, and both elements have registered a handle to that event.

With bubbling, an event is captured and handled at first by the innermost element before propagating to the outermost elements. From that event, the execution goes to its parent element. After that, the execution passes to its parent element, and so on until the body element is reached.

35) How do JavaScript primitive/object types passed in functions?

The major difference between the two is that primitive data types are passed by value, while objects are passed by reference.

  • By Value refers to creating a COPY of the original. It's like twins: they both have the same genes, but one of them doesn't lose a leg during the war, while the other does.
  • By Reference refers to creating an ALIAS to the original. For example, When your mom calls you "Pumpkin Pie" even though your name is Margaret, you do not become a clone. You are still the same person, but you can be called by two very different names.

36) What are Exports & Imports?

Using imports and exports, we can write modular JavaScript code. We can use Imports and Exports to split our code into multiple files. For example-

1. //------ lib.js ------</span>
2. export const sqrt = Math.sqrt;</span>
3. export function square(x) {</span>
4. return x * x;</span>
5. }
6. export function diag(x, y) {
7. return sqrt(square(x) + square(y));
8. }
9
10. //------ main.js ------</span>
11. { square, diag } from 'lib';
12. console.log(square(5)); // 25
13. console.log(diag(4, 3)); // 5

37) What would be the result of 2+5+”3″?

2 and 5 are integers, so they will be added numerically. Similarly, since 3 is a string, it will be concatenated. Therefore, the result would be 73. It is the ' ' that makes all the difference here and represents 3 as a string instead of a number.

38) How can you convert the string of any base to integer in JavaScript?

ParseInt() converts numbers between different bases. This function takes a string to be converted as its first parameter, and a base string as the second. For example-

  1. parseInt("4F", 16)

39) How to read and write a file using JavaScript?

JavaScript provides two ways to read and write files

  • Using JavaScript extensions.
  • Using a web page and Active X objects.

40) What is the difference between an alert box and a confirmation box?

There is only one button on an alert box, which is the OK button. However, a Confirmation box shows two buttons, OK and Cancel.

41) What is the Strict mode in JavaScript and how can it be enabled?

A strict mode introduces better error-checking into your code.

  • The strict mode does not allow you to use implicitly declared variables, assign value to read-only properties, or add properties to objects that cannot be extended.
  • To enable strict mode, add "use strict" to the beginning of a file, a program, or a function.

42) What will be the output of the code below?

  1. var Y = 1;
  2. if (function F(){})
  3. {
  4. y += Typeof F;
  5. }
  6. console.log(y);

Answer: This would result in 1undefined. With eval, the if condition statement is evaluated, meaning eval(function f(){}) returns function f(){} (which is true). Consequently, within the if statement, executing typeof f returns undefined because the if statement code executes at run time, and the statement within the if condition is evaluated during run time.

43) What is a prompt box in JavaScript?

A prompt box allows the user to enter input via a text box. The prompt() method displays a dialog box asking the visitor for input. When the user has to input information before entering a page, you'll often use a prompt box. The user must click either "OK" or "Cancel" after entering an input value in the prompt box.

44) What is the difference between Call & Apply?

In the call() method, a function is called with a given this value and arguments provided. Syntax-

  1. fun.call(thisArg[, arg1[, arg2[, ...]]])

Apply() calls a function with an array of arguments and a given this value. Syntax-

  1. fun.apply(thisArg, [argsArray])

45) What will be the output of the following code?

  1. var Output = (function(x)
  2. {
  3. Delete X;
  4. return X;
  5. }
  6. )(0);
  7. console.log(output);

Answer: The output would be 0. The delete operator allows you to delete properties from an object. In this case, x is not an object but a local variable. Local variables are not affected by delete operators.

46) What will be the output of the code below?

  1. //nfe (named function expression)
  2. var Foo = Function Bar()
  3. {
  4. return 7;
  5. };
  6. typeof Bar();

Answer: In this case, the output would be Reference Error. Function definitions can only contain one reference variable as their function name.

47) What will be the output of the following code?

  1. var Employee =
  2. {
  3. company: 'XYZ
  4. }
  5. var Emp1 = Object.create(employee);
  6. delete Emp1. company Console.log(emp1. company);

Answer: In this case, the output would be XYZ. Here, the prototype property of emp1 is company. The delete operator does not remove the prototype property. Therefore, the emp1 object does not have company as its property. Using delete Employee. company, we can delete the company property directly from the Employee object.

48) What are escape characters in JavaScript?

When using JavaScript escape characters, you can write special characters in your code without causing it to break. If you want to work with special characters such as single quotes, double quotes, apostrophes, and ampersands, you can use escape characters (Backslash). To display the characters, place backslashes before them.

49) What is QuickSort Algorithm in JavaScript?

The QuickSort algorithm is one of the most popular and widely used algorithms in any programming language. Divide-and-conquer is the algorithm used by Quicksort. It divides elements into smaller parts based on certain conditions and performs operations on the smaller divided parts.

50) What is the reason for wrapping the entire content of a JavaScript source file in a function book?

Many popular JavaScript libraries implement this practice. The technique creates a closure around the entire file contents, which, perhaps most importantly, creates a private namespace that avoids name conflicts between JavaScript modules and libraries.

Using this technique, you can alias a global variable easily. These are often used in jQuery plugins.


If you have made it this far, then certainly you are willing to learn more about JavaScript. Here are some more topics that we think will be interesting for you!

Did you find this article valuable?

Support Yash Tiwari by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this

Impressum

Follow me to get useful dev tips in your inbox