Conceptos Básicos de JavaScript

Este artículo explica los fundamentos de JavaScript.

YouTube Video

Ejecutando ¡Hola Mundo!

Visión General de JavaScript

JavaScript es uno de los lenguajes de programación más utilizados en el desarrollo web. Se utiliza principalmente para agregar elementos dinámicos a las páginas web, permitiendo la manipulación de la interfaz de usuario, la transmisión de datos y la creación de animaciones. Puede operar del lado del cliente (en un navegador) y del lado del servidor utilizando tecnologías como Node.js. Debido a su simplicidad y flexibilidad, es fácil de aprender para principiantes y es ampliamente utilizado por desarrolladores profesionales.

Variables en JavaScript

Las variables en JavaScript son como contenedores que se utilizan para almacenar y reutilizar datos. Al usar variables, puedes mantener y manipular valores en tu programa.

Declaración de Variables

En JavaScript hay tres palabras clave para declarar variables.

• var: Un método antiguo para declarar variables, pero manejar su alcance es complejo y requiere precaución. Está basado en el alcance de funciones.

1var x = 10;

• let: Introducido en ES6, es una forma de declarar variables con alcance de bloque. Se puede reasignar pero no se puede redeclarar en el mismo ámbito.

1let y = 20;

• const: Se utiliza para declarar variables que son inmutables (constantes). Tiene alcance de bloque y no se puede reasignar ni redeclarar después de su declaración.

1const z = 30;

Alcance

Las variables tienen el concepto de alcance.

Alcance global

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"

• Las variables de alcance global son accesibles desde cualquier lugar. Las variables declaradas con var tienen alcance global o de función, pero let y const tienen alcance de bloque.

Ámbito de Bloque

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

• Alcance de bloque: Las variables declaradas con let o const son válidas únicamente dentro de {} (llaves).

• Se produce un error al acceder desde fuera de {} (corchetes rizados).

Ámbito de Función

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

• Alcance de función: Las variables y funciones definidas dentro de una función no se pueden acceder desde fuera de la función. Las variables declaradas dentro de una función con var pertenecen a este ámbito.

• En este ejemplo, la variable functionVar se puede acceder desde fuera de las {} (llaves) siempre que esté dentro del alcance de la función. Por otro lado, acceder a la variable functionScoped desde fuera del alcance de la función genera un error.

Por lo tanto, las variables declaradas con var tienen solo alcance de función y no alcance de bloque, lo que representa un riesgo de ser usadas en ámbitos inesperados. Es preferible usar const para variables que no cambian y usualmente usar let, evitando el uso de var tanto como sea posible.

Tipos de Datos

Las variables de JavaScript pueden almacenar valores de varios tipos de datos. Existen string para manejar texto y number para manejar valores numéricos.

Los principales tipos de datos son los siguientes:.

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);

• Tipos primitivos:
  • number: Maneja valores numéricos (enteros y números de punto flotante).
  • string: Maneja cadenas de caracteres.
  • boolean: Maneja valores booleanos true o false.
  • null: Representa explícitamente un valor de 'nada'.
  • undefined: Un valor asignado automáticamente a las variables que no han sido inicializadas.
  • Symbol: Un tipo de dato utilizado para crear valores únicos.

 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));

• Tipos de objetos:
  • Object: Una estructura de datos con múltiples propiedades.
  • Array: Una lista que contiene múltiples valores.
  • Function: Un objeto de función.

Asignación y Reasignación a Variables

Las variables declaradas con let o var pueden reasignarse, pero const no puede reasignarse una vez declarada.

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

Elevación de Variables

En JavaScript, existe un fenómeno donde las declaraciones de variables se 'elevan' al inicio de su alcance. Las variables declaradas con var son elevadas, pero usar let o const antes de su declaración produce un error.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10

• En este caso, las variables declaradas con var son elevadas, y sus valores se imprimen.

1console.log(b); // ReferenceError
2let b = 20;

• Las variables declaradas con let no son elevadas, lo que resulta en un error.

Uso correcto de variables

Considera los siguientes puntos para el uso correcto de las variables.

• Prefiere usar const y evita usar var.
• Sigue las convenciones de nombres de variables.
  • Usa camelCase, como userName o totalPrice.
  • Evita nombres ambiguos como data o value, y usa nombres significativos para mejorar la legibilidad.
  • Un nombre de variable no puede comenzar con un número, por lo que nombres como 1variable no están permitidos.
• El uso excesivo de variables globales puede causar ambigüedad de alcance y generar errores, así que evítalas siempre que sea posible.

Resumen

• var: Un método antiguo de declaración de variables que tiene alcance de función.
• let: Una variable de alcance de bloque que puede reasignarse.
• const: Una variable de alcance de bloque que no puede reasignarse (constante).
• Es importante usar variables de acuerdo con sus tipos de datos y considerar su alcance.

¿Qué son los caracteres de escape en JavaScript?

Los caracteres de escape son un método usado para representar caracteres con significados especiales dentro de literales de cadena normales. En JavaScript, los caracteres de escape se introducen con una barra invertida \ para añadir efectos especiales a una cadena o incluir caracteres de control. Los caracteres de escape son útiles para incluir elementos como saltos de línea, tabulaciones o comillas en una cadena.

Ejemplos de uso de caracteres de escape

A continuación, se presentan algunos códigos de ejemplo que utilizan caracteres de escape.

Escapando comillas dobles y simples

Utiliza caracteres de escape para representar comillas dobles o simples dentro de una cadena.

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

Escapando barras invertidas

Para incluir una barra invertida en una cadena, escápala con \.

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

Escapando saltos de línea y tabulaciones

Puedes insertar saltos de línea y tabulaciones para hacer que las cadenas largas sean más legibles.

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

Escapando caracteres Unicode

El uso de secuencias de escape Unicode te permite representar caracteres específicos con códigos hexadecimales.

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

Notas

El uso excesivo de escapes puede perjudicar la legibilidad

El uso excesivo de caracteres de escape puede reducir la legibilidad de tu código. Es especialmente importante usar los caracteres de escape de manera prudente en cadenas largas.

Considera usar literales de plantilla

En JavaScript, los literales de plantilla usando acentos graves te permiten incluir saltos de línea o expresiones embebidas sin caracteres de escape.

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

Resumen

Los caracteres de escape son esenciales para representar caracteres especiales o de control dentro de cadenas. Escapando comillas simples o dobles y añadiendo saltos de línea o tabulaciones, puedes crear cadenas más flexibles. Sin embargo, el uso excesivo de caracteres de escape puede dificultar la lectura del código, por lo que considera usar literales de plantilla cuando sea apropiado.

Versiones de JavaScript

JavaScript tiene una especificación estándar llamada ECMAScript (ES). JavaScript ha evolucionado basándose en este estándar. A continuación, se encuentra una breve descripción de sus versiones principales.

• ES3 (1999)

  La primera versión ampliamente adoptada. Se establecieron la sintaxis y las características básicas.

• ES5 (2009)

  Se introdujo el modo estricto y se añadieron nuevas características como Array.prototype.forEach, Object.keys, etc.

• ES6 / ES2015 (2015)

  Se ha realizado una actualización importante en JavaScript. Se introdujeron muchas características fundamentales para el JavaScript moderno, como let, const, arrow functions, clases, promesas, módulos, etc.

• ES7 / ES2016 (2016)

  Se añadieron Array.prototype.includes y el Operador de Exponenciación (**).

• ES8 / ES2017 (2017)

  Se introdujo async/await, lo cual simplifica la escritura de procesos asíncronos.

• ES9 / ES2018 (2018)

  Se añadieron iteradores asíncronos y las Propiedades Rest/Spread.

• ES10 / ES2019 (2019)

  Se añadieron flatMap y Object.fromEntries.

• ES11 / ES2020 (2020)

  Se añadieron Optional Chaining (?.) y el Nullish Coalescing Operator (??), permitiendo que el código se escriba de forma más sencilla y segura.

• ES12 / ES2021 (2021)

  Se añadieron String.prototype.replaceAll y Promise.any, entre otros.

• ES13 / ES2022 (2022)

  Se añadieron Array.prototype.at y campos private de clase (#field), entre otros.

• ES14 / ES2023 (2023)

  Se añadieron Array.prototype.toSorted y Symbol.prototype.description, entre otros.

• ES15 / ES2024 (2024)

  Se añadieron Promise.withResolvers para una gestión más sencilla de Promise y ArrayBuffer redimensionable, entre otros.

El JavaScript actual se actualiza cada año, y se añaden nuevas características incluso en la versión más reciente.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video