Comprende JS: Objetos y funciones (Parte 2)
Parte VI de la serie Comprende JS
Bienvenidos de nuevo a esta serie llamada Comprende JS, estamos ya en el parte aguas de esta serie y espero les este sirviendo de apoyo para mejorar su comprensión del lenguaje mas amado en este mundo Javascript.
Vamos a continuar con este tema de Objetos y funciones, ya que como les mencione en el episodio anterior es el tema mas extenso que veremos en la serie, pues comencemos.
Retomando el episodio anterior, donde vimos acerca de los objetos y los tipos de funciones de declaración de funciones en Javascript, como lo mencionamos, las funciones son de primera clase en Javascript, lo cual nos permite tratar a una funcione como cualquier otro tipo (String, Number, Boolean, Object), pero vamos a recordar que sucede cuando se crea una función, tal vez sientan como un Déjà vu, porque efectivamente parte de este tema ya lo vimos en los primeros episodios de esta serie, donde explicamos que sucede en las fases del contexto de ejecución, entonces recordemos que sucede en el contexto de ejecución que crea una función.
Objetos, funciones y this
Cuando se invoca a una función () sabemos que se crea un nuevo contexto de ejecución y se almacena en el execution stack, bien, en la fase de creación del contexto de ejecución no solo se ponen en memoria las definiciones de variables que existen dentro del lexical scope y el lexical environment, a su vez también se crea un Objeto global, que ya habíamos mencionado antes y junto con este se crea un objeto que representa ese contexto de ejecución y es a través de…
this
Palabra reservada que se crea en la fase de creación del contexto de ejecución para representar al actual Lexical environment.
En el ejemplo anterior, vemos que ambos console.log() apuntan en memoria al mismo objeto, el objeto global, pero veamos un ejemplo mas claro.
Efectivamente con esto podemos comprobar que están apuntando en memoria al objeto global ambas funciones, ya que al declarar la variable baz en this a través del “Dot notation” y asignar un valor a esta, podemos acceder a dicha variable en objeto global estando fuera del contexto de la propia función quien le asigna el valor.
Ahora que entendemos ya los “object literals”, vamos a crear un método dentro de un objeto para ver un ejemplo mas avanzado, a través de un expresión de función, veamos.
A diferencia del primer ejemplo, this, ya no apunta al objeto global, ahora apunta a el objeto myObject, es decir, cuando se ejecuta el método me(), se crea un nuevo contexto de ejecución y this, apunta al contexto donde esta puesta la expresión de función e incluso si modifico la variable name como en el caso anterior dentro de esa expresión de función, efectivamente me actualiza el valor de name, esto es muy útil y hasta cierto punto limpio, pero hay un error que nos demuestra que como cualquier lenguaje fue hecho por humanos y tiene errores, veamos.
Vieron el error, cuando actualizo a nivel de la expresión de función me, si actualiza el nombre pero pareciera que cuando esta dentro de la expresión de función setName, no esta haciendo nada, pero realmente si esta actualizando pero precisamente al mismo this, de nuestro objeto, ya que elthis que esta dentro de setName esta apuntando al objeto global, raro, si lo se, pero repito y sostengo desde el inicio de esta serie…
Javascript no es perfecto, pero puedes vivir con ello.
De hecho si damos un vistazo a nuestra consola e imprimimos window que es el objeto global, notaremos que fue ahí donde se creo name con el valor en este caso “Robin Object”.
Bien, pero no te preocupes no somos los únicos en darnos cuenta de este error y para ello ya hay soluciones las mas antigua o conocida es usar el patrón self como a continuación lo mostraremos.
Observamos en el ejemplo de arriba, que creamos una variable mas llamada self y que tiene asignado this, que recordemos this, es un objeto y por lo tanto la asignación es por referencia, es decir apuntando a mismo objeto en memoria, por lo que esto me garantiza que siempre que hable de self, estaré refiriéndome al this de mi objeto myObject, te hace sentido? bien continuemos.
Arguments
Vimos anteriormente que en la fase de creación del contexto de ejecución, se crean objetos como global object, variable environment, outer environment y this, bien pues también se crea algo mas llamado arguments
Los arguments, es otra forma de llamar a los parámetros que recibes en una función y que en la creación del contexto de ejecución de una función se crea para nosotros, veamos un ejemplo simple para entender los arguments.
Creo que para muchos es familiar este ejemplo, donde podemos acceder a dichos argumentos o parámetros, dentro de la función, pero cuando se crea la palabra arguments nos brinda la oportunidad de manipular los parámetros de otra forma y esto es muy útil al momento de tener funciones que lleven muchos parámetros, por ejemplo.
Vieron eso, sin la necesidad de declarar los argumentos dentro de function register(), el contexto de ejecución crea por nosotros un objeto con todos los argumentos listados en el orden que fueron ejecutados, permitiendo tener funciones con N cantidad de parámetros o argumentos, bien continuemos.
IIFEs (Immediately Invoked Functions Expressions)
Recuerdan que en el capitulo anterior de esta serie, vimos los dos tipos de declaración de una función (Function statement, Function expression), bien, pero que hay si quiero ejecutar una función al vuelo, es decir, justo cuando se termina de crear, pues para ello tenemos las IIFEs, véase el ejemplo siguiente.
Vemos dos puntos importantes y que son el significado de su nombre IIFE:
- Immediately Invoked: a través de los (), es que la ejecutamos justo después que es creada.
- Function Expression: Y lo que se ejecuta es una expresión de función.
Bien, ya comprendemos el significado de su nombre, pero porque no puedo hacerlo a través de una Function statement así:
En primera el Syntax parser cuando detecta la palabra reservada “function” al principio de una linea, lo que espera después es nombre para esa función, porque lo interpreta como una function statement y las function statement no pueden ser anónimas, entonces la manera de ejecutar inmediatamente después de crear una función es a través de una expresión de función, “engañando” al Syntax parser, que lo que viene no es un Function statement si no una Function expression y lo hacemos a través del operador “grouping”, recuerdan…
El operador de “grouping”, es nuestro helper para hacer esto, ya que nos permite ejecutar cualquier expresión, que este dentro de el, por ejemplo una expresión puede ser 3 + 4, y es por eso que nos viene bien porque lo que queremos al final es tratar una declaración de función como una expresión de función…
Finalmente nos damos cuenta que para el Syntax parser no hay problema en interpretar una expresión, es decir si ponemos algo como…
No hay errores, pero cuando se trata de una declaración de función, es cuando no puede saber que se trata de una expresión de función, si no hay algo antes que la palabra reservada “function” y es por ello que nos da un error.
Conclusión
Bien, con esto concluimos el tema de Objetos y funciones, del cual hemos aprendido realmente que son las funciones y como trabajan, así mismo reafirmamos que Javascript como cualquier otro lenguaje no es perfecto, ya que esta hecho por humanos simples mortales, nada mas, por lo cual debe tener errores, pero como siempre les digo, nada de que preocuparse, nos vemos en la siguiente entrega.
