


JavaScript কি ধরনের ভাষা?
JavaScript একটি scripting ভাষা, যা মূলত client-side ওয়েব ডেভেলপমেন্টের জন্য ব্যবহৃত হয়। এটি interpreted language যার মানে এটি সরাসরি browser এ run হয়, কোনো compilation ছাড়াই।
Variable declaration এর ক্ষেত্রে var, let, এবং const এর মধ্যে পার্থক্য কি?
Closures কী এবং কীভাবে কাজ করে?
Closure হলো একটি ফাংশন যা তার বাহিরের scope এর ভ্যারিয়েবলগুলোকে মনে রাখে। Closure এর কারণে inner function তার parent function এর variable access করতে পারে।
function outerFunction() {
let outerVar = 'Hello';
function innerFunction() {
console.log(outerVar);
}
return innerFunction;
}
const closure = outerFunction();
closure(); // Output: HelloHoisting কী?
Hoisting হলো একটি মেকানিজম যেখানে JavaScript variable declaration এবং function declaration কে স্বয়ংক্রিয়ভাবে স্কোপের উপরের দিকে নিয়ে যায়। কিন্তু initialization টা পরে হয়।
উদাহরণ:
console.log(x); // Output: undefined
var x = 10;
এখানে, x প্রথমে undefinedহিসেবে hoistকরা হয়েছে।
Callback Function কি?
Callback ফাংশন হলো এমন একটি ফাংশন যা অন্য একটি ফাংশনের argument হিসেবে পাস করা হয় এবং সেই ফাংশনের ভিতরে এক সময়ে call করা হয়।
উদাহরণ:
function greet(name, callback) {
console.log('Hello ' + name);
callback();
}
function sayGoodbye() {
console.log('Goodbye!');
}
greet('Alice', sayGoodbye); // Output: Hello Alice, Goodbye!Asynchronous JavaScript কী এবং এটি কীভাবে কাজ করে?
Asynchronous JavaScript হলো এমন একটি মেকানিজম যেখানে কিছু কাজগুলো non-blocking ভাবে করা যায়। যেমন: setTimeout, fetch, বা AJAX কল। এটি Event Loop এর মাধ্যমে কাজ করে, যা কলব্যাকগুলিকে এক সময়ে execute করে।
Event Bubbling এবং Event Capturing এর মধ্যে পার্থক্য কি?
thisকী?
"this" => হলো একটি কিওয়ার্ড যা বর্তমান execution context কে নির্দেশ করে। অর্থাৎ এটি সেই অবজেক্টকে নির্দেশ করে যা বর্তমান ফাংশনকে কল করেছে।
উদাহরণ:
const person = {
name: 'Alice',
greet: function() {
console.log('Hello, ' + this.name);
}
}
person.greet(); // Output: Hello, Alice== এবং === এর মধ্যে পার্থক্য কি?
== (Loose Equality): এটি ভ্যালুগুলির মধ্যে type coercion করে এবং তারপর তাদের তুলনা করে।
=== (Strict Equality): এটি ভ্যালুগুলির type এবং value উভয়ই চেক করে। যদি তারা একই না হয়, তবে এটি false রিটার্ন করে।
উদাহরণ:
console.log(1 == '1'); // true (type coercion হয়)
console.log(1 === '1'); // false (different types)
Promises কী এবং এটি কীভাবে কাজ করে?
Promise হলো একটি অবজেক্ট যা ভবিষ্যতে কোন একটি asynchronous operation এর সফলতা বা ব্যর্থতার প্রতিনিধিত্ব করে। Promises এর তিনটি স্টেট থাকে:
উদাহরণ:
const promise = new Promise((resolve, reject) => {
let success = true;
if(success) {
resolve('Operation Successful');
} else {
reject('Operation Failed');
}
});
promise.then(result => console.log(result))
.catch(error => console.log(error));prototype এবং __proto__ এর মধ্যে পার্থক্য কি?
উদাহরণ:
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log('Hello, ' + this.name);
}
const alice = new Person('Alice');
alice.greet(); // Output: Hello, Alice
console.log(alice.__proto__ === Person.prototype); // true
map, filter, এবং reduce ফাংশনের মধ্যে পার্থক্য কি?
উদাহরণ:
const numbers = [1, 2, 3, 4, 5];
// map
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// filter
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]
// reduce
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 15async এবং await কীভাবে কাজ করে?
async এবং await হল asynchronous কোড লেখার একটি সহজ উপায়। async ফাংশনকে প্রতিশ্রুতি (Promise) রিটার্ন করে এবং await ব্যবহার করে সেই প্রতিশ্রুতির ফলাফল পাওয়া যায়।
উদাহরণ:
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Data received');
}, 2000);
});
}
async function getData() {
console.log('Fetching data...');
const data = await fetchData();
console.log(data);
}
getData();
// Output:
// Fetching data...
// (২ সেকেন্ড পরে)
// Data receivedspread এবং rest অপারেটরের মধ্যে পার্থক্য কি?
উদাহরণ:
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve('Data received');
}, 2000);
});
}
async function getData() {
console.log('Fetching data...');
const data = await fetchData();
console.log(data);
}
getData();
// Output:
// Fetching data...
// (২ সেকেন্ড পরে)
// Data receiveddebounce এবং throttle এর মধ্যে পার্থক্য কি?
/ Debounce
function debounce(func, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), delay);
}
}
window.addEventListener('resize', debounce(() => {
console.log('Window resized');
}, 500));
// Throttle
function throttle(func, limit) {
let inThrottle;
return function(...args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
}
}
window.addEventListener('scroll', throttle(() => {
console.log('Scrolled');
}, 1000));bind, call, এবং apply এর মধ্যে পার্থক্য কি?
উদাহরণ:
const person = {
name: 'Alice'
};
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
// call
greet.call(person, 'Hello', '!'); // Hello, Alice!
// apply
greet.apply(person, ['Hi', '!!']); // Hi, Alice!!
// bind
const greetAlice = greet.bind(person);
greetAlice('Hey', '!!!'); // Hey, Alice!!!undefined এবং null এর মধ্যে পার্থক্য কি?
উদাহরণ:
let a;
console.log(a); // undefined
let b = null;
console.log(b); // null
localStorage এবং sessionStorage এর মধ্যে পার্থক্য কি?
localStorage: এটি ডেটা ব্রাউজারে স্থায়ীভাবে সংরক্ষণ করে, ব্রাউজার বন্ধ হলেও ডেটা থাকবে।
sessionStorage: এটি ডেটা শুধুমাত্র ব্রাউজার সেশনের জন্য সংরক্ষণ করে, ব্রাউজার বন্ধ করলে ডেটা মুছে যাবে।
উদাহরণ:
// localStorage
localStorage.setItem('username', 'Alice');
console.log(localStorage.getItem('username')); // Alice
// sessionStorage
sessionStorage.setItem('token', '12345');
console.log(sessionStorage.getItem('token')); // 12345JSON.stringify এবং JSON.parse কী?
উদাহরণ:
const obj = { name: 'Alice', age: 25 };
// stringify
const jsonString = JSON.stringify(obj);
console.log(jsonString); // '{"name":"Alice","age":25}'
// parse
const parsedObj = JSON.parse(jsonString);
console.log(parsedObj); // { name: 'Alice', age: 25 }strict mode কী এবং কেন এটি ব্যবহার করা হয়?
Strict mode হলো জাভাস্ক্রিপ্টের একটি ফিচার যা কোডের কিছু ভুল কম্পনেন্টগুলি ধরতে সাহায্য করে এবং কিছু অপ্রত্যাশিত বিহেভিয়র প্রতিরোধ করে। এটি ব্যবহার করলে কোড আরও নিরাপদ এবং ত্রুটি মুক্ত হয়।
কিভাবে ব্যবহার করবেন:
'use strict';
function myFunction() {
// Strict mode-এ কিছু অপারেশন করতে পারবেন না যা সাধারণত পারতেন না
// উদাহরণস্বরূপ, অপরিবর্তনীয় ভেরিয়েবল পুনরায় ডিক্লেয়ার করা
var x = 10;
// var x = 20; // এটি Strict mode-এ এরর দিবে
}
myFunction();setTimeout এবং setInterval এর মধ্যে পার্থক্য কি?
উদাহরণ:
// setTimeout
setTimeout(() => {
console.log('This runs once after 2 seconds');
}, 2000);
// setInterval
const intervalId = setInterval(() => {
console.log('This runs every 3 seconds');
}, 3000);
// বাতিল করতে
// clearInterval(intervalId);
new অপারেটর কী করে?
new অপারেটর একটি ফাংশনকে কনস্ট্রাক্টর হিসেবে ব্যবহার করে একটি নতুন অবজেক্ট তৈরি করে। এটি প্রোটোটাইপ সেট করে, অবজেক্ট ইন্সট্যান্স তৈরি করে এবং কনস্ট্রাক্টর ফাংশনে this নির্দেশ করে।
উদাহরণ:
function Person(name) {
this.name = name;
}
const alice = new Person('Alice');
console.log(alice.name); // Alice
bind মেথড কেন এবং কখন ব্যবহার করবেন?
bind মেথড একটি ফাংশনের this কনটেক্সট নির্দিষ্ট করে এবং একটি নতুন ফাংশন রিটার্ন করে। এটি তখন ব্যবহার করা হয় যখন ফাংশনের this কনটেক্সট নির্দিষ্টভাবে সেট করতে হয়, যেমন ইভেন্ট হ্যান্ডলারে।
উদাহরণ:
const person = {
name: 'Alice',
greet: function() {
console.log('Hello, ' + this.name);
}
}
const greet = person.greet.bind(person);
greet(); // Hello, Alice
Symbol কী এবং কেন এটি ব্যবহার করা হয়?
Symbol হল একটি প্রিমিটিভ ডেটা টাইপ যা ইউনিক এবং ইমিউটেবল। এটি অবজেক্টের প্রোপার্টি কী হিসেবে ব্যবহৃত হয় যাতে প্রোপার্টি গুলি কনফ্লিক্ট না করে।
উদাহরণ:
const sym1 = Symbol('description');
const sym2 = Symbol('description');
console.log(sym1 === sym2); // false
const obj = {
}
console.log(obj[sym1]); // value1
console.log(obj[sym2]); // value2
Generator ফাংশন কী এবং কিভাবে কাজ করে?
Generator ফাংশন একটি বিশেষ ধরনের ফাংশন যা ইটারেটর অবজেক্ট রিটার্ন করে। এটি function* সিনট্যাক্স দিয়ে ঘোষণা করা হয় এবং yield কিওয়ার্ড ব্যবহার করে মান রিটার্ন করে।
উদাহরণ:
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}
const gen = myGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
console.log(gen.next().done); // true
ES6 এর কিছু গুরুত্বপূর্ণ ফিচার কী কী?
ES6 বা ECMAScript 2015 হল জাভাস্ক্রিপ্টের একটি বড় আপডেট যা অনেক নতুন ফিচার নিয়ে আসে। এর মধ্যে কিছু গুরুত্বপূর্ণ ফিচার হলো:
উদাহরণ:
// Arrow Function
const add = (a, b) => a + b;
// Template Literal
const name = 'Alice';
console.log(`Hello, ${name}!`);
// Destructuring
const person = { name: 'Alice', age: 25 };
const { name, age } = person;
// Classes
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log('Hello, ' + this.name);
}
}
const alice = new Person('Alice');
alice.greet(); // Hello, Alice
Memory Leak কী এবং জাভাস্ক্রিপ্টে কিভাবে এড়ানো যায়?
Memory Leak হল এমন একটি অবস্থা যেখানে প্রোগ্রামটি অতিরিক্ত মেমরি ব্যবহার করে এবং সেই মেমরি মুক্ত হয় না। জাভাস্ক্রিপ্টে মেমোরি লিক এড়াতে:
উদাহরণ:
// মেমোরি লিক উদাহরণ
function createLeak() {
const element = document.getElementById('myElement');
window.myLeak = element; // গ্লোবাল ভেরিয়েবলে রেফারেন্স রাখা
}
// এড়ানোর উপায়
function preventLeak() {
const element = document.getElementById('myElement');
// প্রয়োজন না হলে রেফারেন্স মুক্ত করা
}DOM এবং BOM এর মধ্যে পার্থক্য কি?
উদাহরণ:
// DOM - একটি এলিমেন্ট নির্বাচন এবং ম্যানিপুলেট করা
const title = document.getElementById('title');
title.textContent = 'New Title';
// BOM - ব্রাউজার উইন্ডো নিয়ন্ত্রণ করা
console.log(window.innerWidth);
window.alert('Hello!');Event Delegation কী এবং কেন এটি ব্যবহার করা হয়?
Event Delegation হল এমন একটি টেকনিক যেখানে একটি প্যারেন্ট এলিমেন্টে ইভেন্ট লিসেনার বসানো হয় এবং চাইল্ড এলিমেন্টের ইভেন্টগুলোকে হ্যান্ডেল করা হয়। এটি পারফরম্যান্স উন্নত করে এবং ডাইনামিক এলিমেন্টের ইভেন্ট হ্যান্ডলিং সহজ করে।
উদাহরণ:
// HTML
/*
<ul id="parentList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
*/
// JavaScript
const parentList = document.getElementById('parentList');
parentList.addEventListener('click', function(event) {
if(event.target && event.target.nodeName === 'LI') {
console.log('List item clicked:', event.target.textContent);
}
});Shadow DOM কী এবং কেন এটি গুরুত্বপূর্ণ?
Shadow DOM হল ওয়েব কম্পোনেন্টের একটি অংশ যা একটি পৃথক, ইনক্যাপসুলেটেড DOM রুট তৈরি করে। এটি স্টাইল এবং স্ক্রিপ্টের আইসোলেশন নিশ্চিত করে, যাতে বাইরের কোডের সাথে কনফ্লিক্ট না হয়।
উদাহরণ:
const host = document.getElementById('shadowHost');
const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<style>
p { color: blue; }
</style>
<p>This is inside Shadow DOM</p>
`;Immutable এবং Mutable অবজেক্টের মধ্যে পার্থক্য কি?
উদাহরণ:
// Mutable
const obj = { name: 'Alice' };
obj.name = 'Bob'; // পরিবর্তন করা যায়
// Immutable (using Object.freeze)
const immutableObj = Object.freeze({ name: 'Alice' });
immutableObj.name = 'Bob'; // পরিবর্তন হবে না
console.log(immutableObj.name); // AliceDestructuring কি এবং কিভাবে এটি কাজ করে?
Destructuring হল জাভাস্ক্রিপ্টের একটি সিনট্যাক্স যা অবজেক্ট বা অ্যারের মানগুলোকে সরাসরি ভেরিয়েবলে আলাদা করে নিয়ে আসে।
উদাহরণ:
// Array Destructuring
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // 1 2 3
// Object Destructuring
const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name, age); // Alice 25Immutable Data Structures কী এবং কেন এটি গুরুত্বপূর্ণ?
Immutable Data Structures হল এমন ডেটা স্ট্রাকচার যা একবার তৈরি হলে পরিবর্তন করা যায় না। এটি ডেটা ফ্লোকে সহজ করে এবং বাগ কমাতে সাহায্য করে, বিশেষ করে রিয়েক্টের মতো লাইব্রেরিতে।
উদাহরণ:
const original = { name: 'Alice', age: 25 };
// Immutable update
const updated = { ...original, age: 26 };
console.log(original.age); // 25
console.log(updated.age); // 26CORS (Cross-Origin Resource Sharing) কী এবং এটি কিভাবে কাজ করে?
CORS হল একটি সিকিউরিটি ফিচার যা ওয়েব ব্রাউজারকে এক ডোমেইন থেকে অন্য ডোমেইনের রিসোর্সে অ্যাক্সেস নিয়ন্ত্রণ করতে দেয়। সার্ভার সঠিক হেডার পাঠিয়ে CORS নিয়ন্ত্রণ করে।
উদাহরণ:
Access-Control-Allow-Origin: https://example.com
এই হেডারটি ব্রাউজারকে বলে যে https://example.com থেকে আসা রিকোয়েস্টগুলোকে অনুমতি দেওয়া হয়েছে।
Service Workers কী এবং কেন এটি ব্যবহৃত হয়?
Service Workers হল জাভাস্ক্রিপ্ট স্ক্রিপ্ট যা ব্যাকগ্রাউন্ডে রান করে, নেটওয়ার্ক রিকোয়েস্ট ক্যাচ করে এবং অফলাইন অভিজ্ঞতা প্রদান করে। এটি PWA (Progressive Web Apps) তৈরিতে ব্যবহৃত হয়।
উদাহরণ:
// service-worker.js
self.addEventListener('install', event => {
console.log('Service Worker installing.');
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});WebAssembly কী এবং জাভাস্ক্রিপ্টের সাথে এর সম্পর্ক কি?
WebAssembly (Wasm) হল একটি বাইনারি ইন্সট্রাকশন ফরম্যাট যা ব্রাউজারে উচ্চ কর্মক্ষমতার কোড চালানোর জন্য ডিজাইন করা হয়েছে। এটি জাভাস্ক্রিপ্টের সাথে কমপ্লিমেন্টারি হিসেবে কাজ করে, যেখানে জাভাস্ক্রিপ্ট হাই-লেভেল লজিক হ্যান্ডেল করে এবং ওয়াসম হাই-পারফরম্যান্স কাজগুলিকে দ্রুত সম্পাদন করে।
উদাহরণ:
// জাভাস্ক্রিপ্ট থেকে WebAssembly মডিউল লোড করা
fetch('module.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes))
.then(results => {
const instance = results.instance;
console.log(instance.exports.exportedFunction());
});Memoization কী এবং এটি কিভাবে কাজ করে?
Memoization হল একটি অপ্টিমাইজেশন টেকনিক যেখানে ফাংশনের পূর্বের ফলাফলগুলো ক্যাশে করে রাখা হয় যাতে একই ইনপুটের জন্য পুনরায় গণনা না করতে হয়। এটি পারফরম্যান্স বাড়ায়, বিশেষ করে ভারী ফাংশনের ক্ষেত্রে।
উদাহরণ:
function memoize(fn) {
const cache = {};
return function(...args) {
const key = JSON.stringify(args);
if(cache[key]) {
return cache[key];
} else {
const result = fn(...args);
cache[key] = result;
return result;
}
}
}
const slowFunction = (num) => {
// ভারী কাজের সিমুলেশন
for(let i = 0; i < 1e9; i++) {}
return num * 2;
}
const fastFunction = memoize(slowFunction);
console.log(fastFunction(10)); // প্রথমবার: সময় সাপেক্ষ
console.log(fastFunction(10)); // দ্বিতীয়বার: ক্যাশ থেকে তাড়াতাড়িTail Call Optimization কী?
Tail Call Optimization (TCO) হল একটি অপ্টিমাইজেশন যেখানে রিকার্সিভ ফাংশনের শেষ কলটি অপ্টিমাইজ করে স্ট্যাক ওভারফ্লো প্রতিরোধ করা হয়। এটি শুধুমাত্র কিছু ভাষায় এবং ইঞ্জিনে সমর্থিত।
উদাহরণ:
function factorial(n, acc = 1) {
if(n <= 1) return acc;
return factorial(n - 1, n * acc); // Tail call
}
console.log(factorial(5)); // 120Event Loop কী এবং এটি কীভাবে কাজ করে?
Event Loop হল জাভাস্ক্রিপ্টের একটি মেকানিজম যা সিঙ্গেল থ্রেডেড ভাষার মধ্যে অ্যাসিঙ্ক্রোনাস অপারেশন হ্যান্ডল করে। এটি কলব্যাক কিউ এবং মাইক্রোটাস্ক কিউয়ের মাধ্যমে কাজ করে, এবং স্ট্যাক ফ্রি হলে কলব্যাকগুলো এক্সিকিউট করে।
উদাহরণ:
console.log('Start');
setTimeout(() => {
console.log('Timeout');
}, 0);
Promise.resolve().then(() => {
console.log('Promise');
});
console.log('End');
// Output:
// Start
// End
// Promise
// TimeoutImmutable.js কী এবং কেন এটি ব্যবহৃত হয়?
Immutable.js হল একটি লাইব্রেরি যা ইমিউটেবল ডেটা স্ট্রাকচার প্রদান করে, যেমন ইমিউটেবল লিস্ট, ম্যাপ, সেট ইত্যাদি। এটি ডেটা ম্যানিপুলেশনে নিরাপত্তা এবং পারফরম্যান্স বৃদ্ধি করে, বিশেষ করে রিয়েক্টের সাথে ব্যবহৃত হয়।
উদাহরণ:
const { Map } = require('immutable');
const original = Map({ name: 'Alice', age: 25 });
const updated = original.set('age', 26);
console.log(original.get('age')); // 25
console.log(updated.get('age')); // 26Higher-Order Functions কী? উদাহরণ সহ ব্যাখ্যা করুন।
Higher-Order Functions হল সেই ধরনের ফাংশন যা অন্য ফাংশনকে আর্গুমেন্ট হিসেবে গ্রহণ করে অথবা ফাংশনকে রিটার্ন করে। এটি ফাংশনাল প্রোগ্রামিং এর একটি গুরুত্বপূর্ণ ধারণা।
উদাহরণ:
// Map
const map = new Map();
const obj = {};
map.set(obj, 'value'); console.log(map.get(obj)); // 'value' // WeakMap
const weakMap = new WeakMap(); weakMap.set(obj, 'value');
//console it
console.log(weakMap.get(obj)); // 'value'