+3

Hoisting trong javascript

Lời mở đầu

Xin chào các bác, em đã quay trở lại rồi đây 😄 Đầu tiên, Chúc mừng năm mới tất cả các bác nào đang đọc bài viết này nhé!
Trở lại với nội dung chính bài viết ngày hôm nay, Hôm nay em xin phép được chia sẻ một ít kiến thức, hiểu biết của mình về một khái niệm cũng khá là cơ bản trong Javascript đó là Hoisting. Tuy nhiên với nhiều bác mới bắt đầu học lập trình hoặc mới tìm hiểu về ngôn ngữ Javascript nhiều khi cũng không để ý đến khái niệm và chưa thành thạo lắm. Nên hôm nay em sẽ cùng các bác ôn lại 'khái niệm vào làm những ví dụ cụ thể để hiểu rõ hơn nhé.

Hoisting

Hoisting là vấn đề liên quan đến các khai báo biến, hàm trong Javascript. Nó liên quan đến việc chúng ta gọi sử dụng một biến hoặc một hàm mà không cần phải định nghĩa trước. Vậy cụ thể nó như thế nào các bác cùng em làm một ví dụ như sau:

function

tạo file script.js với nội dung

tinhTuoi(1995);

function tinhTuoi(namSinh) {
    console.log(2019 - namSinh);
}

var nghiHuu = function(namSinh) {
    console.log(65 - (2019 - namSinh));
}

nghiHuu(1995);

Nếu như với cách khai báo và gọi hôm thế này chúng ta sẽ nhận được kết quả như sau: nhưng khi chúng ta gọi funtion nghiHuu() trước khi khai báo như sau:

tinhTuoi(1995);

function tinhTuoi(namSinh) {
    console.log(2019 - namSinh);
}

nghiHuu(1995);

var nghiHuu = function(namSinh) {
    console.log(65 - (2019 - namSinh));
}

có một lỗi xuất hiện

Nguyên nhân ở đây nghiHuu() không phải là một declaration function mà là expression function. Vậy để gọi được một function trước khi khởi tạo, thì chúng ta phải khởi tạo function dưới dạng declaration function.

variables

Vừa rồi các bác đã cùng em làm các ví dụ về hoisting với các function, bây giờ hoisting với các biến thì sao. cũng tại file script.js vừa rồi các bác viết như sau:

console.log(tuoi);
var tuoi = 24;
console.log(tuoi);

kết quả là:

trong đoạn code trên thì chúng ta gọi biến tuoi trước khi nó được khai báo, kết quả trả về là undefined. Đó là cách mà hoisting xử lý với biến, chúng ta có thể hoàn toàn sử dụng 1 biến trước khi khai báo.Để tránh trả về undefined thì các bác chỉ cần gán giá trị cho nó thôi 😃. Khá easy phải không các bác?

Kết luận

Vừa rồi em đã chia sẻ một chút kiến thức mà mình biết về Hoisting trong javascript, có thể với nhiều bác nó chưa đầy đụ, cách dễ đạt chưa ngon, nhưng hi vọng các bác thông cảm và đóng góp ý để em cải thiện hơn ở những bài viết tiếp theo. Cảm ơn các bác đã đón đọc, thanks.


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí