لبدا هذا الدرس قد تحتاج الى معرفة قليلة في es5 وغالبا ساقوم بشرح es5 و es6 لنفهم الفرق بين الاثنين
javascript es5
لتخزين قيمة معينة كنا نقوم باستعمال var ونسمي هذا المتغير
var x = 'Hello World';
console.log(x); // result: 'Hello World'
x = 'x are changes';
console.log(x); // result: 'x are changes'
javascript es6
اصبح استخدام var من النادر مع es6 بحيث يمكن استخدام بدلا عنها const / let
- const
تستخدم لتخزين القيم التي لن يتم تغييرها واي تغيير لهذا المتغير يؤذي الى فشل كما هو مبين هنا :
const x = 'Hello World';
console.log(x); // result: 'Hello World'
x = 'x are changes'
console.log(x); // result: 'TypeError: Assignment to constant variable.'
- let
وهو عكس const بحيث يمكن تخزين القيم ويمكن تغييرها:
let x = 'Hello World';
console.log(x); // result: 'Hello World'
x = 'x are changes'
console.log(x); // result: 'x are changes'
scope
استخدام المتغيرات في الدوال او ادوات الشرط يعتمد ان كانت
global اي متغير خارجي
local اي متغير داخلي
في var نجد المتغير الداخلي قام بتغيير المتغير الخارجي, نلاحظ المتغير color
var fruit = 'apple';
var color = 'red';
if (fruit == 'apple') {
var color = 'green'
console.log('local', color) // result: 'local green'
}
console.log('global', color) // result: 'global green'
في let لم يحدث اي تغيير
const fruit = 'apple';
let color = 'red';
if (fruit == 'apple') {
let color = 'green';
console.log('local', color); // result: 'local green'
}
console.log('global', color); // result: 'global red'
وذلك لان كل let له المدى الخاص به (scope) فما يحدث للمتغير الخارجي لا يغير المتغير داخل if
يمكن التغيير اذا قمنا بمسح let داخل اداة الشرط
let fruit = 'apple';
let color = 'red';
if (fruit == 'apple') {
color = 'green';
console.log('local', color); // result: 'local green'
}
console.log('global', color); // result: 'global green'
كما ان القيام بتكرار المتغير let بنفس الاسم في نفس المدى يؤذي الى خطأ
let color = 'red';
let color = 'green';
console.log(color); // result: SyntaxError: Identifier 'color' has already been declared