Javascript Interview Questions ( Functions ) - Hoisting, Scope, Callback, Arrow Functions etc

Summary

Este video explora las principales diferencias entre las funciones regulares y las funciones flecha en JavaScript. Se abordan temas clave como el uso del objeto `arguments`, el comportamiento del `this`, y cómo afectan ambos tipos de funciones a las variables y métodos dentro de los objetos. Se explica cómo las funciones flecha no tienen acceso al objeto `arguments` y cómo el valor de `this` se comporta de manera diferente, lo que puede generar resultados inesperados. También se mencionan otros temas más avanzados, como los constructores en las funciones. El video es útil para quienes buscan profundizar en conceptos esenciales de JavaScript.

Takeaways

• 😀 Las funciones regulares en JavaScript tienen acceso al objeto `arguments`, lo que permite acceder a los argumentos pasados a la función, incluso si no están definidos como parámetros.
• 😀 Las funciones flecha no tienen el objeto `arguments`. Intentar usarlo dentro de una función flecha resultará en un error.
• 😀 El `this` dentro de las funciones regulares hace referencia al objeto en el que se está invocando la función. Esto significa que puede apuntar al objeto o al contexto global dependiendo de cómo se utilice.
• 😀 Las funciones flecha no tienen su propio `this`. En su lugar, heredan el valor de `this` del contexto de su función exterior.
• 😀 Cuando se usa una función regular dentro de un objeto, `this` hace referencia al objeto mismo. En una función flecha, `this` será el contexto global o el contexto de donde se haya definido la función.
• 😀 En una función regular, el uso de `this` depende de cómo se invoque la función, mientras que en una función flecha, `this` es estático y se hereda del contexto.
• 😀 Un ejemplo de comportamiento de `this` se muestra con una función regular y una flecha dentro de un objeto. La función regular devuelve el valor correcto de `this`, pero la función flecha devuelve `undefined`.
• 😀 El uso de funciones flecha es más adecuado cuando no se necesita manipular `this` de forma dinámica, como en funciones dentro de objetos o métodos.
• 😀 Aunque hay más diferencias entre funciones regulares y flechas, algunas como la construcción de objetos con `new` son más avanzadas y se tratan en otros videos.
• 😀 El video recomienda explorar más sobre el comportamiento del `this` y otras diferencias avanzadas en JavaScript para una comprensión más profunda.

Q & A

¿Cuál es la diferencia principal entre una función normal y una función flecha en JavaScript?

La principal diferencia es que las funciones flecha no tienen su propio contexto para la palabra clave 'this' ni el objeto 'arguments'. En cambio, las funciones normales sí tienen su propio 'this' y el objeto 'arguments' disponible.

¿Por qué no se puede usar el objeto 'arguments' dentro de una función flecha?

Las funciones flecha no crean su propio objeto 'arguments'. En lugar de eso, 'arguments' solo está disponible en funciones normales, donde se puede acceder a todos los argumentos pasados a la función.

¿Qué ocurre cuando se intenta usar 'arguments' en una función flecha?

Cuando se intenta usar 'arguments' en una función flecha, se genera un error porque las funciones flecha no tienen su propio objeto 'arguments'.

¿Cómo funciona la palabra clave 'this' en una función normal frente a una función flecha?

En una función normal, 'this' se refiere al objeto que invoca la función, lo cual depende de cómo se llame la función. En una función flecha, 'this' se hereda del contexto léxico en el que la función fue definida, es decir, el 'this' se mantiene igual que en el entorno exterior.

En el ejemplo de código con 'this', ¿por qué la función flecha imprime 'undefined' y la función normal imprime 'roadside coder'?

La función flecha no tiene su propio 'this', por lo que usa el contexto externo (el objeto global), lo cual resulta en 'undefined'. En cambio, la función normal tiene su propio 'this' y, cuando se invoca desde el objeto, accede correctamente a las propiedades del objeto, imprimiendo 'roadside coder'.

¿Es posible usar las funciones flecha como constructores en JavaScript?

No, las funciones flecha no pueden ser utilizadas como constructores. Las funciones normales pueden utilizarse como constructores para crear instancias de objetos, pero las funciones flecha no tienen su propio contexto para ser utilizadas de esta manera.

¿Qué es el objeto 'arguments' en JavaScript y cómo funciona en funciones normales?

El objeto 'arguments' es una colección similar a un array que contiene todos los argumentos pasados a una función, incluso si no están definidos explícitamente como parámetros. Funciona en funciones normales pero no en funciones flecha.

¿Qué se espera que un entrevistador pregunte acerca de las diferencias entre funciones normales y funciones flecha en una entrevista?

Un entrevistador podría preguntarte cómo funcionan los objetos 'arguments' y 'this' en ambos tipos de funciones, o podrían darte un fragmento de código y pedirte que expliques cómo se comportan las funciones normales y flecha en diferentes contextos.

¿Cuáles son los temas avanzados que se mencionan en el video sobre funciones normales y flecha?

El video menciona que, además de 'arguments' y 'this', un tema avanzado relacionado con las funciones normales y flecha es su uso como constructores, pero esto no se profundiza en el video y se sugiere investigarlo por separado.

¿Cómo puedes aprender más sobre las diferencias entre funciones normales y flecha según el video?

El video recomienda leer más sobre las diferencias y profundizar en el tema de las funciones como constructores y el comportamiento de 'this', y sugiere ver más videos relacionados en su serie de entrevistas de JavaScript en YouTube.