Q: What will be the output of the below code: let obj ={ a: 10, vir : function(){ x(); console.log(this.a); function x(){ console.log(this.a) } } } obj.vir();

The output of the above code for first 'this.a' is '10' and second 'this.a' inside function x is ‘undefined’ . Reason being that ‘this’ keyword when directly used inside an object’s method points to the object itself but in the above code ‘this’ keyword is present inside x() function of the vir() method , so its not being directly used in object’s method vir() , so it would refer to window object and there is no variable ‘a’ in the window object so output will be ‘undefined’. let obj ={ a: 10, vir : function(){ x(); console.log(this.a); //output 10 function x(){ console.log(this.a) // undefined } } } obj.vir();

Q: What will be the output of the below code for (var i= 0; i console.log(i)); }

Output will be:- 5 5 5 5 5 Reason - some people may think that the output should be 0,1,2,3,4 . But there is a twist here , the arrow function written inside setTimeout does not executes right way , instead it goes in the event queue. So , when the loop iterates from i = 0 till i =4 , all the five console.log(i) statements would go in the event queue , now at the end of iteration the value of i becomes 5 . After this the 5 console.log(i) statements present in the event queue would execute and hence we would see 5 printed 5 times on console.

Question 1

New features of html5

Accepted Answer

HTML5 is the fifth revision of the Hypertext Markup Language (HTML), which is the standard markup language for creating webpages and applications on the World Wide Web. It was developed by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG) as an evolution of its predecessor, HTML4.

Following are the new features in HTML5 :

1. Semantics: HTML5 introduced several new elements that provide better semantic meaning to web content. These include `

`, `

Description of the image — `. These elements make it easier for search engines and assistive technologies to understand the structure and purpose of the content. Semantic elements in HTML are tags that provide meaning and context to the content within a web page. They help describe the purpose or role of different sections of the document, making it more accessible to both humans and machines. Here are some commonly used semantic elements in HTML: **1. `**
`: Represents the introductory content or a container for the site's heading, logo, navigation, etc. Example:

`My Website Home About Contact`

**2. `**
`: Defines a section containing navigation links. Example:

`Home About Contact`

**3. `**
`: Represents the main content of the document. Example:

`Article Title Article content goes here.`

**4. `**
`: Defines a self-contained composition within a document, such as a blog post, news article, or comment. Example:

`Blog Post Title Blog post content goes here. Published on June 1, 2023`

**5. `**
`: Represents a standalone section within a document, which could have its own heading. Example:

`About Us Information about our company.`

**6. `**
`: Defines a section that contains content related to the main content but can be considered separate from it. Example:

`Related Links Link 1 Link 2`

**7. `**
`: Represents the footer of a document or a section. Example:

`© 2023 My Website. All rights reserved.`

These are just a few examples of semantic elements in HTML. Using semantic tags helps improve the accessibility, maintainability, and search engine optimization of web pages by providing clearer structural meaning to the content. **2. Multimedia Support:** HTML5 added native support for multimedia elements, eliminating the need for plugins like Adobe Flash. The `

Question 2

What are the data types in JavaScript

Accepted Answer

In JavaScript, data types can be categorized into two main groups: primitive and non-primitive (also known as reference types) data types. Here's an explanation of each: 1. Primitive Data Types: These are immutable data types that store a single value. a. Boolean: Represents a logical value, either true or false. It is commonly used for conditions and branching in JavaScript.


let isTrue = true;
let isFalse = false;
console.log(isTrue);   // Output: true
console.log(isFalse);  // Output: false

b. Number: Represents numeric values, including integers and floating-point numbers.


let count = 10;
let price = 4.99;
console.log(count);  // Output: 10
console.log(price);  // Output: 4.99

c. String: Represents a sequence of characters enclosed in single or double quotes. Strings are used to represent textual data.


let message = "Hello, world!";
console.log(message);  // Output: Hello, world!

d. Null: Represents the intentional absence of any object value. It is often assigned to a variable to indicate that it has no value or that the value is unknown.


let value = null;
console.log(value);  // Output: null

e. Undefined: Represents an uninitialized or undeclared variable. If a variable is declared but not assigned a value, it will have the value of undefined.


let variable;
console.log(variable);  // Output: undefined

f. Symbol: Represents a unique identifier. Symbols are typically used as keys in objects to avoid naming conflicts.


let id = Symbol("unique");
console.log(id);  // Output: Symbol(unique)

2. Non-Primitive (Reference) Data Types: These are mutable data types that store references to memory locations rather than the actual values. a. Object: Represents a collection of key-value pairs and provides a way to group related data and functionality together. Objects can be created using object literals {}, constructor functions, or the class syntax introduced in ECMAScript 2015.


let person = {
  name: "John",
  age: 30,
  isAdmin: false
};
console.log(person);  // Output: { name: 'John', age: 30, isAdmin: false }

b. Array: Represents an ordered list of values. Arrays can hold values of any type, and their elements are accessed using numeric indices starting from 0.


let numbers = [1, 2, 3, 4, 5];
console.log(numbers);  // Output: [1, 2, 3, 4, 5]

c. Function: Represents executable code that can be invoked and performs a specific task. Functions are one of the fundamental building blocks in JavaScript and can be defined using function declarations or function expressions.


function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Alice");  // Output: Hello, Alice!

Non-primitive data types, such as objects, arrays, and functions, are passed by reference, meaning that when you assign them to a variable or pass them as arguments to functions, you are working with a reference to the original value stored in memory. Primitive data types, on the other hand, are passed by value, meaning that when you assign them to a variable or pass them as arguments, a copy of the value is created.

Question 3

Difference between ng serve and npm start

Accepted Answer

`ng serve` and `npm start` are both commands used in web development, but they serve different purposes depending on the context. Let's look at the differences between `ng serve` and `npm start` with some examples: 1. `ng serve` Example: Let's say you're working on an Angular project and want to run it locally for development purposes. You would navigate to your project directory in the command line and run the following command:


   ng serve

This command would compile your Angular application, bundle the assets, start a development server, and watch for changes. It will then provide you with a local URL (usually http://localhost:4200) where you can access and test your application in the browser. The development server will also automatically reload the application whenever you make changes to the code. 2. `npm start` Example: Suppose you're working on a Node.js project that has a `start` script defined in the `package.json` file. The `start` script is set to execute the main application file, `index.js`. To start your application, you would navigate to the project directory and run the following command:


   npm start

This command will execute the command specified in the `start` script of the `package.json` file, which in this case is running `index.js`. It could be any command you specify. For example, you might use `npm start` to launch a web server, initiate a build process, or perform any other necessary actions to start your application in a production or deployment environment. In summary, `ng serve` is used specifically for running an Angular project locally during development, providing a development server and automatic reloading. On the other hand, `npm start` is a more generic command used in Node.js projects to execute a command specified in the `start` script, often used for starting an application in a production environment.

Question 4

Difference between 'dependencies' and 'dev-dependencies' properties in package.json

Accepted Answer

The `dependencies` and `devDependencies` properties in the `package.json` file are used to manage different types of dependencies in a Node.js project. Here's the difference between them: 1. `dependencies`: - The `dependencies` property is used to list the packages that are required for the project to run in a production or deployment environment. - These packages are necessary for the application's core functionality and are typically required at runtime. - When you install the project dependencies using `npm install`, the packages listed in the `dependencies` section are installed. Example:


   "dependencies": {
     "express": "^4.17.1",
     "lodash": "^4.17.21"
   }

2. `devDependencies`: - The `devDependencies` property is used to list the packages that are only required during development, such as testing frameworks, build tools, and development-specific utilities. - These packages are not necessary for the application to run in a production environment but are helpful during development and testing phases. - When you install the project dependencies along with dev dependencies using `npm install`, the packages listed in both the `dependencies` and `devDependencies` sections are installed. Example:

   "devDependencies": {
     "mocha": "^9.0.3",
     "nodemon": "^2.0.13"
   }

By separating dependencies into `dependencies` and `devDependencies`, you can distinguish between packages required for production and those required for development. This separation helps reduce the size of the production deployment by excluding unnecessary development-related packages. Conclusion To summarize, `dependencies` includes packages needed for the application to run in a production environment, while `devDependencies` includes packages required during development and testing but are not necessary for the production deployment.

Question 5

What will be the output of the below code:

let obj ={
a: 10,
vir : function(){
  x();
  console.log(this.a); 
  function x(){
  console.log(this.a)
  }
 }
}
obj.vir();

Accepted Answer

The output of the above code for first 'this.a' is '10' and second 'this.a' inside function x is ‘undefined’. Reason being that ‘this’ keyword when directly used inside an object’s method points to the object itself but in the above code ‘this’ keyword is present inside x() function of the vir() method , so its not being directly used in object’s method vir() , so it would refer to window object and there is no variable ‘a’ in the window object so output will be ‘undefined’.


let obj ={
a: 10,
vir : function(){
  x();
  console.log(this.a); //output 10
  function x(){
  console.log(this.a) // undefined
  }
 }
}
obj.vir();

Question 6

What will be the output of the below code
  for (var i= 0; i < 5; i++){
    setTimeout(() => console.log(i));
  }

Accepted Answer

Output will be:- 5 5 5 5 5 Reason - some people may think that the output should be 0,1,2,3,4 . But there is a twist here , the arrow function written inside setTimeout does not executes right way , instead it goes in the event queue. So , when the loop iterates from i = 0 till i =4 , all the five console.log(i) statements would go in the event queue , now at the end of iteration the value of i becomes 5 . After this the 5 console.log(i) statements present in the event queue would execute and hence we would see 5 printed 5 times on console.

Question 7

What will be the output of the below code :-

var a = 90;
doit();
function doit(){
  console.log(a); 
  var a = 10;
}

Accepted Answer

Output of above will be undefined as inside function doit,variable 'a' will be hoisted at the top inside function scope and it will initialised as undefined.


var a = 90;
doit();
function doit(){
  console.log(a); // undefined
  var a = 10;
}

Question 8

Explain call(), bind() and apply() in JavaScript

Accepted Answer

In JavaScript, `call()`, `bind()`, and `apply()` are methods available on functions and are used to manipulate how functions are invoked and bound to a specific context. Here's an explanation of each of these methods: 1. `call()`: The `call()` method is used to call a function with respect to any object. The `call()` method takes the context object as its first argument, followed by the arguments to be passed to the function. Syntax: `function.call(context, arg1, arg2, ...)` Example:


function greet(name) {
  console.log(`Hello, ${name}! My name is ${this.name}.`);
}

const person = {
  name: 'Alice'
};

greet.call(person, 'Bob');

Output:


Hello, Bob! My name is Alice.

In the example above, `call()` is used to invoke the `greet()` function with the `person` object as the context. The first argument `person` sets `this` inside the function to refer to the `person` object. 2. `bind()`: The `bind()` method creates a new function with a specified context and initial arguments, without invoking it immediately. It returns a new function that, when called, has its `this` value set to the provided context and any additional arguments are prepended to the original function's arguments. Syntax: `function.bind(context, arg1, arg2, ...)` Example:


function greet(name) {
  console.log(`Hello, ${name}! My name is ${this.name}.`);
}

const person = {
  name: 'Alice'
};

const greetPerson = greet.bind(person);

greetPerson('Bob');

Output:


Hello, Bob! My name is Alice.

In the example above, `bind()` is used to create a new function `greetPerson` that has its `this` value bound to the `person` object. The resulting function `greetPerson` can be invoked later with the remaining arguments. 3. `apply()`: The `apply()` method is similar to `call()`, but it takes arguments as an array or an array-like object instead of individual arguments. It is used to invoke a function immediately, specifying the context and an array of arguments to be passed to the function. Syntax: `function.apply(context, [arg1, arg2, ...])` Example:


function greet(name) {
  console.log(`Hello, ${name}! My name is ${this.name}.`);
}

const person = {
  name: 'Alice'
};

greet.apply(person, ['Bob']);

Output:


Hello, Bob! My name is Alice.

In the example above, `apply()` is used to invoke the `greet()` function with the `person` object as the context and an array containing the argument `'Bob'`. To summarize: - `call()` invokes a function immediately with a specified context and individual arguments. - `bind()` creates a new function with a specified context and initial arguments, without invoking it immediately. - `apply()` invokes a function immediately with a specified context and an array of arguments. These methods provide flexibility in managing the execution context (`this`) and arguments when working with JavaScript functions.

Question 9

Advantage of using arrow functions

Accepted Answer

Arrow functions in JavaScript provide several advantages over traditional function expressions. Here are some benefits of using arrow functions: 1. Concise Syntax: Arrow functions have a compact and concise syntax, making the code more readable and reducing the amount of boilerplate code. They are particularly useful for writing shorter and more expressive functions. 2. Lexical `this` Binding: Arrow functions do not have their own `this` value. Instead, they lexically bind the `this` value of the enclosing scope. This means that the `this` value inside an arrow function is automatically inherited from the surrounding context. It eliminates the need to use `bind()`, `call()`, or `apply()` to preserve the `this` value or deal with `this`-related issues. 3. No Arguments Object: Arrow functions do not have their own `arguments` object. Instead, they inherit the `arguments` object from the enclosing scope. This can be beneficial in scenarios where you need to access the arguments passed to an enclosing function. 4. Implicit Return: Arrow functions provide implicit return behavior for concise one-line functions. If the function body consists of a single expression, you can omit the curly braces and the `return` keyword. The result of the expression will be automatically returned. 6. Well-suited for Callbacks: Arrow functions are well-suited for callback functions, such as event handlers or asynchronous operations, where the lexical binding of `this` and the concise syntax can make the code more readable and maintainable. Here's an example to illustrate some of these advantages:



const numbers = [1, 2, 3, 4, 5];

// Traditional function expression
const squared1 = numbers.map(function (num) {
  return num * num;
});

// Arrow function
const squared2 = numbers.map(num => num * num);

In the example above, the arrow function `num => num * num` provides a more concise and readable syntax compared to the traditional function expression. It also inherits the `this` value from the surrounding context, which can be useful in certain scenarios. Overall, arrow functions enhance code readability, simplify `this` handling, and provide a more concise syntax for writing functions, making them a popular choice in modern JavaScript development.

Question 10

What is webpack and babel

Accepted Answer

Webpack and Babel are two popular tools commonly used in modern JavaScript development to enhance the development workflow and optimize the deployment of web applications. Here's a brief explanation of each: 1. Webpack: Webpack is a module bundler for JavaScript applications. It takes multiple JavaScript modules, along with their dependencies, and bundles them into a single optimized file or multiple files called bundles. Webpack helps manage the dependencies between modules, allowing developers to organize and structure their code in a modular manner. Key features and benefits of Webpack include: - Module bundling: Webpack bundles modules together, which improves the loading time of web applications by reducing the number of network requests required to fetch individual files. - Dependency management: Webpack analyzes the dependencies between modules, allowing developers to use `import` and `export` statements to organize and split code into separate files. - Loaders: Webpack supports various loaders that enable the transformation of different file types (e.g., JavaScript, CSS, images) during the bundling process. Loaders can apply transformations, such as transpiling newer JavaScript syntax with Babel or applying CSS preprocessing. - Code splitting: Webpack enables code splitting, which allows for the creation of multiple bundles that can be loaded on-demand, improving application performance by loading only the necessary code for specific routes or features. - Development server and hot module replacement: Webpack provides a development server that serves the bundled application locally during development. It also supports hot module replacement (HMR), which allows developers to see the changes they make in real-time without reloading the entire page. 2. Babel: Babel is a popular JavaScript compiler that allows developers to write code using the latest JavaScript syntax (ES6+, JSX, TypeScript) and transpile it into JavaScript that is compatible with older browsers and environments. Babel helps bridge the gap between modern JavaScript features and browser support, enabling developers to use the latest

Front End Developer Interview Questions for Freshers

New features of html5

Following are the new features in HTML5 :

What are the data types in JavaScript

Difference between ng serve and npm start

Difference between 'dependencies' and 'dev-dependencies' properties in package.json

What will be the output of the below code: let obj ={ a: 10, vir : function(){ x(); console.log(this.a); function x(){ console.log(this.a) } } } obj.vir();

What will be the output of the below code for (var i= 0; i < 5; i++){ setTimeout(() => console.log(i)); }

What will be the output of the below code :- var a = 90; doit(); function doit(){ console.log(a); var a = 10; }

Explain call(), bind() and apply() in JavaScript

Advantage of using arrow functions

What is webpack and babel