Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Senior Front End Interview Questions 2022 > Front End > Flashcards

Front End Flashcards

1
Q

What are synthetic events

A

Synthetic events combine the response of different browser’s native events into one API, ensuring that the events are consistent across different browsers.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

React features

A

Jsx
Community
High performance
Virtual dom
One way data binding

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is virtual dom

A

React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, the virtual DOM changes only that object in the real DOM

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Difference ES5 and ES6

A

Imports

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is an event

A

action that a user or system may trigger, such as pressing a key, a mouse click, etc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Why are keys necessary for lists

A

To find components on virtual dom and only replace them

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Arrow functions difference to normal functions

A

It is unnecessary to bind ‘this’ inside the constructor when using an arrow function. This prevents bugs caused by the use of ‘this’ in React callbacks.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

what are data structures

A

how to save and organize data

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

files structure vs data structure

A

files are save on disk, data on RAM or disk. File has low compatibility with other applications

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

what are linked lists

A

structure that has nodes that are connected to each other forming a chain

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

ways of searching in structures

A

lineal: iterating through it
binary: separate into chunks, then perform a search

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

what are hooks

A

specific react functions that allow you to use things like state, lifecycle events etc. in functional components

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

limitations of react

A

high learning curve
low structure and much freedom make projects look different

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

what is dangerouslySetInnerHTML

A

allows to dangerously add html that is not checked by React and may allow injection of malicious code

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

React lazy

A

allow the use of components that don’t end up in the bundle. They are fetched when they want to be used and a fallback is shown. Lodable library adds suspense to it to make it easier to use

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

How to optimize performance

A

React.lazy
React.memo
Fragments instead of divs
State and form libraries to improve rerendes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is reconciliation

A

react updates dom when value changes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

what are higher-order component (HOC)

A

Injects reusable logic in a component like styling, props, loading behavior etc.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is a closure?

A

Closure is a function in a function. The inner function has access to the outer’s function scope and parameters even after the outer function has returned.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What are the differences between call, apply, and bind?

A

call and apply immediately calls a function while bind creates a new function that can be invoked in the future. Arguments with call are passed in one by one, separated with a comma while apply expects an array as its argument.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What is currying function

A

separating a function with many arguments into many function with one argument to make code more readable

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What is memoization?

A

Memoization is an optimization technique by storing the result of expensive function calls and returning the cached results when the same inputs occur again.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is a higher-order function?

A

a higher-order function is a function that accepts another function as an argument or returns a function as a return value or both of them.

Map, filter and reduce are some examples of higher-order functions that are already built-in to JavaScript.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

what is css box model

A

The box model is a box that wraps around every HTML element.
The box contains content, padding, border, and margin.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

what is css sprite

A

CSS sprites combine multiple images into one single larger image. This would only require one server request resulting in a faster loading time.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

visibility hidden versus display none

A

visibility: hidden hides the element, but it occupies space and affects the layout of the document.
display: none also hides the element but not occupy space. It will not affect the layout of the document.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

ways of positioning

A

static
relative
absolute
fixed: relative to view port and don’t move on scrolling
sticky

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

difference inline, block and inline-block

A

Block elements always start on a new line. They will also take space of an entire row.

Inline elements don’t start on a new line, These elements appear on the same line with the content and tags beside them.

Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

pseudo-elements

A

A pseudo-element allows you to manipulate parts of an element in a special way like :after

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

pseudo:class

A

:hover

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

HTML Entities

A

starts with & and finish with ;
Used for things like special characters

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

seesion storage vs local storage

A

session storage is deleted after browser is closed

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

difference of id and class

A

id can only be one. class can be many

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

how does binary search works

A

get a sorted array
split in the middle
take a sample
is sample is smaller, check the other half. if not, take this half
continue until you find

like looking wor a word in a dictionary

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

what is a queue

A

a list of elements added after each other

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

what is a binary tree

A

a tree data structure with two nodes after each node

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

difference between throttle and debounce

A

throttle fires values periodically, debounce only until it end getting values and the period of time passed

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

typescript primitives

A

boolean
number
string
undefined
null
void
symbol
big int

39
Q

difference of interface vs type

A

type has an equal after the definition
Interface can have extend and implement
type can use intersections & or unions |

40
Q

what does the unknown type does

A

unknown is like any put it doesn’t allow to perform operations after a type is assigned to a type

41
Q

difference between var and let

A

var is function scoped, let is block scoped
var can redeclare variables, let not
var is hoisted - it assigns an undefined even if it is declared before it is used

42
Q

what of this is hoisted:
const
let
function
var

A

function
var

they can be used before its declaration after ES6

43
Q

difference of null and undefined

A

undefined:
has not been assigned
typeof undefined

null:
could be assigned
typeof object

both are falsy but not strict equal

44
Q

what is the never type

A

used for functions that throw an error or has an infinite while loop
It is used when you are sure that something will never occur

45
Q

what is typeof

A

gives type of variable as string

46
Q

what for is tsconfig?

A

to say the compiler what to do. Like ES version, accept implicit any etc

47
Q

what is optional chaining?

A

the elvis operator ?.
It stops running the chain if something is undefined and returns undefined

48
Q

what is function overloads?

A

allows to define same function with different parameters.

Example:
~~~
function buildDate(timestamp: number): Date;
function buildDate(m: number, d: number, y: number): Date;
function buildDate(mOrTimestamp: number, d?: number, y?: number): Date {
if (d !== undefined && y !== undefined) {
return new Date(y, mOrTimestamp, d);
} else {
return new Date(mOrTimestamp);
}
}
~~~

49
Q

What is meant by contextual typing?

A

Type inference based on how the variable is used. Example const a = ‘d’ infers that is a string

50
Q

what are abstract classes

A

abstract classes are like interfaces but it forces you to do a certain implementation

51
Q

what are anonymous functions

A

functions called without a name like setTimeout or

(function() {
  console.log('Invoked immediately after creation');
})();
52
Q

What are union types

A

| types

53
Q

What are intersection types

A

& types

54
Q

What are alias types

A

when you give a name to the union types

55
Q

tuple types

A

many-dimensional arrays like
let values: [string, number] = ["Foo", 15];

56
Q

what are type assertions

A

as string

57
Q

How to make object properties immutable in TypeScript

A

adding readonly like
~~~
interface Coordinate {
readonly x: number;
readonly y: number;
}
~~~

58
Q

what are type declaration files

A

A type declaration file is a text file ending with a .d.ts extension providing a way to declare the existence of some types or values without actually providing implementations for those values. It contains the type declarations but doesn’t have any source code. It doesn’t produce a .js file after compilation.

59
Q

purpose of the ‘in’ operator.

A

says if prop is in an object

const car = { make: 'Hyundai', model: 'Elantra', year: 2017 };
console.log('model' in car);  // true
60
Q

what is implements for?

A

An implements clause is used to check that a class satisfies the contract specified by an interface. If a class implements an interface and doesn’t implement that interface, the TypeScript compiler issues an error.

61
Q

string literal types

A

'dfsfd' | 'dsfdfd'

62
Q

template literal types?

A 
type Shape = `Grid ${string}`;
63
Q

Write some of the utility types used by typescript

A

Partial<Type> Constructs a type with all properties of Type set to optional.

Required<Type> Constructs a type consisting of all properties of Type set to required.

Readonly<Type> Constructs a type with all properties of Type set to readonly.

Record<Keys, Type> Constructs an object type with property keys are of type Keys, and values are Type.

64
Q

binary trees rules

A

only one root
every child has max to children
every children can be connected only to another child, not another parent

every free child is called leaf

65
Q

what is lifo

A

last in first out

66
Q

Kind of scaling in load balancers

A
  1. Vertical scalling: increase power of server. It is limited
  2. Horizontal scalling: replicate the docker
  3. Load Balancer: server between server that redirects to a replicated server
    Hardware load balancer: limited and not highly customizable but faster than software
67
Q

strategies for scaling load balancers horizontally

A

a. Random
b. Round robin: after each pther
c. Weighted round robin: prioritize servers. E.g. the most powerful gets more requests
d. Server traffic: depending on how fast a server responds, it know which has more capacity to respond
IP based like on CDN or edge computing

68
Q

protect from denial of service attack

A

a. Use CDN to take all the load
b. User firewalls that protect with configured policies
c. Use consistent hashing to keep operating with servers down

69
Q

what is sharding

A

Sharding: Data gets distributed in servers

70
Q

what is consistent hashing

A

algorithm in ring to distribute data efficiently

71
Q

difference SQL no-SQL

A
  1. SQL:
    a. takes time to make structure
    b. Vertical scalling
    c. Table based
    d. Needs SQL languages
    e. Have constraints like data type, length etc
    f. Small project, low scale, unknown access patten
    g. Can read data faster
    1. No SQL
      a. not relational
      b. Horizontal scalling
      c. Fast
      d. documents like key-value,
      e. Queries are less flexible
      f. High performance for medium to largeproject
      Can write data fast
72
Q

What is scope in JavaScript?

A

In JavaScript every function has its own scope. It is basically a collection of rules for how variables are accessed and variables itself.

73
Q

What does SOLID stand for

A

S- single responsibility principle
O- open-closed principle
L- Liskov Substitution principle
I- interface segregation principle
D- dependency.

74
Q

Reactive manifesto parts

A

responsive
resilient
elastic
message driven

75
Q

Reactive manifesto: Responsive

A

The system responds in a timely manner if at all possible. Responsiveness means that problems may be detected quickly and dealt with effectively. Responsive systems focus on providing rapid and consistent response times, establishing reliable upper bounds so they deliver a consistent quality of service.

76
Q

Reactive manifesto: Resilient

A

The system stays responsive in the face of failure. This applies not only to highly-available, mission-critical systems — any system that is not resilient will be unresponsive after a failure.

77
Q

Reactive manifesto: Elastic

A

The system stays responsive under varying workload. Reactive Systems can react to changes in the input rate by increasing or decreasing the resources allocated to service these inputs.

78
Q

Reactive manifesto: MessageDriven

A

Reactive Systems rely on asynchronous message-passing to establish a boundary between components that ensures loose coupling, isolation and location transparency.

79
Q

How does delegation improves resiliency

A

Recovery of each component is delegated to another (external) component and high-availability is ensured by replication where necessary.

80
Q

How can resiliency be improved

A

Resilience is achieved by replication, containment, isolation and delegation.

81
Q

What does location transparent means

A

the use of names to identify network resources, rather than their actual location.

Location transparent messaging as a means of communication makes it possible for the management of failure to work with the same constructs and semantics across a cluster or within a single host.

82
Q

CSS specificity order

A

Inline styles - Example: <h1 style="color: pink;">
IDs - Example: #navbar
Classes, pseudo-classes, attribute selectors - Example: .test, :hover, [href]
Elements and pseudo-elements - Example: h1, :before

83
Q

CSS min-content

A

as wide as the biggest children element or word size

84
Q

css selectors

A
    • select every element
      • . Class
        # id
85
Q

div > b

A

all b direct child of div

86
Q

div ~ span

A

all span sibling of a div (sibling means at the same level)

87
Q

div + span

A

very next span of a div

88
Q

Important pseudoclasses

A

:hover, :active, :focus, :required, :checked, :disabled, :first-child, only:child, :last-of-type

89
Q

p:not(.green)

A

every p that has not the class green

90
Q

[type=”radio”]

A

any element with type=”radio”

91
Q

^=

A

starts with

92
Q

$=

A

ends with

93
Q

~=

A

contain the word

Senior Front End Interview Questions 2022 (2 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions