En ES6, introducimos let y const para declarar variables y constantes respectivamente.

// ES6 con let
let numero = 10
numero = 30  // Válido

// ES6 con const
const constante = 10
constante = 40  // Error: Asignación a constante

}

 </div>### Características principales:

- No permite redeclaración de la misma variable
- Presenta scope de bloque (block scope)
 
</section><section>Cadenas Multilínea y Plantillas
-------------------------------

ES6 introduce plantillas literales para facilitar la creación de cadenas con variables insertadas.

<div> ```
{
    const nombre = 'maría', edad = 25, html = ''
    
    // JavaScript tradicional
    html += '<div>' +
                '<p>' + nombre + '</p>' +
                '<p>' + edad + '</p>' +
            '</div>'
    
    // ES6 con plantillas literales
    html += `<div>
                <p>${nombre}</p>
                <p>${edad}</p>
            </div>`
}

Permite extraer valores de arrays u objetos en distintas variables de forma concisa.

// JavaScript tradicional
const nombre = datos.nombre
const apellido = datos.apellido

// ES6 con desestructuración
const {nombre, apellido} = datos

}

 </div>### Desestructuración en funciones:

<div> ```
{
    function obtenerDatos() {
        return {
            id: 1,
            email: 'ejemplo@correo.com'
        }
    }
    
    const {id, email} = obtenerDatos()
    console.log(id, email)
}

Las variables declaradas con let solo existen dentro del bloque donde fueron definidas.

// JavaScript tradicional
for(var i = 0; i < elementos.length; i++) {}
console.log(i)  // 5 (accesible fuera del bucle)

// ES6 con let
for (let j = 0; j < elementos.length; j++) {}
console.log(j)  // Error: j no está definida

}

 </div></section><section>Parámetros Predeterminados en Funciones
---------------------------------------

Permite asignar valores por defecto a los parámetros de una función.

<div> ```
{
    // JavaScript tradicional
    function calcular(a, b) {
        if (b === undefined){
            b = 0
        }
        return a + b
    }
    
    // ES6 con parámetros predeterminados
    function calcular(a, b = 0) {
        return a + b
    }
    
    console.log(calcular(5))    // 5
    console.log(calcular(5, 3)) // 8
}

Sintaxis más concisa para funciones y comportamiento diferente con this.

// JavaScript tradicional
const duplicados = numeros.map(function(numero) {
    return numero * 2
})

// ES6 con función de flecha
const multiplicados = numeros.map(numero => numero * 2)
const conIndice = numeros.map((numero, indice) => {
    return numero + indice
})

console.log(duplicados)
console.log(multiplicados)
console.log(conIndice)

}

 </div>### Manejo de `this`:

<div> ```
{
    function contexto() {
        const valores = [1, 2, 3]
        console.log('Función padre: ' + this)
        
        // JavaScript tradicional
        valores.forEach(function(valor){
            console.log('JS: ' + this)
        })
        
        // ES6 con función de flecha
        valores.forEach(valor => {
            console.log('ES6: ' + this)
        })
    }
    
    contexto.call({dato: 'valor'})
}

ES6 introduce una sintaxis más clara para crear objetos y heredar funcionalidades.

Comparación con funciones constructoras tradicionales:

    sumar(){
        return this.x + this.y
    }
}

var calc = new Calculadora(3, 4)
console.log(calc.sumar())

// Verificación de que las clases son azúcar sintáctico
console.log(typeof Calculadora)  // function
console.log(Calculadora === Calculadora.prototype.constructor)  // true
console.log(calc.__proto__ === Calculadora.prototype)  // true

}

 </div></section><section>Herencia
--------

ES6 simplifica la implementación de herencia entre clases.

### Herencia en JavaScript tradicional:

<div> ```
{
    function Animal(nombre){
        this.nombre = nombre
        this.comer = function(){
            console.log(this.nombre + ' está comiendo')
        }
    }
    
    function Perro(nombre){
        Animal.call(this, nombre)
        this.ladrar = function(){
            console.log(this.nombre + ' está ladrando')
        }
    }
    
    Perro.prototype = new Animal()
    
    var miPerro = new Perro('Firulais')
    miPerro.ladrar()
    miPerro.comer()
}

    comer(){
        console.log(`${this.nombre} está comiendo`)
    }
}

class Perro extends Animal{
    constructor(nombre){
        super(nombre)
        this.nombre = nombre
    }
    
    ladrar(){
        console.log(`${this.nombre} está ladrando`)
    }
}

const miPerro = new Perro('Rex')
miPerro.ladrar()
miPerro.comer()

}

 </div></section><section>Promesas
--------

Las promesas en ES6 permiten manejar operaciones asíncronas de manera más estructurada.

### Manejo tradicional de operaciones asíncronas:

<div> ```
{
    function cargarImagen(url, exito, error) {
        var img = document.createElement('img')
        img.onload = function(){
            exito && exito(img)
        }
        img.onerror = function(){
            error()
        }
        img.src = url
    }
    
    var url = 'https://....jpg'
    cargarImagen(url, function(){
        console.log('Imagen cargada exitosamente')
    }, function(){
        console.log('Error al cargar la imagen')
    })
}

var url = 'https://....jpg'
var resultado = cargarImagen(url)

resultado.then(function(img){
    console.log('Éxito', img)
}, function(){
    console.log('Fallo')
})

// Manejo encadenado
resultado.then(function(img){
    console.log('Altura de imagen', img.height)
})

}

 </div></section><section>Módulos
-------

ES6 introduce un sistema de módulos nativo para organizar el código.

### Exportación e importación nombrada:

<div> ```
// Archivo: utilidades.js
export let version = '1.0.0'

export function saludar(){
    console.log('Hola desde el módulo')
}

export class Calculadora {
    sumar(a, b) {
        return a + b
    }
}

console.log(version) saludar() const calc = new Calculadora() console.log(calc.sumar(5, 3))

 </div>### Exportación por defecto:

<div> ```
// Archivo: config.js
let entorno = 'produccion'

function getEntorno() {
    return entorno
}

class Config {
    get(key) {
        return this[key]
    }
}

export default {
    entorno,
    getEntorno,
    Config
}

console.log(configuracion.entorno) console.log(configuracion.getEntorno()) const config = new configuracion.Config() console.log(config.get('entorno'))

 </div></section>