JavaScript là một trong 3 trụ cột của Internet cùng với HTML và CSS. Ngôn ngữ này được sử dụng để xây dựng các tương tác trên hơn 95% trang web hiện nay. Trong bài viết này, chúng ta sẽ cùng nhau thảo luận về 4 khái niệm quan trọng trong cách hoạt động của JavaScript nhé!

IIFE

IIFE (Immediately Invoked Function Expression) là các hàm trong JavaScript chứa các biểu thức ngay lập tức được gọi và thực thi sau khi chúng được định nghĩa. Các biến được khai báo trong IIFE không thể được truy cập từ bên ngoài, do đó nó không gây các ảnh hưởng trong phạm vi toàn cục. Như vậy, lý do chính để kết hợp IIFE vào hàm là để thực thi mã ngay lập tức và bảo mật dữ liệu.

(function(a,b){        
    return a + b;
})(10,20);

Chúng ta cũng có thể dùng arrow function để định nghĩa IIFE:

(() => {    
   //...
})();

Scope

Scope là tham chiếu đến quyền truy cập biến, giúp xác định những biến nào đang có (hoặc không có) quyền truy cập trong các ngữ cảnh khác nhau. Trong JavaScript, mặc định là window scope (hay còn gọi là root scope). Scope có thể được hiểu một cách đơn giản hơn là một cái hộp thể hiện vùng giới hạn chứa các biến, đối tượng, hàm giúp chúng ta xác định ra được rằng chúng ta có quyền truy cập vào biến đó hay là không, vì scope đặt ra các hạn chế cho khả năng hiển thị và khả năng truy cập của các biến đối với các phần khác của code.

Việc hiểu rõ khái niệm này là điều cần thiết đối với một JavaScript Developer. Scope có thể là local hay global, local giới hạn khả năng sử dụng biến trong một giới hạn nhất định còn global cho phép chúng ta sử dụng biến trong phạm vi toàn bộ chương trình. Chương trình  không thể truy cập các biến được định nghĩa với phạm vi local vì nó được bao bọc trong các ranh giới, trừ khi nó được trả về bằng lệnh return.

Ví dụ như một hàm có định nghĩa biến greeting:

function sayHello() {
   let greeting = "Hello";
}
sayHello()
console.log(greeting); //a ReferenceError is returned stating that 'greeting' is not defined

ReferenceError này được trả vì  ‘greeting’ được xác định trong phạm vi cục bộ của hàm sayHello, vì vậy không thể truy cập biến bên ngoài hàm.

Closure

Closure là một hàm bên trong một hàm khác, mà hàm bên trong này (closure) có thể truy cập vào biến được định nghĩa ở hàm bên ngoài. Tuy nhiên, hàm cha của nó không có quyền truy cập vào các biến bên trong hàm closure.

Closure rất hữu ích khi bạn muốn truyền các biến, mảng hoặc phương thức từ một hàm bên ngoài vào một hàm bên trong.

Hoisting

Nếu không có kiến ​​thức về Hoisting, chúng ta có thể sẽ gặp phải các kết quả không mong muốn từ code JavaScript. Bởi trong JavaScript, chúng ta có thể gọi hàm trước khi nó được định nghĩa mà không gặp phải ReferenceError. Điều này là do trình thông dịch JavaScript di chuyển các khai báo biến và hàm lên đầu phạm vi hiện tại (global scope hoặc local scope) trước khi thực thi - điều này được gọi là Hoisting. Ví dụ:

onePlusOne();
function onePlusOne(){
   console.log(1 + 1);
}
//2 is returned in console

Tác giả  Denali Balser

Dịch bởi Devera Academy