Kitabı oku: «Aprender Javascript Avanzado con 100 ejercicios prácticos», sayfa 2

006 Objetos en JavaScript

COMO HEMOS INDICADO EN EL EJERCICIO anterior, JavaScript cuenta con datos primitivos y con objetos. Todo cuanto no puede situarse dentro de alguno de los tipos de datos descritos en las páginas anteriores puede considerarse un objeto.

1. Existen tres tipos de objetos en JavaScript, considerados más comunes, que se mueven con los denominados constructores: los objetos simples, las matrices y las expresiones regulares. Los objetos tiene propiedades y valores y, a diferencia de los datos primitivos, sí pueden ser creados por el programador. Veamos paso a paso cada uno de estos tipos de objetos.

2. El constructor Object envuelve los objetos simples, los cuales se representan mediante nombres o datos. Un ejemplo de un objeto simple sería el siguiente:

{

nombre: ‘Mónica’,

apellido: ‘González’

}

3. Este objeto tiene dos propiedades (nombre y apellido) y cada una de ellas, un valor (‘Mónica’ y ‘González’). Como hemos indicado, es el programador quien decide el nombre de los objetos, siendo consecuente en su uso en todo el script.

Fuente de esta imagen: aprenderaprogramar.com

Ésta sería la descripción de un pequeño script que cuenta con una variable que contiene un objeto con varias propiedades y valores.

4. El segundo tipo destacable de objetos son las matrices, en inglés arrays . Una matriz es, sencillamente, una lista de elementos. Las matrices son la mejor forma de almacenar más de un valor en un mismo lugar, puesto que de otro modo sería necesaria crear una variable para cada elemento de la lista. Las matrices se envuelven dentro del constructor Array y tienen el aspecto siguiente:

[‘lunes’, ‘martes’, ‘miércoles’, ‘jueves’, ‘viernes’]

5. Todos los elementos de una matriz corresponden a un número en un índice, siendo el primero de estos números el 0; esto significa que, en nuestro ejemplo, el elemento ‘lunes’ es el número 0, el elemento ‘martes’ , el 1, y así sucesivamente.

Los elementos que forman una matriz se gestionan mediante valores de índice, siempre recordando que el primer elemento corresponde al valor 0, no 1.

6. El tercer tipo de objetos de JavaScript es el de las expresiones regulares, regidas por el constructor RegExp. Las expresiones regulares están formadas por caracteres simples, /abc/ , o por una combinación de caracteres simples y especiales, /a*b_c/. Una expresión regular sirve para localizar patrones en una cadena de texto, para comprobar que una cadena tiene una determinada estructura o para verificar que una dirección de correo electrónico está escrita correctamente.

La imagen 5 muestra un ejemplo de código en el cual se utiliza una expresión del tipo RegExp , /@/ , para verificar que un campo de e-mail cuenta con una dirección de correo electrónico válida, es decir, con el símbolo @.

7. Las características que comparten estos tres tipos de objetos son las siguientes: cada objeto tiene su propia identidad y, por tanto, pueden compararse; es posible modificar las propiedades de los objetos, añadir de nuevas y eliminar las sobrantes, y los constructores pueden ser considerados como implementaciones de tipos personalizados.

IMPORTANTE

Existe un listado de caracteres especiales que pueden utilizarse en expresiones regulares. Tenga en cuenta que cada uno de estos caracteres se utiliza en combinación con caracteres simples y tienen un significado concreto. Los caracteres especiales que se pueden utilizar en JavaScript para generar expresiones regulares son los siguientes:

< $ ^ . * + ? [ ] >

007 Valores y objetos indefinidos

EN UN EJERCICIO ANTERIOR HEMOS TENIDO la oportunidad de mencionar dos tipos de valores que se utilizan en JavaScript para indicar la falta de información en un script. Se trata de los valores (o, también podríamos denominarlos, “no-valores”) null y undefined.

1. En este ejercicio trataremos con todo detalle los dos “no valores” que JavaScript utiliza para indicarnos que falta información en el script: null y undefined. Undefined significa que no hay ni un valor primitivo ni un objeto, y podemos encontrarlo en variables sin inicializar, en una falta de parámetros o en una omisión de propiedades. Por su parte, null significa que no hay ningún objeto, y podemos encontrarlo en aquellas partes del script en que se espera la existencia de un objeto, sea del tipo que sea.

2. Así, podemos resumir esta descripción diciendo que undefined indica la no existencia y null , el vacío.

3. A continuación veremos en ejemplos los casos en que se generarán los valores undefined y null . Empezaremos por las variables no inicializadas comparadas con otras que sí lo han sido:

var caso1 = 452;

var caso2 = ‘452’;

var caso3;

Con esta comparativa puede ver claramente que undefined es un valor, aunque sea “sin valor”.

4. La variable caso1 contiene datos del tipo Number ; la variable caso2 contiene datos del tipo String , mientras que la variable caso3 no ha sido inicializada y es del tipo undefined.

5. El caso de la falta de parámetros también produce variables de este tipo. Un ejemplo sería el siguiente:

var caso1 = { };

6. En efecto, la variable caso1 sí ha sido inicializada pero no muestra ningún parámetro, por tanto, es del tipo undefined.

7. En JavaScript, el valor null se considera un valor especial, puesto que en sí mismo es un valor aunque indica la falta de contenido. En nuestras variables de ejemplo, el valor null sería como sigue:

var caso1 = null;

8. Quizás se estará preguntando por qué JavaScript dispone de estos “no-valores” entre sus elementos. La razón se remonta a los inicios de este lenguaje de programación. JavaScript adoptó el procedimiento de dividir los valores en primitivos y objetos, así como de utilizar el valor para indicar la ausencia de objetos con el valor null.

9. Así, el valor null se convirtió en 0 (cero) si daba como resultado un número:

Number(null)//El resultado sería 0

5 + null // El resultado sería 5

10. Y se inventó un nuevo no-valor, undefined, para aquellos casos en que el resultado no debiera ser un número, es decir, para variables sin inicializar y para la omisión de propiedades:

Number(undefined) // El resultado sería NaN (Not a Number)

5 + undefined // El resultado sería NaN

008 Comprobar valores indefinidos o nulos

EN ESTE EJERCICIO LE MOSTRAREMOS CÓMO puede comprobar si los valores undefined y null existen en un script por separado o bien si uno de los dos valores existe.

1. Empezaremos por el valor null. Si lo que necesita saber es si el valor de una variable es el mencionado no-valor, es decir, si no tiene ningún valor asociado, sencillamente es preciso comparar esa variable con el valor null. El modo de hacerlo pasa por el uso del comparador === (estrictamente igual):

if(caso1===null) {

}

//Siendo “caso1” el nombre de la variable que estamos analizando

2. En el caso en que la variable devuelva, efectivamente, el valor null , será preciso realizar cuanto se requiera para que el script funcione correctamente.

3. También podemos comprobar de la existencia de una variable undefined utilizando el mismo comparador que para el valor null :

if(caso1===undefined) {

}

En ambos casos (1 y 3), el término caso1 correspondería al nombre de una variable ficticia.

4. A continuación, le mostramos un ejemplo más gráfico de la comprobación de un objeto indefinido:

if (typeof(caso1) === “undefined”){

alert(“caso1 no está definido.”);

}

5. Sin embargo, no es ésta la única forma de realizar esta comprobación. El operador Typeof es otro modo de llevarla a cabo, aunque normalmente, y debido a su sencillez, se utilizará el comparador ===.

6. Typeof es un operador que devuelve una cadena o string que describe el tipo de dato que corresponde con el objeto, ya sea una variable, una función..., que se escribe a continuación. Más concretamente, el operador typeof distingue los valores primitivos de los objetos y, en el caso de las primitivos, determina el tipo al que pertenecen: “number”, “string”, “boolean”, “object”, “function” y “undefined”.

7. El operador typeof de JavaScript también puede interpretar el valor null , y en este caso lo hace como un tipo Object, no como un tipo null. Este comportamiento, que puede provocar confusiones, se mantiene por compatibilidad con versiones anteriores del lenguaje.

8. La propiedad SomeObject.prop también se utiliza para comparar un valor no definido en null. ¿Cómo? Verificando que esta comparación es true si la propiedad SomeObject.prop es null o si dicha propiedad no existe.

La propiedad SomeObject.prop también se utiliza para comparar un valor no definido en null comprobando que esta comparación es true si la propiedad SomeObject.prop es null o si dicha propiedad no existe.

IMPORTANTE

Si el uso y la aplicación del operador Typeof no le ha quedado demasiado claro, no se preocupe; más adelanteen este libro dedicaremos un ejercicio entero a dicho operador.

009 Objetos envolventes para primitivos

LOS TRES TIPOS DE DATOS PRIMITIVOS en JavaScript, booleano, numérico y cadena de caracteres, tiene su correspondiente constructor: Boolean, Number y String. Los valores primitivos son contenidos o envueltos (wrap) en las instancias, también denominadas objetos envolventes (en inglés, wraper objects).

1. En este ejercicio veremos los detalles de los objetos que envuelven los primitivos. Para empezar diremos que los constructores crean objetos que son prácticamente incompatibles con los valores primitivos que envuelven.

2. Si estos constructores se utilizan como funciones, la conversión de los valores se lleva a cabo en sus correspondientes tipos de primitivos.

3. Aunque los expertos recomiendan este método de conversión, lo cierto es que entre los programadores de JavaScript se tiende a evitar los objetos envolventes. ¿Por qué? Porque la conversión no es un proceso necesario, puesto que casi todo cuanto pueden hacer los objetos también pueden hacerlo los primitivos.

4. Los objetos envolventes son distintos a los datos primitivos. Si tenemos en cuenta que las instancias envolventes son objetos,podemos deducir que no existe ningún modo de comparar objetos en JavaScript, ni mediante operadores de igualdad como ==.

5. Si lo que necesita es añadir propiedades a un valor primitivo, será preciso envolver la primitiva y añadir la propiedad al objeto envolvente. Con este proceso lo que estamos haciendo es desenvolver el valor para poder trabajar con él. Vea un ejemplo de este proceso en las siguientes líneas:

new Boolean (true)

new Number(258)

new String(‘caso1’)

6. Así los valores primitivos han sido envueltos con el correspondiente constructor (Boolean, Number y String). Para desenvolverlos, se utiliza el método valueOf() , el cual está presente en todos los objetos:

new Boolean (true).valueOf()

true

new Number(258).valueOf()

258

new String(‘caso1’).valueOf()

‘caso1’

Recuerde que todo cuanto escribimos tras la doble barra // no es interpretado por el navegador web.

7. Tal y como veremos con detalle en un ejercicio anterior, la conversión de objetos envolventes en primitivas genera números y texto (o cadenas de caracteres), pero no datos booleanos.

8. Por último, cabe destacar que los datos primitivos adquieren sus métodos de los correspondientes objetos envolventes.

010 Operadores de asignación

IMPORTANTE

El resultado de las operaciones es aquello que permite a un programa modificar su manera de comportarse según los datos que tenga para trabajar. Las operaciones pueden ser máso menos sencillas y pueden realizarse con distintos tipos de operandos.

LOS OPERADORES SIRVEN PARA REALIZAR LOS cálculos y las operaciones definidos en un script. Todos los operadores convierten sus operandos en los tipos correspondientes, aunque hay que advertir que la mayoría de los operadores sólo funcionan con valores primitivos, lo que implica que los objetos se convierten en primitivos antes de ser manipulados.

1. En este ejercicio conocerá cuáles son los operadores de asignación, cómo y para qué se utilizan. Como presentación, dire-mos que los operadores de asignación son los que se utilizan para asignar valores a las variables. El operador de asignación más utilizado es =. A la derecha de este operador se escriben los valores finales, mientras que a su izquierda se inserta el nombre de la variable en la cual se almacenará el dato. Veamos un ejemplo básico:

var caso1 = 100;

2. Podemos definir una asignación como una expresión que evalúa un valor asignado. Esta definición permite en JavaS-cript encadenar asignaciones. Un ejemplo de ello sería lo siguiente:

caso1 = caso2 = 100;

El operador = se denomina operador de asignación simple.

3. Esta sentencia permite asignar el valor 100 tanto al valor caso1 como al valor caso2. Aunque el valor = es el más utilizado en-tre los operadores de asignación, es preciso saber que existen otros; de hecho, se trata de combinaciones entre el operador = y otros operadores matemáticos. Algunas de estas combinaciones entre operadores de asignación son +=, -=, *= y /= . Todos ellos realizan la operación que indica el operador mate-mático entre el valor de la izquierda y el de la derecha y ubica el resultado en la parte izquierda de la sentencia. Veamos unos ejemplos de cada uno de ellos sobre un único caso:

caso1 = 103;

caso1 += 300;

caso1 -= 200;

caso1 *= 3;

caso1 /=2;

Este tipo de operadores de asignación se denominan compuestos.

4. Cada uno de los operadores se basa en el valor de la variable caso1 y va realizando la operación que indica el operador con el valor de la derecha; el resultado se sitúa en la parte izquierda de la sentencia siguiente. Existe otro operador de asignación combinado con el operador básico =; se trata del operador %= el cual permite calcular el resto de una operación y se asigna como resultado de la variable.

5. Además de asignar valores a variables, los operadores de asignación también pueden asignarse a propiedades, eventos o accesos a indizadores.

6. Los operadores de asignación son asociativos por la derecha. ¿Qué significa esto? Sencillamente, que las operaciones se agrupan de derecha a izquierda. Por ejemplo, una expresión de la forma caso1 = caso2 = caso3 se evalúa como caso1 = (caso2 = caso3).

011 Operadores de igualdad

JAVASCRIPT DISPONE DE DOS TIPOS DE operadores para deter-minar la igualdad entre valores. Los operadores denominados de igualdad y de desigualdad estricta (=== y !==) y los denominados de igualdad y de desigualdad normal (== y !=). Por las razones que se verán en este ejercicio, los expertos recomiendan utilizar los operadores estrictos y evitar, en la medida de lo posible, los normales.

1. En este ejercicio trataremos de describir y comprobar cómo se utilizan los distintos operadores de igualdad existentes en JavaScript. Empezaremos por los operadores estrictos, tanto de igualdad como de desigualdad.

2. El operador de igualdad estricta se representa con los signos === (3 signos de igualdad) y el de desigualdad estricta con la combinación de signos !== (1 signo de exclamación cerrado y 2 signos de igualdad).

3. Estos operadores consideran sólo aquellos valores que son del mismo tipo para ser iguales. Los valores de diferentes tipos no son nunca estrictamente iguales. Si los dos valores escritos en la sentencia son del mismo tipo, entonces el resultado es estrictamente igual.

4. Los comparadores de igualdad estrictos pueden comparar dos números, pares de datos booleanos, pares de datos de cadenas de texto, objetos... En todos estos casos, la igualdad está garantizada.

Los operadores de igualdad, sean del tipo que sean, no se pueden personalizar en JavaScript.

En sentencias condicionales, las siguientes comparaciones de igualdad estrictas darían como resultado el elemento incluido en cada comentario.

5. En cuanto al operador de desigualdad estricta (!==), éste equivale a la negación de una comparación de igualdad estricta:

caso1 !== caso2;

!(caso1 === caso2)

6. ¿Qué comportamiento tienen los operadores de igualdad normales? Estos comparadores (== y !=) realizan primero una conversión a un mismo tipo de dato para comprobar si ambos son iguales. Veamos en qué consisten estas conversiones.

En el caso de la comparación NaN == NaN , el resultado es siempre false, puesto que el elemento NaN no es número y no se puede comparar.

7. Si la sentencia contiene una cadena de texto y un número, el operador de igualdad convierte la cadena de texto en número para saber si ambos datos son iguales; esta comparación se realiza mediante un comparador de igualdad estricto.

8. Si la sentencia contiene un dato booleano y otro no booleano, el operador convierte el primero en un número y los compara de forma normal (== o !=).

9. En el caso en que la sentencia contenga un objeto y un número o una cadena de texto, el operador intentará convertir el objeto en un dato primitivo y realizará la comparación normal.

10. Es por este proceso de conversión que es altamente recomendable realizar las comparaciones mediante los operadores de igualdad estrictos.

IMPORTANTE

La conversión entre tipos de datos conlleva principalmente dos problemas: el primero de ellos es que las reglas de conversión en general pueden producir resultados inesperados y el segundo, que, debido a la indulgencia del operador, los errores de tipo pueden no resultar evidentes nunca.