Javascript Codecademy Beginner Course #3 (Scope)

 Global Scope

Ta có thể đặt một variable ở ngoài hàm function nhưng vẫn có thể sử dụng nó bên trong hàm

function với một phạm vi toàn cục ở đâu cũng được

Bài tập:

Nhập 3 biến lần lượt như sau:

const satellite ='The Moon';

const galaxy = 'The Milky Way';

const stars = 'North Star';

Ở dưới tạo 1 hàm tên 

function callMyNightSky(){

}

Ghi vào bên trong hàm:

return 'Night Sky: ' + satellite + ', ' + stars + ', and ' + galaxy;

Sau đó đóng khối lệnh lại bằng dấu } rồi:

console.log(callMyNightSky());

Output sẽ là:

Block Scope

Ở trên ta đã tìm hiểu được rằng nếu ta tạo ra một biến Global Scope ( một biến có phạm vi toàn cục ) thì ta sẽ sử dụng được biến đó ở trong bất kì hàm function nào.

Vậy bây giờ hãy thử ngược lại, ta sẽ gọi tên biến ở khối lệnh bên trong hàm function, và thử console.log giá trị nằm trong hàm đó ra ngoài mà không return, xem chương trình sẽ xảy ra hiện tượng gì ?

const logSkyColor = () => {

  let color = 'blue'; 

  console.log(color); // blue // 1.Đây là giá trị của biến color bên trong hàm function logSkyColor

}

logSkyColor();

console.log(color); // 2. Đây cũng vậy nhưng mà nằm ngoài hàm

Vậy output sẽ là gì ??

Output sẽ là:

Như các bạn thấy nó chỉ in ra một lần giá trị 'blue' của biến color vì biến color chỉ có tác dụng bên trong hàm logSkyColor, còn nếu ta muốn log ra ở bên ngoài {}, thì không thể được

Vì phần này khá dễ nên sẽ bỏ qua bài tập!

Scope Pollution

Như các bạn thấy, đó là một ý tưởng khá hay để khiến cho việc truy cập tới các biến dễ dàng hơn, nhưng việc có quá nhiều biến toàn cục cũng khiến cho chương trình của bạn rất dễ hỏng, điển hình là ví dụ sau đây:

let num = 50; // Hiện tại thì giá trị của biến num vẫn là 50

const logNum = () => {

  num = 100; // Thay đổi giá trị num thành 100. Hãy ghi nhớ dòng code này

  console.log(num);

};

 

logNum(); // In ra màn hình số 100

console.log(num); // In ra màn hình số 100

Output sẽ là:

Đó như các bạn có thể thấy, việc biết về biến toàn cục là rất quan trọng, nhưng chúng ta nên hạn chế việc đó khi có thể.

Hãy cùng làm 1 bài tập về dạng này để hiểu rõ hơn về "Phạm vi ô nhiễm"

Ta hãy cùng thử một trường hợp nữa:

Bây giờ ta sẽ:

- Tạo ra một biến:

let stars = 'North Star';

- Sau đó tạo một hàm function, trong đó ta sẽ thay đổi giá trị của stars thành 'Sirius':

const satellite = 'The Moon';

const galaxy = 'The Milky Way';

let stars = 'North Star';

const callMyNightSky = () => {

  stars = 'Sirius';

return 'Night Sky: ' + satellite + ', ' + stars + ', ' + galaxy;

};

bây giờ ta sẽ thử console.log(callMyNightSky()); và cả console.log(stars);

Như này:

console.log(callMyNightSky());

console.log(stars);

Output sẽ là:

Như các bạn có thể thấy, dù như nào đi chăng nữa, thì giá trị của biến stars cũng đã bị thay đổi hoàn toàn và sẽ không bao giờ có thể trở lại được thành 'North Star' ( chỉ chưa thay đổi nếu bạn console.log trước khi có hàm callMyNightSky()

Practice Good Scoping

Vì lười nên tôi chỉ up code kèm minh họa bằng comment ở đây:

const logSkyColor = () => {

  const dusk = true;

  let color = 'blue'; 

  if (dusk) {

    let color = 'pink';

    console.log(color); // pink , vì hiện tại điều kiện đang là true nên giá trị của color đổi thành pink

  }

  console.log(color); // blue , ra khỏi hàm if ( true ) -> không còn giá trị pink nữa, vì đã thoát khỏi hàm if

};

 

console.log(color); // ReferenceError // lỗi chương trình vì không nhận đc bất cứ giá trị nào từ biến color ( vì tất cả đều nằm hết trong const logSkyColor và không có biến cục bộ.