Principales preguntas de la entrevista de Javascript - Conceptos de codificación N

Estas preguntas de la entrevista de JavaScript se basan en mi experiencia de entrevista personal y en los comentarios de otros entrevistados. Estas preguntas comprueban tus conocimientos teóricos y prácticos de JavaScript. Siga esta publicación para obtener actualizaciones periódicas.

Índice
  1. Q1. Que es Closure en JavaScript?
  2. Q2. Cuales son Promises y ¿por qué lo usamos?
  3. Q3. Cómo usar async y await y que problema soluciona?
  4. Q4. Cuál es la diferencia entre call, apply y bind en JavaScript?
  5. P5. Que es Arrow function y en qué se diferencia de las funciones normales?
  6. P6. Cuál es la diferencia entre == y === ¿operador?
  7. P7. Cuál es la diferencia entre undefined y null ?
  8. P8. Cuál es la diferencia entre var, let y const ¿palabras clave?
  9. P9. que es variable Hoisting en JavaScript?
  10. P10. ¿Cuáles son los métodos de objetos disponibles en JavaScript?
  11. P11. Que es this palabra clave en javascript?
  12. P12. Cuál es la diferencia entre throttle y debounce?
  13. P13. ¿Qué es constructor y prototipo? ¿Conoces la herencia prototípica?
  14. P14. ¿Cómo se define la clase en ES6?
  15. P15. ¿Qué es el alcance global, de función y de bloque en JavaScript?
  16. P16. Curry funciones en javascript?

Q1. Que es Closure en JavaScript?

  • Definición: Un cierre es una función interna que tiene acceso a su ámbito de función externo y a todos los ámbitos superiores incluso cuando esa función se ejecuta fuera de su función externa.

  • Cuando define una función interna dentro de una función externa, se crea un cierre en tiempo de ejecución para la función interna asociada con el alcance de la función externa. Veamos el ejemplo para entender los cierres.

    var outerFunc  = function(c){ 
      var a = 1;
      var innerFunc = function(d) {
        var b = 2;
          var innerMostFunc = function(e) {
        return a + b + c + d + e;
        }
        return innerMostFunc;
      }
      return innerFunc;
    }
    console.dir(outerFunc(3));        //1. innerFunc
    console.dir(outerFunc(3)(4));     //2. innerMostFunc
    console.log(outerFunc(3)(4)(5));  //3. 15
    

    Output

    ▼ ƒ innerFunc(c) length: 1 name: "innerFunc" arguments: null caller: null ➤ prototype: {constructor: ƒ} ➤ __proto__: ƒ () [[FunctionLocation]]: ▼ [[Scopes]]: Scopes[2] ➤ 0: Closure (outerFunc) {c: 3, a: 1} ➤ 1: Global {parent: Window, opener: null, top: Window, length: 1, frames: Window, …} ▼ ƒ innerMostFunc(c) length: 1 name: "innerMostFunc" arguments: null caller: null ➤ prototype: {constructor: ƒ} ➤ __proto__: ƒ () [[FunctionLocation]]: ▼ [[Scopes]]: Scopes[3] ➤ 0: Closure (innerFunc) {d: 4, b: 2} ➤ 1: Closure (outerFunc) {c: 3, a: 1} ➤ 2: Global {parent: Window, opener: null, top: Window, length: 1, frames: Window, …} 15

    Tenemos tres consolas dir/log. Vamos a discutirlos uno por uno:

    1. innerFunc tiene un cierre de variables definidas o pasadas como un argumento en outerFunc

       0: Closure (outerFunc) {c: 3, a: 1}
      
    2. innerMostFunc tiene un cierre de variables definidas o pasadas como un argumento en en outerFunc y innerFunc es decir

       0: Closure (innerFunc) {d: 4, b: 2}
       1: Closure (outerFunc) {c: 3, a: 1}
      
    3. innerMostFunc Regreso a+b+c+d+e=15 o

      • el valor de a y c viene de Closure (outerFunc)
      • el valor de b y d viene de Closure (innerFunc)
      • el valor de e proviene del argumento pasado

Q2. Cuales son Promises y ¿por qué lo usamos?

  • Las promesas se introducen de forma nativa en ES6. Son muy similares a nuestras promesas. Cuando hacemos o rompemos la promesa, las promesas de JavaScript se resuelven o rompen.

  • En el pasado, habrías usado recordatorios para manejar operaciones asíncronas. Sin embargo, las devoluciones de llamadas tienen una funcionalidad limitada y, a menudo, conducen a un código inmanejable si está manejando varias llamadas asincrónicas también llamadas recordatorio infierno. Se introdujeron promesas para mejorar la legibilidad del código y un mejor manejo de llamadas asincrónicas y errores.

  • Sintaxis de un objeto de promesa simple.

    let promise = new Promise(function (resolve, reject) {
      // asynchronous call
    });
    

Lea también esta publicación para obtener más detalles sobre las promesas en javascript

Q3. Cómo usar async y await y que problema soluciona?

  • Async/Await introducido en ECMAScript2017 es una nueva forma de manejar operaciones asincrónicas. Su subyacente es Promise con sintaxis mejorada para escribir código conciso, legible y fácil de depurar contra promesas y devoluciones de llamadas.

  • Cuando Asincrónico La palabra clave se aplica antes de una función, se convierte en una función asíncrona y siempre devuelve un objeto de promesa.

  • await La palabra clave solo funciona dentro de la función asíncrona y hace que la función espere hasta que se liquide la promesa devuelta (resuelta o rechazada).

  • Usando asíncrono/espera:

     1async function hello() {
     2  let promise = new Promise((resolve, reject) => {
     3    setTimeout(() => resolve("Hello"), 5000)
     4  });
     5
     6  let value = await promise; // wait until the promise resolves
     7
     8  return value;
     9}
    10
    11hello().then(data => console.log(data));
    

    Tenga en cuenta que en el fragmento de código anterior cuando ejecutamos la función asíncrona hello()la ejecución de la función literalmente espera 5 segundos en la línea 6 antes de devolver el objeto de promesa resuelto. UPC los recursos no se utilizan durante este período de espera y se pueden utilizar para otros trabajos.

Lea también esta publicación para obtener más detalles sobre async/await en javascript

Q4. Cuál es la diferencia entre call, apply y bind en JavaScript?

  • Los tres call, apply y bind son métodos prototipo de Function, lo que significa que puede ejecutar estos tres métodos en cualquier función.
  • Los tres métodos call, apply y bind se utilizan para ejecutar la función en un contexto explícito donde this se refiere al primer argumento pasado al método.
  • call() - acepta los argumentos de la función como valores separados por comas arg1, arg2, …
    functionName.call(thisArg, arg1, arg2, ...) 
    
  • apply() - acepta los argumentos de la función como una matriz de valores [arg1, arg2, …]
    functionName.apply(thisArg, [arg1, arg2, ...])
    
  • bind(): devuelve una nueva función limitada que se puede ejecutar más tarde.
    functionName.bind(thisArg)
    
  • Los métodos call() y apply() se ejecutan inmediatamente, mientras que el método bind() devuelve una nueva función limitada que se puede ejecutar más tarde.

Lea también este artículo para obtener más detalles sobre la diferencia entre llamar, vincular y aplicar con su uso práctico

P5. Que es Arrow function y en qué se diferencia de las funciones normales?

  • Las funciones de flecha se introducen en ES6 y nos permiten escribir una sintaxis de función más corta.
    var helloES5 = function() {
        return "Hello World";
    }
    
    var helloES6 = () => "Hello World";
    
  • En funcionamiento normal this la palabra clave representa el objeto que llamó a la función pero en la función de flecha this La palabra clave siempre representa el objeto que definió la función de flecha.

P6. Cuál es la diferencia entre == y === ¿operador?

  1. == es un operador de comparación abstracto que solo compara el contenido y no su tipo
       1 == 1            // true, content and its type is same
     '1' == 1            // true, auto type conversion, string converted into number
    null == undefined    // true, because null is equivalent of undefined
       0 == false        // true, because false is equivalent of 0
      "" == false        // true, because false is equivalent of empty string
    
  2. === es un operador de comparación estricto que compara tanto el contenido como su tipo
       1 === 1             true
     '1' === 1             false
    null === undefined     false
       0 === false         false
      "" === false         false
    
  3. === entonces es mas rapido == porque == convierte los operandos en un tipo compatible antes de la comparación, mientras que === compara directamente sin ninguna conversión.

Lea también esta publicación para obtener más detalles sobre los operadores == y === con muchos ejemplos

P7. Cuál es la diferencia entre undefined y null ?

  • undefined significa que se ha declarado una variable pero aún no se le ha asignado ningún valor.
  • null es un valor de asignación. Se puede asignar a una variable que representa un valor nulo, vacío o inexistente.
  • undefined es el tipo de undefined mientras que null es un objeto
    var a;
    console.log(typeof(a));     // undefined
    console.log(typeof(null));  // object
    

P8. Cuál es la diferencia entre var, let y const ¿palabras clave?

  • variable Las declaraciones tienen alcance global o alcance de función mientras que dejar y constante están dentro del rango de bloqueo.
  • variable las variables se pueden actualizar y volver a declarar dentro de su alcance; dejar las variables se pueden actualizar pero no volver a declarar; constante las variables no se pueden actualizar ni volver a declarar.
  • Todos ellos están izados a la parte superior de su gama, pero mientras variable las variables se inicializan con undefined, dejar y constante las variables no se inicializan.
  • Mientras que variable y dejar puede ser declarado sin ser inicializado, constante debe inicializarse durante la declaración.

Lea también este artículo para obtener más detalles sobre la diferencia entre var, let y const

P9. que es variable Hoisting en JavaScript?

  • Elevar es el comportamiento predeterminado de JavaScript de mover todas las declaraciones a la parte superior del ámbito actual (a la parte superior del script actual o de la función actual).

  • Variables definidas usando var, let Donde const están todos izados.

  • En el proceso de elevación, var la variable se inicializa con indefinido por defecto. Si intenta acceder antes de la declaración, obtendrá undefined.

  • En el proceso de elevación, let y const las variables no se inicializan. Si intenta acceder antes de la declaración, obtendrá error de referencia.

    console.log(x);  // undefined
    console.log(y);  // ReferenceError
    console.log(z);  // ReferenceError
    
    var x = 1;
    let y = 2;
    const z = 3;
    
    

P10. ¿Cuáles son los métodos de objetos disponibles en JavaScript?

  • Objeto.crear() El método se utiliza para crear un nuevo objeto con su prototipo establecido en el objeto existente.
  • Objeto.assign() El método se utiliza para copiar propiedades y funciones de un objeto a otro objeto.
  • Objeto.congelar() congela el estado de un objeto una vez que se llama a este método. Ignora si se cambia una propiedad existente y si se agrega una nueva propiedad.
  • Objeto.sello() sella el estado de un objeto una vez que se llama a este método. Permite la modificación de propiedades existentes, pero ignora si se agrega una nueva propiedad.
  • Objeto.defineProperty() se utiliza para establecer una nueva propiedad en un objeto existente o para modificar una propiedad existente. La propiedad se puede marcar como grabable, configurable y enumerable.
  • Objeto.es() se utiliza para comparar dos valores. Devuelve verdadero o falso.

Lea también este artículo para obtener más detalles sobre los métodos de objetos con ejemplos.

P11. Que es this palabra clave en javascript?

En JavaScript, this palabra clave se refiere al objeto al que pertenece. Tiene diferentes valores según donde se utilice:

  • En un método, this se refiere a objeto propietario donde se define el método.
  • Solo, this se refiere a objeto global.
  • En una función, this se refiere a objeto global.
  • En una función, en modo estricto, this este undefined.
  • Cuando se llama a una función con Nuevo palabra clave, this se refiere a nueva instancia de objeto.
  • En un evento DOM, this se refiere a elemento que recibió el evento.
  • Los métodos de prototipo de función call(), apply() y bind() se pueden usar para hacer referencia this para cualquier objeto.

Lea también esta publicación para comprender todo sobre esta palabra clave con ejemplos

P12. Cuál es la diferencia entre throttle y debounce?

Debounce y throttle son dos técnicas similares (¡pero diferentes!) para controlar cuántas veces permitimos que una función se ejecute a lo largo del tiempo.

  • Palanca del acelerador Si el intervalo de aceleración es de 100 ms, una función de aceleración solo se ejecutará una vez cada 100 ms, sin importar la frecuencia con la que invoque esa función.

    Es útil para eventos de limitación de velocidad que ocurren más rápido de lo que puede rastrear. Por ejemplo, actualice la posición cada intervalo de tiempo de 1 s en desplazamiento infinito.

    var throttled = _.throttle(updatePosition, 100);
    $(window).scroll(throttled);
    
  • rebote Si el intervalo de rebote es de 100 ms, se ejecutará una función de rebote después de 100 ms desde su última ejecución.

    Se utiliza principalmente para agrupar un aumento repentino en el comportamiento y reaccionar después. Por ejemplo, volver a calcular un diseño 1s después de que la ventana haya dejado de cambiar de tamaño, enviar un evento 2s después de que se hayan detenido las pulsaciones de teclas en un campo de entrada, etc.

    var lazyLayout = _.debounce(calculateLayout, 300);
    $(window).resize(lazyLayout);
    

Las bibliotecas Underscore y Lodash tienen una función integrada para ambas.

P13. ¿Qué es constructor y prototipo? ¿Conoces la herencia prototípica?

Podemos definir clases en JavaScript usando el constructor de funciones.

// ES5 Function Constructor
var Person = function(firstName, lastName){
  this.firstName = firstName;
  this.lastName = lastName;
}

Podemos agregar métodos a nuestra clase usando prototipo.

Person.prototype = {
    getFullName(){
        return `${this.firstName.toUpperCase()} ${this.lastName.toUpperCase()}`;
    }
}

Podemos crear una subclase Student de Person Clase usando herencia de prototipo.

var Student = function(firstName, lastName, studentId){
  Person.call(this, firstName, lastName);
  this.studentId = studentId;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Todavía podemos agregar métodos en nuestra subclase usando prototipo

Student.prototype.toString = function(){
    return `Student {${this.lastName} ${this.firstName} - ${this.studentId}}`
}

Vamos a crear un objeto a partir de Student subclase

var student = new Student("Ashish", "Lahoti", 123456);

console.log(student.getFullName());
// prints 'ASHISH LAHOTI'

console.log(student.toString());
// prints 'Student {Lahoti Ashish - 123456}'

P14. ¿Cómo se define la clase en ES6?

Definimos la clase usando class palabra clave en ES6 que anula el constructor de funciones.

// ES6 Class
class Car {
  constructor(brand, color, price) {
    this._brand = brand;
    this._color = color;
    this._price = price;
  }

  // getter method
  get color(){
    return `color is ${this._color.toUpperCase()}`;
  }

  // setter method
  set color(newColor){
    this._color = newColor;
  }

  // prototype method
  drive(){
    return `driving ${this._brand} ${this._color} color car`;
  }

  // static method
  static compareCars(car1, car2){
    return `${car2._brand} is ${(car1._price > car2._price) ? "cheaper" : "costlier"} then ${car1._brand}`
  }
}

Podemos definir métodos getter, setter, prototipo y estáticos en las clases. También podemos crear subclases usando extend palabra clave.

class Toyota extends Car {
    constructor(color, price, model, make){
        super("Toyota", color, price);
        Object.assign(this, {model, make});
    }
}

Lea también esta publicación para obtener más detalles sobre las clases en JavaScript

P15. ¿Qué es el alcance global, de función y de bloque en JavaScript?

P16. Curry funciones en javascript?

Si quieres conocer otros artículos parecidos a Principales preguntas de la entrevista de Javascript - Conceptos de codificación N puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas