FE Interview questions Flashcards

(81 cards)

1
Q

This

A

Hace referencia siempre a un objeto

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

El this en los arrow function

A

toma el valor del padre

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

Cambiar quien es this

A

bind, call y apply

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

bind dato interesante

A

bind nos devuelve una nueva función que podrá ser invocada en cualquier momento, mientras que call y apply se ejecutan sobre la misma función de manera instantanea.

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

Otro de los usos del bind, es para definir el valor de parámetros.

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

call y apply

A

Al igual que bind, nos permite cambiar el valor de this, pero se diferencian porque ejecuta la función.

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

//usamos el call, para cambiar el this y automáticamente se ejecuta

A

saludar.call(amigo);

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

//usamos apply, para cambiar el this y automáticamente se ejecuta

A

saludar.apply(amigo);

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

Diferencia entre call y apply

Como vemos arriba call y apply hacen lo mismo, la diferencia radica cuando tenemos parámetros extras en nuestra función, con call se envían por __, mientras que con apply, debemos enviar ___.

A

coma=call

apply=array

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

Closure

A

Funciones que recuerdan el entorno en el que se crearon, esto permite que las funciones internas(closures) tengan acceso a las variables de la función externa ya que están en el mismo scope.

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

Ejemplo de closures con la funcion prefijos

A
  • Funcion prefijo, recibe prefijo por parametro
  • Devuelve function con palabra de parametro

var addInPrefi = prefijos("In");

addInPrefi("creíble");

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

reduce

A

Es una función que se va a ejecutar para cada elemento del array y luego devolver un único valor conocido como acumulado.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q
  • Usa reduce para sumar todo

let resultado,
numeros = [2,3,4];

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

Se ejecuta por cada elemento del array, y crea un nuevo array a partir del resultado de cada ejecución por elemento.

A

map

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

let numeros =[2,3,4];

devuelve un nuevo array con los dobles

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

Se ejecuta por cada elemento de array, y crea un nuevo array con los elementos que cumplen cierta condición.

A

filter

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

Saca un array nuevo con pares

let numeros =[2,3,4];

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

Qué es el Scope?

A

Cuando una línea de código está ejecutándose a que variables y funciones tengo acceso en ese momento.

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

La gente suele confundir, el scope con el ___, pero ___ se refiere al valor de this en determinado momento, mientras que scope se refiere a que variables y funciones tengo acceso.

A

contexto

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

Tipos de Scope

A

global, local y block

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

Global scope

A

Las variables y funciones están disponibles desde cualquier parte del código.

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

Local

A

Las variables y funciones están disponibles solo dentro de la función.

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

Global Scope

A

variable nombre, mostrarNombre(); colorFavorito();

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

block scope

A

entonces si declaramos variables dentro de if o for loops, estas pasan a ser del scope global o de la función, pero ya con ES6, podemos utilizar variables que solo sean para ese tipo de bloques.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Prototipos
un objeto hereda propiedades y métodos de un padre, entonces en Javascript la herencia funciona por prototipos
26
Prototype Chain(Cadena de prototipos)
Cada objeto tiene un prototipo, y este prototipo puede tener otro prototipo, así sucesivamente hasta encontrar a un prototipo que no tiene prototipo(el object Prototype).
27
Maneras de crear objetos en JS
- Objetos literales - función contructora - new Object() - objeto literal con new object() - Es6 class
28
Objetos Literales
Este tipo de objetos se definen dentro de brackets, se asignan sus propiedades por medio de clave y valor
29
Cuándo utilizar esta manera de definir objetos? la de object literal
Está manera se utiliza cuando se define una única instancia de un objeto, por ejemplo acá la instancia sería Luis, pero que hubiera pasado, si tuviera que crear a David, Kevin y Paolo?, para eso es mejor crear un constructor que se llame persona y así poder crear múltiples instancias.
30
Función constructora
Se crea una función la cual asigna sus propiedades con el this(haciendo referencia a la futura instancia del objeto), además puede recibir parametros para su inicialización.
31
Cuándo se utiliza la función constructora?
Se utiliza cuando quieres tener múltiples instancias de un objeto, se crea la función de la siguiente forma, y luego se crean las instancias.
32
New Object()
En esta forma se crea la instancia del objeto y luego se le asignan los valores.
33
Moviendo el método al prototipo
Lo que deberíamos hacer es sacar el método fuera de la función constructora, y luego asignarlo por medio de prototype.
34
\_\_\_ is JavaScript's default behavior of moving declarations to the top.
Hoisting is JavaScript's default behavior of moving declarations to the top.
35
Value of X is:
x is not defined
36
value of x
undefined
37
Variables defined with let and const are hoisted to the top of the block, but not \_\_\_.
initialized
38
result of this
39
Why y is undefined?
This is because only the declaration (var y), not the initialization (=7) is hoisted to the top.
40
Advices for hoisted
Declare Your Variables At the Top ! - To avoid bugs, always declare all variables at the beginning of every scope.
41
undefined== null
true
42
undefined=== null
false
43
undefined == "null"
false, acá null es un string
44
undefined== "undefined"
false
45
Can you name two programming paradigms important for JavaScript app developers?
javaScript is a multi-paradigm language, supporting imperative/proceduralprogramming along with OOP (Object-Oriented Programming) and functional programming. JavaScript supports OOP with prototypal inheritance.
46
What is functional programming?
Functional programming produces programs by composing mathematical functions and avoids shared state & mutable data.
47
Why use functional programming?
Avoid side-effects, simple function composition, pure functions
48
What is related Delegation in protoype
Delegation (i.e., the prototype chain).
49
What is two-way data binding ?
Two way data binding means that UI fields are bound to model data dynamically such that when a UI field changes, the model data changes with it and vice-versa.
50
What is one-way data binding ?
One way data flow means that the model is the single source of truth. Changes in the UI trigger messages that signal user intent to the model (or “store” in React). Only the model has the access to change the app’s state. The effect is that data always flows in a single direction, which makes it easier to understand.
51
What is synchronous programming?
Synchronous programming means that, barring conditionals and function calls, code is executed sequentially from top-to-bottom, blocking on long-running tasks such as network requests and disk I/O.
52
What is asynchronous programming?
Asynchronous programming means that the engine runs in an event loop. When a blocking operation is needed, the request is started, and the code keeps running without blocking for the result. When the response is ready, an interrupt is fired, which causes an event handler to be run, where the control flow continues. In this way, a single program thread can handle many concurrent operations.
53
Describe the difference between a cookie, sessionStorage and localStorage.
sesionStorage and localStorage has 5mb and cookies only 4k, and cookies has expiration time and are sending in each request in header, increasing traffic.
54
fetch
Fetch is a browser API for loading texts, images, structured data, asynchronously to update an HTML page.
55
Explain Ajax in as much detail as possible.
Asynchronous JavaScript And XML. AJAX is a developer's dream, because you can:Read data from a web server - after the page has loadedUpdate a web page without reloading the pageSend data to a web server - in the background
56
Diferencia entre async, defer
57
What are data- attributes good for?
The data-\* attributes is used to store custom data private to the page or application.
58
Describe event bubbling.
When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.
59
Explain 3 phases of event propagation
60
Ver el tipo de algo en JS
typeof
61
Higher-Order function
, A Higher-Order function is a function that receives a function as an argument or returns the function as output.
62
first class functions
In JavaScript the functions are first class functions meaning we can store them in variable, objects and array.
63
what is REST
Representational State Transfer is a client-server communication architecture that creates a separation of concerns between data resources and user interfaces
64
Function definition
Several Ways(Declaration and Expression)
65
Function declaration
function foo() { /\* Warning: arguments.callee is deprecated. Use with caution. Used here strictly for illustration. \*/ return arguments.callee; }
66
Function Expression
``` var bar = function () { return arguments.callee; }; ```
67
If a function is used as an argument or return value, it's a \_\_
lambda
68
El hoisting guarda la inicialización?
## Footnote JavaScript only hoists declarations, not initializations.
69
Explique cada parte del box model
Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent
70
Como se calcula el width y height de un elemento
Total element width = width + left padding + right padding + left border + right border + left margin + right margin The total height of an element should be calculated like this: Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
71
Elementos de tipo display block
* hr * articles * video * header * form * section
72
Ejemplos de tipo display inline
a, b, img, br, button ![]()span select input
73
Tipos de position
static relative fixed absolute
74
Que es display inline block
inline-block elements are like inline elements but they can have a width and a height.
75
box-sizing
allows us to include the padding and border in an element's total width and height.
76
Position Relative
Relativa de su posición normal
77
Tipos de position
static relative fixed absolute
78
position: fixed;
Relativa con el viewport, siempre se mantiene en el mismo lugar aunque hagan scroll
79
position: absolute
Relativa con su padre.
80
Overflow
visible hidden scroll auto SOLO SIRVE CON ELEMENTOS TIPO BLOCK CON HEIGHT definido.
81
Explique que es display:block y inline
Block: ## Footnote A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Inline An inline element does not start on a new line and it only takes up as much width as necessary.