Preguntas engañosas de la entrevista de Javascript - Conceptos de codificación N

Este artículo es una colección de preguntas engañosas para entrevistas basadas en diferentes conceptos en JavaScript. El nivel de dificultad de la pregunta aumentará cuanto más lea la línea de este artículo.

Índice
  1. Operadores numéricos. ¿Adivina la salida?
  2. operadores relacionales. ¿Adivina la salida?
  3. Operadores de comparación. ¿Adivina la salida?
  4. forEach lazo. ¿Adivina la salida?
  5. Variable hoisting. ¿Adivina la salida?
  6. Closure. ¿Adivina la salida?
  7. this palabra clave. ¿Adivina la salida?

Operadores numéricos. ¿Adivina la salida?

console.log(   2 + "2" );  
console.log( "2" + "2" );

console.log(   2 - "2" );
console.log( "2" - "2" );
console.log( "A" - "A" );

Piensa un poco antes de ver la salida.

Output

22 22 0 0 NaN

Aquí está la explicación,

JavaScript + el operador se comporta como,

  • operador numérico cuando ambos operandos son números
  • operador de concatenación si uno o ambos operandos son una cadena.

JavaScript - operador siempre se comporta como operador numérico. si uno o ambos operandos son una cadena, Javascript intenta convertirlo en un número; si no puede convertirlo, devuelve NaN.

operadores relacionales. ¿Adivina la salida?

console.log( 10 < 20 < 30 );
console.log( 30 > 20 > 10 );

¿Adivinaste? true en los dos casos ? No, eso no es correcto.

Output

true false

la salida es true y false. Aquí está la explicación,

En JavaScript, los operadores relacionales se evalúan de izquierda a derecha, falso es 0y verdadero es igual a 1 para comparaciones de números.

Así que la valoración de comparación es algo como esto,

10 < 20 < 30  =>  true < 30  =>  1 < 30  => true
30 > 20 > 10  =>  true > 10  =>  1 > 10  => false

Operadores de comparación. ¿Adivina la salida?

console.log( null == 0 );
console.log( null > 0  );
console.log( null >= 0 );

puede que hayas adivinado false en los tres casos pero eso no es correcto.

Output

false false true

En JavaScript, verificación de igualdad == y comparaciones > < >= <= se comporta diferente.

Para la comparación de igualdad,

  • malo y indefinido son comparables.
  • 0, falso y "" (cadena vacía) son comparables.
  • malo y 0 por lo tanto no son comparables null == 0 devuelve falso.

Para la comparación de números,

  • si un operando es un número, intenta convertir el otro operando en un número.
  • malo se convierte en 0 y indefinido se convierte en no para la comparación de números por lo que null > 0 devuelve falso mientras null >= 0 devuelve verdadero.

forEach lazo. ¿Adivina la salida?

const elements = [1, 2, 3, 4, 5];

elements.forEach(element => {
  console.log(element);

  if(element == 2){
    return;
    //break;
    //continue;
  }
})

¿Adivinaste que imprimirá 1 y 2? Veamos la salida,

Output

1 2 3 4 5

Sí, es confuso en Javascript. La razón es que pasamos un función de devolución de llamada dentro forEach bucle que se ejecutará para cada elemento, no importa si return.

Si utiliza break Donde continue En vez de returnobtiene cualquiera de los errores porque estos no se aplican a una función de devolución de llamada:

Uncaught SyntaxError: Illegal break statement
Uncaught SyntaxError: Illegal continue statement

De la documentación oficial de MDN:
no hay manera de parar Donde Pausa a forEach bucle que no sea lanzar una excepción. Si necesita tal comportamiento, el forEach método es la herramienta incorrecta. La terminación anticipada se puede lograr con:

  • Un simple for lazo
  • A for...of / for...in rizado

Variable hoisting. ¿Adivina la salida?

var foo = 1;

function myFun(){
  console.log(foo);
  
  var foo = 2;
}

myFun();

¿Adivinaste? foo = 1 Donde foo = 2?

No es ninguno. se imprimirá undefined. Aquí está la explicación,

Levantamiento es un mecanismo de JavaScript en el que las variables y las declaraciones de funciones se mueven hacia arriba antes de la ejecución del código.

Veamos cómo lo interpreta el compilador en el proceso de levantamiento,

var foo;
foo = 1;

function myFun(){
  
  var foo;          // var hoisted and initialized with undefined
  console.log(foo); // undefined
  
  foo = 2;
}

myFun();

Closure. ¿Adivina la salida?

for (var i = 0; i < 3; i++) {
  setTimeout(function() { console.log(i); }, i*1000);
}

¿Adivinaste que imprimirá 0, 1, 2 cada 1 segundo? Veamos la salida,

Output

3 3 3

De hecho, imprimirá 3, 3, 3 cada 1 segundo. Esto se debe al cierre de JavaScript. Aquí está la explicación,

clausura

un JavaScript clausura esto es cuando una función interna tiene acceso al alcance de su función externa. En la siguiente línea de código:

setTimeout(function() { console.log(i); }, i*1000);

variable i se usa en una función interna cuando en realidad se declara en un bucle for externo. La función interna podrá acceder al valor de i por Clausura.

levantamiento

En Javascript levantamiento procedimiento, declaración de i se moverá a la parte superior de su perímetro, ya que i se define usando variable en el bucle for, declaración de i se moverá al alcance global en el proceso de levantamiento.

Después de tres iteraciones del ciclo for, el valor de la variable global extendida i serán 3. Los tres cierres se referirán a este mismo i variable de alcance global.

dejar

si i se definieron utilizando dejar En vez de variable en el bucle for, la salida habría sido diferente. ¿Por qué?

dejar tiene alcance de bloque en lugar de variable que se limita a la función. Dado que el bucle for también es un bloque, el valor de i en cada iteración hay un bloque de alcance en esa iteración y cada cierre tiene su propia copia de i variable. Veamos el código,

for (let i = 0; i < 3; i++) {
  setTimeout(function() { console.log(i); }, i*1000);
}

Output

0 1 2

this palabra clave. ¿Adivina la salida?

var a = new Person("a");
var b = Person 
var c = Person("c");

function Person(fname) {
    this.fname = fname;
}

console.log("1.", fname);   
console.log("2.", a.fname);    
console.log("3.", b.fname);    
console.log("4.", c.fname);

Piensa un poco antes de ver la salida.

Output

1. c 2. a 3. undefined Uncaught TypeError: Cannot read property 'fname' of undefined

Aquí está la explicación,

  1. fname imprimirá contra. cuando corres Person("c") Una función, this se refiere a un objeto global ventana y this.fname se le asigna el valor como contra.
  2. a.fname imprimirá a. Cuando ejecutas una función usando Nuevo palabra clave new Person("a"), this se refiere a un objeto recién creado.
  3. b.fname imprimirá undefined ya que solo está asignando un objeto de función y no ejecutándolo. Person el objeto no tiene una propiedad llamada como fname
  4. Una función Person("c") no devuelve nada contra este undefined y c.fname arrojará un error

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

Si quieres conocer otros artículos parecidos a Preguntas engañosas 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