Современный JavaScript
Javascript является самым популярным языком скриптов, который используется как в стороне сервера, так и на стороне клиента. Его основателем является ECMA (Европейская ассоциация производителей компьютеров), которая отвечает за определение стандартов для языков скриптов. В основном он используется при разработке веб-приложений. В первые годы javascript не играл очень важной роли в разработке, поскольку имел некоторые недостатки. Но после 2015 года ECMA смогла внести некоторые изменения и выпустила новую версию javascript, и она оказалась очень хорошей. После этого каждый год они обновляют javascript и эти обновленные версии javascript, известные как современный javascript. Давайте углубимся в суть этих изменений.
let
Содержание статьи:
Если вы используете ключевое слово let в своем коде для определения переменной, это означает, что эта переменная видна только в ее области видимости. Область видимости означает, что если вы определяете ее внутри метода, она принадлежит только этому конкретному методу, если вы используете ее внутри цикла for, эта переменная принадлежит только этому циклу, и если вы определяете переменную внутри класса, эта переменная принадлежит только этому классу, вне его области, вы не можете получить доступ к этой переменной. См. следующий пример кода.
Пример 01: — переменная без ключевого слова let
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
JavaScript 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);
| 123456 | 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); |
Выходные значения:
JavaScript ->->->0 ->->->1 ->->->2 ->->->3 ->->->4 ->->->5 ->->->6 ->->->7 ->->->8 ->->->9 last value for i =10 inner value for k =9
| 123456789101112 | ->->->0->->->1->->->2->->->3->->->4->->->5->->->6->->->7->->->8->->->9last value for i =10inner value for k =9 |
Пример 02: — переменная с ключевым словом let
JavaScript 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);
| 123456 | 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); |
Выходные значения:
JavaScript ->->->0 ->->->1 ->->->2 ->->->3 ->->->4 ->->->5 ->->->6 ->->->7 ->->->8 ->->->9 last value for j = 10 E:LP_TrainingModernJS1-scope.js:13 console.log(“inner value for p = “+p); ^ ReferenceError: p is not defined
| 123456789101112131415 | ->->->0->->->1->->->2->->->3->->->4->->->5->->->6->->->7->->->8->->->9last value for j = 10E:LP_TrainingModernJS1-scope.js:13console.log(“inner value for p = “+p);^ReferenceError: p is not defined |
Мы используем переменную p как let, а затем она выдает ошибку ReferenceError, говоря, что “p не определено”. Это очень важно, когда вы пишете длинный код. Поскольку код длинный, может быть возможность использовать то же имя для другой переменной. В таком сценарии вы можете получить неожиданные результаты из-за изменения переменной и код может стать очень запутаным. Поэтому в подобной ситуации очень важно определить переменную с помощью let. Это гарантирует, что переменная не видна за пределами ее области видимости.
const
const похожа на let, она также не разрешает доступ за пределами своей области видимости. Но дополнительная функция, которую имеет const, заключается в том, что она может защитить переменную от изменения ее начального значения и работает как константа. Вы поймете это, посмотрев на следующий пример.
Пример 01:
JavaScript 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);
| 123456 | 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); |
Выходные значения:
JavaScript ->->->0 ->->->1 ->->->2 ->->->3 ->->->4 ->->->5 ->->->6 ->->->7 ->->->8 ->->->9 last value for i =10 E:LP_TrainingModernJS2-const.js:6 console.log(“inner value for k =”+k); ^ ReferenceError: k is not defined
| 123456789101112131415 | ->->->0->->->1->->->2->->->3->->->4->->->5->->->6->->->7->->->8->->->9last value for i =10E:LP_TrainingModernJS2-const.js:6console.log(“inner value for k =”+k); ^ReferenceError: k is not defined |
Доступ извне запрещён.
Пример 02: — Когда вы используете переменную const без ее инициализации
JavaScript 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);
| 1234567 | 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); |
Выходные значения:
JavaScript const k; ^ SyntaxError: Missing initializer in const declaration
| 123 | const k; ^SyntaxError: Missing initializer in const declaration |
Бросается исключение SyntaxError, говоря, что “Missing initializer in const declaration”. Это означает, что если мы определяем переменную с помощью ключевого слова const, она должна быть инициализирована в тот же момент.
Пример 03: Присвоение значения переменной const после ее объявления
JavaScript 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);
| 1234567 | 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); |
Выходные значения:
JavaScript k=i; ^ TypeError: Assignment to constant variable.
| 123 | k=i; ^TypeError: Assignment to constant variable. |
Если мы пытаемся присвоить значение переменной const после ее объявления, получим ошибку TypeError с упоминанием “Assignment to constant variable”. У const есть возможность защитить переменную. Но это не защищает массив или объект. См. cледующий пример.
Пример 04:
JavaScript const city = ‘Kalutara’; city=’Colombo’; console.log(city);
| 123 | const city = ‘Kalutara’;city=’Colombo’;console.log(city); |
Выходные значения:
JavaScript city=’Colombo’; ^ TypeError: Assignment to constant variable.
| 123 | city=’Colombo’; ^TypeError: Assignment to constant variable. |
Если использовать город как массив – так работать не будет.
Пример 05: Присвоение значений массиву const
JavaScript const town=[‘Gampaha’, ‘Galle’]; console.log(town); town.push(‘Matara’); console.log(town);
| 1234 | const town=[‘Gampaha’, ‘Galle’];console.log(town);town.push(‘Matara’);console.log(town); |
Выходные значения:
JavaScript [ ‘Gampaha’, ‘Galle’ ] [ ‘Gampaha’, ‘Galle’, ‘Matara’ ]
| 12 | [ ‘Gampaha’, ‘Galle’ ][ ‘Gampaha’, ‘Galle’, ‘Matara’ ] |
Сonst не защищает массив.
Стрелочная функция =>
Правило 01: В современном JS обозначение => ведет себя как ключевое слово функции. То, что делает =>, связывает функцию и тело функции без ключевого слова. У нее есть несколько способов определения функции, и следующий пример представляет каждый тип.
Пример 01:
JavaScript // 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”);
| 1234567891011121314151617181920212223 | // normal functionfunction area1 (x,y){ return x*y;} // arrow functionconst 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”); |
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Выходные значения:
JavaScript 200 200 200 100 Hello John
| 12345 | 200200200100Hello John |
Вы можете видеть, что без ключевого слова function стрелка => работает как функция.
Правило 02: — функция и стрелочная функция не работают одинаково. У них разные схемы работы. В следующем примере показано, как ключевое слово this ведет себя в этих двух ситуациях.
JavaScript const print={ function1:function(){ console.log(‘this is function1’, this); }, function2:()=>{ console.log(‘this is function2’, this); } } print.function1(); print.function2();
| 1234567891011 | const print={ function1:function(){ console.log(‘this is function1’, this); }, function2:()=>{ console.log(‘this is function2’, this); }} print.function1();print.function2(); |
Выходные значения:
JavaScript this is function1 { function1: [Function: function1], function2: [Function: function2] } this is function2 {}
| 12 | this is function1 { function1: [Function: function1], function2: [Function: function2] }this is function2 {} |
Что происходит, когда функция является обычной функцией, это ключевое слово представляет двоеточие и распечатывает всю функцию внутри него. Но если функция является стрелочной функцией, она не представляет двоеточие. Это немного сбивает с толку большинство разработчиков. Они просто пишут стрелочную функцию и используют это ключевое слово внутри нее, ожидая вывода как обычной функции.
Object
Правило 01: — object в Javascript позволяет разработчикам определять только ключ или значение внутри объекта. Пара ключ-значение не требуется. Вместо этого вы можете вызвать другой модуль, чтобы присвоить ему значение. Посмотрите следующий пример, и тогда вы сможете получить четкое представление об этом.
Пример 01:
JavaScript 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)
| 1234567891011 | let SQRT2 = Math.SQRT2; // Calling external module and assign value to the SQRT2const vehicle ={ make: “Mitsubishi”, p1:120, p2:240, drive(){}, stop: ()=>{}, SQRT2 // only containing key. It is same as SQRT2: SQRT2} console.log(vehicle) |
Выходные значения:
JavaScript { make: ‘Mitsubishi’, p1: 120, p2: 240, drive: [Function: drive], stop: [Function: stop], SQRT2: 1.4142135623730951 }
| 12345678 | { make: ‘Mitsubishi’, p1: 120, p2: 240, drive: [Function: drive], stop: [Function: stop], SQRT2: 1.4142135623730951} |
Теперь вы также можете увидеть выходное значение для SQRT2. Оно получает значение от внешнего модуля под названием «Math».
Правило 02: — вы можете создать динамическое свойство внутри объекта в современном JS. Динамическое свойство означает, что вы можете оставить placeholder в качестве ключа, если вы точно не знаете, как ключ ведет себя во время выполнения.
Во время разработки разработчики не знают, как ведет себя ключ во время выполнения, поскольку он динамичен. В это время разработчик может использовать placeholder для ключа. См. следующий пример.
Пример 02:
JavaScript 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)
| 12345678910111213 | 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) |
Выходные значения:
JavaScript { make: ‘Mitsubishi’, p1: 120, p2: 240, drive: [Function: drive], stop: [Function: stop], order: ‘ready’, SQRT2: 1.4142135623730951 }
| 123456789 | { 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.
JavaScript let obj ={‘country’:””}; obj.country=”Sri Lanka”; console.log(obj); obj.country=”England”; console.log(obj);
| 12345 | let obj ={‘country’:””};obj.country=”Sri Lanka”;console.log(obj);obj.country=”England”;console.log(obj); |
Выходные значения:
JavaScript { country: ‘Sri Lanka’ } { country: ‘England’ }
| 12 | { country: ‘Sri Lanka’ }{ country: ‘England’ } |
Меняется значение объекта.
Пример 02: — Давайте посмотрим на тот же пример кода с методом object.freeze().
JavaScript let obj ={‘country’:””}; obj.country=”Sri Lanka”; Object.freeze(obj); console.log(obj); obj.country=”England”; console.log(obj);
| 123456 | let obj ={‘country’:””};obj.country=”Sri Lanka”;Object.freeze(obj);console.log(obj);obj.country=”England”;console.log(obj); |
Выходные значения:
JavaScript { country: ‘Sri Lanka’ } { country: ‘Sri Lanka’ }
| 12 | { country: ‘Sri Lanka’ }{ country: ‘Sri Lanka’ } |
Значение объекта не изменилось. Применение ключевого слова freeze предполагает, что у вас есть один объект, который проходит через множество сервисов, и вы не хотите изменять значение этого объекта, поэтому вы можете использовать Object.freeze().
Правило 02: — Убедитесь, что если вы используете freeze в многоуровневом объекте, оно замораживает только значения первого уровня. Объясним это на примере.
JavaScript 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);
| 123456789101112131415161718 | 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); |
Представьте, какой будет результат. Давайте проверим, совпадает ли ваш результат с реальным.
JavaScript { name: ‘Rose’, price: { t1: 15, t2: 20 } } { name: ‘Rose’, price: { t1: 20, t2: 20 } }
| 12 | { name: ‘Rose’, price: { t1: 15, t2: 20 } }{ name: ‘Rose’, price: { t1: 20, t2: 20 } } |
Мы замораживаем только имя, но изменилось значение t1. Причина в том, что t1 — это переменная внутреннего или второго уровня.
Итак, здесь я обсудил несколько фундаментальных концепций современного javascript. Я думаю, вы имеете четкое представление об этом. Увидимся в следующей статье. Я опишу больше концепций…
Оставайтесь в безопасности и узнавайте новое!!!
Автор: Thilini Weerasinghe
Источник: webformyself.com