JavaScript: Introduction

JavaScript is the programming language of the web. From a simple client-side scripting language, it has become one of the most widely used languages in the world.

What is JavaScript?

JavaScript is an interpreted, object-oriented, multi-paradigm programming language. It is the standard browser language and, thanks to Node.js, can also be run server-side.

Variables and Data Types

// Variable declaration
let name = "Mario";        // modifiable variable
const age = 30;            // constant, not modifiable
var old = "legacy";        // old way, avoid

// Primitive types
const string = "Hello";
const number = 42;
const boolean = true;
const nullValue = null;
const undefinedValue = undefined;
const symbol = Symbol('id');

Arrow Functions (ES6)

Arrow functions offer a more concise syntax for functions:

// Traditional function
function sum(a, b) {
  return a + b;
}

// Arrow function
const sum = (a, b) => a + b;

// With a single parameter
const double = x => x * 2;

// With function body
const greet = (name) => {
  const message = `Hello, ${name}!`;
  return message;
};

Template Literals

const name = "Mario";
const age = 30;

// Old way
console.log("My name is " + name + " and I am " + age + " years old");

// New way with template literals
console.log(`My name is ${name} and I am ${age} years old`);

// Multi-line
const message = `
  Hello ${name},
  welcome to our site!
`;

Destructuring

// Array destructuring
const colors = ['red', 'green', 'blue'];
const [first, second] = colors;

// Object destructuring
const user = { name: 'Mario', age: 30, city: 'Rome' };
const { name, age } = user;

// With aliases
const { name: userName, city: city } = user;

// Default values
const { role = 'user' } = user;

Spread and Rest Operator

// Spread operator
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };

// Rest operator
function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
sum(1, 2, 3, 4); // 10

Promises and Async/Await

// Promise
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data loaded!');
    }, 1000);
  });
};

// Usage with .then()
fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

// Usage with async/await
const loadData = async () => {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

ES6 Modules

// math.js
export const sum = (a, b) => a + b;
export const subtraction = (a, b) => a - b;
export default class Calculator { /* ... */ }

// main.js
import Calculator, { sum, subtraction } from './math.js';

Fundamental Array Methods

const numbers = [1, 2, 3, 4, 5];

// map - transforms each element
const doubles = numbers.map(n => n * 2);

// filter - filters based on condition
const evens = numbers.filter(n => n % 2 === 0);

// reduce - reduces to a single value
const sum = numbers.reduce((total, n) => total + n, 0);

// find - finds the first element that satisfies the condition
const firstEven = numbers.find(n => n % 2 === 0);

// some/every - verifies conditions
const hasEven = numbers.some(n => n % 2 === 0);    // true
const allPositive = numbers.every(n => n > 0);      // true

Conclusion

Modern JavaScript (ES6+) offers powerful tools for writing cleaner, more readable, and maintainable code. Mastering these features is essential for any web developer.