JavaScript гэж юу вэ? JS

2B | +1% better 2day | dev.015

--

Бид нарын мэдэх, ашигладаг бүх л вэбсайтууд HTML + CSS + JavaScript (JS) гэсэн үндсэн 3 зүйл дээр тогтож байдаг. HTML нь үндсэн суурийг нь тавьж, CSS нь илүү гоё болгож харагдуулдаг бол JS нь үйлдэл хийх боломжийг олгодог. #жаваскрипт #javascript

JavaScript is a scripting or programming language that allows you to implement complex features on web pages.
Ex : create dynamically updating content, control multimedia, animate images…

HTML, CSS, JS : Brendan Eich 1995 invented JS

Ажиллагааны хувьд товчхондоо JavaScript engine нь JS code-г хөрвүүлээд ажиллуулдаг. Анх вэб хөтөч дээр ажиллахад зориулж гарч ирсэн тул олон янзын вэб хөтчүүдэд ижилхэн ажиллах стандарт хэрэгтэй болсон нь ECMAScript болж л дээ. Бидний түгээмэл хэрэглэдэг стандарт нь ES6 (ECMAScript 6) буюу 2015 оны хувилбар нь.

ES5 → ES6 → TypeScript

JavaScript-г ашиглаад дан ганц вэб биш мобайл апп, тоглоом эсвэл BackEnd сервер ч бас хийж болдог. React.js, Vue.js ашиглан FrontEnd, Node.js суурьтай Loopback, Nest.js ашиглан BackEnd эсвэл Ionic, React Native ашиглаад гар утасны апп хийж болно.

Mobile, Web FrontEnd, MEAN stack (front + back)

Хүсвэл вэбээ бүтнээр нь 1 tech stack буюу MERN - (MySQL, Express, React, Node), MEAN - (MongoDB, Express, Angular, Node) ашиглаж хийснээр ганцхан JavaScript хэлийг мэддэг байхад л болчихдог болсон. Бас сурахад ч амархан бөгөөд бичиглэл багатай байдаг.

Өнөөдрийн нийтлэлээрээ гэхдээ vanilla JavaScript буюу илүү дутуу сан, framework-гүйгээр JS-г ашиглаж Coding Interview-т хэрхэн бэлдэх талаар бага зэрэг ярилцана.

Nice quote : Language agnostic

JavaScript (JS) built-in methods

Энэ хэсэгт HTML дотроо JS-г оруулах (<script>) , хувьсагч зарлах (var, let, const), өгөгдлийн төрлүүд (number, bigInt, boolean, string, null, undefined, object ) болон operand (+,-,%,**,==, &&), if, switch, for, while нарын талаар ярихгүй. Basic гэж үзээд алгасах бөгөөд харин JavaScript-н built-in функцуудын талаар ярилцана.

1. Array methods

Хамгийн түгээмэл өгөгдлийн бүтэц болох Хүснэгт (Array). Хүснэгтийн араас нь шинэ элемент нэмэх (push), хасах (pop) боломжтойгоос гадна урд талаас нь бас хасаж (shift), нэмж (unshift) болдог.

JS Array : push pop shift unshift

Нэг анхаарах зүйл нь shift, unshift хийх нь push pop-с илүү удаан байдаг. Учир нь shift үйлдэл бүх элементүүдийг зөөх хэрэг гардаг.

Дараагийн 2 method нь зүсэх (slice), нийлүүлэх (splice). Эхнийх нь хүснэгтээс хэсэгчилж шинэ хувилбарыг үүсгэдэг бол splice нь хүснэгтийн зарим хэсгийг тасалж хаядаг.

slice VS splice

slice нь байгаа хүснэгтээс хүссэн хэсгээ copy-дож авч байгаа бол splice нь тухайн хүснэгтээ update хийж байгаа гэсэн үг.

Бас нэг зүйл нь splice зөвхөн устгаад зогсохгүй нэмж болдог.
splice(pos, deleteCount, …items)

Add new element ‘purple’ at index 2 (0 means no item will be deleted)

Мөн concat method-г ашиглаж 1 хүснэгтийн араас нөгөөг нь залгаж болно эсвэл reverse method-г ашиглаж хүснэгт доторх элементүүдийг дэс дарааллыг сольдог.

Цаашлаад хүснэгтээ sort-лж болно. Sort хийхдээ яаж гэдэг функцийг зааж өгөхгүй бол шууд ‘string’ гэж үзээд харьцуулалт хийдэг. Тиймээс энийг сайн анхаарах хэрэгтэй.

Хүснэгтийн хувьд их ашиглагддаг нэг method нь map. Хүснэгтийн элемент бүрийн хувьд ямар нэг үйлдэл/функцийг ажиллуулдаг.

map-тай төстэй үйлдэл хийдэг нь forEach. Гол ялгаа нь forEach дотор хийгдсэн үйлдлийн буцаасан утгыг ашиглахгүй шууд хаядаг. (ignored)

Мэдээж хүснэгт дотроо хайлт хийх хэрэг гарна. includes ашиглаад тухайн элемент байгаа эсэхийг шалгаад, indexOf ашиглаж хаана байрлаж байгааг нь олох боломжтой. Хэрвээ 1 элемент олон байгаа бол lastIndexOf-г ашиглаж сүүлчийнхийг нь олдог.

Бас find method-г ашиглаж тодорхой нөхцөлийн дагуу хайлтыг хийдэг. Хүснэгт дан ганц integer биш, object хадгалах нь түгээмэл байдаг учир энэ хайлт нь их хэрэг болдог. indexOf-тэй төстэйгөөр нөхцөлийг хангасан эхний элементийг буцаадаг.

find зөвхөн ганц элемент буцаадаг бол filter ашиглаад олныг буцааж болно.

За тэгээд бараг хамгийн сүүлчийн 1 method нь reduce. forEach хүснэгтийг loop-дэж үйлдэл хийдэг, map нь тэр үйлдлийн хариуг (same sized array) буцаадаг бол reduce ашигласнаар хүснэгтийн дотор тооцоолол хийж 1 утгыг гаргадаг.

JS Array : Reduce

Ихэнх тохиолдолд find, filter, map, reduce гэсэн method-уудыг л ашиглах ч заримдаа sort, slice, splice, shift болон string.split() хийж хүснэгт рүү шилжүүлэх хэрэг гарч магадгүй. Дээрх чухал 4-н method-уудыг зурган байдлаар харж ойлгомоор байвал ⬇️ ⬇️ ⬇️

JS Array 4 famouse methods illustrated

Төгсгөлд нь жишээ болгоод Coding Interview-т ирдэг 1 бодлого бодоод үзье. 1800. Maximum Ascending Subarray Sum - link

  • nums гэдэг эерэг утга (1–100 хүртэл тоо) бүхий array (нийт 100-с ихгүй элемент) дотроос нийлбэр нь хамгийн их болох, тасралтгүй үргэлжлэх, өсөх (ascending) subarray-г ол.
    — Жишээ : [1,3,2,5,7,6]→[1,3], [2,5,7] болон [6] нь ascending subarray

Бодлогыг бодохдоо reduce method-г ашиглаж тасралтгүй үргэлжлэх тоонуудын нийлбэрийг олно. Тэгэхийн тулд одоо байгаа тоо (current) өмнөх тооноос их эсэхийг шалгах хэрэгтэй. Их байвал нийлбэрийг тооцоод үргэлжлүүлнэ. Бага бол шинээр нийлбэрийг acc дотор хадгалаад цааш явна. Дараа нь reduce-с гарч ирсэн array дотроос хамгийн их утгыг хайж олоод, буцаана.Түүний тулд sort ашиглаж багаас нь их рүү нь эрэмбэлнэ.

Ингээд өнөөдөртөө дуусгая. Хэтэрхий урт болчих шиг боллоо. Дараагийн нийтлэлээр дахиад өөр бодлогууд бодно оо. Мөн JS-н талаар үргэлжлүүлэн сурцгаая.

--

--

Билигүн.Б (Програмч аав)
2B +1% better 2day

I am who I am... || өөрийнхөөрөө байхаас ичихгүй