JavaScript suhbati uchun eng muhim 30 ta savol va javob

Java va JavaScript syntax'i va qo'llanilish sohasi jihatidan turli dasturlash tillaridir. Java — 90-yillarda Sun Microsystems tomonidan yaratilgan va hozirda Oracle'ga tegishli bo'lgan dasturlash tili. U ko'pincha dasturiy ta'minot yaratishda ishlatiladigan, umumiy maqsadli, object-oriented dasturlash tilidir. Bunday dasturiy ta'minotga desktop ilovalar, veb-ilovalar va Android uchun mobil ilovalar misol bo'ladi.

Java shuningdek statically typed til, ya'ni o'zgaruvchining ma'lumot tipi compile time'da ma'lum bo'lishi kerak. Dasturni ishga tushirishdan oldin qanday ma'lumot bilan ishlayotganingizni bilishingiz lozim.

JavaScript esa, aksincha, 1995-yilda Netscape kompaniyasida Brendan Eich tomonidan yaratilgan scripting tilidir. U dynamically typed til, ya'ni o'zgaruvchining ma'lumot tipi runtime'da aniqlanadi. O'zgaruvchidan foydalanishdan oldin uning ma'lumot tipini e'lon qilishingiz shart emas. Batafsil bilish uchun Java va JavaScript o'rtasidagi farqlar haqidagi qo'llanmani ko'rib chiqing.

JavaScript'da ikkita asosiy ma'lumot tipi bor: primitive va non-primitive. Primitive ma'lumot tiplari JavaScript'da ishlaydigan barcha ma'lumotlaringizni tashkil etuvchi asosiy elementlardir. Ular immutable, ya'ni ularni yaratganingizdan keyin qiymatini o'zgartira olmaysiz. Bundan tashqari, ular xotirada yakka qiymat sifatida saqlanadi. Primitive ma'lumot tiplariga ba'zi misollar:

• Number (sonli qiymatlar, masalan, 78).
• String (matnli qiymatlar, masalan, "hey").
• Boolean qiymatlar (true yoki false).
• Null
• Undefined
• Symbols

Non-primitive ma'lumot tiplari, ular reference ma'lumot tiplari deb ham ataladi, ma'lumotlar guruhlarini yoki murakkab tuzilmalarni saqlaydi. Ular mutable, ya'ni ularni yaratganingizdan keyin ham qiymatini o'zgartirish mumkin. Primitive ma'lumot tiplaridan farqli o'laroq, ular xotirada yakka qiymat sifatida emas, reference sifatida saqlanadi. Non-primitive ma'lumot tiplariga ba'zi misollar:

• Object (key-value juftliklari to'plami, masalan, { name: 'cess', age: 26 };).
• Array (masalan, [10, 12, 13]).
• Function (masalan, function add(a = 10, b = 5) { return a + b; }).

Undefined o'zgaruvchilar — developer e'lon qilgan, lekin hali qiymat bermagan o'zgaruvchilar.

// Example 1

let study;

console.log(study); // undefined var

// Example 2

let myObj = {}; // empty object

console.log(myObj.name); // undefined because name does not exist

Null o'zgaruvchi — bo'sh bo'lgan o'zgaruvchi yoki property. Null'dan o'zgaruvchida hech qanday qiymat yo'qligini ko'rsatmoqchi bo'lganingizda yoki o'zgaruvchining qiymatini tozalamoqchi bo'lganingizda foydalanasiz.

// Example 1

let study = null;

console.log(study); // null

// Example 2

let obj = {
    name: "cess",
};

obj.name = null;

console.log(obj.name); // null

isNaN funksiyasi qiymatning "Not a Number" (son emas) ekanini tekshirish uchun ishlatiladi. U berilgan qiymatni songa aylantirishga harakat qiladi va natija NaN bo'lgan-bo'lmaganini tekshiradi. Agar qiymat son bo'lmasa, true qaytaradi, son bo'lsa — false.

console.log(isNaN("study")); // true

console.log(isNaN(4)); // false

JavaScript'da o'zgaruvchilarni nomlash qoidalari quyidagilar:

• O'zgaruvchi nomlarini camelCase'da yozing. O'zgaruvchi nomini kichik harf bilan boshlang, keyingi har bir yangi so'zni esa bosh harf bilan yozing, masalan, myName.
• Ma'noni aniq ifodalaydigan o'zgaruvchi nomlaridan foydalaning. Parol uchun o'zgaruvchiga "p" deb nom berish o'rniga userPassword nomidan foydalaning.
• if, for yoki while kabi JavaScript keyword'larini o'zgaruvchi nomi sifatida ishlatmang.
• O'zgaruvchi nomlariga tinish belgilari va matematik operatorlar kabi maxsus belgilarni qo'shmang. Faqat pastki chiziq (_) va dollar belgisi ($) dan foydalaning.
• O'zgaruvchi nomlarini raqam bilan boshlamang; raqamlarni nomning oxiriga qo'ying. Masalan, 99myName deb nomlash mumkin emas, lekin myName99 to'g'ri.

O'zgaruvchini e'lon qilish — JavaScript'da qiymatni saqlash uchun o'zgaruvchi yaratish. Siz unga ma'noli nom berasiz va keyin shu nom orqali qiymatni saqlashingiz yoki olishingiz mumkin. JavaScript'da o'zgaruvchilarni e'lon qilish uchun var, let va const keyword'laridan foydalaniladi.

JavaScript'ning eski versiyalarida o'zgaruvchilar var keyword'i bilan e'lon qilingan**.** var keyword'i bilan e'lon qilingan o'zgaruvchilar function scope'ga ega. U hatto bitta scope ichida ham o'zgaruvchilarga bir xil nom va yangi qiymat berishga ruxsat beradi. Biroq bu chalkashlik va xatolarga olib kelishi, kodingizni debugging qilishni qiyinlashtirishi mumkin.

var course = "java";

var course = "JavaScript interview questions"; // No error

console.log(course); // JavaScript interview questions

let keyword'i — ECMAScript 2015 (ES6)'da paydo bo'lgan, JavaScript'da o'zgaruvchilarni e'lon qilishning yangi usuli. let keyword'i bilan e'lon qilingan o'zgaruvchilar block scope'ga ega. Qiymatini o'zgartirish mumkin, lekin bitta block scope ichida o'zgaruvchiga bir xil nomni qayta berib bo'lmaydi. Bu var keyword'iga nisbatan kodni debugging qilishni osonlashtiradi.

let course = "java";

let course = "JavaScript interview questions"; 

console.log(course);// Identifier 'course' has already been declared



// Example 2

let course = "java";

course = "JavaScript interview questions"; 

console.log(course);// JavaScript interview questions

const keyword'i let keyword'i kabi ishlaydi, chunki ikkalasi ham block-scoped. Biroq bitta scope ichida const o'zgaruvchining qiymatini o'zgartirib ham, uning nomini boshqa o'zgaruvchiga qayta berib ham bo'lmaydi.

const course = "java";

course = "JavaScript interview questions"; 

// Error: Assignment to constant variable.

Global scope — JavaScript kodingizning istalgan joyidan murojaat qilish mumkin bo'lgan barcha o'zgaruvchilar. O'zgaruvchini hech qanday funksiya yoki block'dan tashqarida e'lon qilsangiz, u global o'zgaruvchiga aylanadi. Global o'zgaruvchilardan haddan tashqari ko'p foydalanish kodingizni o'qishni qiyinlashtirishi mumkin.

Local scope esa, aksincha, faqat funksiya ichida murojaat qilish mumkin bo'lgan o'zgaruvchidir. O'zgaruvchini istalgan funksiya yoki kod block'i ichida e'lon qilsangiz, u local ****o'zgaruvchiga aylanadi. Bu JavaScript kodingizni tartibli qilishga yordam beradi va uni o'qishni osonlashtiradi. JavaScript'da kod yozayotganda imkon qadar global scope o'zgaruvchilari o'rniga local scope o'zgaruvchilaridan foydalanishga harakat qiling.

Global object'lar — global scope va uning property'lari (masalan, o'zgaruvchilar) uchun konteyner. Uning property'lariga kodingizning istalgan joyidan murojaat qilishingiz mumkin. Veb-brauzerda global object — "window", Node.js'da esa — "global".

Hoisting — kod ishga tushishidan oldin o'zgaruvchi yoki funksiya declaration'ining o'z scope'ining eng yuqorisiga ko'chirilishi. Bu o'zgaruvchi yoki funksiyani yaratishdan (e'lon qilishdan) oldin ham ishlatish mumkinligini anglatadi.

console.log(hoistedVariable); // undefined

var hoistedVariable = "initialized var hoistedVariable";

console.log(hoistedVariable); // correct value

Yuqoridagi misolda men "hoistedVariable" o'zgaruvchisini yaratishdan oldin birinchi console.log'da ishlatdim. Odatda bu xatoga olib kelardi, lekin hoisting tufayli "undefined" chiqadi. Kompyuter var hoistedVariable o'zgaruvchisini yaratishni yuqoriga ko'chiradi, lekin o'zgaruvchining qiymatini ko'chirmaydi. O'zgaruvchiga qiymat berganimdan so'ng ikkinchi console.log to'g'ri natijani ko'rsatadi.

"let" va "const" keyword'lari hoisting bilan unchalik yaxshi ishlamaydi. Ular o'z scope'ining eng yuqorisiga ko'chirilsa ham, darhol qiymat olmaydi. Natijada "temporal dead zone" hosil bo'ladi: o'zgaruvchilar e'lon qilinmaguncha (yaratilmaguncha) ularga murojaat qilib bo'lmaydi. Agar "let" yoki "const" o'zgaruvchilarini e'lon qilishdan oldin ishlatishga harakat qilsangiz, "ReferenceError" xatosini olasiz.

JavaScript'dagi "this" keyword'i kod qaysi obyekt yoki context'da bajarilayotgan bo'lsa, o'shanga ishora qiladi. Bunday kodlarga funksiya chaqiruvlari, obyekt metodlari, event handler'lar va boshqalar misol bo'ladi. U shu obyektning property'lari va metodlariga murojaat qilish uchun ishlatiladi. Bu keyword'ning qiymati funksiyadan qanday foydalanishingizga (yoki uni qanday chaqirishingizga) qarab o'zgaradi.

"this" metod context'ida ishlatilganda, "this" shu metodga egalik qiluvchi obyektni bildiradi. Mustaqil funksiyalarda "this" global object bo'ladi, lekin strict mode'da u undefined'ga teng. Shuningdek, event handler'larda "this" event'ni yuzaga keltirgan elementga ishora qiladi.

"==" va "===" — comparison operator'lar, lekin ular type coercion'ga qanday munosabatda bo'lishi bilan farq qiladi. "==" comparison operator'i qiymatlar bir xil ekanini tekshiradi, ammo ma'lumot tipiga e'tibor bermaydi.

"===" comparison operator'i esa qiymat ham, ma'lumot tipi ham bir xil ekanini tekshiradi.

console.log(50 == "50"); True: string "50" is converted to number 50

console.log(50 === "50"); False: false, no type coercion due to different data types

console.log(10 + 2 + "9"); // 129

JavaScript amallarni bajarishdan oldin qiymatlarni bir xil type'ga keltirish uchun type coercion'dan foydalanadi. U avval ikkala son 10 + 2 ni qo'shib, 12 ni hosil qiladi, so'ngra 12 sonini "9" string'iga qo'shishga harakat qiladi. JavaScript'da son va string'ni arifmetik qo'shib bo'lmagani uchun u 12 sonini "12" string'iga aylantiradi, ya'ni "12" + "9" = "129"

Function declaration — JavaScript'da funksiya yaratish uchun ishlatiladigan statement. U function keyword'i bilan boshlanadi, undan keyin funksiya nomi va parametrlar keladi. Nomlash qoidalariga amal qilsangiz, funksiyangizga yoki parametrlarga istalgan nom berishingiz mumkin. Bundan tashqari, function declaration'lar "hoist qilinadi", ya'ni ularni aniqlanishidan oldin ham chaqirish mumkin.

function functionName(parameters) {
        // Body of the function
}

Function expression ham statement bo'lib, funksiyani expression sifatida aniqlaydi. U let, const yoki var kabi o'zgaruvchini e'lon qilishdan boshlanadi, undan keyin assignment operator (=) keladi va unga nom bermasangiz, nom talab qilinmaydi (anonymous function). Shuningdek, ular "hoist qilinmaydi", ya'ni ularni faqat aniqlaganingizdan keyin ishlatishingiz mumkin, aks holda xato olasiz.

let variableName = function(parameters) {
        // Body of the function
}

// The variableName will act as the function name in a function expression.

Callback funksiya — bir funksiya boshqa funksiyaga argument (qiymat) sifatida beradigan funksiya. Ikkinchi funksiya o'z amalini tugatgach, callback funksiyani ishga tushiradi. Callback'lar ko'pincha API chaqiruvlarini amalga oshirish kabi vazifalarni bajarish uchun boshqa funksiyalar bilan birga ishlatiladi.

Quyidagi misolda sendMessage funksiyasi callback funksiya hisoblanadi, chunki u kodni keyinroq ishga tushirish uchun sendNow funksiyasiga beriladi (uzatiladi).

function sendMessage(message) {
  console.log("Message: " + message);
}

function sendNow(callback, message) {
  callback(message);
}
sendNow(sendMessage, "Hello, I'm learning JavaScript!"); // Message: Hello, I'm learning JavaScript!

Callback'lar kabi higher-order funksiyalar ham boshqa funksiyalar bilan ishlaydi. Higher-order funksiya boshqa funksiyani argument sifatida qabul qiladi yoki natija sifatida funksiya qaytaradi. Ular ko'pincha asynchronous operatsiyalarni boshqarish kabi vazifalarni bajarish uchun ishlatiladi.

function createMessage(prefix) {
  return function (message) { // returns a new function
    console.log(prefix + " " + message);
  };
}

const sendMessage = createMessage("Hello"); // creates a new function

sendMessage("Cess!"); // Hello, Cess!

Immediately invoked function expression'lar, ya'ni IIFE'lar, yaratilishi bilanoq ishga tushadi. IIFE o'zgaruvchilar uchun local scope yaratadi, shunda ular kodning boshqa qismlariga xalaqit bermaydi. IIFE yaratish uchun kodingizni () qavslar ichiga joylashtirasiz. So'ngra funksiya oxiriga yana bir juft () qavs qo'shsangiz, u darhol ishga tushadi.

// Syntax

(function () {
        // write your code here
}());

// Example

(function () {
  console.log(
    "roadmap.sh helps prepare for  JavaScript job interview questions"
  );
})();

String'ni split(), reverse() va join() metodlari yordamida teskari aylantirish mumkin.

function reverseMyString(str) {
  return str.split("").reverse().join("");
}

let myString = "Learn JavaScript";

let reverseString = reverseMyString(myString);

console.log(reverseString); // tpircSavaJ nraeL

Sonning juft yoki toq ekanini tekshirish usullaridan biri — modulus operator'i (%) yordamida funksiya yaratish. Bu bo'lish amalining qoldig'ini topishga yordam beradigan matematik amal.

Quyidagi misolda bo'luvchi sifatida "2" soni ishlatilgan, uning o'zi ham juft son. Agar sonni "2" ga bo'lgandagi qoldiq "0" bo'lsa, u juft son. Qoldiq "0" bo'lmasa, u toq son.

function EvenOrOddNum(num) {

  if (num % 2 === 0) {
    return `${num} is even`;
  } else {
    return `${num} is odd`;
  }
}

console.log(EvenOrOddNum(30)); // 30 is even

console.log(EvenOrOddNum(31)); // 31 is odd

String tarkibida ma'lum bir so'z bor-yo'qligini bilish uchun search() yoki indexOf() kabi turli metodlardan foydalanish mumkin. Lekin men string'da ma'lum bir substring bor-yo'qligini tekshirish uchun includes() metodidan foydalanaman. Agar substring string ichida mavjud bo'lsa, u "true", aks holda "false" qaytaradi.

function findSubstring(mainString, substring) {
  return mainString.includes(substring);
}

console.log(findSubstring("Learn JavaScript", "JavaScript")); // True - It contains JavaScript

console.log(findSubstring("Learn JavaScript", "Python")); // False - It doesn't contain Python

Rest parameter ko'plab argumentlarni bitta massiv ko'rinishida ifodalash imkonini beradi. U funksiya siz ko'rsatgan parametrlardan tashqari qo'shimcha argumentlarni ham qabul qilishi kerak bo'lganda foydali.

"Rest parameter" syntax'i uchta nuqta (...) va undan keyin keladigan parametr nomidan iborat. Shuningdek, rest parameter'ni boshqa qiymatlar bilan birga ishlatayotgan bo'lsangiz, u ro'yxatda oxirgi bo'lishiga ishonch hosil qiling.

function functionName(...restParameter) {
    // Body of the function
}

// Example 2

function functionName(value1, value2, ...restParameter) {
    // Body of the function
}

Arrow function'lar — ES6 (2015) bilan paydo bo'lgan, JavaScript'da funksiyalarni qisqaroq yozish usuli. Unda funksiyani aniqlash (yaratish) uchun function keyword'i o'rniga strelka (=>) belgisi ishlatiladi. Arrow function'lar "this"ni o'zini o'rab turgan scope'ga bog'laydi. Ya'ni ular "this" keyword'ining ma'nosini atrofidagi koddan aynan o'sha holicha meros qilib oladi. Bu arrow function'dan tashqarida joylashgan, lekin uning ichidan ham murojaat qilish mumkin bo'lgan o'zgaruvchilar, funksiyalar, obyektlar va hokazolar bilan ishlashni osonlashtiradi.

Oddiy funksiyalar esa, aksincha, "this" keyword'ini funksiyaning o'ziga bog'laydi. "this" keyword'i funksiyani qanday chaqirishingizga qarab o'zgaradi, bu esa ba'zan xatolarga sabab bo'lishi mumkin. Masalan, oddiy funksiyani obyekt metodi sifatida chaqirsangiz, "this" o'sha obyektga ishora qiladi. Biroq xuddi shu funksiyani mustaqil funksiya sifatida chaqirsangiz, "this" global object'ga ishora qiladi (brauzerda odatda window obyekti).

// arrow function with this

function personName(name) {
  this.name = name; 
  this.sayName = () => {
  console.log(this.name); // 'this' is inherited from the surrounding context (constructor function: personName)
  };
}

const cess = new personName("cess");

cess.sayName(); // cess

// regular function with this

function Person(name) {
  this.name = name; // Assigns the "name" parameter as the "name" property of the object you created.

  this.sayName = function () {

console.log(this.name); // Refers to the "name" property of the object that calls this function.
  };
}

const cess = new Person("cess");

cess.sayName(); // cess

Arrow function'larda faqat bitta expression bo'lsa, figurali qavslar {} va return keyword'ini tushirib qoldirish mumkin. Bu kodingizni toza qiladi hamda uni sizga ham, boshqa developer'larga ham o'qishni osonlashtiradi. Agar ikki yoki undan ortiq expression bo'lsa, return keyword'idan foydalaning va kodingizni figurali qavslar {} ichiga joylashtiring**.**

// regular function

function doMath(a,b) {
    return a + b;
}

console.log(doMath(200, 500)); // 700

// arrow function 

const doMath = (a, b) => a + b; // single expression

console.log(doMath(200, 500)); // 700

// multiple expression

let doMath = (a, b) => {
  let result = a * b;
  return result;
};

console.log(doMath(200, 500)); // 100,000

Function scope — funksiya ichida aniqlangan o'zgaruvchilarning scope'i. Bunday o'zgaruvchilarning qiymatlariga faqat shu scope ichida murojaat qilish mumkin, undan tashqarida emas. Bu bir xil nomli o'zgaruvchilar paydo bo'lishining oldini oladi va JavaScript kodingizni toza saqlaydi.

function myStudyPlan() { 
  var studyPlanOne = "Top JavaScript interview questions for web developers";
  let studyPlanTwo = "Top JavaScript interview questions for web developers";
  const studyPlanThree = "Top JavaScript interview questions for web developers"; 

  console.log(studyPlanOne); 
  console.log(studyPlanTwo);  
  console.log(studyPlanThree); 
} 

myStudyPlan(); // Calls the function 

Prototype inheritance — obyektlarning boshqa obyektlardan property va metodlarni meros qilib olishi. Har bir obyektning "prototype" deb ataladigan ota obyekti bo'ladi. Obyektdagi biror property yoki metoddan foydalanmoqchi bo'lsangiz, JavaScript avval obyektning o'zida u bor-yo'qligini tekshiradi. Agar yo'q bo'lsa, obyektning prototype'ida bor-yo'qligini qaraydi. Agar prototype'da mavjud bo'lsa, obyekt uni "meros qilib oladi". Bu jarayon izlanayotgan property topilguncha yoki prototype chain'ning oxiriga yetguncha davom etadi.

Masalan, vaqt belgilari kabi Date obyektlari o'z property va metodlarini Date prototype'idan meros qilib oladi. Math obyektlari matematik vazifalar uchun tayyor vosita va imkoniyatlarni taqdim etadi, lekin Math prototype'iga tayanmaydi va undan meros olmaydi. Ro'yxatlar kabi Array obyektlari esa o'z imkoniyatlari va amallarini Array prototype'idan oladi.

Obyektga metodlar qo'shish kodingizni tartibli saqlash va uni qayta ishlatishni osonlashtirish imkonini beradi. Buning usullaridan biri — obyekt property'siga funksiya biriktirish:

var obj = {
        name: "Cess",
        work: "developer",
        countryVisits: 3
};

// assigning a function to the object's property

obj.newMethod = function() {
  console.log("Hello, I'm " + this.name + " and I work as a " + this.work );
};

obj.newMethod(); // Hello, I'm Cess and I work as a developer

Obyektda ma'lum bir property bor-yo'qligini tekshirishning turli usullari mavjud. Qaysi usulni tanlash nimani va nima maqsadda tekshirmoqchi ekaningizga bog'liq. Men obyektda ota obyektiga yoki meros qilib olingan prototype'ga emas, faqat uning o'ziga tegishli property bor-yo'qligini tekshirish uchun Object.hasOwn metodidan foydalanaman.

var obj = {
        name: "Cess",
        work: "developer",
        countryVisits: 3,
};

console.log(Object.hasOwn(obj, "name")); // true

console.log(Object.hasOwn(obj, "developer")); // false

Constructor funksiya bir xil property va metodlarga ega bo'lgan bir nechta obyekt yaratadi. Constructor funksiya bilan "new" keyword'idan foydalanilganda yangi obyekt yaratiladi va "this" shu obyektga bog'lanadi.

Constructor funksiya nomini bosh harf bilan boshlash odatda yaxshi amaliyot hisoblanadi, lekin majburiy emas. Bu constructor funksiyalarni oddiy funksiyalaringiz va o'zgaruvchilaringizdan ajratib olishga yordam beradi.

function myDetails(name, visits) {
  this.name = name; // Set the name parameter to the object
  this.visits = visits; // Set the visits parameter to the object



  this.newDetails = function () {
    console.log(
      `Hi, I'm ${this.name} and I have visited ${this.visits} countries.`
    );
  };
}

// Create objects using the constructor 

let runDetails = new myDetails("Cess", 2);;

runDetails.newDetails(); // Hi, I'm Cess and I have visited 2 countries.

Object.create() metodi yordamida yangi obyekt yaratishni amalda ko'rsatadigan misol:

// Create a parent object 

let myDetails = { 
    newDetails: function () {
        console.log(
            `Hello, I'm ${this.name} and I have traveled to ${this.visits} countries`
        );
} 
}; 

// Create a new object using Object.create() with myDetails as prototype

let runDetails = Object.create(myDetails); 


// Add properties to the new object

runDetails.name = "Cess"; 

runDetails.visits = 2; 

// Using inheritance method

runDetails.newDetails(); // Hello, I'm Cess and I have traveled to 2 countries

JavaScript massivlarini yaratish uchun kvadrat qavslar [] bilan yoziladigan array literal'lardan foydalaniladi.

let myArray = [firstArr, secondArr, thirdArr];

Massiv metodlari massivga elementlar (qiymatlar) qo'shish, ularni o'chirish yoki o'zgartirishga yordam beradi. Ko'rib chiqishga arziydigan ba'zi massiv metodlari:

• push(): push() metodi massiv oxiriga bir yoki bir nechta element qo'shadi va natijada massivning yangi uzunligini qaytaradi.
• pop(): pop() metodi massivdan oxirgi elementni olib tashlaydi va shu elementni qaytaradi.
• shift(): shift() metodi massivdan birinchi elementni olib tashlaydi va uni qaytaradi.
• unshift(): U massiv boshiga bir yoki bir nechta element qo'shadi va natijada massivning yangi uzunligini qaytaradi.

push() va pop() metodlari yordamida massivga element qo'shish yoki undan element olib tashlash:

// using push() method

let coding = ["Java", "JavaScript"];

coding.push("React"); 


console.log(coding); // ["Java", "JavaScript", "React"]


// using pop() method

let coding = ["Java", "JavaScript"];

let removeJavaScript = coding.pop();

console.log(coding); // ['Java']

console.log(removeJavaScript); JavaScript

Recursive funksiya — muayyan masalani hal qilish uchun o'zini o'zi chaqiradigan funksiya. U har bir chaqiruvda katta masalani kichikroq qismlarga bo'ladi va ularni birma-bir hal qiladi. Funksiya ikkita asosiy qismdan iborat: takrorlanishni to'xtatadigan base case va base case'ga yetguncha qadamlarni takrorlaydigan recursive case.

function myArray(arrOld) {

// Base case: empty array 

if (arrOld.length === 0) {
        return 0;
    }
    else {
        // Recursive case: Add the first element + sum of the rest arrays
                return arrOld[0] + myArray(arrOld.slice(1));
        }
}

let newArray = [20, 30, 40, 50]; 

console.log(myArray(newArray)); // 140

Quyida for loop yordamida massiv elementlarini aylanib chiqishga misol keltirilgan:

let coding = ["java", "python", "JavaScript"];

for (let i = 0; i < coding.length; i++) {
  console.log(coding[i]);
}

// java

// python

// JavaScript

JavaScript'da massivni tozalashning bir nechta usuli bor. Biroq men eng ko'p qo'llaniladigan uchta usulga to'xtalaman.

// Setting the length of an array property to 0:

let num = [20, 30, 40, 50];

num.length = 0;

console.log(num); // []

// Using the splice() method:

let num = [20, 30, 40, 50];

num.splice(0, num.length);

console.log(num); // []

// Assigning an empty array:

let num = [20, 30, 40, 50]; 

num = []; 

console.log(num); // []

Massivdan dublikatlarni olib tashlash uchun filter(), reduce() metodlari va boshqa usullardan foydalanish mumkin. Misol sifatida men set() metodidan foydalanaman:

let myArray = [30,30,30,40,50,50,60,60];

let newArray = [...new Set(myArray)]; // removes duplicates and converts back to an array

console.log(newArray); //  [30, 40, 50, 60]

Spread operator (...) obyektlarni funksiya chaqiruvi orqali yoki to'g'ridan-to'g'ri birlashtirish imkonini beradi. Quyida funksiya chaqiruvidan foydalanilgan misol keltirilgan:

function mergeObj(firstObj, secondObj) {
        return {...firstObj, ...secondObj} // merge both objects
}

let firstObj = { name: "cess", city: "Lagos"};

let secondObj = {occupation: "developer", countriesVisited: 2};

let newObj = mergeObj(firstObj, secondObj);

console.log(newObj); // {name: 'cess', city: 'Lagos', occupation: 'developer', countriesVisited: 2}

const arr1 = [1,2,3];

const arr2 = [...arr1, 4, 5, 6];

console.log(arr2); // what ?

console.log(arr2); // [1, 2, 3, 4, 5, 6]

Syntax error JavaScript engine tushuna olmaydigan kod yozganingizda yuzaga keladi va natijada kodingiz ishga tushmaydi. Bunga keyword'ni yozishda imlo xatosiga yo'l qo'yish yoki kvadrat qavs, oddiy qavs yoki figurali qavsni yopishni unutib qo'yish sabab bo'lishi mumkin.

console.log("JavaScript interview questions"

Reference error mavjud bo'lmagan o'zgaruvchi yoki funksiyadan foydalanmoqchi bo'lganingizda yuzaga keladi. Kod ishga tushadi, lekin siz o'zgaruvchini let, var yoki const keyword'lari yordamida yaratmaganingiz uchun murojaat qilinayotgan narsani topa olmaydi.

console.log(myStudy);

Mantiqiy xato — kodingiz syntax yoki reference error'larsiz ishga tushadigan holat. Biroq u ishlaganda, uni yozishda yo'l qo'yilgan xato tufayli siz kutgan ishni bajarmaydi.

Aytaylik, funksiya ichida ikkita sonni qo'shmoqchisiz. Lekin qo'shish belgisi o'rniga adashib ko'paytirish belgisini ishlatdingiz. Kod baribir ishga tushadi, ammo siz kutgan natijani olmaysiz.

JavaScript ilovangizdagi xatolarni kuzatib borish muhim, ayniqsa ilova ishga tushirilgan va undan odamlar foydalanayotgan bo'lsa. Bu ilovangizni ishonchli va foydalanish uchun qulayroq qilish maqsadida xatolarni topib, tuzatish imkonini beradi.

Quyidagi usullar ilovangiz production'ga chiqqanidan keyin unda nimalar sodir bo'layotganini kuzatib borishga yordam beradi:

• Try-Catch block'lari: Xatolar ilovangizning ishdan chiqishiga sabab bo'lishidan oldin ularni ushlab qolish uchun try...catch block'idan foydalaning.
• Ushlanmagan xatolarni kuzatish: try...catch block'idan tashqaridagi xatolarni ushlash uchun window.oneerror'dan foydalaning.
• Tashqi servislar: Production'dagi xatolarni kuzatish uchun Sentry kabi tashqi servislardan foydalaning.
• Xatolarni serverga yuborish: Tahlil qilish uchun xato ma'lumotlarini serverga yuborishda AJAX yoki fetch API'dan foydalaning.

DOM — veb-sahifa elementlarining (HTML yoki XML sahifaning) tuzilmali ko'rinishi. HTML sahifa har safar yuklanganda veb-brauzer shu sahifa uchun DOM yaratadi. DOM JavaScript'ga veb-sahifaning kontenti, layout'i va uslubini tushunish va o'zgartirish imkonini beradi.

DOM veb-sahifani obyektlardan iborat daraxtsimon tuzilma ko'rinishida ifodalaydi. Paragraflar va rasmlar kabi har bir veb-sahifa elementi shu daraxtdagi obyektga aylanadi. JavaScript bu obyektlarni boshqarish va veb-sahifani interaktiv qilish uchun DOM'dan foydalanadi.

Masalan, YouTube'da sizga yoqqan JavaScript darsini tomosha qilyapsiz va "like" tugmasini bosishga qaror qildingiz, deylik. "Like" tugmasini bosganingizda matn "unlike"ga o'zgaradi va like'lar hisoblagichi oshadi. JavaScript tugma matnini "like"dan "unlike"ga yangilash uchun DOM'ga murojaat qiladi va uni o'zgartiradi.

Murakkab tushunchalar

CSS uslubidagi selector'lar yordamida HTML elementlarini boshqarishning bir nechta usuli bor. Lekin men ID="styleP" ga ega paragraf elementini stillash uchun document.getElementById dan foydalanaman

<p id="styleP">
      Top JavaScript interview questions for web developers
</p>

// Get the HTML element with the ID "styleP"

const styleP = document.getElementById("styleP");


// Apply styles to the element

styleP.style.color = "red"; 
styleP.style.border = "3px solid black";

console.log(styleP.style);

Murakkab tushunchalar

innerHTML elementning HTML kontentini olish yoki o'zgartirish uchun ishlatiladi. U oddiy matnni ham, shu matnni hosil qilishda ishlatilgan HTML teg'larini ham ko'rsatadi. Masalan, ichida kursiv teg'i bo'lgan paragrafingiz bo'lsa, innerHTML yakuniy natijada em teg'larini ham ko'rsatadi.

<p id="text">
  <em>
      JavaScript interview questions
 </em>
</p>

let textOne = document.getElementById("text");

console.log(textOne.innerHTML); // <em>JavaScript interview questions</em>

innerText esa element ichidagi oddiy matnni oladi yoki o'zgartiradi. U sahifadagi matnni ko'rsatadi, lekin shu matnni hosil qilishda ishlatilgan HTML teg'larini ko'rsatmaydi.

<p id="text">
  <em>
      JavaScript interview questions
 </em>
</p>

let textOne = document.getElementById("text");

console.log(textOne.innerText); // JavaScript interview questions

Window obyekti butun brauzerni yoki tab'ni ifodalaydi. U sahifadagi hamma narsani — kontentni yuklashdan tortib, bosishlaringizga javob qaytarishgacha boshqaradi. Window obyekti brauzer oynasini boshqarishga yordam beradigan eng yuqori darajadagi obyektdir.

Document obyekti esa, aksincha, window'ning property'si. Document obyekti brauzerda ko'rayotgan veb-sahifangizning kontentini (HTML hujjatini), masalan, matnni ifodalaydi. U getElementById() kabi metodlar yordamida paragraflar kabi veb-elementlar bilan ishlash, ularni o'zgartirish va stillash imkonini beradi.

BOM — JavaScript'ga brauzer bilan o'zaro ishlash imkonini beradigan vositalar to'plami. U HTML hujjati bilan ishlashga hojat qoldirmasdan brauzer funksiyalarini boshqaradi. Uning yordamida brauzer oynasini ochish va yopish, brauzer tarixiga murojaat qilish va boshqa amallarni bajarish mumkin. BOM'ga window, browser va history obyektlari misol bo'ladi.

Destructuring massivlar yoki obyektlardan qiymatlarni ajratib olib, ularni alohida o'zgaruvchilarga joylash imkonini beradi. Bu kodingizni o'qishni osonlashtiradi va kod yozishdagi xatolarni kamaytiradi. Ortiqcha o'zgaruvchilar bilan ovora bo'lishingiz shart emas, har bir o'zgaruvchiga nima berayotganingiz esa aniq ko'rinib turadi.

// list of languages

let pLang = ["Java", "JavaScript", "Python"]

// using destructuring to take out each language into separate variable:

let [pLang1, pLang2, pLang3] = pLang;

console.log(pLang1); // Java

console.log(pLang2); // JavaScript

console.log(pLang3); // Python

Asynchronous JavaScript — bir vaqtning o'zida ko'plab vazifalarni bajara oladigan kod yozish usuli. U, ayniqsa, serverdan ma'lumot olish kabi ko'p vaqt talab qiladigan vazifalar ustida ishlayotganda vaqtingizni tejaydi.

Async JavaScript kodingizga biror vazifa tugashini kutayotgan paytda boshqa vazifalar bilan bir vaqtda ishlash imkonini beradi. Kodingiz to'xtab, vazifa tugashini kutib turmaydi, balki vazifa bajarilgan-bajarilmaganini vaqti-vaqti bilan tekshirib turadi. Vazifa tugagach, uning natijasiga promise yoki callback funksiya javob beradi.

Murakkab tushunchalar

JavaScript'ning strict mode'i kod yozayotganda qat'iy qoidalarga (best practice'larga) amal qilishga majbur qiladi. U JavaScript ko'pincha e'tiborsiz qoldiradigan keng tarqalgan xatolarning, masalan, e'lon qilinmagan o'zgaruvchilarning oldini oladi va kodingizni xavfsiz saqlaydi. Strict mode'ni yoqish uchun JavaScript fayli yoki funksiyaning eng boshiga "use strict"; string'ini qo'shing.

// Without strict mode

courseNo = "200";

console.log(courseNo); // 200

// With strict mode

"use strict";  // top of your JS file

courseNo= "200";

console.log(courseNo); // courseNo is not defined i.e, you didn't create it using the var, const, or let keywords. 


// Strict mode: Functions

function strictExample() { 

"use strict"; 

courseNumber = "200"; //  Error: courseNumber is not defined

console.log(courseNumber ); // code won't run

} 

strictExample(); // ReferenceError

Murakkab tushunchalar

"import" va "export" yordamida kodni ko'plab fayllar o'rtasida ulashish osonlashadi. "export" keyword'i o'zgaruvchilar, sinflar va funksiyalar kabi kod va ma'lumotlarni ulashadi. "import" keyword'i esa bu qiymatlarni boshqa faylga olib kiradi, shunda ulardan o'sha faylda foydalanishingiz mumkin bo'ladi.

Masalan, sizda function.js va app.js deb nomlangan ikkita fayl bor. app.js fayli import va export yordamida function.js'ga o'tkazmoqchi bo'lgan asl kodni o'z ichiga oladi.

HTML sahifa yaratib, uni app.js ga emas, function.js ga bog'lashingiz kerak bo'ladi. Buning sababi shuki, app.js asl kodni o'z ichiga olsa-da, mustaqil ravishda ishlay olmaydi. Shuningdek, xatolar yuzaga kelmasligi uchun function.js'ni HTML'ga type atributi "module" qilib belgilangan holda qo'shishni unutmang.

<!-- Link to HTML with type="module" attribute -->

<script type="module" src="function.js"></script>

// Export the function in file 1 "app.js"

export function studyJs(course) {
  return `Read the JavaScript guide on, ${course}`;
}


// In file 2 the "js import" statement brings the "studyJs" function from "app.js" to "function.js"

import { studyJs } from './app.js';

console.log(studyJs("roadmap.sh")); // Read the JavaScript guide on, roadmap.sh

Murakkab tushunchalar

JavaScript'ni HTML fayliga uch xil usulda qo'shish mumkin: inline, internal va external JavaScript. Internal JavaScript kodni HTML markup fayli ichida <script> teg'lari orasiga joylashtirish imkonini beradi. Internal JavaScript kodini <head> yoki <body> bo'limiga joylashtirish mumkin.

Internal JavaScript kichik hajmdagi kod uchun juda qulay va hamma narsani bir joyda saqlaydi. Biroq u HTML markup faylingizni chalkashtirib yuborishi va uni o'qishni qiyinlashtirishi mumkin, ayniqsa kod ko'p bo'lsa.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Practice</title>

<!-- JavaScript -->

<script>
  console.log("Study Javascript");
</script>

<!-- End  -->


</head>
<body>


<!-- JavaSCript -->

<script>
    console.log("Hi, I'm Cess");
</script>

<!-- End -->

</body>
</html>

Yana bir usul — JavaScript uchun alohida tashqi fayl yaratish. Bu JavaScript kodingizni .js kengaytmali alohida faylda yozib, uni HTML kod faylingizga bog'lash imkonini beradi. External JavaScript'ni HTML'ingizning <head> yoki <body> bo'limida bog'lashingiz mumkin.

Shunday qilish HTML'ingizni toza saqlaydi va bir xil JavaScript kodidan ko'plab HTML sahifalarda foydalanish imkonini beradi. Kamchiligi shundaki, JavaScript faylini yuklash uchun qo'shimcha HTTP so'rov yuboriladi, bu esa sahifangizning yuklanish tezligini pasaytirishi mumkin.

Masalan, app.js nomli fayl yaratsangiz, uni quyidagicha ulaysiz:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Practice</title>

<!-- JavaScript -->

<script src="app.js"></script>

<!-- End -->

</head>

<body>

<!-- JavaSCript -->

<script src="app.js"></script>

<!-- End -->

</body>

</html>

Inline JavaScript kodingizni HTML elementining atributi ichiga joylashtirish imkonini beradi. Buni onclick, onsubmit va onselect kabi HTML element atributlari yordamida amalga oshirish mumkin.

Inline JavaScript tez va oddiy vazifalar uchun mos keladi. Biroq u HTML kodingizni o'qishni qiyinlashtirishi mumkin, ayniqsa JavaScript kodi ko'p bo'lsa.

<button onclick="console.log('A click occurred')">
      Sign up on roadmap.sh
</button>

Quyida keng tarqalgan ba'zi JavaScript freymvorklari va ularning qo'llanilish sohalari keltirilgan:

• Node.js: Backend veb-ilovalar va API'lar yaratadi.
• React: Single-page app'lar (SPA'lar), masalan, chat ilovalarini yaratish uchun yaxshi.
• Angular: Ijtimoiy tarmoq ilovalari kabi veb-ilovalar va user authentication kabi funksiyalarni yaratish uchun ishlatiladi.