Frontend vakansiyasına dəvət edən şirkətlərin çox vaxt keçirdiyi texniki müsahibələrdə şirkətin ehtiyaclarına əsaslanan spesifik suallar olur. Lakin, çox vaxt frontend üzrə işləyənlər JavaScript, React JS kimi texnologiyalarla əlaqəli ortaq suallarla qarsılaşır. Bu bloqda frontend developer musahibelerinde rast gələ biləcəyiniz JavaScript və React js ilə əlaqəli mühüm suallara baxacağıq.
JavaScript Sualları
1. ES6 Yenilikləri nədir?
ES6 (ECMAScript 2015) JavaScript dilinə gətirilən əhəmiyyətli yeniliklərlə dolu bir versiyadır. Bu versiya proqramçıların işini asanlaşdıran yeni sintaksislər, funksiyalar və obyektlər təqdim edir.
- let və const əsasları
- Arrow funksiyaları
- Template literallarla string interpolasiyası (Dinamik mətnlər yaratmaq üçün)
- Destructuring və Spread, Rest operatorları
- Promise və async/await
- Map və Set
2. JavaScript-in "event loop" əsaslarını izah edin.
JavaScript-in "event loop" mexanizmi onun asinxron funksionallığını başa düşmək üçün əsas anlayışdır. Bu mexanizm JavaScript-in single-threaded (tək iplikli) olmasına baxmayaraq, yüksək performanslı və asinxron işləyərək veb saytın daha sürətli olmasına imkan yaradır.
JavaScript əsasən bir thread üzərində işləyir, yəni bir anda yalnız bir əməliyyatı icra edir. Sinxron əməliyyatlar birbaşa icra olunur, lakin asinxron əməliyyatlar üçün xüsusi mexanizm tələb olunur. Bu mexanizmin adı event loop-dur.
Əsas Komponentlər
Call Stack - JavaScript-in funksiyaları icra etmək üçün istifadə etdiyi "yığın"dır. Hər bir sinxron funksiya Call Stack-ə əlavə olunur (push) və icra edildikdən sonra yığından çıxarılır (pop).
Web APIs - Brauzer və ya Node.js mühərriki tərəfindən təmin olunan API-lərdir (məsələn, setTimeout, fetch, və DOM Events). Asinxron əməliyyatlar Web APIs-də işlənir.
Callback Queue - Asinxron əməliyyat tamamlandıqda, onun geri çağırış funksiyası Callback Queue-ya əlavə olunur. Event loop bu növbəni idarə edir və funksiyaları Call Stack-ə göndərir.
Event Loop Event loop "Callback Queue" və "Call Stack" arasında əlaqə yaradır: Əgər Call Stack boşdursa, Callback Queue-dan növbəti funksiyanı götürərək Call Stack-ə əlavə edir.
Hər birimiz frontend developer olaraq event loop-un necə işlədiyini anlamalıyıq. Aşağıdakı addımlarda izah etməyə çalışacam:
- JavaScript kodu oxunur və işlənir.
- Sinxron əməliyyatlar birbaşa Call Stack-də işlənir.
- Asinxron əməliyyatlar Web APIs-yə ötürülür.
- Asinxron əməliyyat tamamlandıqda, geri çağırış funksiyası Callback Queue-ya əlavə olunur.
- Call Stack boşdursa, Event Loop növbədən bir funksiyanı götürür və Call Stack-ə əlavə edir.
3. "Closure" anlayışı nədir?
Closure JavaScript-də bir funksiya öz daxilində elan olunan dəyişənlərə, eləcə də öz ətraf mühitindəki (lexical environment) dəyişənlərə daxil ola bildikdə yaranan anlayışdır. Closure vasitəsilə bir funksiya, hətta o, öz əhatə dairəsindən (scope) kənarda istifadə edilsə belə, həmin dəyişənlərə çıxış əldə edir. Closure məlumatların gizliliyini qorumaq, yaddaşda dəyişənləri saxlamaq və funksional proqramlaşdırmada vacib rol oynayır.
Closure sadə şəkildə belə işləyir: Bir funksiya başqa bir funksiyanı qaytarır və həmin qaytarılan funksiya xarici funksiyanın dəyişənlərinə çıxış əldə edir.
Closure-un Əsas Prinsipləri
- Lexical Scope: Daxili funksiya, öz daxilində elan olunmayan, lakin yuxarı səviyyəli əhatə dairəsində olan dəyişənlərə çıxış əldə edə bilir.
- Data Encapsulation: Closure, məlumatların "gizli" saxlanılmasını təmin edir. Daxili funksiyaya çıxış verilmədikdə, dəyişənlər xarici mühitdən qorunmuş olur.
- Memory Allocation: Closure-lər dəyişənləri yaddaşda saxlayır, yəni dəyişənlər müvəqqəti yox olmur, əksinə, daxili funksiyalar işlədiyi müddətdə mövcud qalır.
4. "This" açar sözü üçün izah verin.
JavaScript-də this açar sözü, funksiyanın və ya obyektin cari kontekstini göstərir. this, istifadə olunduğu mühitdən (kontekstdən) asılı olaraq fərqli obyektləri təmsil edə bilər. Onun məna və davranışı çağırış formasına görə dəyişir. Brauzerdə qlobal kontekstdə this hər zaman window obyektini göstərir. Node.js-də isə qlobal kontekstdə this global obyektə işarə etmir; o, undefined olur (strict mode-da).
5. Hosting nədir? Var, let və const dəyişənlərinə görə fərqli davranışları.
Hoisting, JavaScript-in dəyişənləri, funksiyaları və sinifləri onların elan olunduğu yerdən asılı olmayaraq, kodu icra etməzdən əvvəl yuxarı qaldırması mexanizmidir. Hoisting prosesi zamanı dəyişən və ya funksiya elanları (beyanı) kodun əvvəlində baş verir, lakin onların dəyərləri yerində qalır.
JavaScript-də var, let və const hoisting zamanı fərqli davranışlara malikdir.
var ilə Hoisting - Kodun icrası zamanı dəyişən istifadə olunmazdan əvvəl dəyər undefined olur. Köhnə üsuldur və dəyişənlərin dəyərləri olmadan yuxarı qaldırılmasına səbəb olur.
let ilə Hoisting - let ilə elan olunan dəyişənlər də hoist edilir, lakin Temporal Dead Zone (TDZ) adlı bir mərhələdə qalır. TDZ müddətində dəyişənə dəyər verilməmişsə və ya istifadə edilərsə, ReferenceError baş verir. Daha təhlükəsizdir, çünki TDZ daxilində dəyişənlərə giriş məhdudiyyətini təmin edir.
const ilə Hoisting - const ilə elan olunan dəyişənlər də hoist edilir, lakin onlar dərhal təyin edilməli və TDZ qaydalarına tabedir. Təyin edilməmiş const dəyişəninə çıxış etmək mümkün deyil. Sabit dəyərlər üçün nəzərdə tutulub və dərhal təyin edilməlidir.
React.JS Sualları
1. React komponent nədir? Hansı növləri var?
React komponent, istifadəçi interfeysi yaratmaq üçün təkrar istifadə edilə bilən bir kod parçasıdır. Komponentlər React tətbiqlərinin əsas hissəsidir və hər biri müstəqil olaraq idarə olunan bir UI hissəsini təmsil edir.
Komponentlər funksiya və ya siniflər şəklində yazıla bilər və bir React tətbiqində digər komponentləri birləşdirərək kompleks strukturlar yaratmağa imkan verir.
React Komponentlərinin Növləri
a) Funksional Komponentlər (Functional Components)
- React komponentlərinin daha sadə və yüngül növüdür.
- JavaScript funksiyası kimi yazılır.
- Əsasən props qəbul edir və JSX (JavaScript XML) qaytarır.
- React Hooks (məsələn, useState, useEffect) vasitəsilə state və digər xüsusiyyətlərdən istifadə edə bilir.
b) Sinif Komponentləri (Class Components)
- ES6 sinifləri ilə yaradılır.
- state və lifecycle methods-dan (məsələn, componentDidMount, componentDidUpdate) istifadə etməyə imkan verir.
- render metodu ilə JSX qaytarır.
2. State və Props arasındakı fərqi nədir?
React-də state və props hər ikisi komponentlər arasında məlumat mübadiləsi və idarəetmə üçün istifadə olunur, amma onların funksiyaları və istifadə qaydaları fərqlidir.
State, komponentin daxili məlumatlarını və vəziyyətini idarə edən bir obyekt və ya dəyişkəndir. State, komponentin özündən idarə edilir və zamanla dəyişə bilər. Bu dəyişikliklər React tərəfindən avtomatik olaraq izlənir və komponentin render edilməsinə şərait yaradır. State yalnız o komponentdə istifadə olunur ki, onu yaradır və dəyişdirir.
Misal olaraq, bir istifadəçi formu doldurarkən istifadəçi tərəfindən daxil edilən məlumatları saxlamaq üçün state istifadə edə bilərik. Bu zaman hər bir dəyişiklik state-də saxlanılır və forma yenidən render olunur.
Props, "properties" sözünün qısaltmasıdır və komponentlərə xarici məlumat və parametrlər göndərmək üçün istifadə olunur. Props dəyişdirilə bilməz (immutable) və bir komponentdən digərinə məlumat ötürmək üçün istifadə edilir. Başqa sözlə, props bir komponentin yuxarıdan aşağıya doğru (parent -> child) məlumat almasını təmin edir.
State və Props arasındakı əsas fərqlər
- State, komponentin öz tərəfindən idarə olunur və dəyişdirilə bilər.
- Props isə parent komponenti tərəfindən təmin edilir və dəyişdirilə bilməz (immutable).
- State zamanla dəyişə bilər, beləliklə komponentin görünüşü yenidən render olunar.
- Props dəyişməzdir və yalnız parent komponenti tərəfindən dəyişdirilə bilər.
- State, komponentin daxili məlumatlarını saxlamaq və idarə etmək üçün istifadə olunur.
- Props, komponentlər arasında məlumat ötürmək və paylaşmaq üçün istifadə olunur.
- State, yalnız həmin komponentin daxilində istifadə edilə bilər.
- Props, bir komponentdən başqa bir komponentə, yəni parent-dan uşağa göndərilə bilər.
3. useEffect hook-u nədir? Hansı hallarda istifadə olunur?
useEffect React-də side effect əməliyyatlarını idarə etmək üçün istifadə olunan bir hook-dur. React tətbiqlərində side effect əməliyyatları, DOM manipulyasiyası, API çağırışları, asinxron əməliyyatlar, abunəliklər və sair kimi əməliyyatları təmsil edir. Bu əməliyyatlar React component render-inin kənarında baş verir və komponentin davranışını dəyişdirə bilər.
useEffect hook-u, komponentin render edilməsindən sonra müəyyən funksiyaların çağırılmasını təmin edir. useEffect ilə React-də side effect əməliyyatlarını asanlıqla həyata keçirə bilərik.
useEffect funksiyasına daxil olan callback funksiyası komponent render edildikdən sonra bir dəfə işləyir və eyni zamanda state və ya props dəyişdikdə də yenidən çalışa bilər.
4. React-da "virtual DOM" nədir? Necə işləyir?
Virtual DOM, React-in təklif etdiyi və gerçək DOM ilə müqayisədə performans-ı artırmağa yönəlmiş bir anlayışdır. Virtual DOM, DOM-u (Document Object Model) təmsil edən yüngül və JavaScript obyektlərindən ibarət olan bir nüsxə və ya abstraksiya olaraq fəaliyyət göstərir. React-də hər bir komponentin görünüşü və strukturu virtual DOM-da saxlanır və gerçək DOM ilə müqayisə edilərək yalnız zəruri olan dəyişikliklər tətbiq edilir. Bu yanaşma, istifadəçi interfeysi (UI) ilə əlaqəli əməliyyatları daha sürətli və effektiv etməyə imkan verir.
Virtual DOM-un İşləmə Prinsipi:
- React, komponentlərdən alınan məlumatları virtual DOM-a render edir. Burada hər bir React komponenti, özünün virtual DOM-unu yaradır.
- İstifadəçi bir hərəkət etdikdə (məsələn, formu doldurmaq, düyməyə basmaq və s.), komponentin state və ya props dəyişir. Bu dəyişikliklər virtual DOM-da əks olunur, amma gerçək DOM hələ yenilənmir.
- React, virtual DOM-da edilən dəyişiklikləri öncəki virtual DOM ilə müqayisə edir. Bu prosesi Reconciliation adlandırırlar. Yalnız dəyişiklik olan hissələr tapılır və bu dəyişikliklər gerçək DOM-a tətbiq edilir.
- React yalnız gözlə görünən dəyişiklikləri gerçək DOM-a tətbiq edir, bu da render performansını artırır. Gerçək DOM-a yalnız dəyişiklik olan hissələr yenilənir, digər hissələr isə olduğu kimi qalır.
- React-in bu diffing algorithm (fərqləndirmə alqoritması) yanaşması ilə, yalnız zəruri olan hissələr gerçək DOM-a tətbiq olunduğu üçün, çoxsaylı render əməliyyatları zaman alıcı və resurs istehlaklı olmur.
5. React Context API nədir? Hansı hallarda istifadə edilir?
React Context API, React-də global olaraq verilən məlumatları müxtəlif komponentlər arasında paylaşmağa imkan verən bir alət vasitəsidir. Bu API, prop-ların dərinliklərə ötürülməsi (prop drilling) problemini həll edir və komponentlər arasında məlumatların paylaşılmasını sadələşdirir.
React Context, provider və consumer komponentləri vasitəsilə, komponentlər arasında state və ya props məlumatlarını birbaşa ötürməyə imkan verir. Bu, komponentləri dərinliyə qədər keçmədən məlumatları bir neçə komponentə ötürməyə imkan verir.
- Context Provider: Bu komponent məlumatı təmin edir və həmin məlumatı Context-in daxilində olan digər komponentlərə ötürür.
- Context Consumer: Bu komponent, Context-dən məlumatı alır və istifadə edir.
Nəticə
Frontend müsahibələri çox vaxt sadə suallarla yanaşı dərin texniki biliklərinizi də yoxlayır. Müsahibəyə hazırlıq edərkən nümunə kodlarla praktika etmək, əsas prinsipləri dərin izah etməyi bacarmaq vacibdir. Bir əvvəlki bloqumuzda frontend müsahibə suallarından HTML və CSS aid olan suallara toxunmuşduq. Unutmamaq lazımdır ki, günümüzdə frontend developer müsahibələrində Html/Css-dən çox JavScript/ React.JS biliklərinə üstünlük verilir. Əlavə bildirmək istədiyiniz fikir, irad və ya məsləhətləriniz olarsa Linkedin platformasında Emil Gasarayev hesabı ilə əlaqə saxlaya bilərsiniz.