Translated from Spanish to English - [Link].
com
JavaScript
1. What is hoisting in Javascript and how does it affect your code?
Hoisting is a behavior in JavaScript where variable and function declarations are
automatically moved up into scope before the code is executed.
How could I apply it?
If you have a function declared after its call, hoisting will move the function
declaration to the beginning of the scope. This can affect the behavior of your code,
especially if it is not understood correctly.
2. Explain the difference between == and === in Javascript.
In Javascript, == is an equality operator that performs a value comparison, while ===
is a strict equality operator that also compares the type of the object.
fact.
How could I apply it?
For example, 1 == '1' will return true because only the value is compared, while 1
=== '1' will return false because the data type is also compared.
3. What is event bubbling and how can you avoid it?
Event bubbling is a phenomenon where an event triggered on an element
propagates to its parent elements in the DOM hierarchy.
How could I apply it?
To prevent this, you can use the [Link]() method in the event
handler to stop the event from propagating up the event chain.
items.
4. What is the difference between a synchronous function and an asynchronous function in
Javascript?
A synchronous function in Javascript runs sequentially, blocking the execution of code
until it completes. An asynchronous function, on the other hand, allows other tasks to
run while waiting for an operation to complete, using callbacks, promises, or async/
await to handle the result of the operation.
asynchronous.
5. What is scope in Javascript and how does it affect the visibility of variables?
Scope in Javascript refers to the extent to which a variable is accessible within the
code. Javascript has global scope and local scope. Variables declared within a function
have local scope and are not accessible outside that function, while variables declared
outside all functions have global scope and are accessible from anywhere in the code.
6. Write a function that converts an object into an array of keys and values.
[Link](array); where array = {a: 1, b: 1, c: 3} and the output would be [{a: 1}, {b: 2}, {c: 3}]
7. Describe how closures work in JavaScript.
A closure in JavaScript is a function that is created inside another function and has
access to the variables of its parent scope, even after the outer function has finished
executing. In other words, a closure is a function that "remembers" the scope in
which it was created.
Let's look at an example to better understand how a closure is created in JavaScript:
function add(a) {
return function(b) {
return a + b;
}
}
var sum5 = sum(5); [Link](sum5(2));//returns
7 [Link](sum5(7));//returns 12
A closure is useful in situations where you want to maintain the state of a function
between calls. For example, you can use a closure to count the number of times a
function is called.
8. How do you declare a class in JavaScript and what is a constructor inside it?
Answer: Classes in JavaScript are declared with the class keyword, followed by the
class name. A constructor is a special method within the class, used to initialize
objects created with the class.
9. How async/await works in js
Async/await is a feature of JavaScript that makes writing asynchronous code easier
and more readable.
Async/await uses the async and await keywords to define and await the resolution of
promises:
• async It is placed before a function to indicate that it is asynchronous.
• await Used inside an asynchronous function to wait for a promise to
resolve.
Async/await allows:
• Simplify the syntax for consuming promise-based APIs.
• Handle errors more easily.
• Write clearer, more readable code.
Some things to note about async/await are:
• Only works inside functions marked "async".
• Excessive use of async/await can make code inefficient.
• It is common for async/await to result in errors.
10. How would you handle errors in an asynchronous function?
Answer: Errors in asynchronous functions can be handled with trycatch blocks in
asynchronous functions marked with async or by using .catch in promises.
10. Mention and explain at least two high-order array methods in
JavaScript.
Answer: map(): Creates a new array with the results of the call to a given function
applied to each element of the array. filter(): Creates a new array with all the
elements that meet the condition implemented by the given function.
11. What are components in frameworks like React or Vue?
Answer: In frameworks like React or Vue, components are independent, reusable
parts of the UI, encapsulating their own structure, logic, and state. They allow for
efficient, modular management of application development.
12. What is a promise and how does it work?
In JavaScript, a promise is an object that represents the result of an asynchronous
operation, that is, one that is not executed immediately:
• It can be in pending, fulfilled or rejected status.
• It can be used to control the flow of asynchronous data
• Allows you to join the code that produces the result and the code that consumes it
• Provides a readable way to view the flow of the program
Promises work with the Event Loop, which is the component that monitors the
state of the program and ensures that tasks are executed in the correct order.
To construct a promise, you can use the Promise constructor, which takes two
parameters:
• resolve: A function that is called when the operation is completed
• reject: A function that is called if the operation fails
To associate a subsequent action with a promise, the following methods can be used:
• .then(): Handles the successful outcome of a promise
• . catch(): Handles errors that may occur during the execution of the promise
• . finally(): Execute a function after the promise is resolved or rejected
Can you tell us what arrow functions are in JavaScript and what are their
benefits?
It's actually a concise way of writing functions. They have a much shorter and clearer
syntax. They don't have their own 'this', which means they inherit the 'this' from the
execution context in which they are defined. This is especially useful for object
methods and callback functions.
REACT Js
What is Virtual DOM and how does it work in React?
The Virtual DOM is a virtual representation of the structure of an HTML document in
memory. React uses the Virtual DOM to perform efficient updates to the UI,
minimizing the amount of manipulation of the actual DOM. When a change occurs in
the data, React compares the old Virtual DOM with the new one and updates only the
elements that have changed, improving the performance of the
application.
How could I explain it?
When adding a new item to a list in a React app, React compares the old Virtual DOM
with the new one to determine the change and updates only that part
from the user interface.
What are component lifecycles in React and why are they important?
important?
Component lifecycles in React are a set of predefined methods that are executed at
different stages of the component's lifecycle, such as mounting, updating, and
unmounting. These methods allow you to perform specific tasks at each stage, such
as initializing the component's state, making API calls, and cleaning up resources.
How could I explain it?
The component DisMount method is executed after the component has been
mounted to the DOM, making it suitable for making data requests
initials.
“State lifting” is a pattern in React that involves moving shared state between
components up the component hierarchy to keep the state in a single place. This
improves code consistency and maintainability by avoiding duplication and excessive
decoupling between components.
How could I explain it?
In a shopping cart application, we could move the cart state (such as the product list
and total) up the component hierarchy so that it is available to all cart-related
components.
What is event bubbling in React and how is it handled?
Event bubbling in React refers to the process by which an event is propagated from
the element that originated it to its ancestors in the component hierarchy. In React,
events are handled using syntax similar to standard JavaScript, but with some key
differences, such as the use of the preventDefault method to prevent the browser's
default behavior.
How could I explain it?
We could have a button component on a list that handles an onClick event to mark an
item as selected and then propagates that event up so other components can respond
accordingly.
What are Hooks in React and what is their purpose? Provide an example of how
to use a Hook in a functional component.
Hooks are a feature introduced in React 16.8 that allows functional components to
have state and other features previously reserved for class components. Hooks
provide a simpler and more concise way to handle state and side effects in
components.
functional.
How could I explain it?
We could use the useState Hook to add state to a functional component and the
useEffect Hook to perform side effects, such as subscriptions to external data.
or resource cleaning.
What is JSX and why is it important in React app development?
JSX is a JavaScript extension that allows you to write HTML code inside JavaScript. This
simplifies building user interfaces in React by combining document structure with
component logic in one place.
How could I explain it?
In an e-commerce application, we might have a product component that uses
JSX to render product information along with add to cart and buy now buttons.
Explain the concept of Components in React and how you would use them in a
real project.
In React, Components are reusable building blocks that encapsulate related logic and
UI into a single unit.
How could I explain it?
We could have a header component that displays the title of the page and a list
component that displays a list of items. These components can be reused in different
parts of the application to keep the code clean and
modular.
What are states and properties in React? Provide an example of
how you would use them in a component.
States and properties are two main ways to handle data in React. States are
internal data of a component that can change over time, while properties are data
that is passed from a parent component to a child component.
How could I explain it?
In a registration form, we might have an input component that has a state for the
field value and a property for the field name.
What is the difference between functional components and class components in
React?
Functional components are JavaScript functions that return React elements, while
class components are JavaScript classes that extend React's Component class. The
main difference is that functional components are simpler and more concise, while
class components offer additional features like state and component lifecycles.
How could I explain it?
Have a class component to handle the authentication logic for a user and a functional
component to render a button.
What are routes in React and how would you implement them in a one-page app?
single page (SPA)?
Routes in React are used to manage navigation within a single page application
(SPA). They can be implemented using libraries such as React Router.
How could I explain it?
You can have routes for different sections of an online store, such as /products to
display all products and /cart to display the shopping cart.
of the user.
Why do we need to use keys in lists?
Because the Virtual DOM needs to have a way to identify and differentiate between
different elements in the component tree. When React renders a list of elements, it
uses Keys to differentiate each individual element.
What is Babel in React JS?
Babel is a program that takes modern JavaScript code as input and transforms it into
JavaScript code that browsers can execute. For example, JSX code is taken by babel
and transformed into JS code.
What is webpack?
Webpack is a bundler that takes different types of files as input and transforms them
into a bundled, browser-ready package. Together with Babel, it can take a React JS
project and transform it into a set of files that are ready to deploy.
What is the difference between state and props?
State is the internal state of a component. Using state is one of the features
of components in React JS.
Props are those properties that a component can receive from a parent element
and can be of any data type.
Why are props immutable?
By design, props are read-only to the component that receives them. They can be
modified by the parent component that provides them.
For example, a parent component can pass a state variable as a prop. Whenever the
state variable changes, it will re-render and its change will also be reflected in the child
component that receives it as a prop.
Does React use HTML?
No. React uses JSX, whose syntax is similar to HTML but should not be confused.
What is React Router?
It is a library that handles everything related to how to navigate through different
views of an app created with React JS.
What are React fragments?
They are a way to create a "wrapper" in a component's render without
necessarily creating an element in the component node. For example:
What are React hooks?
These are special JS functions that start with "use" and allow access to React
features in functional components.
Why React Hooks?
• They help simplify the code of class-type components.
• Allows easier reuse of state logic.
• Less complex components (life cycles).
• No confusion about the "this" variable.
What are some React Hooks?
• useState
• useEffect
• useContext
• useRef
• useCallback
• useMemo
• useReducer
Is useState synchronous or asynchronous?
It's Asynchronous!
What is the useState callback used for?
The useState callback is used to immediately access the current state value and we can
use it to ensure what its current value is before modifying it.
What is useCallback used for?
In order to "memoize" or save in memory the reference to a function. In this way, we
can guarantee that this function will be identical to itself through the re renders and
that it will only change if an element of the dependency array
ofuseCallbackchanges.
What is useMemo used for?
To be able to memorize the result of complex operations and thus avoid their
unnecessary redefinitions in re renders.
What is useRef used for?
In order to create references to values within a component that can be DOM
elements or primitive or structural JS variables, which when modified, will not execute
a re render as a state variable would.
What is Redux in React JS?
It is a library that makes it easy for you to implement the Flux architecture in React JS through HOC
or custom hooks.
Why Redux is used in React JS?
Because in large apps it facilitates global state management, that is, delegating to Redux
the responsibility of the global state of the app as the only source of truth.
What is Dispatch in React Redux?
It is a utility that allows us to trigger global state updates through actions.
What is Thunk in React Redux?
It is a Redux-independent utility that allows us to execute asynchronous actions more
efficiently.
What is Virtual DOM?
It is a virtual copy of the DOM that is saved by JavaScript and is used so that React
can update the real DOM with good performance.
What are Syntethic Events in React?
They are a "wrapper" or abstraction that encompasses the behavior of events from
different browsers and serves to ensure compatibility with them.
How do you apply validations to Props?
With PropTypes or TypeScript.
What are portals in React?
They are part of the React API and allow you to render a child component outside of
the component tree hierarchy in which its parent is located.
What is Context API?
It is part of the React JS native API and allows creating communication between a tree of
components without the need to pass props.
How do you handle code errors?
You can use the componentDidCatch loop in a class-like component (in the future you will be
able to use it with hooks).
A React app is taking a long time to load, how do you investigate the issue?
You can check everything from the CSS and JS files that are loaded in the browser, to
the requests to a service, to the performance of the components. This is a topic that
can be a separate post.
What is memoization and how to use it in React?
It is a performance technique that allows us to store functions, results of complex
calculations or components in memory (cache type) to avoid unnecessary re-renders.
It can be used withuseMemo,useCallbackand other strategies.
You can see more about thehook useMemo at this link.
What is Lazy Loading in React?
It is a way to load the code of a component until it is going to be used, this for the
purposes of improving performance.
What is Code Splitting?
It is a performance technique that consists of separating the transpiled code from the app
and delivering it to the client until they actually need to use it.
How would you combine two independent React projects to make them work in
a single app?
You could include one inside the other by creating a project as an npm module that is
installable like npm in my-project or use microfrontend.
What is Microfrontend?
It is a type of architecture where you separate a large frontend app into independent
sub apps. It is the equivalent of micro services in BE.
What are the Design Principles?
Software principles are a guide or proposal that help us create software with higher
quality. For example: SOLID, DRY, YAGNI, KISS, etc.
What is SOLID and how do you apply it in React JS?
The SOLID principles are 5 design principles (Single responsibility, Open - close, Liskov
substitution, Interface segregation, Dependency injection and Yes you can apply them in
React.
If you want to go deeper, I recommend this oneSOLID Principles in React JS
tutorial
Can design patterns be applied in React JS?
You can apply traditional design patterns in vanilla JavaScript, and in React JS you can
apply patterns that are proprietary (not traditional ones). For example: HOC, Render
Props or Custom Hooks.
What is the DRY principle?
"Don't Repeat Yourself, which suggests we avoid duplication."
What is Render Props in React?
It is a React JS pattern that allows us to invert the responsibility of rendering through
props, which are functions and are commonly called "render", or through children.
What is a HOC and what is it used for?
It is a pattern in React JS used to reuse logic. It is a function that receives a
component as a parameter and returns a new component enriched with the
desired logic.
What is a Custom Hook and what is it used for?
It is a pattern in React JS used to create custom hooks and thus reuse logic. They
can use other hooks and can only be used in functional components.
What is Props Drilling and how do you solve it in React?
It's an anti-pattern that consists of passing props in a component tree unnecessarily.
You can solve it with composition or with global state management (Redux or
Context).
What is TDD?
Test Driven Development is a development technique that consists of development
cycles in which you first do a test that fails, then do the minimum to make it pass, and
finally, a refactor.
What is a Jest Mock?
A mock in Jest is a function that works as a stub and spy at the same time, and is used for
unit testing when there are external dependencies.
How would you test a component that consumes an API?
You could mock axios or fetch for a unit test, or use Mock Service Worker for an
integration test.
ANGULAR js
What is the life cycle of a component in Angular?
The component lifecycle in Angular is the sequence of stages that a component goes
through from creation to destruction. Angular provides access to these key moments
through callbacks called lifecycle hooks.
Some of the events in the life cycle of a component in Angular are:
• ngOnInit: Runs when the component is initialized and can make calls to
microservices or provide information to bound properties
• ngOnChanges: Executes when a change occurs in the component data
• ngDoCheck: Triggered when the component's input properties are
checked
• ngAfterContentInit: Runs after Angular projects external content into the
component view
• ngAfterContentChecked: Runs after Angular checks the content projected
in the component
• ngAfterViewInit: Called once, after initializing the component's views and
subviews
• ngAfterViewChecked: Called after checking the changes of the
component's views and subviews
• ngOnDestroy: Called only once, just before Angular destroys the
component
What is Angular and what are its main features?
Angular is a web application development framework developed by Google. Its key
features include two-way data binding, dependency injection, modules,
components, directives, and routing.
How could I explain it?
The candidate could explain how Angular facilitates application development by
separating business logic and presentation, allowing for greater modularity and
code reuse.
What is the difference between a module and a component in Angular?
A module in Angular is a logical container for different parts of an application, while
a component is a visual part of the user interface with its own logic and associated
view.
How could I explain it?
The candidate could provide examples of how to organize an Angular application into
modules and how to define and use components within those modules.
What is dependency injection in Angular and why is it important?
Dependency injection is a design pattern that allows Angular components to request
the dependencies they need instead of creating them directly. This promotes code
reuse and facilitates unit testing.
How could I explain it?
The candidate could explain how to use dependency injection to provide
services to components and how this facilitates modularity and
code maintenance.
What is two-way data binding in Angular and how is it implemented?
Two-way data binding in Angular allows automatic synchronization of data between
the model and the view. It is implemented using the [(ngModel)] syntax in Angular
templates.
How could I explain it?
The candidate could demonstrate how to use [(ngModel)] to bind data between a
component and its HTML template, showing how changes to the model are automatically
reflected in the view and vice versa.
What is routing in Angular and how do you configure it?
Routing in Angular allows navigation between different parts of a web application
without having to reload the page. It is configured using the module
RouterModule and route definitions.
How could I explain it?
The candidate could describe how to configure and use routing in an Angular
application, showing how to define routes and navigate between components.
using the routerLink link.
What is the concept of dependency injection in Angular and how is it implemented?
implement?
Dependency injection in Angular is a design pattern that allows components to
request external dependencies instead of creating them internally. It is
implemented by declaring services as providers in Angular modules and then
injecting them into the components that need them.
How could I explain it?
In an Angular application, an authentication service could be injected into a login
component to handle authentication logic and login access.
Authentication API.
2. What is the difference between ngOnChanges and ngOnInit in a component
Angular?
The ngOnChanges is an Angular lifecycle method that is called when changes are
detected in the component's input properties, while ngOnInit is called once after
Angular has initialized the component's properties.
component.
How could I explain it?
If a component has an input property that changes frequently, ngOnChanges would
be used to detect those changes and perform corresponding actions, while ngOnInit
would be used to initialize data one time only.
when loading the component.
3. How do modules work in Angular and how are they organized in a
application.
Modules in Angular are building blocks that group related components, directives, pipes,
and services. They are organized hierarchically in an application, with the root module
importing other modules and defining the overall structure of the application.
How could I explain it?
In an Angular application, you might have a main module that imports child modules
for specific functionality such as authentication, user management, and so on.
users and data management.
4. What are route guards in Angular and what is their purpose?
Route guards in Angular are services used to control access to certain routes in an
application. Their purpose is to protect routes and perform actions such as
authenticating users, authorizing access, and loading data before a route is triggered.
route.
How could I explain it?
In an Angular application with protected routes, a route guard could be used to check
if the user is authenticated before allowing access to a profile page.
user.
5. What is lazy loading routing in Angular and how is it implemented?
Lazy loading in Angular is a technique that involves loading modules lazily, i.e. only
when a specific route is accessed. It is implemented by using the dynamic module
loading feature and defining secondary routes in the application's routing file.
How could I explain it?
In an Angular application with multiple modules and routes, lazy loading could be
implemented to dynamically load the admin module only when a user accesses the
admin route.
What are "directives"? What types of directives exist?
It's one of those double-entendre interview questions, but the answer is actually short
and simple.
In AngularJS, directives are certain attributes that allow you to make your own syntax
for the application you are developing. This gives your page a certain level of
uniqueness and allows you to add a touch of personality to your development
process.
In total, there are four types of directives: attributes, comments, CSS, and elements.
How are "directives" used?
In Angular JS, directives are used to extend specific HTML attributes. Furthermore,
once the attributes are extended, Angular uses expressions to bind the data to
HTML.
What is the difference between "$scope" and "$rootscope"?
Both functions are used to connect your customizations to the live version of your
website. The difference is that $scope has limited availability, while $rootscope can
be accessed at any time.
We are getting closer to the advanced level Angular JS interview questions, but we still
need to cover some basic questions.
What is the difference between "$" and "$$"?
"$" is used for public objects, while "$$" is used for objects you want to keep private.
These prefixes prevent confusion and conflicts with your code.
What is "E2E testing"?
Although it might sound like one of the fancier Angular JS interview questions, the
explanation behind E2E testing is quite simple.
“E2E” is short for “end-to-end” testing. It is a type of testing that focuses on
checking whether your application runs quickly and without any issues. As the
name suggests, E2E testing is really detailed and examines your application from
top to bottom.
