Name	Name	Last commit message	Last commit date
parent directory ..
README.md	README.md
event_delegation.png	event_delegation.png

Preguntas para entrevistas de frontend

JavaScript

Preguntas

Crea una función que realice lo mismo pero para objetos. (Que reciba como 1er parámetro un objeto, y como 2do parámetro una función que se ejecutará sobre cada par llave/valor).
Cambia la función para que pueda recibir como primer parámetro un Array o un Objeto
Puedes replicar [].map() en {}.map()?

Explícame la diferencia entre let, const y var.
Explícame la diferencia entre síncrono y asíncrono.
¿Qué es event loop?
¿Cuál es la diferencia entre call stack y task queue?
Además de "porque se ve más bonito" ¿por qué debería usar arrow functions () => {}?

¿Qué diferencia existe en el uso de hola entre estas expresiones?

// expresión 1
function hola(){}

// expresión 2
var hola = function(){}

// expresión 3
var hola = () => {}

¿Qué es y por qué usar o no Transpiladores? (Babel o buble)
¿Qué propuestas de JavaScript es la que más te gustaría/interesa que sea aprobada?

Respuestas

Explica la delegación de eventos:
Es una técnica que permite agregar un controlador de eventos (EventHandler) en un elemento padre a fin de no tener que agregar múltiples controladores de eventos en los hijos.

Explicación extensa:

La delegación de eventos en JavaScript hace uso de 2 conceptos existentes, el Burbujeo de Eventos (Event Bubbling) y el Elemento Objetivo (Target Elemento).

El Burbujeo de eventos es la funcionalidad de que cualquier evento disparado en un elemento, es también disparado en los elementos padres del mismo.
```
<ol id="ol">
  <li id="li1">item 1</li>
  <li id="li2">item 2</li>
</ol>
```
```
document.getElementById('ol').addEventListener('click', () => {
  console.log('ol clickeado')
})
document.getElementById('li1').addEventListener('click', () => {
  console.log('li1 clickeado')
})
document.getElementById('li2').addEventListener('click', () => {
  console.log('li2 clickeado')
})
```
Al hacer click en un elemento 'li', se disparan ambos eventos (li y ol); (Ejemplo en JS Bin)

Podemos comprender el elemento objetivo si cambiamos un poco el código de JS
```
document.getElementById('ol').addEventListener('click', (e) => console.log(e.target, e.currentTarget))
document.getElementById('li1').addEventListener('click', (e) => console.log(e.target, e.currentTarget))
document.getElementById('li2').addEventListener('click', (e) => console.log(e.target, e.currentTarget))
```
(Ejemplo en JS Bin)... abre tu consola de desarrollo para verlo mejor Hacer click en li1 imprime lo siguiente:

Por lo que un evento contiene la propiedad target como currentTarget. target es el elemento del cual se disparó el evento, mientras que currentTarget es el elemento al cual fue adjuntado el eventHandler. (Por eso en el primer console.log son iguales, y en el segundo distintos).

Nos podemos aprovechar de esto para realizar delegación de eventos.
```
<ol id="ol">
  <li id="li1">item 1</li>
  <li id="li2">item 2</li>
  <li id="li3">item 3</li>
  <li id="li4">item 4</li>
  <li id="li5">item 5</li>
  <li id="li6">item 6</li>
</ol>
```
```
document.getElementById('ol').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI' ) {
   console.log('desde: ' + e.target.id);
  }
})
```
Ejemplo en JSBin acá

En este nuevo ejemplo, necesitamos solo definir un administrador de eventos (Event Handler) para poder realizar acciones con cada uno de los LI.

A esta técnica se le conoce como "Event Delegation".
Explica como funciona this en JavaScript
La palabra reservada `this` hace referencia al contexto de ejecución actual, y en la mayoría de los casos, su valor es determinado dependiendo de como se llamó a la función en que se declaró. Existen una serie de factores que cambian el comportamiento de `this` en javascript
Modo estricto

En modo estricto (usando 'use strict'), el valor de this es por defecto undefined, esto debido a razones de performance y seguridad, aunque el valor de this aún puede modificarse usando bind, call o apply. Este no es el caso para el modo no estricto. Por ejemplo
```
function f1(){
    return this;
}
// En el browser
f1() === window; // En modo estricto, esto retorna false   
```
this en objetos

Cuando se usa this en el método de un objeto, su valor hace referencia al objeto en que es invocado, independiente del contexto en que se declara el método. Por ejemplo,
```
var o = {p: 37};

function fn() {
  return this.p;
}

o.f = fn;

console.log(o.f()); // 37
```
bind, call y apply

El valor de this puede ser manualmente modificado al momento de ejecutar una función, usando los métodos mencionados. call y apply funcionan de forma similar, llaman a una función pasando como parametro el valor de this de forma explicita
```
function add(c, d){
  return this.a + this.b + c + d;
}

var o = {a:1, b:3};

add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
```
Por otro lado, bind asigna un valor al this de una función de forma permanente a una nueva función
```
var add2 = add.bind({a:1, b:3})
add2(1, 2) // 1 + 3 + 1 + 2 = 7
```
arrow functions

Las funciones de flecha asignan el valor de this al contexto 'padre' del contexto de ejecución. Independiente de si son llamadas directamente, o como método de un objeto, tampoco se puede cambiar el valor de this con las funciones bind, call y apply.
Explica cómo funciona la herencia de prototipos
¿Qué opiniones tienes de AMD versus CommonJS?
¿Por qué este snippet no funciona como una función autoejecutable: function hola(){console.log('mundo')}() si tiene el paréntesis al final? ¿Cómo debería ser?
¿Cuál es la diferencia entre una variable: null, undefined y no declarada?
undefined: Como JavaScript es un lenguaje de programación débilmente tipado nos permite hacer cosas muy flexibles como por ejemplo declarar una variable sin especificar su tipo. En términos prácticos sería declarar una variable sin valor. (Cabe destacar que JS en tiempo de ejecución asigna el tipo de variable dependiendo del valor que esta tenga)

Ejemplo:
```
var a = 123; // El valor que contiene es un numero por ende JavaScript cataloga a la variable "a" de type Number.
var b; // La variable "b" fue declarada pero no fue definido ningún valor en ella, por ende es de caracter undefined.
```
En resumen, si declaras una variable en JS y no le asignas valor alguno, por defecto es una variable undefined.

null: Representa la ausencia de contenido. Esto quiere decir que en sí mismo null es un valor el cual no tiene contenido. Por otra parte el intérprete de JS a las variables null le asigna el tipo de variable Object. Este es un comportamiento extraño en el que puedes ver una explicación más detallada en el libro de Nicholas C. Zakas "THE PRINCIPLES OF OBJECT-ORIENTED JAVASCRIPT". Aquí un pequeño extracto del libro donde explica un poco este comportamiento:

When you run typeof null, the result is "object". But why an object when the type is null? (In fact, this has been acknowledged as an error by TC39, the committee that designs and maintains JavaScript.

no declarada: Como la expresión lo dice, son variables que no han sido declaradas con la palabra reservada var, (en ES6 también podemos declarar variables con let y const). Si queremos guardar el resultado de una operación en una variable no declarada, JavaScript crea una variable global con el identificador no declarado (nombre de la variable) y le asigna el valor de la operación

Ejemplo:
```
number = 3 + 6; // La variable number no ha sido declarada y por lo que JavaScript crea la variable global `number` y le asigna el resultado de la operación.
```
Por otra parte si solo queremos acceder a una variable no declarada sin pasarle ningún valor nuestro código fallara, ya que JavaScript no tiene conocimiento de dicha variable. Puedes hacer la prueba abriendo tu consola del navegador, escribir una palabra y darle enter; Deberías ver un mensaje como: Uncaught ReferenceError: variable_no_declarada is not defined
¿Qué es un closure? ¿Cómo y por qué usarías uno? ¿Podrías darme un ejemplo de uso?
Un closure es una característica que tiene JavaScript de que una función al ejecutarse, recuerde el entorno en la que fue creada. Por ejemplo:
```
function bar() {
  var text = 'mundo';
  function foo() {
    console.log('hola ' + text);
  }
  foo();
}
bar();
```
Esta funcion imprimirá 'hola mundo', sin ningun problema.

Ahora, consideremos lo siguiente:
```
var text = 'fforres';
function bar() {
  var text = 'mundo';
  function foo() {
    console.log('hola ' + text);
  }
  return foo;
}
var willItPrint = bar();
willItPrint();
```
Si bien estamos definiendo en 2 lugares la variable text, al momento de definir la función foo la variable text tiene el valor de 'mundo'. La funcion foo la estamos devolviendo y guardando en la variable willItPrint por lo que independiente de el momento en el que llamemos a la funcion guardada en esa variable, el resultado será:

"hola mundo";
¿Qué es una función anónima? ¿Dónde usarías una? ¿Cuál es la desventaja de ellas?
¿Cuál es la diferencia entre un objeto "host" y un objeto "nativo"?

```javascript // http://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-h ```
¿En qué difieren las siguientes expresiones function Hola() {}, var hola = new Hola() y var hola = Hola()?
¿En qué se diferencia Function.call() y Function.apply()?
¿Explícame Function.prototype.bind ?
¿Cuál es la diferencia entre detección de features, inferencia de features y usar el string UA?
¿Explícame AJAX?
¿Qué ventajas y desventajas tiene el usar AJAX?
¿Qué es JSONP?
Explícame Hoisting
Hoisting es una característica de JavaScript que empuja todas las declaraciones (no las asignaciones) de variables al inicio de su scope (Al momento de interpretar incialmente el código, previo a su ejecución)
```
function foo() {
	bar();
	var x = 1;
}
```
Es interpretada de la siguiente manera:
```
function foo() {
  var x;
  bar();
  x = 1;
}
```
Lo que se "mueve" hacia arriba es la declaración de la variable, no la asignación de un valor a ella.

En una declaración de función (Function Declaration), son "movidas" tanto su declaración como asignación, no así en una expresión de función (Function Expresion)

Por ejemplo:
```
function ejemploDeHoisting() {
  bar(); // Esto imprimirá "hola"
  foo(); // Esto imprimirá "foo is not a function"
  var foo = function () { // Esto es una `Function Expresion` asignada a la variable Foo.
		alert("Mundo");
	}
	function bar() { // `Function Declaration` con el nombre bar
		alert("Hola");
	}
}
ejemploDeHoisting();
```
¿Cuáles son las ventajas/desventajas de usar clases en ES6?
¿Describe el 'event bubbling'?
¿Cuál es la diferencia entre == y ===?
Haz que esto funcione:
```javascript [2,3,5,6].replicate() // [2,3,5,6,2,3,5,6] [2,3,5,6].replicate(1) // [2,3,5,6,2,3,5,6] [2,3,5,6].replicate(2) // [2,3,5,6,2,3,5,6,2,3,5,6] ```
Para hacer funcionar el código anterior, es necesario extender el prototipo de los objetos tipo Array. Es necesario señalar que es una mala practica extender el prototipo de objetos nativos, pero solo para este ejemplo mostraremos como hacerlo.

Para hacerlo, vamos a usar un polyfill, que es básicamente, una forma de extender una funcionalidad de un objeto, en caso de que no sea implementada de forma nativa en distintos ambientes (actualmente no existe la función replicate para arreglos).

El código es el siguiente:
```
if (!Array.prototype.replicate) { // 1
    Array.prototype.replicate = function (n) {
    if (n === undefined) { // 2
        n = 1
    }
    var copy = this.slice(0) // 3
    var arr = this
      for(var i = 0; i < n; i++) {
        arr = arr.concat(copy) // 4
      }
    return arr
    }
}
```
Repasemos el código de arriba, las secciones relevantes están marcadas con números en los comentarios:
1. La primera línea indica que este código solo se ejecutará si no existe la función replicate para los objetos de tipo Array. Si bien actualmente no existe dicha función, en un futuro puede ser implementada, y es recomendado siempre preferir las implementaciones nativas.
2. La segunda línea asigna un valor por defecto al parámetro n. Existen distintas formas de asignar valores por defecto (otra forma muy popular para asignar valores por defecto es usando el operador lógico OR (||)), pero en este caso sería
```
n = n || 1
```
Ahora bien, esta forma de asignar valores no es recomendada para este caso, ya que evalua valores que parecen falsos(falsy), entre ellos 0. Si se hubiese escogido ese metodo, se hubiese dado que [2,3,5,6].replicate(0) === [2,3,5,6].replicate() === [2,3,5,6].replicate(1), lo que es incorrecto. 3. Usamos el método slice para crear un nuevo arreglo a partir del original y replicarlo. 4. Finalmente, concatenamos el arreglo original con la copia, tantas veces como lo indique el parametro n.

Como en todos los programas, es posible que existan mejores implementaciones de código, pero lo anterior cubre lo necesario para implementar de forma segura las funciones requeridas.

Como últimas consideraciones, es necesario indicar que: a) el código es compatible con Node y el navegador y b) por compatibilidad, se consideró ECMAScript 5. En particular hubiese sido útil el uso de parametros por defecto que define ECMAScript 2015.
¿Tienes un ejemplo de una expresión ternaria? ¿Por qué "ternaria"?
¿Por qué es generalmente una buena idea no agregar cosas a scope global de un sitio Web? (window) ?
¿Por qué usarías el evento "load"? ¿Ventajas y desventajas? ¿Alternativas?
¿Cómo harías una SPA (Single page application) "SEO Friendly"?
¿Qué ventajas tiene el usar promesas?
Además de callbacks, ¿Qué otras maneras existen de trabajar con asincronía en JavaScript?
Teniendo lo siguiente:

```javascript function buscarTextoAsíncronamente(texto, callback) { const resultado = funcionQueBuscaTextoEnUnOrigen(texto); if (resultado) { callback(null, resultado); } else { callback(error, result) } } ```
¿Qué debería hacer para poder usar la misma funcionalidad, pero con promesas?
¿Por qué debería usar o no usar un lenguaje que transpile o compile a JavaScript? ¿Qué ventajas o desventajas existen?
¿Cómo debugueas tu código de JavaScript?
¿Cómo puedo iterar sobre un objeto y un array?
¿Conoces como funciona [].map()?

- Crea una función que realice lo mismo, pero para objetos. (Que reciba como 1er parámetro un objeto, y como 2do parámetro una función que se ejecutará sobre cada par llave/valor). - Cambia la función para que pueda recibir como primer parámetro un Array o un Objeto - Puedes replicar `[].map()` en `{}.map()`?
Explícame la diferencia entre let, const y var.
Explícame la diferencia entre síncrono y asíncrono.
¿Qué es event loop?
¿Cuál es la diferencia entre call stack y task queue?
Además de "porque se ve más bonito" ¿Por qué debería usar arrow functions () => {}?
¿Qué diferencia existe en el uso de hola entre function hola(){}, var hola = function(){} y var hola = ()=>{}?
¿Qué es y por qué usar o no Transpiladores (Babel, o buble)?
¿Qué proposals de JavaScript es la que más te gustaría/interesa que sea aprobada?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

js

js

README.md

Preguntas para entrevistas de frontend

JavaScript

Preguntas

Respuestas

Files

js

Directory actions

More options

Directory actions

More options

Latest commit

History

js

Folders and files

parent directory

README.md

Preguntas para entrevistas de frontend

JavaScript

Preguntas

Respuestas