S02L04 - Palabras clave, tipos de datos en JavaScript

html

Comprendiendo las Palabras Clave y Tipos de Datos de JavaScript: Una Guía Completa
Tabla de Contenidos

Introducción ..........................................................1
Palabras Clave de JavaScript ...................................3

Palabras Clave Reservadas ..................................4
Palabras Clave Nuevas de ES6 ..............................6
Palabras Clave Obsoletas ...................................8


Tipos de Datos de JavaScript ..............................10

Tipos de Datos Primitivos .........................11
Tipos de Datos Complejos ............................14
Tipificación Dinámica en JavaScript .........17


Conclusión ............................................................20


Introducción
JavaScript es un lenguaje de programación versátil y ampliamente utilizado que permite a los desarrolladores crear aplicaciones web dinámicas e interactivas. Un aspecto fundamental para dominar JavaScript radica en comprender sus palabras clave y tipos de datos, que son componentes esenciales para escribir código eficiente y sin errores.
En esta guía, profundizamos en las diversas palabras clave disponibles en JavaScript, incluyendo aquellas introducidas en ES6 y las que se han vuelto obsoletas con el tiempo. También exploramos los diferentes tipos de datos, que van desde tipos primitivos como cadenas y números hasta tipos complejos como objetos y funciones. Ya seas un principiante o estés buscando reforzar tus conocimientos fundamentales, esta guía ofrece una visión completa para mejorar tus habilidades de programación en JavaScript.
Puntos Clave Cubiertos:

Lista completa y explicación de las palabras clave de JavaScript
Descripción detallada de los tipos de datos de JavaScript
Comprensión de la tipificación dinámica en JavaScript
Ejemplos prácticos y fragmentos de código para una mejor comprensión

Pros y Contras:
Pros:

Mejora la legibilidad y mantenibilidad del código
Previene errores comunes de programación
Facilita una gestión eficiente de la memoria

Contras:

Las palabras clave reservadas no pueden usarse como nombres de variables o funciones, lo que podría limitar la flexibilidad en la nomenclatura
La tipificación dinámica a veces puede llevar a problemas inesperados de coerción de tipos

Cuándo y Dónde Usar:
Comprender las palabras clave y los tipos de datos es crucial en todas las etapas del desarrollo de JavaScript, ya sea que estés:

Construyendo aplicaciones web con frameworks como React
Desarrollando servicios backend usando Node.js
Escribiendo scripts para automatización o procesamiento de datos

Tabla Comparativa: Palabras Clave de JavaScript Legado vs. Moderno


Característica
Palabras Clave de JavaScript Legado
Palabras Clave de JavaScript ES6+


Declaraciones de Variables
var
let, const


Control de Iteración
var, function
let, const, for...of, for...in


Definiciones de Funciones
function
Funciones de Flecha (=>)


Módulos
Ninguno
import, export



Palabras Clave de JavaScript
Las palabras clave en JavaScript son palabras reservadas que tienen significados especiales para la sintaxis del lenguaje. Juegan un papel fundamental en la definición de la estructura y el comportamiento del código. Es esencial comprender estas palabras clave para evitar conflictos y errores en tus programas.
Palabras Clave Reservadas
Las palabras clave reservadas son términos que forman parte de la sintaxis del lenguaje JavaScript y no pueden usarse como identificadores (nombres de variables, nombres de funciones, etc.).
Lista de Palabras Clave Reservadas:

Palabras Clave de Control de Flujo: if, else, switch, case, default, for, while, do, break, continue, return, try, catch, finally, throw
Palabras Clave de Declaración de Variables: var, let, const
Palabras Clave de Función: function
Palabras Clave de Clase: class, extends, super
Otros: true, false, null, undefined, new, this, typeof, instanceof, delete, in, void, with, yield, await

Ejemplo de Uso:




		
		
			
			
Java
			
			    // Using reserved keywords correctly
    function greet(name) {
        if (name) {
            return `Hello, ${name}!`;
        } else {
            return 'Hello, World!';
        }
    }
			
				
					
				
					1
2
3
4
5
6
7
8
				
						    // Using reserved keywords correctly
    function greet(name) {
        if (name) {
            return `Hello, ${name}!`;
        } else {
            return 'Hello, World!';
        }
    }
					
				
			
		


Palabras Clave Nuevas de ES6
Con la introducción de ES6 (ECMAScript 2015), surgieron varias nuevas palabras clave para soportar las características modernas de JavaScript, mejorando las capacidades del lenguaje.
Lista de Palabras Clave de ES6:

Declaración de Alcance de Bloque: let, const
Clases e Herencia: class, extends, super
Módulos: import, export
Funciones de Flecha: => (sintaxis de función flecha)
Promesas y Programación Asíncrona: async, await
Otros: yield, static, get, set, of

Ejemplo de Uso:




		
		
			
			
Java
			
			    // Using ES6 keywords: class, extends, constructor, super
    class Person {
        constructor(name) {
            this.name = name;
        }
    
        greet() {
            return `Hello, ${this.name}!`;
        }
    }
    
    class Employee extends Person {
        constructor(name, position) {
            super(name);
            this.position = position;
        }
    
        describe() {
            return `${this.name} is a ${this.position}.`;
        }
    }
    
    const employee = new Employee('Alice', 'Developer');
    console.log(employee.greet());     // Output: Hello, Alice!
    console.log(employee.describe());  // Output: Alice is a Developer.
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
				
						    // Using ES6 keywords: class, extends, constructor, super
    class Person {
        constructor(name) {
            this.name = name;
        }
    
        greet() {
            return `Hello, ${this.name}!`;
        }
    }
    
    class Employee extends Person {
        constructor(name, position) {
            super(name);
            this.position = position;
        }
    
        describe() {
            return `${this.name} is a ${this.position}.`;
        }
    }
    
    const employee = new Employee('Alice', 'Developer');
    console.log(employee.greet());     // Output: Hello, Alice!
    console.log(employee.describe());  // Output: Alice is a Developer.
					
				
			
		


Palabras Clave Obsoletas
Con el tiempo, ciertas palabras clave se han vuelto obsoletas o reservadas para uso futuro, y su uso está desaconsejado en el desarrollo moderno de JavaScript.
Lista de Palabras Clave Obsoletas:

abstract, boolean, byte, char, double, final, float, goto, int, interface, long, native, package, private, protected, public, short, static, synchronized, throws, transient, volatile

Ejemplo de Uso:




		
		
			
			
Java
			
			    // Deprecated usage: throw and throws
    // It's recommended to use only 'throw' in modern JavaScript
    
    // Correct Usage:
    function checkValue(value) {
        if (value === undefined) {
            throw new Error('Value cannot be undefined');
        }
    }
    
    try {
        checkValue();
    } catch (error) {
        console.error(error.message);  // Output: Value cannot be undefined
    }
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
				
						    // Deprecated usage: throw and throws
    // It's recommended to use only 'throw' in modern JavaScript
    
    // Correct Usage:
    function checkValue(value) {
        if (value === undefined) {
            throw new Error('Value cannot be undefined');
        }
    }
    
    try {
        checkValue();
    } catch (error) {
        console.error(error.message);  // Output: Value cannot be undefined
    }
					
				
			
		


Nota: Evita usar palabras clave obsoletas para asegurar la compatibilidad futura y adherencia a las mejores prácticas de codificación.

Tipos de Datos de JavaScript
JavaScript soporta varios tipos de datos, categorizados ampliamente en tipos primitivos y complejos (referencia). Comprender estos tipos de datos es fundamental para manipular y almacenar datos de manera efectiva en tus aplicaciones.
Tipos de Datos Primitivos
Los tipos de datos primitivos son los tipos de datos más básicos en JavaScript. Son inmutables y contienen sus valores directamente.
Lista de Tipos de Datos Primitivos:

String
Number
Boolean
Undefined
Null
Symbol (introducido en ES6)
BigInt (introducido en ES2020)

1. String
Una secuencia de caracteres utilizada para representar texto.
Ejemplo:




		
		
			
			
Java
			
			    let greeting = "Hello, World!";
    console.log(greeting);  // Output: Hello, World!
			
				
					
				
					1
2
				
						    let greeting = "Hello, World!";
    console.log(greeting);  // Output: Hello, World!
					
				
			
		


2. Number
Representa tanto números enteros como de punto flotante.
Ejemplo:




		
		
			
			
Java
			
			    let age = 25;            // Integer
    let price = 19.99;       // Floating-point number
    let largeNumber = 1e6;   // Exponential notation (1000000)
    console.log(age, price, largeNumber); // Output: 25 19.99 1000000
			
				
					
				
					1
2
3
4
				
						    let age = 25;            // Integer
    let price = 19.99;       // Floating-point number
    let largeNumber = 1e6;   // Exponential notation (1000000)
    console.log(age, price, largeNumber); // Output: 25 19.99 1000000
					
				
			
		


3. Boolean
Representa una entidad lógica y puede tener dos valores: true o false.
Ejemplo:




		
		
			
			
Java
			
			    let isStudent = true;
    let hasGraduated = false;
    console.log(isStudent, hasGraduated); // Output: true false
			
				
					
				
					1
2
3
				
						    let isStudent = true;
    let hasGraduated = false;
    console.log(isStudent, hasGraduated); // Output: true false
					
				
			
		


4. Undefined
Una variable que ha sido declarada pero no asignada a un valor es de tipo undefined.
Ejemplo:




		
		
			
			
Java
			
			    let x;
    console.log(x); // Output: undefined
			
				
					
				
					1
2
				
						    let x;
    console.log(x); // Output: undefined
					
				
			
		


5. Null
null es un valor de asignación que representa no tener valor o no tener objeto.
Ejemplo:




		
		
			
			
Java
			
			    let selectedItem = null;
    console.log(selectedItem); // Output: null
			
				
					
				
					1
2
				
						    let selectedItem = null;
    console.log(selectedItem); // Output: null
					
				
			
		


6. Symbol (ES6)
Se utiliza para crear identificadores únicos para propiedades de objetos.
Ejemplo:




		
		
			
			
Java
			
			    let sym1 = Symbol('description');
    let sym2 = Symbol('description');
    console.log(sym1 === sym2); // Output: false
			
				
					
				
					1
2
3
				
						    let sym1 = Symbol('description');
    let sym2 = Symbol('description');
    console.log(sym1 === sym2); // Output: false
					
				
			
		


7. BigInt (ES2020)
Representa números enteros más grandes que 2^53 - 1, que es el número más grande que JavaScript puede representar de manera confiable con el tipo Number.
Ejemplo:




		
		
			
			
Java
			
			    let bigNumber = 123456789012345678901234567890n;
    console.log(bigNumber); // Output: 123456789012345678901234567890n
			
				
					
				
					1
2
				
						    let bigNumber = 123456789012345678901234567890n;
    console.log(bigNumber); // Output: 123456789012345678901234567890n
					
				
			
		


Tipos de Datos Complejos
Los tipos de datos complejos son objetos que pueden almacenar colecciones de datos y entidades más complejas.
1. Object
Los objetos son colecciones de pares clave-valor. Son versátiles y forman la columna vertebral de la programación en JavaScript.
Ejemplo:




		
		
			
			
Java
			
			    let person = {
        firstName: "John",
        lastName: "Doe",
        age: 30
    };
    console.log(person.firstName); // Output: John
			
				
					
				
					1
2
3
4
5
6
				
						    let person = {
        firstName: "John",
        lastName: "Doe",
        age: 30
    };
    console.log(person.firstName); // Output: John
					
				
			
		


2. Array
Las arrays son colecciones ordenadas de datos, que pueden incluir elementos de diferentes tipos de datos.
Ejemplo:




		
		
			
			
Java
			
			    let fruits = ["Apple", "Banana", "Cherry"];
    console.log(fruits[1]); // Output: Banana
			
				
					
				
					1
2
				
						    let fruits = ["Apple", "Banana", "Cherry"];
    console.log(fruits[1]); // Output: Banana
					
				
			
		


3. Function
Las funciones son objetos de primera clase en JavaScript, lo que significa que pueden asignarse a variables, pasarse como argumentos y devolverse desde otras funciones.
Ejemplo:




		
		
			
			
Java
			
			    // Function assigned to a variable
    let greet = function(name) {
        return `Hello, ${name}!`;
    };
    
    console.log(greet("Alice")); // Output: Hello, Alice!
			
				
					
				
					1
2
3
4
5
6
				
						    // Function assigned to a variable
    let greet = function(name) {
        return `Hello, ${name}!`;
    };
    
    console.log(greet("Alice")); // Output: Hello, Alice!
					
				
			
		


Tipificación Dinámica en JavaScript
JavaScript es un lenguaje tipado dinámicamente, lo que significa que los tipos de variables se determinan en tiempo de ejecución y pueden cambiar según sea necesario.
Ejemplo:




		
		
			
			
Java
			
			    let data = "Hello";
    console.log(typeof data); // Output: string
    
    data = 100;
    console.log(typeof data); // Output: number
    
    data = true;
    console.log(typeof data); // Output: boolean
			
				
					
				
					1
2
3
4
5
6
7
8
				
						    let data = "Hello";
    console.log(typeof data); // Output: string
    
    data = 100;
    console.log(typeof data); // Output: number
    
    data = true;
    console.log(typeof data); // Output: boolean
					
				
			
		


Ventajas:

Flexibilidad en la codificación
Ciclos de desarrollo rápidos

Desventajas:

Potencial para errores en tiempo de ejecución
Más difícil de depurar problemas relacionados con tipos

Ejemplos Prácticos y Fragmentos de Código
A continuación se muestra un ejemplo completo que demuestra varios tipos de datos y palabras clave discutidas:




		
		
			
			
Java
			
			    // Example: Managing a list of students
    
    // Using 'let' and 'const' keywords
    const className = "Introduction to JavaScript";
    let students = ["Alice", "Bob", "Charlie"];
    
    // Function to add a new student
    function addStudent(name) {
        if (typeof name !== 'string') {
            throw new TypeError('Name must be a string');
        }
        students.push(name);
        console.log(`${name} has been added to ${className}.`);
    }
    
    // Adding a new student
    addStudent("David"); // Output: David has been added to Introduction to JavaScript.
    
    // Adding an undefined student (will throw an error)
    try {
        addStudent(undefined);
    } catch (error) {
        console.error(error.message); // Output: Name must be a string
    }
    
    // Displaying all students
    console.log(students); // Output: ["Alice", "Bob", "Charlie", "David"]
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
				
						    // Example: Managing a list of students
    
    // Using 'let' and 'const' keywords
    const className = "Introduction to JavaScript";
    let students = ["Alice", "Bob", "Charlie"];
    
    // Function to add a new student
    function addStudent(name) {
        if (typeof name !== 'string') {
            throw new TypeError('Name must be a string');
        }
        students.push(name);
        console.log(`${name} has been added to ${className}.`);
    }
    
    // Adding a new student
    addStudent("David"); // Output: David has been added to Introduction to JavaScript.
    
    // Adding an undefined student (will throw an error)
    try {
        addStudent(undefined);
    } catch (error) {
        console.error(error.message); // Output: Name must be a string
    }
    
    // Displaying all students
    console.log(students); // Output: ["Alice", "Bob", "Charlie", "David"]
					
				
			
		


Explicación:

Palabras Clave Usadas:

const para className haciéndolo inmutable.
let para students permitiendo modificaciones.


Tipos de Datos:

className es un String.
students es un Array de Strings.


Funcionalidad:

La función addStudent demuestra el uso del operador typeof para verificar tipos de datos y throw para manejar errores.


Salida:

Agrega exitosamente un nuevo estudiante y maneja tipos de datos incorrectos de manera adecuada.




Conclusión
Dominar las palabras clave y los tipos de datos de JavaScript es esencial para escribir código efectivo y eficiente. Al comprender las palabras clave reservadas, las nuevas incorporaciones desde ES6 en adelante, y las particularidades de los tipos de datos primitivos y complejos, los desarrolladores pueden aprovechar al máximo el poder de JavaScript para construir aplicaciones robustas.
Conclusiones Clave:

Palabras Clave definen la estructura y sintaxis de JavaScript y no deben usarse como identificadores.
Tipos de Datos en JavaScript se categorizan en tipos primitivos y complejos, cada uno cumpliendo propósitos distintos.
Tipificación Dinámica ofrece flexibilidad pero requiere manejo cuidadoso para evitar errores en tiempo de ejecución.
ES6 y Más Allá han introducido palabras clave y características poderosas que mejoran las capacidades de JavaScript.

Palabras Clave SEO Optimizado:
palabras clave de JavaScript, tipos de datos de JavaScript, palabras clave de ES6, programación en JavaScript, tipificación dinámica, tipos de datos primitivos, tipos de datos complejos, tutoriales de JavaScript, aprender JavaScript, JavaScript para principiantes, funciones de JavaScript, objetos de JavaScript, arrays de JavaScript, operador typeof, mejores prácticas de JavaScript, estándares de codificación de JavaScript

Código de Programa de Muestra con Explicación
A continuación se muestra un programa de JavaScript de muestra que demuestra el uso de varias palabras clave y tipos de datos discutidos en esta guía.




		
		
			
			
Java
			
			    // Sample Program: Student Management System
    
    // Using 'const' for immutable data
    const schoolName = "Tech Academy";
    
    // Using 'let' for mutable data
    let students = [];
    
    // Function to add a student
    function addStudent(name, age) {
        if (typeof name !== 'string') {
            throw new TypeError('Student name must be a string.');
        }
        if (typeof age !== 'number') {
            throw new TypeError('Student age must be a number.');
        }
        
        // Creating a student object
        const student = {
            name: name,
            age: age,
            enrolled: true
        };
        
        students.push(student);
        console.log(`${name} has been enrolled in ${schoolName}.`);
    }
    
    // Adding students
    addStudent("Emily", 22); // Output: Emily has been enrolled in Tech Academy.
    addStudent("Daniel", 25); // Output: Daniel has been enrolled in Tech Academy.
    
    // Displaying all students
    console.log(students);
    /*
    Output:
    [
        { name: 'Emily', age: 22, enrolled: true },
        { name: 'Daniel', age: 25, enrolled: true }
    ]
    */
    
    // Function to display student names
    function displayStudentNames() {
        students.forEach(function(student) {
            console.log(student.name);
        });
    }
    
    displayStudentNames();
    /*
    Output:
    Emily
    Daniel
    */
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
				
						    // Sample Program: Student Management System
    
    // Using 'const' for immutable data
    const schoolName = "Tech Academy";
    
    // Using 'let' for mutable data
    let students = [];
    
    // Function to add a student
    function addStudent(name, age) {
        if (typeof name !== 'string') {
            throw new TypeError('Student name must be a string.');
        }
        if (typeof age !== 'number') {
            throw new TypeError('Student age must be a number.');
        }
        
        // Creating a student object
        const student = {
            name: name,
            age: age,
            enrolled: true
        };
        
        students.push(student);
        console.log(`${name} has been enrolled in ${schoolName}.`);
    }
    
    // Adding students
    addStudent("Emily", 22); // Output: Emily has been enrolled in Tech Academy.
    addStudent("Daniel", 25); // Output: Daniel has been enrolled in Tech Academy.
    
    // Displaying all students
    console.log(students);
    /*
    Output:
    [
        { name: 'Emily', age: 22, enrolled: true },
        { name: 'Daniel', age: 25, enrolled: true }
    ]
    */
    
    // Function to display student names
    function displayStudentNames() {
        students.forEach(function(student) {
            console.log(student.name);
        });
    }
    
    displayStudentNames();
    /*
    Output:
    Emily
    Daniel
    */
					
				
			
		


Explicación del Código:

Constantes y Variables:

schoolName se declara usando const ya que el nombre de la escuela no cambia.
students se declara con let ya que vamos a agregar estudiantes a este array.


Función addStudent:

Parámetros: name (String), age (Number)
Verificación de Tipos: Utiliza typeof para asegurar los tipos de datos correctos.
Manejo de Errores: Lanza errores si los tipos de datos proporcionados son incorrectos.
Creación de Objeto: Crea un objeto student con las propiedades name, age y enrolled.
Agregar al Array: Empuja el objeto student al array students.
Salida en Consola: Confirma la inscripción.


Agregar Estudiantes:

Agrega dos estudiantes, Emily y Daniel, con sus respectivas edades.


Mostrar Estudiantes:

Muestra todo el array students mostrando los objetos de los estudiantes.


Función displayStudentNames:

Itera sobre el array students usando forEach.
Muestra el nombre de cada estudiante individualmente.



Salida:




		
		
			
			
Java
			
			Emily has been enrolled in Tech Academy.
Daniel has been enrolled in Tech Academy.
[
    { name: 'Emily', age: 22, enrolled: true },
    { name: 'Daniel', age: 25, enrolled: true }
]
Emily
Daniel
			
				
					
				
					1
2
3
4
5
6
7
8
				
						Emily has been enrolled in Tech Academy.
Daniel has been enrolled in Tech Academy.
[
    { name: 'Emily', age: 22, enrolled: true },
    { name: 'Daniel', age: 25, enrolled: true }
]
Emily
Daniel
					
				
			
		


Este programa de muestra demuestra la aplicación práctica de palabras clave como const, let, function, y tipos de datos como String, Number, y Object. También muestra el manejo de errores usando throw y la verificación de tipos con el operador typeof.
Nota: Que este artículo es generado por IA.
Característica	Palabras Clave de JavaScript Legado	Palabras Clave de JavaScript ES6+
Declaraciones de Variables	var	let, const
Control de Iteración	var, function	let, const, for...of, for...in
Definiciones de Funciones	function	Funciones de Flecha (=>)
Módulos	Ninguno	import, export