Согласно Википедии, JavaScript, часто обозначаемый аббревиатурой JS, является языком программирования, который соответствует спецификации ECMAScript. JavaScript - это высокоуровневый, часто скомпилированный точно в срок и мультипарадигмальный. Он имеет синтаксис фигурных скобок, динамическую типизацию, объектную ориентацию на основе прототипов и функции первого класса.

После ECMAScript 6 (ES6) сам JavaScript сильно изменился в истории языка. В этой статье я покажу вам интересные вещи, которые на самом деле делают нашу жизнь проще, чем раньше.

Итак, приступим!

Вот список из 10 функций, которые, я думаю, мне нужно обсудить в этом блоге, которые могут помочь вам понять.

  1. Подъем переменных
  2. Связывание блоков: Let и Const
  3. Параметры по умолчанию
  4. Параметры покоя и спреда
  5. Стрелочные функции
  6. Деструктурирующее назначение
  7. Обещания
  8. Классы
  9. Расширенные литералы объектов
  10. Шаблонные литералы
  11. Подъем переменных

Подъем - это механизм поведения по умолчанию в JavaScript, в котором объявления variable и function перемещаются в верхнюю часть текущей области перед выполнением кода.

Мы можем видеть в жизненном цикле обработки переменных JavaScript, что есть три части, такие как объявление, инициализация или присвоение и использование, как на следующем рисунке.

Мы не можем использовать или инициализировать какие-либо variable перед объявлением, а также это должно поддерживаться на уровне области видимости.

var a = 5;
function hoisting() {
  a = 1;
  var b = 2;
}

hoisting();

console.log(a);
/*
This is valid and considerable as a global variable outside hoisting() function
Result is 1
*/
console.log(b); // Error
/*
This is not accessible as a global variable because it is declared inside hoisting() scope
*/

Давайте посмотрим на другой пример объявления function.

// function declaration
function student(name, id) {
    return `Name is ${name} and id is ${id}`;
}
let result = student('Mostafa', 101);
console.log(result);
// Name is Mostafa and id is 101

Это обычная функция, которая хорошо работает. Он также будет хорошо работать, если я объявлю function после вызова function из-за самого его объявления, а не выражения. Давайте посмотрим.

let result = student('Mostafa', 101);
console.log(result);
// Name is Mostafa and id is 101
// function declaration
function student(name, id) {
    return `Name is ${name} and id is ${id}`;
}

Но теперь, если я назначу функцию для variable, она будет считаться function expression и не будет использоваться до инициализации.

let result = student('Mostafa', 101);
console.log(result);
// Name is Mostafa and id is 101
// function expression
const student = (name, id) => {
    return `Name is ${name} and id is ${id}`;
}
// Uncaught ReferenceError: Cannot access 'student' before initialization

Здесь ученик - это переменная aconst, но она используется перед инициализацией. Итак, он возвращает areference error.

Но теперь, если я сначала инициализирую студентов, а затем использую его, он станет доступным. Давайте посмотрим!

// function expression
const student = (name, id) => {
    return `Name is ${name} and id is ${id}`;
}
let result = student('Mostafa', 101);
console.log(result);
// Name is Mostafa and id is 101

2. Связывание блоков: Var, Let и Const

Объявления переменных сvar рассматриваются так, как если бы они находились наверху function, или они рассматриваются как глобальная область видимости, если они объявлены вне function.

Чтобы получить четкое представление об этом, рассмотрим следующее определение функции:

function getName(name) {

    if (name) {
        var result = `Hello ${name}`;

        return result;
    } else {

        // result exists here with a value of undefined

        return null;
    }

        // result exists here with a value of undefined
}

Здесь мы видим, что var объявлен в области действия блока if, которая не является глобальной областью, а в движке JavaScript, за сценой сама функция getName была изменена на это;

function getName(name) {

    var result;

    if (name) {
        result= `Hello ${name}`;

        return result;
    } else {

        return null;
    }
}

Вот почему мы можем получить к нему доступ как в области elseblock, так и в области getName функции. Но это не глобальная переменная, доступная глобально.

Теперь, если мы используем let вместо var, ситуация кардинально изменится. Давайте посмотрим на пример,

function getName(name) {

    if (name) {
        let result = `Hello ${name}`;

        return result;
    } else {

        // result does not exist here

        return null;
    }
    // result does not exist here
}

Это связано с поведением ES6 let, поскольку движок JavaScript не позволяет поднять let на верхний уровень текущей области действия блока. Еще одно различие var иlet состоит в том, что let нельзя повторно объявить как var.

Например,

var num = 1;
let num = 2;
// Throw an error 
if (condition) {

    let num = 3;

    // Does not throw any error 
}

Здесь первый let недоступен из-за num повторного объявления, но второй let действителен, потому что он находится в областиif блока.

3. Параметр по умолчанию

Параметр по умолчанию означает, что когда именованный параметр не передается без значения или undefined,, он позволяет инициализировать именованные параметры значениями по умолчанию во время объявления функции.

function modulus(a, b) {
      
     return a % b;
}

modulus(5, 2);  // 1
modulus(5);    // NaN

Второй результат - NaN, потому что все требования аргумента не выполнены.

Но когда мы присваиваем значение b по условию, это работает хорошо.

function modulus(a, b) {
  b = (typeof b !== 'undefined') ?  b : 2
  return a % b;
}

modulus(5, 2);  // 1
modulus(5);    // 1

По сути, параметр по умолчанию помогает нам обрабатывать значение NaN в этом случае, когда пользователь заполняет не все поля ввода.

Давайте посмотрим на реальный пример!

function modulus(a, b = 2) {
    return a % b;
}

modulus(5, 2);  // 1
modulus(5);    // 5

Думаю, теперь об этом стало яснее.

4. Параметры покоя и спреда

Самая удивительная тема для меня - остальное и распространение, потому что они выглядят совершенно одинаково, но смысл совершенно другой. Синтаксис таков, что (...) и его представление зависят только от того, где он используется, как он используется. Иногда это сбивает с толку разработчиков, когда это видно во фрагменте кода.

Я буду стараться изо всех сил, чтобы легко показать вам использование в различных ситуациях.

Оператор распространения распаковывает собранные элементы, такие как массивы, в отдельные элементы. Но Rest Operator собирает все оставшиеся элементы в массив или объект.

Например,

const arrOne = [‘I’, ‘love’, ‘Programming’]
const arrTwo = [‘Programming’, ‘is’, ‘life’] 
const arr3 = [arrOne, arrTwo];console.log(arr3);
// [ [ ‘I’, ‘love’, ‘Programming’ ], [‘Programming’, ‘is’, ‘life’]]

Это нормальное использование объединения массивов. Теперь я использую Spread (...) в массиве, чтобы распаковать массив, похожий на [[,,],[,,]] = ›[,,,,]

const arrThree = [...arrOne, 'and', ...arrTwo]
console.log(arrThree);
// [ 'I', 'love', 'Programming', 'Programming', 'is', 'life']

Теперь использую rest (...) на массиве [ ]

// Destructuring arrOne
const [idx1, ...restArrValue] = arrOne;
console.log(idx1, restArrValue);
// I [ 'love', 'Programming' ]

Снова выкладываю для распаковки массива

console.log(idx1, ...restArrValue);
// I love Programming

Теперь я покажу вам остальное и расскажу об использовании объекта, значение которого такое же, как и раньше.

Создадим объект как обычно.

const person = {    
    name: 'Mostafa',
    age: 30,    
    gender: 'male',    
    status: 'developer'
}

Теперь я назначаю объекту новое свойство и использую оператор распространения для распаковки объекта person

const updatePerson = { 
   // spread for unpacking the object { { }, { }} ===> { }         
   ...person,    
   degree: 'MSC'
}
console.log(updatePerson);
/*
 { 
    name: 'Mostafa', 
    age: 30, 
    gender: 'male',
    status: 'developer',
    degree: 'MSC'
 }
*/

Снова используя оператор rest для обновленного объекта updatePerson

const {    
  name,
  ...restObjValue
} = updatePerson;
console.log(name, restObjValue);
// Mostafa { age: 30, gender: 'male', status: 'developer' }

Я надеюсь, что использование оператора rest и spread в JavaScript ES6 имеет для вас смысл.

5. Стрелочные функции

Выражение функции стрелки - это компактная альтернатива традиционному выражению функции, но оно ограничено и не может использоваться во всех ситуациях согласно MDN.

Стрелочная функция используется в выражении единственной функции

const add = (num1 = 0, num2 = 2) => { 
    return num1 + num2;
}
console.log(add(undefined, 1)); // 1
console.log(add(1)); // 3

Вернуть один оператор, фигурные скобки { } не нужны, и ключевое слово return

const multiply = (num1 = 0, num2 = 2) => num1 * num2;
console.log(multiply(undefined, 1)); // 0
console.log(multiply(1)); // 2 
const area = (length, width) => length * width;
console.log(area(5, 3)); // 15

Когда используется один / только один параметр, нет необходимости использовать скобку ()

const modulus = num1 => num1 % 3;
console.log(modulus(1)); // 1
console.log(modulus(3)); // 0

Если параметра нет, используйте скобку ()

const selfItem = () => 1;
console.log(selfItem());

Если вы создаете функцию в объекте, нет необходимости использовать стрелочную функцию. Например,

const bio = {    
    name: 'Mostafa',    
    age: 29,    
    profession: 'Web Developer',    
    showBio: function () {        
        console.log(this);        
         /* Here this means the full object itself. Output is:   
         {      
             name: 'Mostafa',            
             age: 29,            
             profession: 'Web Developer',            
             showBio: [λ: showBio]        
          }
         */
     return `This is ${this.name} 
             and I am ${this.age}. 
             I am a ${this.profession}.`    
    }
}
console.log(bio.showBio());
// This is Mostafa and I am 29. I am a Web Developer.

Все это также случаи использования стрелочной функции в различных углах.

6. Деструктурирующее присвоение

Синтаксис деструктурирующего присваивания означает, что это выражение JavaScript, которое распаковывает значения из массивов или свойства из объектов в другие переменные. Другими словами, деструктуризация - это извлечение значений из массива или свойств из объекта. Вот и все.

Здесь я покажу вам примеры использования как деструктурирования массива, так и деструктурирования объекта. Итак, приступим!

Примеры деструктуризации массива

const myBio = ['Mostafa', 29, 'Web Developer'];

Вы должны поддерживать хронологический порядок в массиве, например:

const [name] = myBio;
const [, age] = myBio;
const [, , profession] = myBio;
console.log(name); // Mostafa
console.log(age); // 29
console.log(profession); // Web Developer

Кроме того, вы можете разрушить все переменные в массиве и использовать их

const [name, age, profession] = myBio;

Таким образом, при деструктуризации массива необходимо соблюдать порядок индексных переменных.

Деструктуризация с оператором rest, о которой я говорил выше, выглядит так:

const friendsArray = ['a', 'b', 'c', 'd', 'e']
const [bestFriend, ...averageFriends] = friendsArray; 
console.log(bestFriend); // a
console.log(averageFriends); // [ 'b', 'c', 'd', 'e' ]

Примеры деструктуризации объекта:

const objBio = {    
    userName: 'Mostafa',    
    id: 001,    
    status: 'Developer',
    shareBio: {        
        facebook: true,        
        twitter: true,
    }
}
const { userName, id, status, isMarried} = objBio;
console.log(userName, id, status, isMarried);
// Mostafa 1 Developer true

Вы можете использовать вложенную деструктуризацию, как показано ниже;

const { shareBio: { facebook, twitter } }= objBio;
console.log(facebook, twitter); 
// true true

Также обратите внимание, что вам не нужно использовать в хронологическом порядке, например, при деструктуризации массива.

Надеюсь, это имеет для вас смысл!

7. Обещания

Одна из самых мощных функций JavaScript - это то, как он справляется с асинхронным программированием самым простым способом. Поскольку JavaScript был инициирован как язык в основном для Интернета, он должен был иметь возможность асинхронно реагировать на действия пользователя, такие как щелчки, наведения, нажатия клавиш и так далее.

Давайте посмотрим на довольно тривиальный пример отложенного асинхронного выполнения с setTimeout()

const processData = () => {    
    setTimeout(() => {        
       console.log(1); // after 1 second        
       setTimeout(() => {            
         console.log(2); // after 2 second            
         setTimeout(() => {                
            console.log(3); // after 3 second            
         }, 1000);        
       }, 1000);    
    }, 1000);
}
processData();

Чтобы справиться с этой плохой практикой, используется Promise

const promiseData = new Promise((resolve, reject) => {  
        setTimeout(() => {        
            resolve(1);        
            reject(Error('Error...'));    
        }, 1000);
});
console.log(promiseData); 
promiseData.then(data => {    
     console.log(data);
})
.catch(error => console.log(error));

8. Классы

Классы JavaScript, представленные в ECMAScript 2015 (ES5), обычно называются синтаксическим сахаром по сравнению с существующим наследованием на основе прототипов JavaScript. Синтаксис класса не вводит в JavaScript новую объектно-ориентированную модель наследования.

Когда класс создается с ключевым словом «new», конструктор запускается автоматически.

class Student {
   constructor(id, name, age) {
      this.id = id;
      this.name = name;
      this.age = age;
      this.lang = [];
      this.country = 'Bangladesh';
}
getInfo() {
  return `
    id - ${this.id}
    name - ${this.name}
    age - ${this.age}
    language -${this.lang.join(', ')}`;
}

Теперь вы можете создать экземпляр любого объекта, используя этот конструктор класса.

const student1 = new Student(1, 'Mostafa', 29);
console.log(typeof (student1)); // object
const student2 = new Student(2, 'Mahmud', 30);
console.log(student1);
/*
 Student { 
    id: 1, 
    name: 'Mostafa', 
    age: 29, 
    country: 'Bangladesh' 
}
*/
console.log(student1.name); // Mostafa

Если вам нужны полные данные, просто позвоните getInfo()

console.log(student1.getInfo());

Это также основная идея конструктора классов в ES6.

9. Расширенные объектные литералы

Литерал объекта JavaScript - это разделенный запятыми список пар имя-значение, заключенный в фигурные скобки. Объектные литералы инкапсулируют данные, заключая их в аккуратный пакет. Это сводит к минимуму использование глобальных переменных, которые могут вызвать проблемы при объединении кода.

Если свойство и значение имеют одно и то же имя, нет необходимости использовать повторно

function bio({
  firstName,
  lastName, 
  coveredField
}) {
    return {
      firstName,
      lastName,
      commonLang: ['html', 'css', 'js', 'c', 'c++'];
      coveredField() {
          return `My first name is ${this.firstName}, 
                  second name is ${this.lastName} 
                  and I covered ${coveredField}
                  `;
          }
    }
}
const myBio = bio({
  firstName: 'Mostafa',
  lastName: 'Mahmud',
  coveredField: 'ES6'
});
console.log(myBio.firstName); // Mostafa
console.log(myBio.commonLang); // ['html', 'css', 'js', 'c', 'c++']
console.log(myBio.coveredField()); 
// My first name is Mostafa, second name is Mahmud and I covered ES6

10. Шаблонные литералы

Согласно MDN, шаблонные литералы - это строковые литералы, допускающие встроенные выражения. С ними можно использовать многострочные строки и функции интерполяции строк .

Вот пример практического использования:

const firstName = 'Mostafa';
const profession = 'developer';
const workField = 'wep application'
function modify(strings, ...restValues) {
   console.log(arguments);
   // all data (static and dynamic) in [[array], array]
   console.log(strings, restValues);
   // divided array in output [static data array], [dynamic data       array]

  let str = '';
  strings.forEach((string, i) => {
   str += `${string} <b> ${restValues[i] || ''}</b>`; 
   });
   return str;
}

Шаблонные литералы с тегами ES6 для изменения динамических данных в строке шаблона. Функции тегов modify() даже не должны всегда возвращать строку!

const html = modify `
        <h1> This is ${firstName.toUpperCase()}</h1>
        <p> I am a ${profession}</p>
        <p> I am working on ${workField}</p>
        `
document.body.innerHTML = html;

Это все о важных функциях ES6, с которыми разработчики сталкиваются и изучают в своей жизни программирования на JavaScript.

Если эта статья была вам полезна, не хлопайте по ней.

Наслаждайтесь кодированием!