ES6-JavaScript

константа

const — это новое ключевое слово, используемое для объявления переменных из es6.
После использования const мы не можем переназначить его, мы можем назвать его неизменяемой переменной.

Всегда предпочитайте константу, если не хотите переназначать переменную.

const myVariable = 100;
console.log(myVariable);  //output 100
myVariable = 200;        //throws type error
console.log(myVariable);

В приведенном выше примере значение const не изменится и не может быть переназначено, если вы попытаетесь, оно вернет ошибку.

Пусть

let может быть переназначен и может принимать новое значение.
let создает изменяемую переменную.

let и const одинаковы в заблокированной области (доступны только в пределах своей области), единственное, что const нельзя переназначить.

let myVariable = 100;
myVariable = 200;
console.log(myVariable); // 200

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

Хотите писать современный код? Стрелочная функция просто великолепна.
Это делает ваш код более читабельным и структурированным.

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

arr = [1,2,3,4];
const newArr = arr.map(value => value*2);

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

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

var userInfo = {
    name: 'Pradeep',
    cities: ['Stepford', 'Cittàgazze', 'Pallet Town'],
    showCities() {
       this.cities.map((city) => {
          console.log(this.name, city);
       });
    }
};
userInfo.showCities(); 
//OUTPUT 
Pradeep,Stepford
Pradeep,Cittàgazze
Pradeep,Pallet Town

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

Давайте посмотрим, как это обрабатывалось до появления функции стрелки es6.

var userInfo = {
    name: 'Pradeep',
    city: 'Pallet Town’,
    showCity: function() {
       console(this.city);
    }
};
userInfo.showCity(); // Pallet Town

В приведенном выше примере владельцем функции является объект, и он привязан к объекту, поэтому ключевое слово "this" будет ссылаться на объект.

довольно ясно, не так ли?

Теперь давайте посмотрим на другой сценарий.

var userInfo = {
    name: 'Pradeep',
    cities: ['Stepford', 'Cittàgazze', 'Pallet Town'],
    showCities: function() {
       this.cities.map(function(city) {
          console.log(this.name, city);
       });
    }
};
userInfo.showCities();
// [object Window] Stepford
// [object Window] Cittàgazze
// [object Window] Pallet Town

Ох, что здесь только что произошло, "это" относится к объекту окна.

Да это правильно.

Так почему же this здесь привязан к объекту окна?

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

Давайте посмотрим, как это обрабатывалось ранее.

var userInfo = {
    name: 'Pradeep',
    cities: ['Stepford', 'Cittàgazze', 'Pallet Town'],
    showCities: function() {
        var _this = this;
        this.cities.map(function(city) {
            console.log(_this.name, city);
        });
    }
};
userInfo.showCities();

В приведенном выше примере мы создали переменную вне внутренней функции метода.

var userInfo = {
   name: 'Pradeep',
   cities: ['Stepford', 'Cittàgazze', 'Pallet Town'],
   showCities: function() {
       this.cities.map(function(city) {
           console.log(this.name, city);
       }.bind(this));
   }
};

В приведенном выше примере мы использовали bind для присоединения ключевого слова «this».