JS Hoisting буюу Өргөх
JavaScript-д Hoisting нь ажиллах орчинг үүсгэдэг. Hoisting нь Өргөх гэсэн утгыг илэрхийлнэ. Энэ хичээлээс бид JavaScript код хөшигний ард юу болдог талаар үзэх болно. Ингэсэнээр бид бичиж буй кодыг илүү сайн ойлгох алдаагүй програм бичэхэд түлхэц өгөх болно.
Declalation Hoisted
JavaScript-д хувьсагчийг ашигласны дараа зарлаж болно. Өөрөөр хэлбэл хувьсагчийг зарлахаас өмнө ашиглаж болно.
Доорх хоёр жишээг авч үзье. Үр дүн нь ижил утга буцаах болно.
Жишээ 1
<script>
x = 15; /* x хувьсагчид 15-г хийж байна */
ur_dun = document.getElementById("test"); /* test ID тай HTML элементийг хайж байна */
ur_dun.innerHTML = x; /* Х-н утгын элементэд харуулах болно */
var x; /* Хувьсагч зарлаж байна */
</script>
Жишээ 2
<script>
var x; /* Хувьсагч зарлаж байна */
x = 15; /* x хувьсагчид 15-г хийж байна */
ur_dun = document.getElementById("test"); /* test ID тай HTML элементийг хайж байна */
ur_dun.innerHTML = x; /* Х-н утгын элементэд харуулах болно */
</script>
Хувьсагчийг кодын эхэнд зарлах болон төгсгөлд зарлах үед ижил үр дүн буцаахыг бид дээрх жишээ 1 болон жишээ 2 оос харлаа.
Үүнийг ойлгох бид Hoist буюу Өргөх гэдэг ойлголтыг ойлгох шаардлагатай.
Hoist нь глобал орчинд зарласан бүх хувьсагч болон функцүүдийг дарааллын дагуу кодын эхэнд байрлуулдаг бөгөөд үүний дараа програмын ажиллах процесс эхлэдэг байна. Үүнийг Hoist буюу өргөх гэдэг байна.
Хэрэв функц дотор хувьсагч болон функц зарласан бол глобал орчинд зарласан хувьсагч болон функцийг дээр байрлуулсаны дараа буюу өргөсөнийн дараа дарааллын дагуу функц доторх хувьсагч болон функцийг дээр байрлуулах буюу өргөх болно үйлдлийг гүйцэтгэх болно.
Let, Const түлхүүр үгс
let болон const түлхүүр үгээр зарласан хувьсагчийг hoisting нь мөн адил дээш өргөх болно. Гэвч эхлүүлэхгүй алдаа өгөх болно.
Утга нь: Блок код нь хувьсагчийг мэддэг боловч зарлахаас өмнө ашиглаж боломжгүй байдаг.
let болон const хувьсагчийг зарлагдахаас өмнө ашиглавал ReferenceError алдаа өгнө.
Жишээ
ReferenceError алдаа өгөх болно.
<script>
phoneName = "Galaxy";
let phoneName;
</script>
const хувьсагчийг зарлахаас өмнө ашиглавал syntax error буюу бичгэллийн алдаа өгөх болно.
Let болон const түлхүүр үгийг өмнөх хичээлээс илүү дэлгэрэнгүй үзнэ үү.
Зөвхөн зарласан хувьсагчийг л Hoisting буюу өргөдөг
JavaScript-д Hoisting нь зөвхөн зарласан хувьсагчийг л өргөдөг. Харин хувьсагчийн утгыг бол өргөдөггүй юм. Жишээ 1 болон жишээ 2-г харьцуулан харцгаая.
Жишээ 1
<script>
x = 15; /* x хувьсагчид утга олгож эхлүүллээ */
z = 21; /* z хувьсагчид утга олгож эхлүүллээ */
ur_dun = document.getElementById("test"); /* test ID тай HTML элементийг хайж байна */
ur_dun.innerHTML = x + " " + y; /* Х ба Y-н утгын элементэд харуулах болно */
</script>
Жишээ 2
<script>
x = 15; /* x хувьсагчид утга олгож эхлүүллээ */
ur_dun = document.getElementById("test"); /* test ID тай HTML элементийг хайж байна */
ur_dun.innerHTML = x + " " + y; /* Х ба Y-н утгын элементэд харуулах болно */
z = 21; /* z хувьсагчид утга олгож эхлүүллээ */
</script>
Жишээ 2 -д у-н утга тодорхойлогдоогүй буюу undefined гэсэн байгааг анзаарна уу.
Учир нь var y -г hoist нь дээш өргөх болно. (= 21)-г бол биш юм.
Зөвхөн у-г hoist хийсэн тул утга нь undefined буюу тодорхойлогдоогүй гэсэн утга буцаах болно.
Жишээ 2 нь доорх жишээтэй ижил гэсэн үг юм.
Жишээ 2
<script>
var x = 15; /* x хувьсагчид утга олгож эхлүүллээ */
var z; /*z хувьсагчийг зарлаж байна*/
ur_dun = document.getElementById("test"); /* test ID тай HTML элементийг хайж байна */
ur_dun.innerHTML = x + " " + y; /* Х ба Y-н утгын элементэд харуулах болно */
z = 21; /* z хувьсагчид 21 гэсэн утга олгож эхлүүллээ */
</script>
Хувьсагчийг дээд талд нь зарлаж байгаарай
Hoisting буюу өргөхийг ойлгох нь маш чухал юм. Хэрэв хөгжүүлэгчид
Hoisting ойлгохгүй байвал програмд алдаа гарч болно.
Алдаанаас зайлс хийхийн тулд хамрах хүрээ бүрийн эхэнд хувьсагчийг зарлаж байгаарай.
Сэтгэгдэлүүд
