Frontend Müsahibe Sualları

Frontend proqramlaşdırma sahəsində iş müsahibələrinə hazırlaşanlar üçün HTML, CSS və JavaScript ilə bağlı ən çox soruşulan sualları topladım. Semantic tag-lərdən başlayaraq Flexbox, Grid, Box Model və JavaScript-in fundamental anlayışlarına qədər ətraflı izahlarla dolu bu yazı, müsahibədə sizə əminlik qazandıracaq. İstər təcrübəli frontend developer olun, istərsə də bu sahəyə yeni başlayan biri – bu suallar və cavablar sizin üçün əvəzsiz qaynaq olacağını ümid edirəm. Daha çox bu tərzdə yazıların gəlməsini istəyirsinizsə və ya hər hansı təklif və iradlarınız varsa LinkedIn vasitəsilə əlaqə saxlaya bilərsiniz.

HTML/ CSS Müsahibə Sualları

Semantic tags nədir?

Frontend proqramlaşdırmada Semantic tags (semantik teqlər) HTML5-də təqdim olunan və veb saytların səhifə strukturunu daha mənalı və anlaşılan edən teqlərdir. Bu teqlər həm brauzerlər, həm axtarış sistemləri, həm də screen reader (ekran oxuyucu) kimi alətlər üçün məzmunun məqsədini daha aydın göstərir.

Semantic tags üstünlükləri

• - SEO (axtarış sistemləri optimizasiyası) üçün faydalıdır.
• - Kodun oxunmasını və baxımını asanlaşdırır.
• - Görmə əngəlli şəxslər üçün veb saytı daha əlçatan edir.
• - Brauzerlər və cihazlar arasında daha yaxşı uyğunluq təmin edir.

CSS-də Flexbox və Grid nədir?

Flexbox (Flexible Box Layout) və CSS Grid Layout – CSS-də elementləri səhifədə yerləşdirmək üçün istifadə olunan iki güclü layout texnologiyasıdır. Hər ikisi responsive dizayn yaratmaq üçün geniş istifadə olunur, lakin fərqli məqsədlər üçün daha uyğundurlar.

Flexbox nədir?

• - Bir istiqamətli yerləşdirmə üçün uyğundur: ya sətr (row), ya da sütun (column).
• - Əsasən elementləri bir xətt üzərində düzmək və aralarındakı məsafəni idarə etmək üçün istifadə olunur.
• - Parent (valideyn) elementi display: flex olur.

Grid nədir?

• - İki istiqamətli (row + column) layout yaratmaq üçündür.
• - Kompleks layoutlar – məsələn, səhifə strukturları, dashboardlar üçün daha uyğundur.
• - Parent elementi display: grid olur və satır-sütun strukturu qurulur.

Box Model nədir?

Box model – HTML-də hər bir elementin bir qutu (box) kimi davranmasını izah edən CSS konseptidir. Bu qutunun dörd əsas hissəsi var:

+---------------------------+
|        margin                      |  ← Xarici boşluq
|  +--------------------+     |
|  |     border                    |  |  ← Sərhəd
|  |  +-------------+         |  |
|  |  |  padding             |   |  |  ← Daxili boşluq
|  |  | +--------+          |   |  |
|  |  | | content          |  |   |  |  ← Məzmun (text, şəkil və s.)
|  |  | +--------+          |   |  |
|  |  +-------------+        |  |
|  +--------------------+   |
+-------------------------+

Box Model-in Tərkib hissələri:

Content – Əsas məzmun (mətn, şəkil və s.).

Padding – Məzmunla sərhəd arasındakı boşluq.

Border – Qutunun ətrafındakı sərhəd (xətt).

Margin – Qutunun digər elementlərlə arasındakı məsafə (xarici boşluq).

Pseudo class və Pseudo element nədir?

Pseudo-class – HTML elementinin müəyyən xüsusi vəziyyətini seçmək üçün istifadə olunan CSS selector-dur.

Məşhur Pseudo-class nümunələri:

Pseudo-element – Elementin xüsusi bir hissəsinə stil verməyə imkan verir. Məsələn, bir elementin əvvəlində və ya sonunda süni bir content əlavə etmək kimi.

Məşhur Pseudo-element nümunələri:

HTML-də block, inline, inline-block elementlər nələrdir?

Block elementlər HTML səhifəsində tam bir sətiri tutur. Yəni, ondan sonra gələn hər hansı bir element avtomatik olaraq yeni sətrə keçir. Block elementlərə genişlik (width) və hündürlük (height) kimi ölçülər tətbiq etmək mümkündür. İçərisində həm block, həm də inline elementlər yerləşdirilə bilər.

Məsələn: <div>, <p>, <h1>–<h6>, <section>, <article> və s.

Inline elementlər yalnız öz məzmunları qədər yer tuturlar və yeni sətrə keçməzlər. Onlar digər inline elementlərlə eyni sətrdə yanaşı dayana bilirlər. Lakin inline elementlərə genişlik (width) və hündürlük (height) vermək mümkün deyil – bu xüsusiyyətlər təsir etməz.

Məsələn: <span>, <a>, <strong>, <em>, <b>, <i> və s.

Inline-block elementlər görünüşcə inline elementlər kimi sətrin içində yerləşirlər (yəni yan-yana dura bilirlər), amma block elementlər kimi ölçüləri (width və height) təyin etmək mümkündür. Bu, onları dizayn baxımından daha çevik edir. Yəni həm sətirdə qalırlar, həm də ölçüləri idarə oluna bilir.

JavaScript Müsahibə Sualları

JavaScript-də primitive və non-primitive data tipləri nədir?

Primitive data tipləri dəyərin özünü saxlayır və immutable (dəyişməz) olurlar. Bu tiplər birbaşa yaddaşda saxlanılır və kopyalandıqda orijinal dəyərə təsir etmir.

Primitive Data Types: 

• - String – "salam"
• - Number – 42, 3.14
• - Boolean – true, false
• - Undefined – təyin olunmamış dəyişən (let x;)
• - Null – boş boş dəyər (let x = null)
• - BigInt – böyük ədədlər (12345678901234567890n)
• - Symbol – unikal identifikatorlar (Symbol("id"))

Non-primitive (mürəkkəb) tiplər — obyektə əsaslanan verilənlərdir. Bu tiplərdə dəyər deyil, onun yaddaşdakı ünvanı (reference) saxlanılır. Yəni, bir dəyişəni digərinə bərabər etdikdə hər ikisi eyni obyektə işarə edir.

Non-Primitive (Reference) Data Types:

• - Object – { ad: "Ali" }
• - Array – [1, 2, 3]
• - Function – function() {} və ya () => {}

Hosting haqqında məlumat ver. JavaScript-də var, let və const nədir?

JavaScript-də dəyişən yaratmaq üçün 3 əsas açar söz var: var, let, və const.

var - köhnə üsuldur, funksiyanın daxilində görünür, amma bloklarda yox. Məsələn, if və ya for daxilində yaratdığın var dəyişəni həmin blokdan kənarda da görünür. Bu, səhvlərə səbəb ola bilər. var ilə yaradılan dəyişənin deklarasiyası funksiyanın və ya script-in yuxarısına qaldırılır (hoisting olunur) əgər dəyişənə dəyər verilmədən əvvəl müraciət etsən, undefined alırsan, amma dəyişəni tam çağırmadan istifadə etməyə cəhd etsən, ReferenceError yaranır.

let daha müasir üsuldur, yalnız yarandığı blokda görünür. Yəni, if və ya for daxilində yaratdığın let dəyişəni blokdan kənarda görünmür. let də hoist olunur, amma ona dəyər verilmədən istifadə etməyə çalışsan, səhv (ReferenceError) alacaqsan. let dəyişənlərinin dəyərini dəyişmək olur, amma eyni blokda iki dəfə let ilə eyni adlı dəyişən yaratmaq olmaz.

const dəyişməyən (sabit) dəyişənlər üçündür. const ilə yaradılan dəyişənə mütləq yaradılarkən dəyər verilməlidir və həmin dəyər sonradan dəyişdirilə bilməz. const blok səviyyəsində görünür və hoisting olunur, amma Temporal Dead Zone (TDZ) səbəbindən dəyişən istifadə edilməzdən əvvəl ona dəyər verilməlidir.

Qeyd etmək lazımdır ki, const ilə yaradılan obyektlərin və arraylərin içindəki məlumatlar dəyişdirilə bilər, yəni obyektin və ya array elementlərinin dəyərləri dəyişə bilər, lakin dəyişənin özü başqa yerə yönləndirilə bilməz.

JavaScript-də Arrow Function nədir? Xüsusiyyətləri nələrdir?

ES6 (ECMAScript 2015) JavaScript-in böyük yenilənməsidir. 2015-ci ildə qəbul olunub və JavaScript dilinə çoxlu yeni xüsusiyyətlər əlavə edib. Bu yeniliklər kod yazmağı daha rahat, qısa və oxunaqlı edib.

ES6 ilə gələn əsas yeniliklərdən biri də arrow function-lardır.

Arrow function JavaScript-də funksiya yaratmağın daha qısa və sadə üsuludur. Adətən function açar sözünü yazmadan, sadəcə ox işarəsi => ilə funksiyanı yazırsan.

const topla = (a, b) => {
 return a + b;
};

Arrow Function-un əsas xüsusiyyətləri:

1. Qısa yazılış: Əgər funksiya tək sətrlikdirsə {} və return yazmağa ehtiyac yoxdur.

const addNumbers = (a, b) => a + b;
console.log(addNumbers(5, 3)); // 8

2. this davranışı: Arrow function-larda this ən yaxın əhatə edən (enclosing) kontekstdən götürülür. Yəni, this arrow function daxilində dəyişmir.

const obj = {
 value: 10,
 showValue: function() {
   setTimeout(() => {
     console.log(this.value); // 10
   }, 1000);
 }
};
obj.showValue();

Burada setTimeout-un içindəki arrow function this-i showValue funksiyasının kontekstindən götürür, ona görə də this.value 10 olur.

3. arguments-ı dəstəkləmir: Arrow function daxilində arguments mövcud deyil. Əgər parametr siyahısını almaq lazımdırsa, rest operatoru istifadə olunur.

const showArgs = (...args) => {
 console.log(args);
};
showArgs(1, 2, 3); // [1, 2, 3]

JavaScript single-threaded dilidir yoxsa multi-threaded?

JavaScript single-threaded dildir, yəni kodu bir vaxtda yalnız bir iş üzrə icra edir. Lakin asinxron əməliyyatları idarə etmək üçün event loop mexanizmi mövcuddur. Bu sayədə, məsələn, şəbəkə sorğuları və ya vaxt gecikmələri əsas axını bloklamadan arxa planda işləyir.

Beləliklə, JavaScript özü multi-threaded olmasa da, işləmə mühiti asinxron əməliyyatları effektiv şəkildə idarə etməyə imkan verir. Bu da tək vaxtda bir işi görən dildə asinxron proqramlaşdırmanı mümkün edir.

const ilə obyekt yaratdıqda, həmin obyektin dəyərlərini dəyişmək mümkündürmü?

Bəli, const ilə yaradılan obyektin özünü (yəni yaddaşda obyektin referansını) dəyişmək olmaz, amma obyektin içindəki sahələrini (xüsusiyyətlərini) dəyişmək mümkündür.

const user = { name: "Eli", age: 25 };

// Bu mümkündür, obyektin xüsusiyyətini dəyişmək
user.age = 26;
user.name = "Elvin";

// Amma bu olmaz, çünki user referansı dəyişdirilir
user = { name: "Tural", age: 30 }; // Xəta verir!

const dəyişənin referansını sabit saxlayır, yəni user başqa bir obyektə yönləndirilə bilməz. Amma həmin obyektin daxilindəki məlumatları dəyişmək azaddır.

React.js Müsahibə Sualları

React.js nedir?

React nədir? React.js — istifadəçi interfeysləri yaratmaq üçün istifadə olunan bir JavaScript kitabxanasıdır. Əsasən tək səhifəli tətbiqlərin hazırlanmasında geniş istifadə olunur. React-in əsas məqsədi veb saytların sürətli və interaktiv istifadəçi təcrübəsi təmin etməkdir.

React səhifəni tamamilə yenidən yükləmədən yalnız dəyişiklik baş verən hissəni yeniləməyə imkan verir. Bu isə istifadəçinin qarşılıqlı əlaqədə olduğu sistemlərin daha sürətli və axıcı işləməsini təmin edir. Bu məqsədlə React Virtual DOM adlı texnologiyadan istifadə edir.

React həmçinin komponent əsaslı bir yanaşma təklif edir. Bu o deməkdir ki, bir veb sayt bir neçə kiçik, müstəqil və yenidən istifadə edilə bilən hissəyə bölünür. Hər komponent öz daxilində işləyir və digər komponentlərlə birlikdə bütöv bir tətbiq (vebsayt) yaradır.

React.js müasir veb saytların hazırlanması zamanı geniş istifadə edilən, çevik və güclü bir alətdir. O, həm developerlər üçün kodun idarə olunmasını asanlaşdırır, həm də istifadəçilər üçün daha sürətli və rahat təcrübə yaradır.

Virtual DOM nədir? Real DOM ilə fərqləri nələrdir?

Virtual DOM (Virtual Document Object Model) — React tərəfindən istifadə olunan bir texnikadır və əsas məqsədi veb saytın daha sürətli və effektiv şəkildə yenilənməsini təmin etməkdir. Bu texnika real DOM-un performans problemlərini aradan qaldırmaq üçün yaradılıb.

Virtual DOM əslində real DOM-un bir nüsxəsidir, lakin bu nüsxə yaddaşda saxlanılır və brauzer tərəfindən birbaşa göstərilmir. React tətbiqdə hər hansı bir dəyişiklik baş verdikdə əvvəlcə bu dəyişiklikləri Virtual DOM üzərində tətbiq edir. Daha sonra Virtual DOM ilə əvvəlki versiya arasında fərqlər müqayisə olunur (bu prosesə "diffing" deyilir) və yalnız dəyişmiş hissələr real DOM-a ötürülür. Bu isə performans baxımından böyük üstünlük yaradır.

Real DOM isə brauzerin istifadəçiyə göstərdiyi orijinal sənəd modelidir. Burada baş verən istənilən kiçik dəyişiklik zamanı brauzer bütün DOM ağacını (səhifə strukturu) yenidən təşkil edir. Bu proses zaman baxımından daha çox resurs tələb edir və böyük tətbiqlərdə sürət problemlərinə səbəb ola bilər.

Yəni əsas fərqlər bunlardır:

• Performans baxımından: Virtual DOM daha sürətlidir, çünki dəyişikliklər əvvəlcə yaddaşda edilir və sonra optimallaşdırılmış şəkildə real DOM-a tətbiq olunur. Real DOM isə hər dəyişiklikdə veb saytın bütün strukturunu yenidən işləməyə məcburdur.
• Yenilənmə üsulu baxımından: Virtual DOM yalnız dəyişmiş hissələri yeniləyir. Real DOM isə kiçik dəyişikliklərdə belə bütün strukturun təkrar işlənməsini tələb edir.
• Səmərəlilik baxımından: Virtual DOM daha az sistem resursu istifadə edir, çünki real DOM-dakı kimi hər dəfə bütün elementi yeniləmək əvəzinə yalnız lazım olan hissələr dəyişdirilir.

React komponent nə zaman render olunur?

React komponenti müxtəlif hallarda render edilir, yəni istifadəçi interfeysində yenidən göstərilir. Bu proses React-in dəyişikliklərə necə reaksiya verdiyini və UI-nin necə yeniləndiyini müəyyən edir.

1. Başlanğıcda (initial render)
Komponent ilk dəfə yaradılıb DOM-a yerləşdiriləndə (mount edildikdə) render prosesi baş verir. Bu zaman React komponentin render funksiyasını işə salır və onun nəticəsini istifadəçiyə göstərir. Bu mərhələ komponentin görünməyə başladığı ilk andır.

2. State dəyişdikdə
Əgər komponentin daxili vəziyyəti (state) dəyişirsə, React avtomatik olaraq həmin komponenti yenidən render edir. Məsələn, useState hook-u ilə idarə olunan bir dəyər dəyişdikdə, komponent bu dəyişikliklərə reaksiya verir və UI-ni təzələyir.

3. Props dəyişdikdə
Komponentə ötürülən props-lar dəyişdikdə, React həmin komponentin əvvəlki props-larla yeni props-lar arasındakı fərqləri yoxlayır və fərq varsa, komponenti yenidən render edir. Bu, komponentin xaricdən aldığı məlumat dəyişdikdə baş verir.

4. Parent komponent render olunduqda
Əgər bir komponentin daxilində yerləşdiyi parent komponent hər hansı səbəbdən render edilərsə (məsələn, onun state-i və ya props-u dəyişərsə), child komponentlər də avtomatik olaraq render olunur. Hətta onların öz state və ya props-ları dəyişməsə belə, React onları yenidən hesablayır.