Javascript es6 - const and let - الدرس الاول

لبدا هذا الدرس قد تحتاج الى معرفة قليلة في 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 :lock:

تستخدم لتخزين القيم التي لن يتم تغييرها واي تغيير لهذا المتغير يؤذي الى فشل كما هو مبين هنا :

const x = 'Hello World';
console.log(x); // result: 'Hello World'
x = 'x are changes'
console.log(x); // result: 'TypeError: Assignment to constant variable.'
  • let :unlock:

وهو عكس 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
4 Likes

بداية موفقة :+1: @roabaot

1 Like

جميل :fire:
كما أشرت هناك حالات نستخدم فيها let وكذلك const
بناء على شرح الفارق، يتبين لنا best practice لكتابة المتغيرات بشكل صحيح:

  • إذا كنا سنفترض قيمة متغير دون التعديل عليها لاحقا فالأفضل استخدام const والعكس صحيح

مصححات الlinting الحديثة التي تعمل على webpack و الفريمووركات الشهيرة تضع ذلك في الحسبان

1 Like