ES6 interview questions, Top Es6 Interview Questions

Are you a qualified ECMAScript programmer who works on client-side scripting on the internet? If yes, then more training in ECMAScript 6 will certainly help you to crack ES6 interview questions and open the door to more opportunities for you. As an ECMAScript 6 developer, you will be able to use a new syntax to write more complex applications that involve various classes and modules.

With features such as arrow functions, typed arrays, and math improvements, you can train yourself to build larger applications as well as libraries. IndiaHires will provide you all the information as to how you can crack ES6 interview questions and answers 2024

ES6 interview questions list

1. What is ES6?Define ES6 and mention the new features of ES6?
2. Could you explain the difference between ES5 and ES6?
3. Explain about Internationalization and localization?
4. What is IIFEs (Immediately Invoked Function Expressions)?
5. When should I use Arrow functions in ES6?
6. What are the differences between ES6 class and ES5 function constructors?
7. Why do we need to use ES6 classes?
8. What is Hoisting in JavaScript?
9. What is the motivation for bringing Symbols to ES6?
10. What are the advantages of using spread syntax in ES6, and how is it different from rest syntax?
11. Explain the Prototype Design Pattern?
12. What is the difference between .call and .apply?
13. What are the actual uses of ES6 WeakMap?
14. What is the difference between ES6 Map and WeakMap?
15. How to “deep-freeze” object in JavaScript?
16. What is the preferred syntax for defining enums in JavaScript?
17. Explain the difference between Object.freeze() vs const?
18. When are you not supposed to use the arrow functions in ES6? Name three or more cases.
19. Can you give an example of a curry function, and why does this syntax have an advantage?
20. What are the template literals in ES6?
21. What do you understand by Generator function?

	
	
		(function IIFE(){
		    console.log( "Hello!" );
		})();
		// "Hello!"		
	

 
  
    // ES5 Function Constructor
    function Person(name) {
      this.name = name;
    }

    // ES6 Class
    class Person {
      constructor(name) {
        this.name = name;
      }
    }   
  

 
  
    // ES5 Function Constructor
    function Student(name, studentId) {
      // Call constructor of superclass to initialize superclass-derived members.
      Person.call(this, name);

      // Initialize subclass's own members.
      this.studentId = studentId;
    }

    Student.prototype = Object.create(Person.prototype);
    Student.prototype.constructor = Student;

    // ES6 Class
    class Student extends Person {
      constructor(name, studentId) {
        super(name);
        this.studentId = studentId;
      }
    }   
  

 
  
    / **ES5**
    var Person = function(first, last) {
        if (!(this instanceof Person)) {
            throw new Error("Person is a constructor function, use new with it");
        }
        this.first = first;
        this.last = last;
    };

    Person.prototype.personMethod = function() {
        return "Result from personMethod: this.first = " + this.first + ", this.last = " + this.last;
    };

    var Employee = function(first, last, position) {
        if (!(this instanceof Employee)) {
            throw new Error("Employee is a constructor function, use new with it");
        }
        Person.call(this, first, last);
        this.position = position;
    };
    Employee.prototype = Object.create(Person.prototype);
    Employee.prototype.constructor = Employee;
    Employee.prototype.personMethod = function() {
        var result = Person.prototype.personMethod.call(this);
        return result + ", this.position = " + this.position;
    };
    Employee.prototype.employeeMethod = function() {
        // ...
    };  
  

 
  
    // ***ES2015+**
    class Person {
        constructor(first, last) {
            this.first = first;
            this.last = last;
        }

        personMethod() {
            // ...
        }
    }

    class Employee extends Person {
        constructor(first, last, position) {
            super(first, last);
            this.position = position;
        }

        employeeMethod() {
            // ...
        }
    } 
  

	
	
		var a = 2;
		foo();                 // works because `foo()`
		                         // declaration is "hoisted"

		function foo() {
		    a = 3;
		    console.log( a );   // 3
		    var a;             // declaration is "hoisted"
		                         // to the top of `foo()`
		}

		console.log( a );   // 2
	

21 React JS Interview Questions and Answers

	
	
		let symbol = Symbol();
	

	
	
		function putDookieInAnyArray(arr) {
		  return [...arr, 'dookie'];
		}

		const result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"]

		const person = {
		  name: 'Todd',
		  age: 29,
		};

		const copyOfTodd = { ...person };
	

	
	
		function addFiveToABunchOfNumbers(...numbers) {
		  return numbers.map(x => x + 5);
		}

		const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]

		const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]

		const { e, f, ...others } = {
		  e: 1,
		  f: 2,
		  g: 3,
		  h: 4,
		}; // e: 1, f: 2, others: { g: 3, h: 4 }
	

	
	
		function add(a, b) {
		  return a + b;
		}

		console.log(add.call(null, 1, 2)); // 3
		console.log(add.apply(null, [1, 2])); // 3	
	

	
	
		var map = new WeakMap();
		var pavloHero = {
		    first: "Pavlo",
		    last: "Hero"
		};
		var gabrielFranco = {
		    first: "Gabriel",
		    last: "Franco"
		};
		map.set(pavloHero, "This is Hero");
		map.set(gabrielFranco, "This is Franco");
		console.log(map.get(pavloHero)); //This is Hero	
	

	
	
		(function() {
		    var a = {
		        x: 12
		    };
		    var b = {
		        y: 12
		    };

		    map.set(a, 1);
		    weakmap.set(b, 2);
		})()
	

	
	
	let person = {
		name: "Leonardo",
		profession: {
			name: "developer"
		}
	};
	Object.freeze(person); // make object immutable
	person.profession.name = "doctor";
	console.log(person); //output { name: 'Leonardo', profession: { name: 'doctor' } }
	

	
	
	function deepFreeze(object) {
	    let propNames = Object.getOwnPropertyNames(object);
	    for (let name of propNames) {
	        let value = object[name];
	        object[name] = value && typeof value === "object" ?
	            deepFreeze(value) : value;
	    }
	    return Object.freeze(object);
	}
	let person = {
	    name: "Leonardo",
	    profession: {
	        name: "developer"
	    }
	};
	deepFreeze(person);
	person.profession.name = "doctor"; // TypeError: Cannot assign to read only property 'name' of object
	

	
	
		const DaysEnum = Object.freeze({"monday":1, "tuesday":2, "wednesday":3, ...})
	

	
	
		const DaysEnum = {"monday":1, "tuesday":2, "wednesday":3, ...}
		Object.freeze(DaysEnum);
	

	
	
	let day = DaysEnum.tuesday
	day = 298832342 // goes through without any errors
	

	
	
		let myName = "indiahires"
	    console.log(myName)  
	  
	    // Uncaught TypeError 
	    myName = "ih" 
	

	
	
		const person = { 
	        name: "indiahires"
	    }; 
	          
	// No TypeError 
	person.name = "ih"; 
	console.log(person.name);  
	

	
	
	const person = Object.freeze({name: "indiahires"});      
     // TypeError 
     person.name = "ih";  
	

	
	
	const person = Object.freeze({ 
	    name: 'indiahires', 
	    address: { 
	        city:"Chandigarh"
	    } 
	});  

	/*But the person.address object is not immutable, you can add a new property to the person.address object as follows:*/

	// No TypeError
	person.address.country = "India";
	

	
	
		const sum = x => y => x + y;
		// returns the number 3
		sum (2)(1);
		// returns a function y => 2 + y
		sum (2);	
	

	
	
		const someFunction = () => console.log ('Hello World!');
		const firstClass1 = functionAsArgument => functionAsArgument ();

		firstClass1(someFunction); // Hello World! is printed out

		const firstClass2 = () => someFunction;

		firstClass1 (firstClass2()); // Hello World! is printed out	
	

	
	
		const partiallyAppliedOnClick = handler => $ ('button').on ('click', handler);

		const curryOn = handler => event => $ ('button').on (event, handler);

		const curryOnClick = handler => curryOn (handler) ('click');
	

	
	
		// Object oriented approach
		const getUglyFirstCharacterAsLower = str
		  => str.substr (0, 1).toLowerCase ();

		// Functional approach
		const curriedSubstring = start => length => str
		  => str.substr(start, length);

		const curriedLowerCase = str => str.toLowerCase ();

		const getComposedFirstCharacterAsLower = str
		  => curriedLowerCase (curriedSubstring (0) (1) (str));
	

	
	
		const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args)));
	

	
	
		const getNewComposedFirstCharacterAsLower = compose (curriedLowerCase, curriedSubstring (0) (1));
		if (getComposedFirstCharacterAsLower ('Martin') === getNewComposedFirstCharacterAsLower ('Martin') {
		  console.log ('These two provide equal results.');
		}
	

	
	
		function curry(fn) {
		  if (fn.length === 0) {
		    return fn;
		  }

		  function _curried(depth, args) {
		    return function(newArgument) {
		      if (depth - 1 === 0) {
		        return fn(...args, newArgument);
		      }
		      return _curried(depth - 1, [...args, newArgument]);
		    };
		  }

		  return _curried(fn.length, []);
		}

		function add(a, b) {
		  return a + b;
		}

		var curriedAdd = curry(add);
		var addFive = curriedAdd(5);

		var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
	

	
	
		let str1 = "Hello";  
  
		let str2 = "World";  
		   
		let str = `${str1} ${str2}`;  
		console.log(str);  	
	

	
	
		function* gen() {    
			yield 100;    
			yield;    
			yield 200;    
		}    
		// Calling the Generator Function    
		var mygen = gen();    
		console.log(mygen.next().value);    
		console.log(mygen.next().value);    
		console.log(mygen.next().value);     	

		//Output

		100
		undefined
		200
	

	
	
		let list = [4, 5, 6];

		for (let i in list) {
		   console.log(i); // "0", "1", "2",
		}

		for (let i of list) {
		   console.log(i); // "4", "5", "6"
		}
	

	
	
		let pets = new Set(["Cat", "Dog", "Hamster"]);
		pets["species"] = "mammals";

		for (let pet in pets) {
		   console.log(pet); // "species"
		}

		for (let pet of pets) {
		    console.log(pet); // "Cat", "Dog", "Hamster"
		}
	

Although this has been a pretty long article to follow through, I strongly believe that most of us must have learned what kind of ES6 interview questions asked in the interview.

ES6 Basic Interview Questions

1. Mention some popular features of ES6.

Some of the common ES6 features are:

• Supports constants/immutable variables.
• Block scope support for all variables, constants and functions.
• Introduction to arrow functions
• Handling extended parameter
• Default parameters
• Extended and template literals
• De-structuring assignment
• Promises
• Classes
• Modules
• Collections
• Supports Map/Set & Weak-map/Weak-Set
• Localization, meta-programming, internationalization

2. What are the object oriented features supported in ES6.

The object-oriented features supported in ES6 are:

• Classes: We can create classes in ES6. The class function essentially builds a template from which we may later create objects. When a new instance of the class is created, the constructor method is invoked.
• Methods: Static methods can also be found in classes. A static method, unlike an object, is a function that is bound to the class. A static method can’t be called from a class instance.
  Let’s take a look at getters and setters for a moment. Encapsulation is a fundamental notion in OOP. Data (object properties) should not be directly accessed or updated from outside the object, which is a crucial aspect of encapsulation. A getter (access) or a setter (modify) are particular methods we define in our class to access or edit a property.
• Inheritance: It is also possible for classes to inherit from one another. The parent is the class that is being inherited from, and the child is the class that is inheriting from the parent.
   

3. Give a thorough comparison between ES5 and ES6.

4. What is the difference between let and const? What distinguishes both from var?

When declaring any variable in JavaScript, we used the var keyword. Var is a function scoped keyword. Within a function, we can access the variable. When we need to create a new scope, we wrap the code in a function.

Both let and const have block scope. If you use these keywords to declare a variable, it will only exist within the innermost block that surrounds them. If you declare a variable with let inside a block (for example, if a condition or a for-loop), it can only be accessed within that block.

The variables declared with the let keyword are mutable, which means that their values can be changed. It’s akin to the var keyword, but with the added benefit of block scoping. The variables declared with the const keyword are block-scoped and immutable. When variables are declared with the const keyword, their value cannot be modified or reassigned.

5. Discuss the arrow function.

In ES6, arrow functions are introduced. The shorthand syntax for writing ES6 functions is arrow functions. The arrow function’s definition consists of parameters, followed by an arrow (=>), and the function’s body.

The ‘fat arrow’ function is another name for the Arrow function. We won’t be able to employ them as constructors.

 const function_name = (arg_1, arg_2, arg_3, ...) => {  
    //body of the function  
} 

Few things to note:

• It reduces the size of the code.
• For a single-line function, the return statement is optional.
• Bind the context lexically.
• For a single-line statement, functional braces are not required.
• Doesn’t work with new

6. When should one not use arrow functions?

One should not use arrow functions in the following cases:

• Function Hoisting, Named Functions:

As arrow functions are anonymous, we cannot use them when we want function hoisting or when we want to use named functions.

• Object methods:

 var a = {
  b: 7,
  func: () => {
    this.b--;
  }
}

The value of b does not drop when you call a.func. It’s because this isn’t bound to anything and will inherit the value from its parent scope.

• Callback functions with dynamic context:

 var btn = document.getElementById('clickMe');
btn.addEventListener('click', () => {
  this.classList.toggle('on');
});

We’d get a TypeError if we clicked the button. This is due to the fact that this is not bound to the button, but rather to its parent scope.

• this/arguments:

Since arrow functions don’t have this/arguments of their own and they depend on their outer context, we cannot use them in cases where we need to use this/arguments in a function.

7. What is the generator function?

This is a newly introduced feature in ES6. The Generator function returns an object after generating several values over time. We can iterate over this object and extract values from the function one by one. A generator function returns an iterable object when called. In ES6, we use the * sign for a generator function along with the new ‘yield’ keyword.

 function *Numbers() {
    let num = 1;
    while(true) {
        yield num++;
    }
}
  
var gen = Numbers();
 
// Loop to print the first
// 5 Generated numbers
for (var i = 0; i < 5; i++) {
 
    // Generate the next number
    document.write(gen.next().value);
 
    // New Line
    document.write("<br>");
}

Output:

1
2
3
4
5

The yielded value becomes the next value in the sequence each time yield is invoked. Also, generators compute their output values on demand, allowing them to efficiently represent expensive to compute sequences or even infinite sequences.

8. What is the “spread” operator in ES6?

The list of parameters is obtained using the spread operator. Three dots (…) are used to represent it. The spread operator divides an iterable (such as an array or a string) into individual elements. It’s mostly used in JavaScript to make shallow copies of JS. It improves the readability of your code by making it more concise.

The spread operator can be used to join two arrays together or to concatenate them.

let arr1 = [4, 5, 6];  
    
let arr2 = [1, 2, 3, ...arr1, 7, 8, 9, 10];  
    
console.log(arr2);

Output:

[ 1 2 3 4 5 6 7 8 9 10 ]

9. Explain Destructuring in ES6.

Destructuring was introduced in ES6 as a way to extract data from arrays and objects into a single variable. It is possible to extract smaller fragments from objects and arrays using this method. The following is an example.

let greeting =['Good','Morning'];  
let [g1, g2] = greeting;  
console.log (g1, g2);

Output:

Good Morning

10. What are Promises in ES6?

Asynchronous programming is a concept found in JavaScript. The processes are run separately from the main thread in asynchronous programming. Promises are the most convenient approach to deal with asynchronous programming in ES6. Depending on the outcome of the procedure, a promise can be refused or resolved. Callbacks were used to cope with asynchronous programming before promises were introduced in ES6.

However, it caused the problem of callback hell, which was addressed with the introduction of promises.

(A callback is a function that is performed after another function has completed. When working with events in JavaScript, callback is very useful. As an argument to another function, we pass a function into another function.

When we use callbacks in our web applications, it’s common for them to get nested. Excessive callback usage clogs up your web application and leads to callback hell.)

11. Explain the Rest parameter in ES6.

It’s a new feature in ES6 that enhances the ability to manage arguments. Indefinite arguments can be represented as an array using rest parameters. We can invoke a function with any number of parameters by utilizing the rest parameter.

 function display(...args) {  
    let ans = 0;  
    for (let i of args) {  
        ans *= i;  
    }  
    console.log("Product = "+ans);  
  }  
    
  display(4, 2, 3); 

Output:

 Product = 24

12. Discuss the template literals in ES6.

Template literals are a brand-new feature in ES6. It makes producing multiline strings and performing string interpolation simple.

Template literals, also known as string literals, allow for embedded expressions.

Template literals were referred to as template strings prior to ES6. The backtick (“) character is used to enclose template literals. The dollar sign and curly brackets (${expression}) are used to denote placeholders in template literals. If we need to use an expression within the backticks, we can put it in the (${expre

SQL, or Structured Query Language, is a language that is used to interact or communicate with a database. This language assists in performing tasks like retrieval, insertion, updating, and deletion of data from databases. This information is commonly asked in SQL interview questions. An ANSI (American National Standards Institute) standard, SQL helps developers execute queries, insert records in tables, update records, create databases, create tables, or delete tables.

No doubt other programming languages such as ASP, PHP, and ColdFusion helped in making the Internet very dynamic, but SQL has revolutionized how users interact with websites in general. Any reputed webpage that allows the user to provide content uses SQL.

Most Frequently Asked SQL Interview Questions

Here in this article, we will be listing frequently asked SQL Interview Questions and Answers with the belief that they will be helpful for you to gain higher marks. Also, to let you know that this article has been written under the guidance of industry professionals and covered all the current competencies.

1. What is SQL and explain its components?

SQL is a standard language which is used to accessing and manipulating databases. It stands for Structured Query Language. It can be used to develop a web application for a server-side scripting language, like ASP, PHP, etc.

It consists of three components that are listed below:-

• Data Definition Language.
• Data Manipulation Language.
• Data Control Language.

2. Explain the types of joins in SQL?

In SQL, Joins is used to merge records from two or more tables in a database, based on a related column between them.

Here are the four types of the joins in SQL

• INNER JOIN: It returns records that have matching values in both tables
• LEFT JOIN: It returns all records from the left table and the matched records from the right table
• RIGHT JOIN: Right Join returns all records from the right table and the matched records from the left table
• FULL JOIN: It returns all records when there is a match in either left or right table

3. What is a Primary key? Explain

A primary key is a column in a table that designated to uniquely identifies the rows in that table. Primary key holds a unique value for each row and cannot contain null values.

4. Explain Constraints in SQL?

It is a rule used to limit the type of data that can insert into a table, to maintain the integrity and accuracy of the data inside the table.

It can be divided into two types.

• Column level constraints
• Table-level constraints

These are the most common constraints that can be applied to a table.

• NOT NULL
• DEFAULT
• UNIQUE
• PRIMARY KEY
• FOREIGN KEY etc

5. What is the difference between HAVING and a WHERE in SQL?

WHERE clause is used for filtering rows, and it applies to every row but HAVING term is used to filter groups.

WHERE can be used without the GROUP BY but HAVING clause cannot be used without the GROUP BY.

6. Explain the difference between SQL and MySQL.

• Mysql is available free because it is open source, but SQL is not an open source.
• Mysql offers updateable views, but SQL offers indexed views which are more powerful.
• Mysql does not support XML, but SQL supports XML.
• Mysql not supported Auto tuning but SQL can.
• Mysql did not support User-defined functions, but SQL supported.
• Mysql support Transaction is very much limited but SQL support extensively and entirely offered.
• Mysql not offered Stored procedures and full joins but offered in SQL.
• Mysql does not support Cursor feature but is there in SQL

7. What is Trigger in SQL? Explain

In SQL, a trigger is a database object that is associated with a table. It will be activated when a defined action is executed for the table. It can be performed when you run one of the following SQL like INSERT, UPDATE and DELETE occurred in a table. It’s activation time can be BEFORE or AFTER.

8. Explain Normalization and what are the advantages of it?

It is a systematic approach of decomposing tables to remove data redundancy and undesirable characteristics like Insertion, Update and Deletion. Normalization is a multi-step process that put data into the tabular form and removing duplicated data from the tables.

Advantages

• It helps to the reduction of redundant data.
• It has a much more flexible database design.
• It is better to handle on database security.
• It is dealing with data consistency within the database.

Rule of Normalization

• 1NF(First Normal Form)
• 2NF(Second Normal Form)
• 3NF(Third Normal Form)
• BCNF(Boyce and Codd Normal Form)
• 4NF(Fourth Normal Form)

9. How to find 3rd highest salary of an employee from the employee table in SQL?

SELECT salary FROM employee e1 WHERE 3-1 = (SELECT COUNT(DISTINCT salary) FROM employee e2 WHERE e2.salary > e1.salary)

10. Explain ALIAS in SQL?

It is used to rename a table in a specific SQL statement. Renaming is a temporary change without change actual table name in the database. It can be applied to tables as well as fields.

The basic syntax of a table alias
SELECT field1, field2 FROM TABLE_NAME AS TABLE WHERE "WRITE_YOUT_CONDITION";

The basic syntax of a column alias
SELECT field1 AS column1 FROM TABLE_NAME WHERE "WRITE_YOUT_CONDITION";

11. Explain Scalar functions in SQL?

It is a function that takes one or more values but returns a single value. It is based on user input and returns a single value.

• UCASE()
• LCASE()
• MID()
• LEN()
• ROUND()
• NOW()
• FORMAT()

12. Explain Aggregate functions are available there in SQL?

The aggregate function performs a calculation on a set of values, and it returns a single value as output. It ignores NULL values when it performs calculation except for the COUNT function.

SQL provides many aggregate functions that are listed below.

• AVG()
• COUNT()
• SUM()
• MIN()
• MAX() etc

13. How to make a copy values from one column to another in SQL?

UPDATE `table_name` SET new_field=old_field

14. What are the advantages of SQL? Explain

There are many advantages of SQL, and some of them are mentioned below:

• No coding needed: It is easy to manage without any need to write the substantial amount of code
• Well defined standards: Long established are used by the SQL databases that are being used by ISO and ANSI.
• Portability: We can use this program in PCs, servers, laptops and mobile phones.
• Interactive Language
• Multiple data views

15. Who introduced SQL?

It was initially developed in the early 1970s at IBM by Donald D. Chamberlin and Raymond F. Boyce.

16. What is a Database? Explain

It is a collection of data that is organized to be easily accessed, managed and updated. It is distributed into rows, columns, and tables. It’s indexed to make it easier to find related information.

17. Explain table and field in SQL?

Table: It is a collection of related data that consists of rows and columns. It has a specified number of columns but can have any number of rows.

Field: It is a column in a table that is designed to maintain specific information about all records in the table.

18. Explain Unique key in SQL.

It is a set of one or more than one fields or columns of a table that uniquely identify a record in the table. It is little like a primary key, but it can accept only one null value.

19. Explain Foreign key in SQL?

It is a collection of fields in one table that uniquely identifies a row of another table. In simple words, the foreign key is defined in a second table, but it refers to the primary

20. Write a query to display the current date in SQL?

SELECT CURDATE();

21. Explain the difference between DROP and TRUNCATE commands in SQL?

TRUNCATE

• It removes all rows from a table.
• It does not require a WHERE clause.
• Truncate cannot be used with indexed views.
• It is performance wise faster.

DROP

• It removes a table from the database.
• All table’s rows, indexes, and privileges will also be removed when we used this command.
• The operation cannot be rolled back.

You can download here sql interview questions pdf after registeration or subscribe.

22. Write a query to find the names of users that begin with “um” in SQL?

SELECT * FROM employee WHERE name LIKE 'um%';

23. Explain CLAUSE in SQL?

It is the source of a rowset to be operated upon in a DML statement. These clauses are very common which is used with Select statement, Update statement and Delete statement.

SQL provides with the following clauses that are given below:

• WHERE
• GROUP BY
• HAVING
• ORDER BY etc

24. How to use distinct and count in SQL query? Explain

count(): It returns the number of rows in a table satisfying the condition specified in the WHERE clause. It would return 0 if there were no matching conditions.

Syntax:
SELECT COUNT(*) FROM category WHERE 'status' = 1;

distinct(): It is used to return only different values. In a table, a column often contains many duplicate values, and sometimes we want to list the different values. It can be used with aggregates functions.

Syntax:
SELECT DISTINCT class FROM College ORDER BY department

25. What has stored procedures in SQL and how we can use it?

It is a set of precompiled SQL statements that are used to perform a particular task. A procedure has a name, a parameter list, and SQL statement, etc. It will help in reduce network traffic and increase the performance.

Example

                                                    CREATE PROCEDURE simple_function
AS
    SELECT first_name, last_name
    FROM employee;

EXEC simple_function;

ReactJS is a JavaScript library for building reusable User interface components. It is a template-based language combined with different functions that support the HTML. Our recently updated React Interview Questions can help you crack your next interview. This means the result of any React’s operation is an HTML code. You can use ReactJS to build all kinds of single-page applications.

What’s In It For Me?

We have created this section for your convenience from where you can navigate to all the sections of the article. All you need to just click or tap on the desired topic or the section, and it will land you there.

React Developer Interview Questions

Here in this article, we will be listing frequently asked React js interview questions and Answers with the belief that they will be helpful for you to gain higher marks. Also, to let you know that this article has been written under the guidance of industry professionals and covered all the current competencies.1. What is the differnece between Virtual DOM and Real DOM?

2. Why should we not update the state directly?

One should never update the state directly because of the following reasons:

• If you update it directly, calling the setState() afterward may just replace the update you made.
• When you directly update the state, it does not change this.state immediately. Instead, it creates a pending state transition, and accessing it after calling this method will only return the present value.
• You will lose control of the state across all components.

Note: Out of all the react questions, this is one that actually helps the interviewer to judge your level of understanding in this subject. Read the answer carefully to understand it properly.

3. How to call the function in render to react?

To call a function inside a render in React, use the following code:

Example

                                                    import React, { Component, PropTypes } from 'react';

export default class PatientTable extends Component {

      constructor(props) {

        super(props);

        this.state = {

         checking:false

      };

        this.renderIcon = this.renderIcon.bind(this);

  }

  renderIcon(){

    console.log("came here")

    return(

      <div>Function called</div>

    )

  }

  render() {

   return (

       <div className="patient-container">

       {this.renderIcon}      

      </div>

   );

 }

}
                                                

4. What is Props?

Props stand forProperties in React. They are read-only components that must be kept pure. These components are passed down from the parent to the child component throughout the app. A child component cannot send the prop back to the parent component. This can help in maintaining the unidirectional data flow and is used to render the dynamically generated data.

5. What are the new features in React?

The latest release of React is 16.6.9 and here are its newest features:

• Measuring performance using
• Improved Asynchronous act() for testing
• No more crashing when calling findDOMNode() inside a tree
• Efficient handling of infinite loops caused due to the setState inside of useEffect has also been fixed

6. What is JSX?

JSX stands for JavaScript XML. It is a file type used by React that utilizes the expressiveness of JavaScript along with HTML. This makes the HTML file easy to understand. This file makes applications robust and boosts their performance.

Example

                                                    render(){

      return(

          <div>  <h1> Welcome To Best Interview Question!!</h1> </div>

     );

 }
                                                

7. What are controlled and uncontrolled components?

A Controlled Component is one that takes the current value through the props and notifies of any changes through callbacks such as onChange.

Example:

<input type=”text” value={value} onChange={handleChange} />

An uncontrolled component is one storing its own state internally, and you can query the DOM via a ref to find its current value as and when needed. Uncontrolled components are a bit closer to traditional HTML.

Example:

<input type=”text” defaultValue=”foo” ref={inputRef} />

Note: React is a widely used open-source library used for building interactive user interfaces. It is a web platform licensed under MIT. This is one of the very popular react interview questions.

8. What is function based component in React?

Basically Function Based Component are the component which are made by JavaScript Functions.It takes props as argument and return JSX.

Example

                                                    Import React from ‘react’;

const XYZ = (props ) => {

     <div>

          <h1>React Interview Questions</h1>

     </div>

}

export default XYZ;

9. What is the difference between React Native and React?

0. What is the difference between Element and Component?

11. What are refs used for in React?

Refs are a function in React having the following uses:

• Accessing DOM and React elements that you have created.
• Changing the value of a child component without using props and others.

12. How React is different from Angular?

Note: Before getting confused with the plethora of React coding interview questions, you need to ensure the basics. This question will help you to understand the basics of reactjs and make you even more confident enough to jump onto the advanced questions.

3. What is the difference between componentWillMount and componentDidMount?

14. What is the difference between Function Based Component and Class Based Component?

The Main Difference is of Syntax. The function-Based component used props as an argument and is also called stateless component and In class-based component, we extend all the property of predefined function and used according to our need.

Class Based Component use state and the state is used as props in child component.In Class Based component we can use different lifecycle method of component.

15. What are arrow functions? How are they used?

Arrow functions, also called ‘fat arrow‘ (=>), are brief syntax for writing the expression. These functions bind the context of the components because auto binding is not available by default in ES6. Arrow functions are useful if you are working with the higher-order functions.

Example

                                                    //General way

render() {

  return(

    <MyInput onChange={this.handleChange.bind(this) } />

  );

}

//With Arrow Function

render() {

   return(

      <MyInput onChange={ (e) => this.handleOnChange(e) } />

   );

}
                                                

16. What is the purpose of render() in React?

It is compulsory for each React component to have a render(). If more than one element needs to be rendered, they must be grouped inside one tag such as <form>, <group>,<div>. This function goes back to the single react element which is the presentation of native DOM Component. This function must return the same result every time it is invoked.

17. What is a state in React and how is it used?

States are at the heart of components. They are the source of data and must be kept simple. States determine components’ rendering and behavior. They are mutable and create dynamic and interactive components, and can be accessed via this.state().

Note: From the vast number of react developer interview questions, answering this will help you to align yourself as an expert in the subject. This is a very tricky question that often makes developers nervous.

18. What is the component lifecycle in ReactJS?

Component lifecycle is an important part of ReactJS. Component lifecycle falls into three categories – property updates, Initialization and Destruction. Lifecycle is a method of managing the state and properties of the components.

19. What is an event?

Events are the triggered reactions to actions like mouse hover, click, key press, etc.

20. What is Redux?

Redux is used to handle data in a reliable manner. It performs task accurately and ensures that the data has been controlled. You can also apply filters if only a specific part of data is required.

NOTE: If you are looking Redux Interview Questions then you can visit here.

21. What is Flux?

Flux is an illustration that helps to maintain a unidirectional data stream. It also controls construed data unique fragments and makes them interface without creating issues. The configuration of Flux is insipid and is not specific to applications.

22. What is meant by pooling?

The server needs to be regularly monitored for updates. The aim is to check for the presence of new comments. This process is considered as pooling. It checks for the updates almost every 5 seconds. Pooling helps keep an eye on the users and ensure there is no negative information on servers.

23. In what cases would you use a Class Component over a Functional Component?

If your component has a state or lifecycle method, use Class component. Else, a Functional component.

24. What can you do if the expression contains more than one line?

Enclosing the multi-line JSX expression is the best option. Sometimes it becomes necessary to avoid multi-lines in order to perform the task reliably and for getting the expected results.

25. Is it possible to use the word Class in JSX?

No. This is because the word Class is an occupied word in JavaScript. If you use the word Class JSX will get translated to JavaScript.

Note: Before getting confused with the plethora of react coding interview questions, you need to ensure the basics. This question will help you to understand the core basics of react and make you even more confident enough to jump onto the advanced questions.

26. Is it possible to display props on a parent component?

Yes. This is a complex process, and the best way to do it is by using a spread operator.

27. What is React?

React is a JavaScript Library which is used to show content to user and handle user interaction.

28. What is Component?

Component is a building block of any React app which is made by either JavaScript Function of Class. Ex. Header Component, Footer Component etc.

There are two types of Components.

• Function Based Component
• Class Based Component

29. What are Class Based Component?

Class Based Component is the JavaScript Class. In these Components we extends the JavaScript predefined class into our component.

Example

                                                    Import React,{Component} from ‘react’;

class ABC extends Component {

 render(){

   return(

    <div>

       <h1>Hello World</h1>

</div>

);

}}

export default ABC;

30. What is a Higher Order Component (HOC)?

A higher-order component or HOC in React is basically an advanced technique used for reusing component logic. HOCs are not a part of the React API. They are a pattern emerging from the React’s compositional nature.

31. What is a pure function?

The term pure function in React means that the return value of the function is entirely determined by its inputs and that the execution of the function produces no side effects.

32. What is ReactDOMServer?

The ReactDOMServer is an object which enables you to render components as per a static markup. Generally, it is used on a Node Server.

33. How to apply validation on props in React?

The App.proptypes is used for validating props in React components.

Here is the syntax:

class App extends React.Component {
    render() {}
}
Component.propTypes = { /*Definition */};

34. How to create a component in react js?

There are 3 ways to create a component in React:

• Using a depreciated variable function
• Using a Class
• Using a Stateless Functional Component

1. Using a depreciated variable function

In this, you need to declare a variable in your Javascript file/tag and use the React.createClass() function to create a component using this code.

var MyComponent = React.createClass({
   render() {
      return <div>
      <h1>Hello World!</h1>
      <p>This is my first React Component.</p>
      </div>
   }
})

Now, use the div element to create a unique ID for the specific page and then link the above script onto the HTML page.

<div id=”react-component”></div>

Use ReactDOM.render() function to take 2 arguments, the react component variable and the targeted HTML page.

ReactDOM.render(<MyComponent />, document.getElementById('react-component'))

Finally, save the HTML page to display the result like this one below:

2. Using a Class

Javascript has lately started supporting classes. Any React developer can easily create a class using the class extends (Inherits). Following is the code

3. Using a Stateless Functional Component

It might sound a bit complex, but this basically means that a normal function will be used in place of a variable to return a react component.

Create a const called MyComp and set it as equal to a () function. Use the arrow function, => to declare the logic of the function as follows:

const MyComponent = () => {
   return <div>
   <h1>Hello!</h1>
   <p>This is my first React Component.</p>

35. How to link one page to another page in react js?

There are two ways to link one page to another to React:

Using React Router: Use the feature from the react-router to link the first page to the second one.

<Link to ='/href' ></Link>

36. How to reload the current page in react js?

Reloading/Refreshing a page using Javascript:
Use Vanilla JS to call the reload method for the specific page using the following code:

window.location.reload(false);

37. How to redirect to another page in react js?

The best way to redirect a page in React.js depends on what is your use case. Let us get a bit in detail:

If you want to protect your route from unauthorized access, use the component and try this:

Example

                                                    import React from 'react'

import { Redirect } from 'react-router-dom'

const ProtectedComponent = () => {

   if (authFails)

   return <Redirect to='/login' />

}

return <div> My Protected Component </div>

}

38. How do you reference a DOM element in react?

In React, an object this.refs which is found as an instance inside the component can be used to access DOM elements in Reactjs.

Note: One of the most tricky react advanced interview questions, you need to answer this question with utmost clarity. Maybe explaining it with a short example or even a dry run would help you get that dream job.

39. What are React Hooks?

React Hooks were brought in by the React team to efficiently handle state management and the side-effects in function components. React Hooks is a way of making the coding effortless. They help by enabling us to write React applications by only using React components.

0. How to call one component from another component in reactjs?

To render a component with another component in Reactjs, let us take an example:

Let us suppose there are 2 components as follows:

Example

                                                    Component 1

class Header extends React.Component{

    constructor(){

        super();

    }

    checkClick(e, notyId){

       alert(notyId);

    }

}

export default Header;

Component 2

class PopupOver extends React.Component{

    constructor(){

        super();        

    }

    render(){

        return (

            <div className="displayinline col-md-12 ">

                Hello

            </div>

        );

    }

}

export default PopupOver;



Now to call the Component 1 in Component 2, use this code:

import React from 'react';

class Header extends React.Component {

constructor() {

    super();

}

checkClick(e, notyId) {

    alert(notyId);

}

render() {

    return (

        <PopupOver func ={this.checkClick } />

    )

}

};

class PopupOver extends React.Component {

constructor(props) {

    super(props);

    this.props.func(this, 1234);

}

render() {

    return (

        <div className="displayinline col-md-12 ">

            Hello

        </div>

    );

}

}

export default Header;

41. What is React Router?

React Router is the in-built routing library for React. React Router helps to keep your UI in sync with the respective URL. It works on a simple API having powerful features like lazy loading, locational transition, and dynamic route matching built right in.

42. How to render an array of objects in react?

Now, there are two ways to render this object as an array,

First:

render() {
    const data =[{“name”:”test1″},{“name”:”test2″}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
      {listItems }
      </div>
    );
  }

Or, you could directly write the map function in the return

render() {
    const data =[{“name”:”test1″},{“name”:”test2″}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
  }

43. What is the difference between state and props in React?

Note: React is a widely used open-source library used for building interactive user interfaces. It is a web platform licensed under MIT. This is one of the very popular react interview questions.

44. Which lifecycle method gets called by react as soon as a component is inserted into the DOM?

45. How to use the spread operator to react?

46. What are the steps to implement search functionality in reactjs?

47. How to define property in the react component?

48. What is StrictMode in React?

49. How to avoid prop drilling in React?

You can avoid Prop Drilling in the following ways:

• Using a Context API
• Using Render Props

50. What are the key benefits of ReactJS development?

Key Benefits of ReactJS Development

• Allows Developers to Reuse the Components
• It is Much Easier to Learn
• The Benefit of Having JavaScript Library
• SEO Friendly
• It ensures faster rendering
• The Increase in Community Base
• The Support of Handy Tools
• Scope for Testing the Codes etc

51. What are synthetic events?

It is a cross-browser wrapper that is around the native event of the same browser. This is the most important question in react interview questions.

Top 20 React.Js Interview Questions

Here you will find the list of Top React interview questions, which were written under the supervision of industry experts. These are the most common questions and usually asked in every interview for the role of the React Developers.

• What is HOC?
• What are the difference between Rest and Spread Operator?
• What are the key benefits of using Arrow functions?
• What is Pure Component?
• What are Controlled and Uncontrolled components with example?
• What is Refs?
• What is the difference between class based component & function based components?
• How to work React?
• Why virtual Dom is faster than real dom?
• How does virtual Dom work in react?
• What are the difference between null & undefined?

Angular is one of the foremost frameworks, has released its latest version namely Angular 8 on 23rd of May, 2019. The latest version of Angular is incorporated with unique and attractive features. In general, Angular 8 supports new and unique features such as CLI (Command Line Interface), core framework, and angular material library. Angular 8 Interview Questions contain these important questions and answers. Read them carefully and score well.

This is a list of the most frequently asked Angular 8 interview questions and answers. Please have a good read and if you want to download it, it is available in a PDF format so that you can brush up your theoretical skills on this subject.

Most Frequently Asked Angular 8 Interview Questions

Here in this article, we will be listing frequently asked Angular 8 Interview Questions and Answers with the belief that they will be helpful for you to gain higher marks. Also, to let you know that this article has been written under the guidance of industry professionals and covered all the current competencies.1. What is the difference between Angular 7 and Angular 8?

2. What is bazel in Angular 8?

In Angular 8, Bazel is a new build system and it is available for a short period of time. It is the new feature of Angular 8, which provides a platform to make your backends and frontends with a similar tool. It has the possibility to have remote builds as well as cache on the build farm.

The main features of Bazel are-

• It is an internal build tool, through which application can be customized.
• It also tests the action and performance of multiple machines.
• It constructs a graph through which you can identify the useful information.
• It also supports customization.

3. What is the purpose of Wildcard route?

Wildcard routing is used in Angular 8 for defining the route of pages. Specific changes/updates can be made when defining the route using Wildcard.

4. What is the difference between promise and observable in angular8?

5. What is the purpose of Codelyzer?

Codelyzer is an open-source tool in Angular 8 whose main function is to check for errors in codes not following pre-defined guidelines. It runs on the tslint.json file and checks only the static code in Angular 8.

6. What are the new features in angular 8?

Angular 8 it has following new features such as

• Differential loading– It is a technique that automatically makes your angular applications more performant. When you build applications for production, two bundles are created- One bundle for Modern browsers that support ES6+ and another bundle for older browsers that only support ESS.
• Dynamic imports for lazy routes– In Angular version 8 there is nothing new in the concept of lazy routes itself but the syntax has totally changed. In the older version of Angular CustomString Syntax is used, but angular 8 uses standard dynamic import syntax so the syntax which is customized to Angular is migrated to industrial standard.
• Ivy rendering Engine– It translates the templates and components into regular HTML and javascript that the browser can interpret and understand.
• Bazel– It is a building tool through which angular developer can build backends and frontends.

7. What are the limitations of Web Workers?

Here are the limitations of a Web Worker:

• A web worker cannot directly manipulate the DOM
• It has limited access to methods and properties of the window object.
• It cannot be run directly from the file system. A web worker needs a server to run.

8. How Performance Improvements on the core in Angular 8?

Angular 8 has advanced level features which ensure systematic workflow and performance improvements. It has apparent features such as differential loading, CLI workflow improvements, Dynamic imports for lazy routes, Ivy rendering engine, Bazel, etc.

9. Why we used Service Workers in Angular?

A Service Worker is used in Angular 8 to build the basic steps of converting an application into a Progressive Web App (PWA). Service workers function as network proxies and intercepting all outgoing HTTP requests made by the application and how to respond.

10. How to upgrade angular 7 to 8?

Steps to upgrade Angular 7 to 8

• Install TypeScript 3.4
• Use Node LTS 10.16 or its advanced version
• Run command on terminal panel/CLI -> ng update @angular/cli@angular/core

Alternative- use URL link- https://update.angular.io/

11. How can you hide an HTML element just by a button click in Angular?

Ng-hide command is used to hide HTML elements if an expression is true.

Here’s an example:

<div ng-app="DemoApp" ng-controller="DemoController">
   <input type="button" value="Hide Angular" ng-click="ShowHide()"/>
   <div ng-hide="IsVisible">Angular 8</div>
</div>
<script type="text/javascript">
   var app = angular.module('DemoApp',[]);
   app.controller('DemoController',function($scope){
   $scope.IsVisible = false;
   $scope.ShowHide = function(){
     $scope.IsVisible = $scope.IsVisible = true;
   }
});
</script>

Now in the above, when the Hide Angular button is not clicked(the expression is set to false)

12. Why typescript is used in angular 8?

Angular uses TypeScript because:

• It has a wide range of tools
• It’s a superset of Angular
• It makes abstractions explicit
• It makes the code easier to read and understand.
• It takes most of the usefulness within a language and brings it into a JS environment without forcing you out.

13. What are new features in Angular 9?

Here are the top new features of Angular 9

• An undecorated class migration schematic added to the core.
• Numeric Values are accepted in the formControlName.
• Selector-less directives have now been allowed as base classes in View Engine in the compiler.
• Conversion of ngtsc diagnostics to ts.Diagnostics is possible

14. What is the use of RxJS in angular8?

Angular 8 uses observables which are implemented using RxJS libraries to push code. The main job of RxJS is to work with asynchronous events.

15. What is NgUpgrade?

NgUpgrade in Angular 8 is a library which is used to integrate both Angular and AngularJS components in an application and also help in bridging the dependency injection systems in both Angular & AngularJS.

16. Which command is used to run static code analysis of angular application?

The ng lint command is used to run static code analysis within an Angular application.

17. What is HostListener and HostBinding?

18. What is authentication and authorization in Angular?

19. How to install Angular 8?

Steps for the Installation of Angular 8 environmental setup

Step 1

Before installing Angular IDE using Angular CLI tool, make sure that Node.js has already installed in your system.

• 1. If Node.js is not installed in your system install it using the following steps.
  • The basic requirement of Angular 8 is Node.js version 110.9.0 or later.
  • Download it using https//nodejs.org/en/
  • Install it on your system
  • Open node.js command prompt
  • Check the version run command, node-v in the console window

Step 2

In order to install Angular CLI, use the following commands 2) npm install –g @angular/cli or npm install –g @angular/cli@latest

Step 3

To check the node and angular CLI version, run command ng –version on the console terminal

20. What is runGuardsAndResolvers in Angular 8?

Angular 8 introduced a number of new and unique options to runGuardsAndResolvers. In general, runGuardsAndResolvers is an option which is used for the Angular router configuration in order to control the resolvers and guards. The first option available in runGuardsAndResolvers is pathParamsChange. Through, this option router will re-run the guards and resolvers. Whenever you want to control over the resolvers and guards, use runGuardsAndResolvers option in Angular 8.

21. Why Incremental DOM is Tree Shakable?

In Angular 8, the framework does not interpret components in an incremental DOM. It uses component references instructions, and if it does not refer to a particular instruction, it shall be left unused. Now, VIrtual DOM requires an external interpreter. Hence, not knowing which components to display, everything is shifted to the browser, making the DOM shakeable.

22. What is the difference between real Dom and virtual Dom?

23. What is typeofchecks in Angular 8?

The working of typesofchecks in Angular 8 is similar with the enabled and disabled flag, which means if you want to test whether the selected value is an object or not, then the following syntax is used ” Typeof value = = = ‘object’ “. In angular 8 the folwing types of checks are used such as “Typeof value.ngOnDestroy = = = ‘function’ “.

24. How to rollback the whole object when navigating back to a page managed by Angular Router in Angular 8?

The angular router in Angular 8 enables rollback the whole object to the next as users perform application work. To present a specific component view a given URL, Angular Router is the foremost service that presents. In order to import an Angular router, it is mandatory to install a library package, @angular/router.

Here is a List of essential Angular Interview Questions and Answers for Freshers and mid level of Experienced Professionals. All answers for these Angular questions are explained in a simple and easiest way. These basic, advanced and latest Angular questions will help you to clear your next Job interview.

Angular Interview Questions and Answers

These Angular interview questions are targeted for Angular 12, Angular 11, Angular 10, Angular 9, Angular 8, Angular 7 and all versions greater than Angular 2. You must know the answer of these frequently asked Angular interview questions to clear the interview. These Angular questions will help Full Stack developers, Java Developers, .Net Developers, UI or Front End developers and many more to clear the interview.

1. What is Angular?

Angular is an application design framework and a development platform to build sophisticated and efficient single page applications. This document applies to angular version 2.0 and later versions such as Angular 11, Angular 10, Angular 9, Angular 8, Angular 7 etc. For 1.x versions of angular we use the name as AngularJS.

2. What is the latest version of Angular?

You can check Angular version any time on this link Angular Latest Version

3. How is Angular different from AngularJs?

Angular and AngularJS both are the open source JavaScript based frameworks used to develop web based single page applications (SPAs). For angular versions 1.x we gave the name AngularJS and for angular version 2.0 and later we just call it Angular. There are a lot of differences between Angular and AngularJS as below.

• Language – AngularJS is based on JavaScript, Whereas Angular is written in TypeScript superset of ECMAScript 6 (ES6). TypeScript provides object oriented features and better type checking.
• Architecture – AngularJS has architecture of MVC (model-view-controller). Model manages its data with the help of $scope, the controller handles user interactions and the view displays the data. Angular has the architecture of components (that handles the logic and view part of the page) and directives. Directives with templates are called components. Angular provides 2 types of directives one is Structural and second attribute directives.
• Expression Syntax – Both use double curly braces – {{ }} for expressions.
• Mobile Support – Angular is built by keeping mobile browsers in mind but AngularJS was not built to support mobile devices.
• Route Navigation – Both provide different configurations for routing as $routeProvider for AngularJS and RouteConfig in Angular.
• Dependency Injection (DI) – Angular has its own Dependency Injection (DI) pattern which provides the efficiency and modularity in application design whereas AngularJS has not it’s own Dependency Injection.
• Performance – Angular has better performance than AngularJS because of it’s DI and typescripts OOPs concept, type checking.
• Structure – AngularJS has less complex structure whereas Angular provides better structure for Large single page applications.

4. What are the advantages of using Angular over AngularJS?

Angular is a typescript based free and open-source application design framework and platform for developers which comes with many advantages.

• Angular has better architecture support for larger applications.
• TypeScript provides OOPS features and better type checking.
• Mobile support is a good feature.
• Routing is simpler to configure.
• Built in Dependency Injection.
• Provide the capability to write the code in different languages typescript, ES5, Dart etc.
• Upgrading to newer versions is easy.
• Support of AOT compilation in Angular versions 4.0 onwards.

5. What are the main building blocks of an Angular Application?

Angular Architecture provides some basic concepts or main building blocks to develop an application. These main building blocks are:

• NgModules – Angular application is a set of NgModules as angular supports modular programming. NgModules collect the related code into units for related functionality and provide the compilation context for the component. An application has at least one root module that is responsible for bootstrapping and other are the feature modules. You can create a module class using @NgModule decorator with some properties. Module can contain any components, service providers and other code for that module. @NgModule({ imports: [], declarations: [], providers: [], bootstrap: [AppComponent], }) export class AppModule { }
• Components – Components define and control the view , it’s associated data and logic. Application has at least one component. The component decorator @Component() treats the class just below it as a component class and provides the information for the template and other meta-data information. Example is below. @Component({ selector: 'web-portal-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'], }) export class HomeComponent { }
• Services – Services are used to share the data across the components. The decorator @Injectable() defines the class just below it as a service that can be injected as a dependency. @Injectable() export class UserService { }
• Dependency Injection – Dependency Injection is a design pattern that is used to resolve the dependencies in different classes or components. you can inject the service in a component’s constructor as below. constructor(private service: UserService) { }
• Routing – Angular provides a RouterModule to handle the navigation between the states and view of application.

6. What is the difference between NgModules and JavaScript modules?

NgModules are different from JavaScript modules in the following ways.

• NgModule binds to declared classes only not all as Angular compiler only understands declared classes.
• JavaScript modules define all member classes in one giant file but Angular modules use the declaration array to include all member class files.
• NgModules exports only classes available in it’s declaration and imported from other modules, not all.
• An NgModules can extend the entire application with services by adding providers in it’s providers list but JavaScript modules can not do this.

7. What is the host view in Angular?

When a component is created it’s directly associated with a single view that is called host view.

8. What are the directives? How many types of directives are available in Angular?

Directives provide the Program logic and extend the power of HTML by providing new syntax.
Angular supports 3 types of directives as below.

• Components – These are the directives with templates.
• Structure directives – You can change DOM structure by adding or removing the elements. we use asterisk (*) as a prefix to the directive name. Structure directive examples are *ngIf, *ngFor etc. <span *ngIf="user" class="name">{{user.name}}</span>
• Attribute directives – When you want to change the appearance or behavior of a DOM element, you can use attribute directive. Attribute directive example. import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[highlight]' }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } } // directive usage <span highlight>High light content!</span>

9. What is Data Binding in Angular? Explain 2 way data binding.

Data binding is the way to share the data between a component class and its associated template called view. Angular provides 2 way data binding means component properties can be used in view for data and if you make any changes in view then changes should reflect back in component’s properties.

10. What is Interpolation and Template Expressions in Angular?

Interpolation provides the easiest way to bind a component property in the view. In Interpolation you put the property in the double curly braces ‘{{property=name}}’.
A Template expression is used in double curly braces and produces a value like {{1+1}}, it will produce a value 2. In Property binding an expression is the right side part of ‘=’ operator.

11. What are the different types of binding available?

Angular provides different ways of binding as below.

• Property Binding – binding is set in one direction from component’s property to template. Property binding example.<img [src]="ImageUrl">
• Event Binding – It’s used to bind any event. Event binding example.<button (click)="onUpdate($event)">Save</button>
• Two way binding – It’s used for two-way binding. Two-way data binding example.<input [(ngModel)]="name">
• Attribute binding – It’s used to set the value of an attribute directly. Attribute binding example.<button [attr.aria-label]="help">help</button>
• Class binding – It’s used to add or remove class names from class attributes. Class binding example. <span [class.specialClass]="isSpecialClass">Special class</span>
• Style binding – It’s used to add or remove the style from the style attribute. Style binding example.<button [style.color]="isSpecialClass ? 'blue' : 'black'">Click Me</button>

12. What are the lifecycle hooks in angular?Components and directives have a lifecycle managed by Angular. Angular creates and renders the components and checks when their data bound properties change and destroy them before unloading. Angular creates components by calling it’s constructor and follows the sequence of lifecycle hooks as below.

• ngOnChanges() – called when Angular resets data bound properties.
• ngOnInit() – used to initialize the directive or component and sets data bound properties.
• ngDoCheck() – when the changes are not detected by angular own then it’s used to catch those changes.
• ngAfterContentInit()
• ngAfterContentChecked()
• ngAfterViewInit()
• ngAfterViewChecked()
• ngOnDestroy() – used to cleanup the component or directive before Angular destroys it.

For more visit Angular Lifecycle hooks.

13. How will you share the data between components?

In many scenarios you need to share the data between the components. it can be parent to child, child to parent and unrelated components. So let’s understand this with the help of an example.

• Parent To Child Component – any data from parent to child can be shared with the help of @Input decorator. // parent component import { Component } from '@angular/core'; @Component({ selector: 'app-parent', template: `<app-child [childMessage]="parentMessage"></app-child>`, styleUrls: ['./parent.component.css'] }) export class ParentComponent{ parentMessage = "message from parent" constructor() { } } // child component import { Component, Input } from '@angular/core'; @Component({ selector: 'app-child', template: `Say {{ childMessage }}`, styleUrls: ['./child.component.css'] }) export class ChildComponent { @Input() childMessage: string; constructor() { } }
• Child To Parent Component 1 – you can share the data from child to parent using @Output decorator. import { Component } from '@angular/core'; @Component({ selector: 'app-parent', template: `Message: {{message}}<app-child (messageEvent)="receiveMessage($event)"></app-child>`, styleUrls: ['./parent.component.css'] }) export class ParentComponent { constructor() { } message:string; receiveMessage($event) { this.message = $event } } import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-child', template: `<button (click)="sendMessage()">Send Message</button>`, styleUrls: ['./child.component.css'] }) export class ChildComponent { message: string = "Hello Testing!" @Output() messageEvent = new EventEmitter(); constructor() { } sendMessage() {this.messageEvent.emit(this.message) } }
• Child To Parent Component 2 – you can share the data from child to parent using @Viewchild decorator. import { Component, ViewChild, AfterViewInit } from '@angular/core'; import { ChildComponent } from "../child/child.component"; @Component({ selector: 'app-parent', template: ` Message: {{ message }} <app-child></app-child> `, styleUrls: ['./parent.component.css'] }) export class ParentComponent implements AfterViewInit { @ViewChild(ChildComponent) child; constructor() { } message:string; ngAfterViewInit() {this.message = this.child.message} } @Component({ selector: 'app-child', template: ``, styleUrls: ['./child.component.css'] }) export class ChildComponent { message = 'Hello Testing!'; constructor() { } }
• Share data between Unrelated Components – for this you can write one service and that service can be injected in both components. So Angular Services are used to share the data between unrelated components.

14. What are the Pipes in Angular?

A Pipe provides the functionality of transforming the data from your data input to desired output. For example, You receive some lower case data from the back end and now you want to display that data as upper case then you can Angular built in pipe ‘uppercase’. You can also create your custom pipes in angular.
To implement a custom pipe, decorate your class with ‘@Pipe’ metadata and implement PipeTransform interface’s transform method as below.

@Pipe({name: 'exponentialStrength'})
export class ExponentialPipe implements PipeTransform {
  transform(value: number, exponent?: number): number {
    return Math.pow(value, isNaN(exponent) ? 1 : exponent);
  }
}

15. Explain the AOT compilation? Or What is the difference between JIT and AOT?

Angular provides two ways for the compilation of your application.

• JIT – Just-in-Time (JIT), it compiles the application at runtime in the browser. JIT is the default compiler in angular. When you run ng-build or ng-server it will compile your application.
• AOT – Ahead-of-Time (AOT), it compiles the application at build time. AOT compiler converts all HTML and TypeScript code into JavaScript code during build before browsers start downloading JavaScript code. It makes rendering faster. AOT provides a lot of benefits as below.
  • Browsers get pre-compiled code and do not wait for compilation that results in faster Rendering.
  • It reduces the size of Angular framework as there is no need to download the compiled code.
  • Errors can be detected earlier during the build phase only.
  • AOT reduces the chances of injection attacks as it compiles the code long before they are sent to the client.
  • AOT improves the number of asynchronous resource requests as it inlines the external HTML templates and styles.

16. What are the Services in Angular?

In Angular services are the classes with well defined purpose. Services provide the functionality in a modular way which can be reused across the components. To share the data between components you can use services. You can make your components efficient by delegating some functionality code to services like fetch the data from server, validation rules etc. By defining this code into services you can make your code reusable to any component. You can create a service by using @Injectable decorator.

 // It's a self registering service, now no need to put this service in providers array in module or component
@Injectable({
  providedIn: 'root', // to inject the dependency in root. 
})
export class UserService {
}

// You register a service at module level by setting the 'providers' property of @NgModule decorator. 
@NgModule({
  providers: [
  UserService
 ],
 ...
})

// You can also register a service at component level by settings 'providers' property of @Component decorator.
@Component({
  selector:    'app-user-list',
  templateUrl: './user-list.component.html',
  providers:  [ UserService ]
})

17. How to make a service a singleton in Angular?

There are two ways to make a service a singleton as below.

• First way is – inject the service in root by setting ‘providedIn’ property to ‘root’ in @Injectable decorator.
• Second way is – include the service in AppModule only or in a module that is imported only in AppModule no where else.

18. What is the provider in Angular?

In Angular, dependency injection is used to inject the dependencies of services, A Provider works as an instructor for dependency injection system to resolve the dependencies. When you create any service it comes with a default @Injectable decorator that contains a default property ‘providedIn’ which creates the provider for service.

@Injectable({
  providedIn: 'root',
})
export class DataService {
}

You can inject the services in the root or particular module as well and you can limit the scope of a service to a particular component by using component providers.

@Component({
/* . . . . .*/
  providers: [DataService]
})

19. Explain the dependency injection in Angular?

Dependency Injection (DI) is a design pattern. Angular provides it’s own dependency injection to Angular applications to increase their efficiency and modularity. Dependency is an object or class that another class needs to complete its operations, for example A ‘UserComponent’ needs ‘UserService’ to perform user operations. Angular DI framework injects the dependencies when it’s instantiating the class or component.
In angular it’s mandatory to create the service with @Injecible decorator. To get injected the service by dependency injection you need to specify providers.

@Injectable({
  providedIn: 'root', // to inject the dependency in root
})
export class UserService {
}

//In user component constructor you can inject the dependency like this

constructor(userService: UserService){}

To configure providers at NgModule and Component level you can set the ‘providers’ metadata option of @Component and @NgModule decorators.

20. What is RxJS library?

RxJS (Reactive Extensions for JavaScript) is a library that uses the observable sequences for asynchronous and event-based or callback-based code. RxJS library has one core type ‘Observable’ and satellite types including (Observer, Schedulers, Subjects).
RxJS provides many operators to support the below features.

• To map to different types.
• Iteration
• Filter
• Composition of multiple streams
• To perform asynchronous operations convert existing code into observables.

For more you can refer RxJS Library and Angular RxJS Library.

21. What are the observables in Angular?

In Angular, observables are used to achieve some common asynchronous operations as below.

• Custom events are used to send observable output data from child to parent components.
• Observables are used to handle Ajax requests and responses by HTTP Modules.
• Observables are also used to listen and respond to the user-input events by Forms and Router Modules.

For More about Observables refer Observables in Angular.

22. What are the differences between Promises and Observables in Angular?

Observables are compared with Promises most of the time, there are a lot of differences in them as below.

• Observables are declarative means execution starts only when you subscribe to them but Promises start the execution on the creation only.
• Observables can provide multiple values over the time but Promises provide only one value.
• Observables provide many functions to perform transformations but promises have only ‘.then’ function.
• Promises pass errors to child promises but Observable’s subscribe method provides good error handling.

23.What is the subscribe method in Angular?

You need to subscribe to the instance to use published values from Observable instances. For this, observable instances provide the subscribe method and pass an object to receive notifications.

// Create simple observable that emits three values
const testObservable = of(4, 5, 6);

// Create observer object
const tstObserver = {
  next: value => console.log('Observer got a next value that is: ' + value),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};

// Execute with the observer object
testObservable.subscribe(tstObserver);
// Logs:
// Observer got a next value: 4
// Observer got a next value: 5
// Observer got a next value: 6
// Observer got a complete notification

24. How does routing work in Angular?

Angular configure routes in the AppRoutingModule file. To configure routes first import the AppRoutingModule file in your AppModule and add it to the imports array.

import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [AppRoutingModule] // CLI adds AppRoutingModule to the AppModule's imports array
.....
})

To define and configure the routes perform below steps.

• In AppRoutingModule import RouterModule and Routes.
• Use Routes array to define your routes.
• Configure routes to your application code.

import { Routes, RouterModule } from '@angular/router'; // 1. CLI imports router
const routes: Routes = [ { path: 'first-route', component: FirstRoute },
  { path: 'second-route', component: SecondRoute }]; // 2. sets up routes constant where you define your routes

// configures NgModule imports and exports
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { 
}
// 3. configure routes
<nav>
    <ul>
    <li><a routerLink="/first-route" routerLinkActive="active">First Route</a></li>
    <li><a routerLink="/second-route" routerLinkActive="active">Second Route</a></li>
    </ul>
</nav>

25. Explain the route guards?

A User can navigate anywhere to the application at a moment of time, but sometimes you want to control the user access for various reasons as below.

• Users must login.
• You want to save some data before the user navigates.
• you want to authorize the user.
• You might ask the user to discard pending changes.
• Many other reasons.

To handle these scenarios Angular provides the concept of guards that can be added to routes. Router’s behavior can be controlled by guard’s return value as below.

• If value is true means navigation continues.
• If the value is false, navigation stops.
• If value is UrlTree means new navigation initiates for returned UrlTree.

26.What is Root Module in Angular?

Every Angular application has at least one module, You bootstrap that module to launch the application. This module is called Root Module. When you create an angular application then you get by default one NgModule with the name AppModule called root module.

27. Explain the feature module and types of feature modules.

Angular provides one NgModule by default when you create any new angular application. As your application functionality grows then you can create a feature module responsible for a particular set of functionality. for example you can create routingModule for routes, for customer functionality customerModule etc. You can create a feature module using the below command and then you can import this feature module to your root module’s import array.

ng generate module CustomerDashboard

There are 5 types of feature modules as below.

• Domain feature modules
• Routed feature modules
• Routing modules
• Service feature modules
• Widget feature modules

28. Explain the lazy loading of feature modules.

In Angular by default all NgModules are eager loaded means they load as soon as the app loads. But for large applications where there are many routes you should prefer lazy loading. Lazy loading is a pattern that loads modules as needed. It improves loading time of application as initial size of bundle is less.
You can create a lazy loaded feature module as below.

• You should create a feature module with angular CLI, using –route flag.
• Configure the routes as per lazy loading guideline visit here Lazy Loading Angular Module.

29. What is the HTTP interceptor?

HTTP Interceptor intercepts and handles an HTTP request or response. You create your own interceptor by implementing the HttpInterceptor interface.

interface HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
}

In case of multiple interceptors, the first interceptor transforms the request before passing it to next with ‘next.handle(transformedReq)’ method.
To use the same instance of HttpInterceptor for the entire application, import HttpClientModule in your appModule and add the interceptor to the root application injector. If you want to override this interceptor then specify another interceptor in the feature module.

30. Explain some common commands in Angular.

Angular provides many commands to perform operations as below.

• npm install -g @angular/cli – to install angular cli.
• ng help – list available commands with descriptions.
• ng new my-first-project – create new angular workspace.
• cd my-first-project – go to your app directory.
• ng generate – generate new files or modify existing.
• ng build – compile the app into an output directory named ‘dist’.
• ng serve – build and serve your application.
• ng run – runs an application with custom build configuration.
• ng update – update dependencies in your application.
• ng version – gives current CLI version.
• There are many other visit Angular CLI commands.

31. How will you create the library in Angular?

Some applications provide general solutions like a unified interface, some data operations apps etc. Developers can create these general applications as a library which can be reused in different applications via npm packages. An Angular library differs from an Angular Application in that it can not run on its own as it must be imported in any application.
You can create, build, run, lint an angular library with below commands.

ng generate library auth-lib  // to create library
ng build my-lib
ng test my-lib
ng lint my-lib

32. How will you publish any angular library?

Once you are ready with your angular library you can publish it to NPM repositories with below commands.

ng build my-lib --prod
cd dist/my-lib
npm publish

Here –prod flag specify to use older compiler and runtime instead of using Ivy in angular 9.

33. How to update your angular applications to the latest version of angular?

You can run a basic update command to update the latest stable release of angular CLI and angular core.

ng update @angular/cli @angular/core

Above command will update your application to the latest angular CLI and angular core. You can also update from one major version to another by specifying the version as below.

ng update @angular/cli@^9 @angular/core@^9

To check other dependencies you can visit Angular Update Guide and to set any options visit Angular ng update command.

34. What is Transpiling in Angular?

In Angular, Transpiling refers to the process of converting Typescript code into JavaScript code. It’s done using a TypeScript compiler that’s called a transpiler.

35. Describe the Bazel that was introduced in Angular 8.

Bazel is a build tool that works with angular CLI to build your application. The @angular/bazel package provides this build tool. To include bazel in an existing application use the below command.

ng add @angular/bazel

To use Bazel in a new application, first you need to install it globally using the below command.

npm install -g @angular/bazel
// and to create new application
ng new --collection=@angular/bazel

Now Bazel will be used behind the scene for the commands like ng build, ng serve. You can put the Bazel output in the dist/bin folder.

36. What is an Angular service worker?

Angular Service Worker is a script that runs in the browser and manages the caching for an application. It provides a good user experience with performance and reliability.
It works as a network proxy that intercepts all the HTTP requests and decides how to respond to them. It can serve the request from cache if it is available. Unlike Other Angular scripts, service worker is preserved after the user closes the tab. The next time the browser loads the application, first the service worker loads and intercept all the requests without the need of the network.

37. On what port Angular runs by default?

By default, Angular runs on the 4200 port that could be configured.

38. Explain the SPA (Single Page Application).

SPA (Single Page Application) is a type of web application that provides a good user experience by dynamically loading the selected part of the application instead of loading the full application. SPA has good speed and performance.

39. What is an AOT compiler?

Browser does not understand Angular code directly, so compilation is required to convert that code into efficient JavaScript code. A ahead-of-time (AOT) compiler compiles the Angular and HTML code during the build phase so that compiled JavaScript code is available for the browser to download and run. AOT compiler compiles the code during build phase so it makes rendering to be fast in the browser. For more visit AOT Compiler.

Angular 9 Interview Questions:

1. List some new features in Angular 9

Angular 9 released on 6th Feb 2024 with a stable version 9.0.0 release. It’s a major release of Angular that covers the Angular Framework, CLI, Angular Material and Platform updates.
There are many new features provided in Angular 9 as below.

• Project Ivy – A new compiler and runtime that all angular 9 applications will use by default.
• ng update – is more informative and reliable to automatically use latest CLI, clearer progress update and easier update debugging
• New additional options for providedIn to inject the services. One is platform and other is any
• Providing support for TypeScript 3.7
• An alternative approach to test the components called Component Harnesses
• Improvements in IDE and language service
• New Components – you can use youtube and Google maps inline in your application.

2. How to update to Angular version 9?

To update your project to Angular 9 First update your project to Latest Release of Angular 8 for better update experience as below.

ng update @angular/cli@8 @angular/core@8

Once you have updated to Angular 8 then update to Angular 9 or latest version of Angular as below.

ng update @angular/cli @angular/core

For detailed update changes follow Angular Official document Update to Angular 9.

3. What is Project Ivy in Angular 9?

Angular 9 has come with project Ivy with a lot of advantages as below. Ivy is a compiler and runtime. Angular version 9 allows all applications to use this Ivy compiler and runtime by default. There are many advantages of Ivy compiler and runtime.

• Bundle sizes reduced – Ivy compiler generates lesser code for each angular component by removing the extra code which is not being used via tree-shaking.
• Faster Testing – TestBed Implementation has been changed in Angular 9, As TestBed will not recompile all the components during the tests unless there are any changes made to components. So this improvement in TestBed increases the test speed to 40-50% faster.
• Better Debugging –
• CSS class and style binding improvements –
• Type checking improvements –
• Build errors improvement –
• Build time improvements, AOT on by default enabled –
• Internationalization improvements –

For more details on Project Ivy follow the link Project Ivy in Angular 9.

4. What are Component Harnesses in Angular 9?

Normally component testing relies on implementation details, if a component library changes it’s implementation then all the test dependent on that component needs to be updated. But component harness API provides the capability of insulating or isolating for a test against the updates to component’s internal changes in DOM structure.
So Component Harness provides an alternate approach to test the components. it will be available to component authors as a part of Component Dev Kit (CDK). Multiple environments can be supported by component harnesses, as only single harness implementation can be used for both unit testing and end to end testing.
Let’s take a look at the example of Component Harness.

it("should switch to customer data template", async () => {
  expect(fixture.debugElement.query("customer-form")).toBeNull();
  const select = await loader.getHarness(MatSelect);
  await select.clickOptions({ text: "Bug" });
  expect(fixture.debugElement.query("customer-form")).not.toBeNull();
});

5. What are the new options for ‘providedIn’ in Angular 9?

Angular services are added to the injector using @Injectable decorator. Angular 9 is providing 2 more options to inject the services with existing additional options as below.

• platform – When all applications on that page share a special singleton platform injector and you want a service to be available in that then you can specify providedIn:’platform’.
• any – Whenever you want unique instance in every module (including lazy modules as well) which injects the token then you can specify providedIn:’any’.

6. How ‘ng update’ works in Angular 9?

Angular 9 has made ‘ng update’ more informative and reliable.

• Always Latest CLI is used – While updates, CLI is used from destination version not latest but going forward updates will take the benefit of new update features automatically.
• Will see progress updates clearly – Now ‘ng update’ will provide you complete information about migration.
• Update debugging is easier – ‘ng update’ runs all migrations and you can inspect all changes after completion. But Angular 9 provides additional flag –create-commits. So when you run ‘ng update –create-commits’ then all migrations will run and after that tools will commit the code base state so that you can inspect and debug the changes made in your code.

7. What are the improvements in IDE and language service in Angular 9?

You can see some improvements to the Angular Language Service extension on visual studio marketplace. There were some bugs that have been fixed. Some other improvements include:

• TextMate grammar behavior that provides syntax highlight ability in both in-line and external templates.
• Hover tooltip will provide NgModule and Type information.
• For templateUrl and styleUrls you can check definition by “Go to definition”.

Some General Interview Questions for Angular

1. How much will you rate yourself in Angular?

When you attend an interview, Interviewer may ask you to rate yourself in a specific Technology like Angular, So It’s depend on your knowledge and work experience in Angular.

2. What challenges did you face while working on Angular?

This question may be specific to your technology and completely depends on your past work experience. So you need to just explain the challenges you faced related to Angular in your Project.

3. What was your role in the last Project related to Angular?

It’s based on your role and responsibilities assigned to you and what functionality you implemented using Angular in your project. This question is generally asked in every interview.

4. How much experience do you have in Angular?

Here you can tell about your overall work experience on Angular.

5. Have you done any Angular Certification or Training?

It depends on the candidate whether you have done any Angular training or certification. Certifications or training are not essential but good to have.

Learn how to iterate throught the child directories and files of a directory recursively in Node.js

Either to create some kind of file search algorithm or to get a list of all the files and folders inside a directory to compress it with zlib, this feature is often searched for Node.js developers (and the number of downloads and dependent packages on some known modules proves it).

In this article we are going to show you how to loop recursively through a directory to list all its content with 3 different methods (custom snippets or by using open source modules).

A. Using a custom snippet

If you want to loop recursively through a directory in Node.js, you don’t need necessarily a module to achieve it as you can use a very simple recursive function. The following filewalker function will do the trick for you. It expects as first argument a string with the path of the folder that will be recursively explored and as second argument a function (the callback) executed once there are no mores directories inside the providen path. The callback receives 2 arguments, the error as first and the result array that contains all the mixed paths of files and subdirectories.

Note

If you only need to ignore all the folders and retrieve only the paths of the files, you can comment easily the line that stores the filepath in the array within the snippet.

const fs = require('fs');
const path = require('path');

/**
 * Explores recursively a directory and returns all the filepaths and folderpaths in the callback.
 * 
 * @see http://stackoverflow.com/a/5827895/4241030
 * @param {String} dir 
 * @param {Function} done 
 */
function filewalker(dir, done) {
    let results = [];

    fs.readdir(dir, function(err, list) {
        if (err) return done(err);

        var pending = list.length;

        if (!pending) return done(null, results);

        list.forEach(function(file){
            file = path.resolve(dir, file);

            fs.stat(file, function(err, stat){
                // If directory, execute a recursive call
                if (stat && stat.isDirectory()) {
                    // Add directory to array [comment if you need to remove the directories from the array]
                    results.push(file);

                    filewalker(file, function(err, res){
                        results = results.concat(res);
                        if (!--pending) done(null, results);
                    });
                } else {
                    results.push(file);

                    if (!--pending) done(null, results);
                }
            });
        });
    });
};

Copy snippet

And it’s usage is very simple:

filewalker("./some-existent-path", function(err, data){
    if(err){
        throw err;
    }
    
    // ["c://some-existent-path/file.txt","c:/some-existent-path/subfolder"]
    console.log(data);
});

Copy snippet

This solution is perfect if you don’t want to rely on a module to achieve something very simple and directly in your code.

B. Using the readdirp module

If your code isn’t so simple, then the solution with a single snippet may be not enough for you due to the complexity of your code. In this case, you can use the readdirp module, yes readdirp not readdir. readdirp is a very useful module that exposes a recursive version of the readdir function available in the filesystem module of Node.js, besides it exposes a stream api.

To install this module in your project, execute the following command in your terminal:

npm install readdirp

Copy snippet

The advantages of the usage of this module are very clear and it’s not so simple as the first solution that we exposed in this article. This module allows you to filter your recursive exploration by file extension and by directory name, besides it allow you to set a depth (max value of subfolders to explore in the providen directory). It works in the following way, you need to require the readdirp module that is basically a function. With this function you will be able to iterate recursively through a folder path, it requires an object that specifies the settings, you can see all the available options of readdirp here:

var settings = {
    root: './a-folder-to-explore',
    entryType: 'all',
    // Filter files with js and json extension
    fileFilter: [ '*.js', '*.json' ],
    // Filter by directory
    directoryFilter: [ '!.git', '!*modules' ],
    // Work with files up to 1 subdirectory deep
    depth: 1
};

Copy snippet

Basically you only need to provide the root property that indicates which directory will be explored.

The module offers 2 ways to be used, the first is with callbacks:

// Import the module
var readdirp = require('readdirp');

var settings = {
    root: './your-folder-path',
    entryType: 'all'
};

// In this example, this variable will store all the paths of the files and directories inside the providen path
var allFilePaths = [];

// Iterate recursively through a folder
readdirp(settings,
    // This callback is executed everytime a file or directory is found inside the providen path
    function(fileInfo) {
        
        // Store the fullPath of the file/directory in our custom array 
        allFilePaths.push(
            fileInfo.fullPath
        );
    }, 

    // This callback is executed once 
    function (err, res) {
        if(err){
            throw err;
        }

        // An array with all the fileEntry objects of the folder 
        // console.log(res);
        console.log(allFilePaths);
        // ["c:/file.txt",""]
    }
);

Copy snippet

Or through the stream API:

// Import the module
var readdirp = require('readdirp');

var settings = {
    root: './',
    entryType: 'all'
};

// In this example, this variable will store all the paths of the files and directories inside the providen path
var allFilePaths = [];

// Iterate recursively through a folder
readdirp(settings)
    .on('data', function (entry) {
        // execute everytime a file is found in the providen directory

        // Store the fullPath of the file/directory in our custom array 
        allFilePaths.push(
            entry.fullPath
        );
    })
    .on('warn', function(warn){
        console.log("Warn: ", warn);
    })
    .on('error', function(err){
        console.log("Error: ", err);
    })
    .on('end', function(){

        console.log(allFilePaths);
        // ["c:/file.txt","c:/other-file.txt" ...]
    })
;

Copy snippet

Every fileEntry object, has the following structure, so you will get not only the full path but more useful information about the file or directory:

{
    name: 'index.js',
    path: 'node_modules\\string_decoder\\index.js',
    fullPath: 'C:\\Users\\sdkca\\Desktop\\node-workspace\\node_modules\\string_decoder\\index.js',
    parentDir: 'node_modules\\string_decoder',
    fullParentDir: 'C:\\Users\\sdkca\\Desktop\\node-workspace\\node_modules\\string_decoder',
    stat:
    Stats {
        dev: -469691281,
        mode: 33206,
        nlink: 1,
        uid: 0,
        gid: 0,
        rdev: 0,
        blksize: undefined,
        ino: 562949954035272,
        size: 7796,
        blocks: undefined,
        atime: 2017 - 03 - 31T18: 27:30.703Z,
        mtime: 2017 - 03 - 31T18: 27:30.724Z,
        ctime: 2017 - 03 - 31T18: 27:30.724Z,
        birthtime: 2017 - 03 - 31T18: 27:30.703Z 
    }
};

Copy snippet

For more information, please visit the repository of the module in Github here.

C. Using klaw and klaw-sync modules

Originally, a lot of developers used to rely on the wrench module (and many still rely on), however it’s now officialy deprecated and we love to promote standards, you should not use it anymore (we do not prohibit it, so feel free to explore the module if you want but think on that’s deprecated). The project now recommends to use the fs-extra module, however the module doesn’t support the walk() and walkSync() functions anymore (reason why the developers used the wrench module to explore recursively a directory).

As the recursive functions aren’t available anymore, the fs-extra module recommends to use the klaw module. This module exposes an asynchronous Node.js file system walker with a Readable stream interface originally extracted from the fs-extra module.

To install this module, execute the following command in your terminal:

npm install klaw

Copy snippet

Klaw is very easy to use and customizable. To loop recursively through a directory, use the following snippet:

// Import the klaw module
var klaw = require('klaw');

// an array to store the folder and files inside
var items = [];

var directoryToExplore = "./some-folder";

klaw(directoryToExplore)
    .on('data', function (item) {
        items.push(item.path)
    })
    .on('end', function () {
        console.log(items);
    })
    .on('error', function (err, item) {
        console.log(err.message)
        console.log(item.path) // the file the error occurred on
    })    
;

Copy snippet

As it’s asynchronous, you need to rely on the end callback to do whatever you want with the list of found files and directories in the providen directory.

For more information about the asynchronous klaw module, please visit the official repository in Github here.

If you need the same functionality but synchronous, you can use the klaw-sync module. klaw-sync is a Node.js recursive file system walker, which is the synchronous counterpart of klaw. It lists all files and directories inside a directory recursively and returns an array of objects that each object has two properties: path and stats. path is the full path of the file or directory and stats is an instance of fs.Stats.

To install this module, execute the following command in your terminal:

npm install klaw-sync

Copy snippet

The synchronous version of klaw is so easy to use as the asynchronous version, however it’s more customizable than its counterpart. You can use the following snippet to explore a directory:

// Require the module
var klawSync = require('klaw-sync');

// Create an empty variable to be accesible in the closure
var paths;

// The directory that you want to explore
var directoryToExplore = "./folder-to-explore";

try {
    paths = klawSync(directoryToExplore);
} catch (err) {
    console.error(err);
}

// [
//   {path:"c:/file.txt", stats: {..File information..}},
//   {path:"c:/file.txt", stats: {..File information..}},
//   {path:"c:/file.txt", stats: {..File information..}},
// ]
console.log(paths);

Copy snippet

klaw-sync allows you to filter directories and files by extension, name. Besides you can search only for directories or files by setting up the options:

var klawSync = require('klaw-sync');

var directoryToExplore = "./some-folder";

var files = klawSync(directoryToExplore, {
    nodir: true
});

// [
//   {path:"c:/file.txt", stats: {..File information..}},
//   {path:"c:/file2.txt", stats: {..File information..}},
//   {path:"c:/file3.txt", stats: {..File information..}},
// ]
console.log(files);
 
var paths = klawSync(directoryToExplore, {
    nofile: true
});

// [
//   {path:"c:/folder", stats: {..Folder information..}},
//   {path:"c:/folder2", stats: {..Folder information..}},
//   {path:"c:/folder3", stats: {..Folder information..}},
// ]
console.log(paths);

Copy snippet

For more information about the synchronous klaw module, please visit the official repository in Github here.

Klaw stands for walk (but backwards) and it turned out (as of January 25, 2017) for the most cases that klaw and klaw-sync is faster than other modules.

Happy coding !

As a user interface developer, you must be well-versed in markup language, design concepts, and debugging. You are in charge of how a website looks and how users interact with it. If you are being interviewed for a position as a UI developer, you must answer questions about your knowledge, decision-making, and UI developer interview questions 2024 process. Preparing responses to frequently asked questions might assist you in organizing your ideas and increasing your confidence.

This post will look at some common interview questions and present sample solutions to help you prepare your own successful responses.

General interview questions 2024

When you are interviewed for a job as a UI developer, your interviewer may first ask you general interview questions. As an example:

• Tell me about yourself.
• Where do you see yourself in five years? In 10 years?
• What makes you think you would be a good fit for this company?
• What do you love most about being a UI developer?
• What are your greatest strengths and weaknesses as a UI developer?

Your interviewer may also ask you general questions connected to your UI role. For example:

• How do XHTML, HTML4 and HTML5 differ?
• What does the term “semantic HTML” mean?
• Why are HTML, CSS and JavaScript referred to as front-end technologies?
• What does web accessibility mean?
• Discuss the position property in CSS and how it functions.
• How can you test a website’s performance?
• What is an Ajax Request?
• What is jQuery?

Sample UI developer interview questions 2024 and answers

During your interview, you may be asked to share your professional experience with specific tasks and scenarios. The STAR approach can be used to explain the problem, clarify the work at hand, outline the activities you performed, and reveal the results of your efforts.

Here are some detailed questions you might be asked in a UI developer interview:

1. Can you describe your normal design process?

This is a comprehensive topic, and your response may assist the interviewer in determining your suitability for any established web design team. Your design method may differ from that of other UI designers, but the interviewer may want to know if your procedures are meaningfully similar to those of the organization. When answering this question, be honest about what makes your design approach unique, but also demonstrate that you are capable of and ready to follow standard processes.

I begin my design process by asking my clients what they want their site or application to look like or how they want their users to feel. Some of my clients may have some idea of how they want their website to look and feel while others give me specific details and data related to the purpose of their websites I can use to guide my design.

My next step is to review visitor feedback. I may create and send out my own feedback forms or use those my clients already collected. I use both positive and negative feedback to inform my design. After this research, I create thumbnails and digital wireframes for website pages. I show my clients the designs and assets I create throughout the process to get quick feedback and make any changes as soon as possible. Then, I test the pages on a practice website. If the pages look and feel great, they can go live.

2. Describe a normal working day for a UI designer.

If your interviewer asks you this question, they may be interested in learning more about your ability to operate as part of a team. Consider what you regularly do as a UI designer on a daily basis, such as what your regular tasks are, how you do temporary jobs, and how you communicate with coworkers, supervisors, and clients.

Usually, my day starts with a team meeting. We discuss our progress with certain aspects of website improvement and what we need to do to finish our tasks for the day or week. After our discussion, we spend an hour or two inspecting our code and testing it in a “sandbox,” or test website, before going live, if our coding and asset creation is finished that day.

Throughout the day, I may receive messages from my supervisors and any clients who want updates on my projects. I make sure to promptly respond to each. I also spend some extra time I have each day reading up on any new developments on the UI industry and taking notes so I can discuss the changes with my team the next time we meet.

3. If my website was slow, how would you diagnose the problem and fix it?

This is another question that helps your interviewer to assess your method, but this time you can discuss your troubleshooting knowledge. When answering this question, walk the interviewer through the steps you’d take to determine out what’s slowing down webpages and what you’d do to speed them up.

I would inspect various factors on your website. One thing I would do is use a link analysis tool to see if there are any dead links on the website. I would also check the coding on various pages of the site. One solution to the latter problem is to link similar pages to one CSS sheet and simplify the coding.

Another thing I might do is move the JavaScript coding near the bottom of a page’s HTML document. This allows the page to show before all JavaScript coding is downloaded. Additionally, I would check the servers of the website. If allowed, I would change the distribution of the website to a content delivery network. This allows users to access the website via a server that is closer to their locations. After all this, I will again test the speeds of the website.

4. What do you like the most about UI design?

This question allows you to discuss what motivates you to do your job. Consider talking about the aspects of your prior job that you liked. For an even more effective response, underline the challenges you anticipate in this new role.

You may hear this often, but my favorite part of UI design is when a system I have worked on is finally in the hands of users. I like to see how users interact with the websites and applications and to know that my hard work has made life easier for them in some way. Now, if a user experiences a problem with the system or website I worked on, that might mean that I have made a mistake. However, I relish the opportunity to take in user feedback and improve the system or website.

5. How do you deal with negative user feedback?

All UI designers will receive bad feedback; what matters is what you do with that feedback. You can apply the STAR technique with this question. Discuss a bad feedback experience you had and what you did to rectify the situation.

One time, I worked on a free smartphone game app that required users to tap the screen with precise timing, but three out of five users left comments saying that the app was nonresponsive for them. Most of them left a rating of one or two stars.

After corresponding with some users and having them investigate if there were outside issues, like magnets, that made their screens unresponsive on their end, I checked the coding of my app and realized that it was too large for certain phone operating systems. I revised the coding and resubmitted the app. The users I talked to all noticed a vast improvement in the system.

6. Can you describe any other projects you have worked on 2024?

The inquiry concerning user input may lead to another about your experience as a user interface designer. This is your chance to discuss how you collaborated with a team on a larger project. Consider talking about a time when you had to overcome a hurdle and detail what you did to get positive results.

I was once on a four-person team whose job was to overhaul the website of an accomplished author and motivational speaker. The website had a lot of broken links, much of the text and assets were relegated to tables, there was a lot of colorful text and the site navigation was not intuitive. I worked with a writer, a graphic designer and an IT person to improve over 150 pages of content.

After two months, I was able to redesign each page of the site, moving the navigation from the side to the top of each page. I even included a site map. Six months later, the website experienced more than triple its normal traffic. The owner of the website was so impressed with the design of the website that he recommended me to one of his friends.

7. Can you describe a time where you had difficulties while working on a team?

If you’re applying for a job that requires teamwork, your interviewer may want to know what teamwork abilities you have and how you’ve used them in the past. Discuss another example in which you worked in a team but where the team encountered difficulties working together. Consider emphasizing how you collaborated on solutions, resolving problems, or increased productivity.

I once worked on a remote four-person team for a software startup. One of the challenges of working with the team was figuring out how to communicate despite different time zones. To get around this problem, we used conferencing software and scheduled one-on-one meetings.

One day, I even asked the team leader, who was often unapproachable, what he thought about the conferencing software’s user interface. That led to a long discussion during which we talked about the tasks at hand for our team. That week, we figured out how to break up the workload among teammates, based on our strengths and the times we would likely upload our work. After a month, we were able to submit a product that users tested and provided feedback for. Through this experience, I learned more about correspondence and how to apply user feedback to my work.

According to the 2024 Stack Overflow Annual Report, JavaScript has been the most commonly used programming language for six years in a row. Let’s face it, JavaScript is the core of your Full Stack Development skills and can’t be avoided at any Development Interview. Follow through and read the Indiahires.in the collection of the most popular and tricky JavaScript Interview Questions and Answers to get the next dream job.

	
		var foo = null;
		console.log(typeof foo === "object");  // logs true!				
	

				
		console.log((foo !== null) && (typeof foo === "object"));  // logs false
	

				
		console.log((foo !== null) && ((typeof foo === "object") || (typeof foo === "function")));
	

				
		console.log((foo !== null) && (typeof foo === "object") && (toString.call(foo) !== "[object Array]"));

		// However, there is another option that returns false for nulls, arrays, and functions, but valid for objects:

		console.log((foo !== null) && (foo.constructor === Object));
	

				
		console.log((foo !== null) && (typeof foo === "object") && (! $.isArray(foo)));
	

				
		console.log(Array.isArray(foo));
	

	
		(function () {
		    statements
		})();				
	

				
		(function () {
		    var aName = "Barry";
		})();
		// Variable aName is not accessible from the outside scope
		aName // throws "Uncaught ReferenceError: aName is not defined"
	

				
		var result = (function () {
	    var name = "Barry"; 
		    return name; 
		})(); 
		// Immediately creates the output: 
		result; // "Barry"
	

	
    	var self = this;
    

	
    	var foo = function() {
			// some content
			console.log(this);
		}.bind(this);
    

	
    	var user = {
		  // this just holds our data in json object format
		  data:[
		    {name:"T. Woods", age:37},
		    {name:"P. Mickelson", age:43}
		  ],
		  
		  // this is an event handler we will use with our 'Get Random Person' button
		  clickHandler: function(event) {
		    // generates random number between 0 and 1
		    var randomNum = ((Math.random () * 2 | 0) + 1) - 1;
		    
		    /*
		      This line is adding a random person from the data array to the text field
		      Note, that we are using 'this' keyword
		      As of now, 'this' keyword is bound to the user object since we have not executed this function
		    */
		    $("input").val(this.data[randomNum].name + " " + this.data[randomNum].age);
		  }
		}
		/*
		  Now, we are assigning an event handler to the button's click event.
		  We are invoking the clickHandler method from the user object.
		  Once the button is clicked, the user.clickHandler method will be executed.
		  Since we are invoking clickHandler method inside of click method.
		  Our 'this' keyword inside of user.clickHandler is actually bound
		  to our button HTML element and NOT user object.
		  Executing code below will output an error because
		  it cannot find the data property item from our user object.
		*/
		//$("button").click(user.clickHandler); // Uncaught TypeError: Cannot read property '--' of undefined

		/*
		  But when we use bind() on our method invocation.
		  bind() sets the scope of our clickHandler method to the user object.
		  Assigning the 'this' keyword to point to the user object rather
		  then the button HTML element.
		*/
		$("button").click(user.clickHandler.bind(user));
    

	
    	console.log(typeof NaN === "number");  // logs "true"

    	/*Additionally, NaN compared to anything – even itself! – is false:*/
    	console.log(NaN === NaN);  // logs "false"
    

	
    	var squaredArray = inputArray.map(function(x) { return x * x; });
    

	
    	var squaredArray = inputArray.map(x => x * x);
    

	
    	(function() { })();
    

	
		function isInteger(x) { return (x ^ 0) === x; } 				
	

	
		function isInteger(x) { return (typeof x === 'number') && (x % 1 === 0); } 
	

	
		function isInteger(x) { return Math.round(x) === x; }
	

	
		function isInteger(x) { return parseInt(x, 10) === x; }
	

	
		> String(1000000000000000000000)
		'1e+21'

		> parseInt(1000000000000000000000, 10)
		1

		> parseInt(1000000000000000000000, 10) === 1000000000000000000000
		false
	

	
	// add() function is called with arguments a, b 
  // and callback, callback will be executed just  
  // after ending of add() function 
  
  function add(a, b , callback){ 
   document.write(`The sum of ${a} and ${b} is ${a+b}.` +"
"); 
   callback(); 
  }      

  // add() function is called with arguments given below      
  // Calling add() function 
  add(5,6,function disp(){ 
    document.write('This must be printed after addition'); 
  });   				
	

 
  function init() {
    var name = 'Mozilla'; // name is a local variable created by init
    function displayName() { // displayName() is the inner function, a closure
      alert(name); // use variable declared in the parent function
    }
    displayName();
  }
  init();
  

 
  var globalVar = "xyz";

(function outerFunc(outerArg) {
    var outerVar = 'a';
    
    (function innerFunc(innerArg) {
    var innerVar = 'b';
    
    console.log(
        "outerArg = " + outerArg + "\n" +
        "innerArg = " + innerArg + "\n" +
        "outerVar = " + outerVar + "\n" +
        "innerVar = " + innerVar + "\n" +
        "globalVar = " + globalVar);
    
    })(456);
})(123);
  

 
  outerArg = 123
  innerArg = 456
  outerVar = a
  innerVar = b
  globalVar = xyz

 
  function makeAdder(x) {
    return function(y) {
      return x + y;
    };
  }

  var add5 = makeAdder(5);
  var add10 = makeAdder(10);

  console.log(add5(2));  // 7
  console.log(add10(2)); // 12
  

	
	for (var i = 0; i < 5; i++) {
    var btn = document.createElement('button');
    btn.appendChild(document.createTextNode('Button ' + i));
    (function (i) {
      btn.addEventListener('click', function() { console.log(i); });
    })(i);
    document.body.appendChild(btn);
  }

 
  "array 1: length=5 last=j,o,n,e,s"
  "array 2: length=5 last=j,o,n,e,s"

 
  "122"
  "32"
  "02"
  "112"
  "NaN2"
  "NaN"

 
  for (var i = 0; i < 5; i++) {
      (function(x) {
          setTimeout(function() { console.log(x); }, x * 1000 );
      })(i);
  }

 

  f(1): returns n, which is 1
  f(2): returns 2 * f(1), which is 2
  f(3): returns 3 * f(2), which is 6
  f(4): returns 4 * f(3), which is 24
  f(5): returns 5 * f(4), which is 120
  f(6): returns 6 * f(5), which is 720
  f(7): returns 7 * f(6), which is 5040
  f(8): returns 8 * f(7), which is 40320
  f(9): returns 9 * f(8), which is 362880
  f(10): returns 10 * f(9), which is 3628800

Node JS Interview Questions

  10
  2

  1
  undefined
  2

  (function () {
    var x, y; // outer and hoisted
    try {
        throw new Error();
    } catch (x /* inner */) {
        x = 1; // inner x, not the outer one
        y = 2; // there is only one y, which is in the outer scope
        console.log(x /* inner */);
    }
    console.log(x);
    console.log(y);
  })();

  var obj = {a: 1 ,b: 2}
  var objclone = Object.assign({},obj);

  let obj = {
      a: 1,
      b: 2,
      c: {
          age: 30
      }
  };

  var objclone = Object.assign({},obj);
  console.log('objclone: ', objclone);

  obj.c.age = 45;
  console.log('After Change - obj: ', obj);           // 45 - This also changes
  console.log('After Change - objclone: ', objclone); // 45

    var myArray = ['a', 'b', 'c', 'd'];
    myArray.push('end');
    myArray.unshift('start');
    console.log(myArray); // ["start", "a", "b", "c", "d", "end"]

    myArray = ['start', ...myArray];
    myArray = [...myArray, 'end'];

    myArray = ['start', ...myArray, 'end'];

    new Set([it]);

    Parameter: 
    it - It is an iterable object whose all elements are 
    added to the new set created, 
    If the parameter is not specified or null is passed 
    then a new set created is empty.

    Returns:
    A new set object

    // it contains 
    // ["sumit","amit","anil","anish"] 
    var set1 = new Set(["sumit","sumit","amit","anil","anish"]); 
      
    // it contains 'f', 'o', 'd' 
    var set2 = new Set("fooooooood"); 
      
    // it contains [10, 20, 30, 40] 
    var set3 = new Set([10, 20, 30, 30, 40, 40]); 
      
     // it is an  empty set 
    var set4 = new Set();