Рефакторинг коду на ES6+

Час застосувати знання ES6+! Тобі дано код, написаний у старому стилі (ES5). Перепиши його з використанням сучасних фіч.

Завдання

Перепиши кожен фрагмент, використовуючи відповідні ES6+ фічі.

1. var → let/const

// До:
var name = "Олексій";
var age = 25;
var items = [1, 2, 3];
for (var i = 0; i < items.length; i++) {
  console.log(items[i]);
}

2. Конкатенація → Template literals

// До:
var greeting = "Привіт, " + name + "! Тобі " + age + " років.";
var html = "<div class=\"card\">\n" +
  "  <h2>" + title + "</h2>\n" +
  "  <p>" + description + "</p>\n" +
  "</div>";

3. function → Arrow functions

// До:
var numbers = [1, 2, 3, 4, 5];
var doubled = numbers.map(function(n) { return n * 2; });
var even = numbers.filter(function(n) { return n % 2 === 0; });
var sum = numbers.reduce(function(acc, n) { return acc + n; }, 0);

setTimeout(function() {
  console.log("Готово!");
}, 1000);

4. Object properties → Shorthand + destructuring

// До:
function createUser(name, age, email) {
  return { name: name, age: age, email: email };
}

function displayUser(user) {
  var name = user.name;
  var age = user.age;
  var email = user.email;
  console.log(name + ", " + age + ", " + email);
}

var first = arr[0];
var second = arr[1];
var rest = arr.slice(2);

5. Default parameters + rest/spread

// До:
function greet(name) {
  name = name || "гість";
  console.log("Привіт, " + name + "!");
}

function mergeObjects(target, source) {
  var result = {};
  for (var key in target) { result[key] = target[key]; }
  for (var key in source) { result[key] = source[key]; }
  return result;
}

function sum() {
  var args = Array.prototype.slice.call(arguments);
  return args.reduce(function(a, b) { return a + b; }, 0);
}

6. Optional chaining + nullish coalescing

// До:
function getUserCity(user) {
  if (user && user.address && user.address.city) {
    return user.address.city;
  }
  return "Невідомо";
}

function getConfig(options) {
  var timeout = options && options.timeout !== null && options.timeout !== undefined
    ? options.timeout : 5000;
  return timeout;
}

Бонус: Повний рефакторинг

Перепиши цю функцію використовуючи всі вивчені фічі:

function processStudents(students, minGrade) {
  minGrade = minGrade || 70;
  var result = [];

  for (var i = 0; i < students.length; i++) {
    var student = students[i];
    var name = student.name;
    var grade = student.grade;
    var city = student.address && student.address.city
      ? student.address.city : "Невідомо";

    if (grade >= minGrade) {
      result.push({
        name: name,
        grade: grade,
        city: city,
        status: grade >= 90 ? "відмінник" : "хорошист"
      });
    }
  }

  result.sort(function(a, b) { return b.grade - a.grade; });
  return result;
}

Критерії оцінки