javascript, piccolo ripasso di concetti base

Ciao, oggi facciamo un ripasso su concetti base di JavaScript con alcune novità introdotte da ES6 molto interessanti.

Variabili: let e var

Con JS è possibile dichiarare variabili con var e let. La differenza principale è lo scope.

• let → variabile valida solo nel blocco corrente (block scope)
• var → variabile function-scoped, disponibile in tutta la funzione

var a = 1;
if(a > 0){
  let b = 2;
  console.log(a); // 1
  console.log(b); // 2
}
console.log(a); // 1
console.log(b); // Errore: b non definita

Costanti: const

Come let, anche const ha block scope ma il valore è di sola lettura (non mutabile per valori primitivi).

const nome = 'hendrix';
nome = 'clapton'; // Errore!

Nota: se l'oggetto è un riferimento, le proprietà possono comunque essere mutate.

Template strings

Hei! C'è un nuovo modo di concatenare le stringe in città!
Non è più necessario usare + ma utilizzare questo template per avere un modo più pulito e ordinato. Apriamo e chiudiamo la nostra stringa con un backtick: (`) al posto dei classici apici ed inseriamo i nostri valori dinamici così:${var}.

let nome = 'Giamp';
let num1 = 5;
let num2 = 1;
let stringa = `Ciao ${nome}, sommando ${num1} + ${num2} ottieni: ${num1 + num2}`;

Ciclo for...of vs for...in

for...of cicla sui valori dell’array, for...in cicla sugli indici.

var data = ['fender','gibson','ibanez','jackson','musicman'];

for(const item in data){
  console.log(item);       // 0,1,2,3...
  console.log(data[item]); // fender, gibson...
}

for(const item of data){
  console.log(item);       // fender, gibson, ibanez...
}

Operatore spread e parametri rest

Spread operator

Permette di "diffondere" un array o un oggetto.

function myFoo(a,b,c){
  console.log(a,b,c);
}

let data = ['hendrix','deep purple','led zeppelin'];
myFoo(...data);

// Unire array
let gruppi_a = ['hendrix','deep purple','led zeppelin'];
let gruppi_b = ['van halen','acdc','aerosmith'];

let gruppi = [...gruppi_a, ...gruppi_b];
console.log(gruppi);

Spread funziona anche con oggetti:

let customer = {nome:'Giamp', checked:true};
let more = {role:'customer', date:'test'};
let nested = {write:true, delete:false};

let user = {
  ...customer,
  ...more,
  nested: nested
};
console.log(user);

Parametri rest

Permette di raccogliere più parametri in un array:

function myFoo(a, b, ...more){
  console.log(a);
  console.log(b);
  console.log(more); // ['data1','data2','data3', ...]
}

Arrow function

Nuova sintassi per funzioni anonime:

// classica
let sum = function(a,b){
  return a + b;
}

// arrow function
let sum2 = (a,b) => a + b;
let hello = () => 'hello world';

console.log(sum2(5,5)); // 10
console.log(hello());   // hello world

// Arrow su più linee
let sum3 = (a,b) => {
  let result = a + b;
  return result;
};

Promise

Rappresentano il completamento di un’operazione asincrona. Si usano then(), catch() e finally().

const promise = new Promise((resolve, reject) => {
  let condizione = true;
  if(condizione){
    resolve('promise accolta');
  } else {
    reject('promise rifiutata');
  }
});

promise
  .then(msg => console.log(msg))
  .catch(err => console.log(err))
  .finally(() => console.log('Operazione terminata'));

Per le versioni ES8+ si può usare async / await, di cui parlo in un altro articolo.

Moduli ES6

Permettono di importare ed esportare variabili, funzioni, classi tra file diversi.

// modulo.js
export var test = "valore";
export function sayHello(nome){
  return 'Ciao ' + nome;
}

// main.js - import selettivo
import { test, sayHello } from './modulo.js';
console.log(sayHello('Giamp'));
console.log(test);

// main.js - import completo
import * as MyModule from './modulo.js';
console.log(MyModule.sayHello('Giamp'));
console.log(MyModule.test);