Preguntas de la entrevista de elevación y elevación de funciones

Esta es una parte 2 de mi artículo anterior sobre elevación titulado “¿Una guía para la elevación de variables de JavaScript? con let y const ”. Así que asegúrese de leer eso antes de sumergirse en este.

Anteriormente hablé de elevación de variables solo porque la función de elevación en JavaScript no es lo mismo que la elevación de variables, es única a su manera. Ampliaré la función de elevación en este junto con algunas preguntas de entrevista comunes y complicadas sobre elevación (variable y función) que es casi seguro que cualquier persona que dé entrevistas en JavaScript encontrará.

¡Con suerte, después de terminar estas 2 partes, estará listo para tachar Elevación de su lista de verificación de preparación de JavaScript!

Hagámoslo.

Función de elevación

Hay 2 formas de crear funciones en JavaScript, a través de Declaración de función y a través de Expresión de función . Veamos cuáles son y cómo les afecta la elevación.

Declaración de función

La declaración de función define una función con los parámetros especificados.

Sintaxis:

function name(param1, param2, ...) { [statements]}

En JavaScript, las declaraciones de funciones elevan las definiciones de funciones.

Por tanto, estas funciones se pueden utilizar antes de declararlas.

Ejemplo:

hoisted() // output: "Hoisted"
function hoisted() { console.log('Hoisted')}

Detrás de escena, así es como el intérprete de JavaScript ve el código anterior:

// Hoisted codefunction hoisted() { console.log('Hoisted')}
// Rest of the codehoisted() // output: "Hoisted"

Este comportamiento es cierto si tiene declaraciones de función en el alcance global o el alcance funcional (básicamente el alcance local en JavaScript).

Esto puede ser útil porque puede usar su lógica de nivel superior al comienzo del código para que sea más legible y comprensible.

Nota: Nunca use declaraciones de función dentro de los bloques if / else.

Expresión de función

La functionpalabra clave también se puede utilizar para definir una función dentro de una expresión.

Sintaxis:

const myFunction = function [name](param1, param2, ...) { [statements]}

El [name]es opcional, por lo que estas pueden ser funciones anónimas. Podemos usar funciones de flecha así:

const myFunction = (param1, param2, ...) => { [statements]}

Las expresiones de función en JavaScript no se elevan.

Por lo tanto, no puede usar expresiones de función antes de definirlas.

Ejemplo:

notHoisted() // TypeError: notHoisted is not a function
const notHoisted = function() { console.log('foo')}

Esto es todo lo que hay que tener en cuenta para crear funciones desde un punto de vista de elevación.

¡Ahora pasemos a algunas preguntas de la entrevista!

Preguntas de entrevista de elevación

Izar y su comportamiento errático es un tema candente durante las entrevistas. Usando el conocimiento de mi artículo anterior y este, uno puede navegar a través de cualquier pregunta sobre el tema. Dicho esto, veamos algunas preguntas comunes.

Pregunta 1

var a = 1;
function b() { a = 10; return;
 function a() {}}
b();
console.log(a);

Salida: 1, ¡ ¿Qué ?! ?

Esto se debe a que la function a() {}declaración ahora ha creado un local aque tiene un alcance local / funcional. Este nuevo aahora se eleva a la parte superior de su función adjunta b()con su declaración y definición. Esto es lo que está sucediendo detrás de escena:

var a = 1;
function b() { // Hoisted function a() {}
 a = 10; return;}
b();
console.log(a)

Por lo tanto, la declaración a = 10;ya no cambia el valor del global aque sigue siendo 1, sino que cambia el local ade una función a un valor entero de 10. Como estamos registrando el global a, la salida es 1.

Had the statement function a() {} not been there, the output would have been 10.

Question 2

function foo(){ function bar() { return 3; } return bar(); function bar() { return 8; }}alert(foo());

Output: 8

Both the bar() functions are function declarations and will therefore be hoisted to the top of foo() local scope. However, the bar() returning 8 will be hoisted after the one returning 3. Therefore, the one returning 8 will be executed.

Behind the scenes:

function foo(){ //Hoisted before function bar() { return 3; } // Hoisted after function bar() { return 8; }
 return bar(); }alert(foo());

Question 3

function parent() { var hoisted = "I'm a variable"; function hoisted() { return "I'm a function"; } return hoisted(); }console.log(parent());

Output: “TypeError: hoisted is not a function”

This one’s tricky. Its Function vs. Variable! Let’s break it down.

We know that when it comes to variable hoisting, only the declaration(with a value of “undefined”) is hoisted, not the definition!

In the case of function declarations, the definitions are hoisted as well!

Now, in such a case of multiple declarations(variable and function in the same scope) with the same identifier, the hoisting of variables is simply IGNORED. The the interpreter comes across the function declaration and hoists it.

Finally, the statement of variable assignment (which was not hoisted) is executed and “I’m a variable” is assigned to hoisted, which is a simple string value and not a function. Hence the error!

Here’s the behind the scenes for this problem:

function parent() {
 // Function declaration hoisted with the definition function hoisted() { return "I'm a function"; }
 // Declaration ignored, assignment of a string hoisted = "I'm a variable"; 
 return hoisted(); 
}console.log(parent());

Question 4

alert(foo());function foo() { var bar = function() { return 3; }; return bar(); var bar = function() { return 8; };}

Output: 3

This one’s easy. The function foo() itself will be hoisted in the global scope as its a function declaration. As for inside foo(), its a clear case of function expression for both the bar()functions.

The second bar() will not be read by the interpreter ahead of time (no hoisting). The first one will be executed and returned.

Question 5

var myVar = 'foo';
(function() { console.log('Original value was: ' + myVar); var myVar = 'bar'; console.log('New value is: ' + myVar);})();

Output: “Original value was: undefined”, “New value is: bar”

In this one, again the global value of myVar(‘foo’) is out of the picture. This is because variable myVar is being declared and defined inside the local function scope and is therefore hoisted to the top of the IIFE with a value of ‘undefined’ which is logged first. The value ‘bar’ is then assigned and logged subsequently.

This concludes JavaScript Hoisting from my side. ?

Hope both the articles are of help to you.

Please check out the article below if you want to learn arrow functions and other ES6 functionality related to functions.

JavaScript ES6 Functions: The Good Parts

ES6 offers some cool new functional features that make programming in JavaScript much more flexible. Let’s talk about…medium.freecodecamp.org

Peace ✌️