Современный JavaScript

Дата публикации: 2021-07-13

От автора: в этой статье будут обсуждаться очень важные концепции, которые должен знать каждый разработчик, инженер-программист или архитектор. Несмотря на это, если вы java- разработчик, PHP- или любой другой разработчик, вы должны знать современные концепции javascript. Итак, в этой статье описаны важные функции современного JS с некоторыми примерами.

Javascript является самым популярным языком скриптов, который используется как в стороне сервера, так и на стороне клиента. Его основателем является ECMA (Европейская ассоциация производителей компьютеров), которая отвечает за определение стандартов для языков скриптов. В основном он используется при разработке веб-приложений. В первые годы javascript не играл очень важной роли в разработке, поскольку имел некоторые недостатки. Но после 2015 года ECMA смогла внести некоторые изменения и выпустила новую версию javascript, и она оказалась очень хорошей. После этого каждый год они обновляют javascript и эти обновленные версии javascript, известные как современный javascript. Давайте углубимся в суть этих изменений.

let

Если вы используете ключевое слово let в своем коде для определения переменной, это означает, что эта переменная видна только в ее области видимости. Область видимости означает, что если вы определяете ее внутри метода, она принадлежит только этому конкретному методу, если вы используете ее внутри цикла for, эта переменная принадлежит только этому циклу, и если вы определяете переменную внутри класса, эта переменная принадлежит только этому классу, вне его области, вы не можете получить доступ к этой переменной. См. следующий пример кода.

Пример 01: — переменная без ключевого слова let

for(var i=0; i<10; i++){
    var k=i;
    console.log("->->->" +i);
}
console.log("last value for i ="+i);
console.log("inner value for k ="+k);

for(var i=0; i<10; i++){

var k=i;

console.log("->->->" +i);

}

console.log("last value for i ="+i);

console.log("inner value for k ="+k);

Выходные значения:

->->->0
->->->1
->->->2
->->->3
->->->4
->->->5
->->->6
->->->7
->->->8
->->->9
last value for i =10
inner value for k =9

->->->0

->->->1

->->->2

->->->3

->->->4

->->->5

->->->6

->->->7

->->->8

->->->9

last value for i =10

inner value for k =9

Пример 02: — переменная с ключевым словом let

for(var j=0; j<10; j++){
    let p=j;
    console.log("->->->" +j);
}
console.log("last value for j = "+j);
console.log("inner value for p = "+p);

for(var j=0; j<10; j++){

let p=j;

console.log("->->->" +j);

}

console.log("last value for j = "+j);

console.log("inner value for p = "+p);

Выходные значения:

->->->0
->->->1
->->->2
->->->3
->->->4
->->->5
->->->6
->->->7
->->->8
->->->9
last value for j = 10
E:\LP_Training\ModernJS\1-scope.js:13
console.log("inner value for p = "+p);
^
ReferenceError: p is not defined

->->->0

->->->1

->->->2

->->->3

->->->4

->->->5

->->->6

->->->7

->->->8

->->->9

last value for j = 10

E:\LP_Training\ModernJS\1-scope.js:13

console.log("inner value for p = "+p);

ReferenceError: p is not defined

Мы используем переменную p как let, а затем она выдает ошибку ReferenceError, говоря, что “p не определено”. Это очень важно, когда вы пишете длинный код. Поскольку код длинный, может быть возможность использовать то же имя для другой переменной. В таком сценарии вы можете получить неожиданные результаты из-за изменения переменной и код может стать очень запутаным. Поэтому в подобной ситуации очень важно определить переменную с помощью let. Это гарантирует, что переменная не видна за пределами ее области видимости.

const

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

Пример 01:

for(var i=0; i<10; i++){
    const k=i;
    console.log("->->->" +i);
}
console.log("last value for i ="+i);
console.log("inner value for k ="+k);

for(var i=0; i<10; i++){

const k=i;

console.log("->->->" +i);

}

console.log("last value for i ="+i);

console.log("inner value for k ="+k);

Выходные значения:

->->->0
->->->1
->->->2
->->->3
->->->4
->->->5
->->->6
->->->7
->->->8
->->->9
last value for i =10
E:\LP_Training\ModernJS\2-const.js:6
console.log("inner value for k ="+k);
                                  ^
ReferenceError: k is not defined

->->->0

->->->1

->->->2

->->->3

->->->4

->->->5

->->->6

->->->7

->->->8

->->->9

last value for i =10

E:\LP_Training\ModernJS\2-const.js:6

console.log("inner value for k ="+k);

ReferenceError: k is not defined

Доступ извне запрещён.

Пример 02: — Когда вы используете переменную const без ее инициализации

const k;
for(var i=0; i<10; i++){
    k=i;
    console.log("->->->" +i);
}
console.log("last value for i ="+i);
console.log("inner value for k ="+k);

const k;

for(var i=0; i<10; i++){

k=i;

console.log("->->->" +i);

}

console.log("last value for i ="+i);

console.log("inner value for k ="+k);

Выходные значения:

const k;
      ^
SyntaxError: Missing initializer in const declaration

const k;

SyntaxError: Missing initializer in const declaration

Бросается исключение SyntaxError, говоря, что “Missing initializer in const declaration”. Это означает, что если мы определяем переменную с помощью ключевого слова const, она должна быть инициализирована в тот же момент.

Пример 03: Присвоение значения переменной const после ее объявления

const k=0;
for(var i=0; i<10; i++){
    k=i;
    console.log("->->->" +i);
}
console.log("last value for i ="+i);
console.log("inner value for k ="+k);

const k=0;

for(var i=0; i<10; i++){

k=i;

console.log("->->->" +i);

}

console.log("last value for i ="+i);

console.log("inner value for k ="+k);

Выходные значения:

k=i;
      ^
TypeError: Assignment to constant variable.

k=i;

TypeError: Assignment to constant variable.

Если мы пытаемся присвоить значение переменной const после ее объявления, получим ошибку TypeError с упоминанием “Assignment to constant variable”. У const есть возможность защитить переменную. Но это не защищает массив или объект. См. cледующий пример.

Пример 04:

const city = 'Kalutara';
city='Colombo';
console.log(city);

const city = 'Kalutara';

city='Colombo';

console.log(city);

Выходные значения:

city='Colombo';
    ^
TypeError: Assignment to constant variable.

city='Colombo';

TypeError: Assignment to constant variable.

Если использовать город как массив – так работать не будет.

Пример 05: Присвоение значений массиву const

const town=['Gampaha', 'Galle'];
console.log(town);
town.push('Matara');
console.log(town);

const town=['Gampaha', 'Galle'];

console.log(town);

town.push('Matara');

console.log(town);

Выходные значения:

[ 'Gampaha', 'Galle' ]
[ 'Gampaha', 'Galle', 'Matara' ]

1 2	[ 'Gampaha', 'Galle' ] [ 'Gampaha', 'Galle', 'Matara' ]

Сonst не защищает массив.

Стрелочная функция =>

Правило 01: В современном JS обозначение => ведет себя как ключевое слово функции. То, что делает =>, связывает функцию и тело функции без ключевого слова. У нее есть несколько способов определения функции, и следующий пример представляет каждый тип.

Пример 01:

// normal function
function area1 (x,y){
    return x*y;
}

// arrow function
const area2=(x,y)=>{
    return x*y;
}

//arrow fuction which have only one argumant. No need {}
const area3=(x,y)=>x*y;

//arrow function containing only one parameter value. No need ()
const area4 =x=>x*x;

const area5=x=>console.log("Hello " +x);

console.log(area1(10,20));
console.log(area2(10,20));
console.log(area3(10,20));
console.log(area4(10));
area5("John");

// normal function

function area1 (x,y){

return x*y;

}

// arrow function

const area2=(x,y)=>{

return x*y;

}

//arrow fuction which have only one argumant. No need {}

const area3=(x,y)=>x*y;

//arrow function containing only one parameter value. No need ()

const area4 =x=>x*x;

const area5=x=>console.log("Hello " +x);

console.log(area1(10,20));

console.log(area2(10,20));

console.log(area3(10,20));

console.log(area4(10));

area5("John");

Выходные значения:

200
200
200
100
Hello John

200

100

Hello John

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

Правило 02: — функция и стрелочная функция не работают одинаково. У них разные схемы работы. В следующем примере показано, как ключевое слово this ведет себя в этих двух ситуациях.

const print={
    function1:function(){
        console.log('this is function1', this);
    },
    function2:()=>{
        console.log('this is function2', this);
        }
}

print.function1();
print.function2();

const print={

function1:function(){

console.log('this is function1', this);

function2:()=>{

console.log('this is function2', this);

}

print.function1();

print.function2();

Выходные значения:

this is function1 { function1: [Function: function1], function2: [Function: function2] }
this is function2 {}

1 2	this is function1 { function1: [Function: function1], function2: [Function: function2] } this is function2 {}

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

Object

Правило 01: — object в Javascript позволяет разработчикам определять только ключ или значение внутри объекта. Пара ключ-значение не требуется. Вместо этого вы можете вызвать другой модуль, чтобы присвоить ему значение. Посмотрите следующий пример, и тогда вы сможете получить четкое представление об этом.

Пример 01:

let SQRT2 = Math.SQRT2; // Calling external module and assign value to the SQRT2
const vehicle ={
    make: "Mitsubishi",
    p1:120,
    p2:240,
    drive(){},
    stop: ()=>{},
    SQRT2 // only containing key. It is same as SQRT2: SQRT2
}

console.log(vehicle)

let SQRT2 = Math.SQRT2; // Calling external module and assign value to the SQRT2

const vehicle ={

make: "Mitsubishi",

p1:120,

p2:240,

drive(){},

stop: ()=>{},

SQRT2 // only containing key. It is same as SQRT2: SQRT2

}

console.log(vehicle)

Выходные значения:

{
  make: 'Mitsubishi',
  p1: 120,
  p2: 240,
  drive: [Function: drive],
  stop: [Function: stop],
  SQRT2: 1.4142135623730951
}

{

make: 'Mitsubishi',

p1: 120,

p2: 240,

drive: [Function: drive],

stop: [Function: stop],

SQRT2: 1.4142135623730951

}

Теперь вы также можете увидеть выходное значение для SQRT2. Оно получает значение от внешнего модуля под названием «Math».

Правило 02: — вы можете создать динамическое свойство внутри объекта в современном JS. Динамическое свойство означает, что вы можете оставить placeholder в качестве ключа, если вы точно не знаете, как ключ ведет себя во время выполнения.

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

Пример 02:

let SQRT2 = Math.SQRT2;
let status ="order"
const vehicle ={
    make: "Mitsubishi",
    p1:120,
    p2:240,
    drive(){},
    stop: ()=>{},
    [status]:"ready", //dynamic property
    SQRT2
}

console.log(vehicle)

let SQRT2 = Math.SQRT2;

let status ="order"

const vehicle ={

make: "Mitsubishi",

p1:120,

p2:240,

drive(){},

stop: ()=>{},

[status]:"ready", //dynamic property

SQRT2

}

console.log(vehicle)

Выходные значения:

{
  make: 'Mitsubishi',
  p1: 120,
  p2: 240,
  drive: [Function: drive],
  stop: [Function: stop],
  order: 'ready',
  SQRT2: 1.4142135623730951
}

{

make: 'Mitsubishi',

p1: 120,

p2: 240,

drive: [Function: drive],

stop: [Function: stop],

order: 'ready',

SQRT2: 1.4142135623730951

}

Теперь вы можете увидеть порядок вывода: ‘ready’ для placeholder -а, который мы устанавливаем во время разработки. Вы можете изменять значение ключа, присваивая различные значения placeholder -у. (Попробуйте let status = «service», и вы увидите разницу).

freeze

Правило 01: — Как видно из названия, он может заморозить объект. Это означает, что freeze избегает изменения значения объекта. Посмотрите следующий пример, и вы увидите разницу.

Пример 01: — Давайте посмотрим на простой пример кода без ключевого слова freeze.

let obj ={'country':""};
obj.country="Sri Lanka";
console.log(obj);
obj.country="England";
console.log(obj);

let obj ={'country':""};

obj.country="Sri Lanka";

console.log(obj);

obj.country="England";

console.log(obj);

Выходные значения:

{ country: 'Sri Lanka' }
{ country: 'England' }

1 2	{ country: 'Sri Lanka' } { country: 'England' }

Меняется значение объекта.

Пример 02: — Давайте посмотрим на тот же пример кода с методом object.freeze().

let obj ={'country':""};
obj.country="Sri Lanka";
Object.freeze(obj);
console.log(obj);
obj.country="England";
console.log(obj);

let obj ={'country':""};

obj.country="Sri Lanka";

Object.freeze(obj);

console.log(obj);

obj.country="England";

console.log(obj);

Выходные значения:

{ country: 'Sri Lanka' }
{ country: 'Sri Lanka' }

1 2	{ country: 'Sri Lanka' } { country: 'Sri Lanka' }

Значение объекта не изменилось. Применение ключевого слова freeze предполагает, что у вас есть один объект, который проходит через множество сервисов, и вы не хотите изменять значение этого объекта, поэтому вы можете использовать Object.freeze().

Правило 02: — Убедитесь, что если вы используете freeze в многоуровневом объекте, оно замораживает только значения первого уровня. Объясним это на примере.

let flower ={
    name:"",
    price:{
        t1:10,
        t2:20
    }
}

flower.name="Rose";
flower.price.t1=15;

console.log(flower);

Object.freeze(flower);
flower.name="Sun flower";
flower.price.t1=20;

console.log(flower);

let flower ={

name:"",

price:{

t1:10,

t2:20

}

flower.name="Rose";

flower.price.t1=15;

console.log(flower);

Object.freeze(flower);

flower.name="Sun flower";

flower.price.t1=20;

console.log(flower);

Представьте, какой будет результат. Давайте проверим, совпадает ли ваш результат с реальным.

{ name: 'Rose', price: { t1: 15, t2: 20 } }
{ name: 'Rose', price: { t1: 20, t2: 20 } }

1 2	{ name: 'Rose', price: { t1: 15, t2: 20 } } { name: 'Rose', price: { t1: 20, t2: 20 } }

Мы замораживаем только имя, но изменилось значение t1. Причина в том, что t1 — это переменная внутреннего или второго уровня.

Итак, здесь я обсудил несколько фундаментальных концепций современного javascript. Я думаю, вы имеете четкое представление об этом. Увидимся в следующей статье. Я опишу больше концепций…

Оставайтесь в безопасности и узнавайте новое!!!

Автор: Thilini Weerasinghe

Источник: thiliniweerasinghe09.medium.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Метки: JavaScript