szymcio32
10/26/2019 - 5:32 PM

ES6 - main changes

  1. Domyślne wartości
  2. Template string
  3. Destructuring
  4. Arrow functions
  5. ESM - ECMAScript Modules
// 1. Domyślen wartości

function getName(name = 'Jan'){
    console.log(`'Name: ${name}`)
}


// 2. Template string

const name = 'Jan';
const text = `My name is ${name}
and I am 19 years old`

console.log(text)


// 3. Destructuring

const person = {
    first_name: 'Jan',
    age: 19,
    gender: 'male',
    previous_job: {
        first: 'taxi driver',
        last: 'seo specialist'
    },
    email: 'jan@gmail.com'
};

// wyciąganie kluczy do zmiennych
const {age, gender} = person;

// wyciaganie kluczy w argumentach funkcji
function printPerson({first_name, email}) {
    console.log(`Name ${first_name}, Email ${email}`)
}
printPerson(person);

// wyciąganie zagnieżdżonych obiektów
function lastJob({previous_job: {last}}) {
    console.log(`Last job: ${last}`)
}
lastJob(person);

// destrukturyzacja tablic
const pets = ['dog', 'cat', 'bird'];
const [first, second] = pets;


// 4. Arrow functions
// this w arrow functions wydobywany jest z najlbliższego kontekstu, jak go tam nie ma to idą level wyżej
const printPet_1 = (pet) => {
    return `The pet is ${pet}`
};

const printPet_2 = pet => `The pet is ${pet}`;


// 5. ESM - ECMAScript Modules

// Named export
// main.js
import { new_module } from './newModule';
// or
// import { new_module as some_name} from './newModule';
console.log(new_module);

// newModule.js
export const new_module = 'module: newModule.js';


// Default export - możliwy tylko 1 default export na plik, nazwa zmiennej przy importowaniu może być dowolna
// main.js
import v from './defaultModule';
console.log(defaultModule);

// defaultModule.js
const defaultModule = 'module: defaultModule.js';
export default defaultModule;