✅ JavaScript Practice Questions with Answers 💻⚡
🔍 Q1. How do you check if a number is even or odd?
✅ Answer:
🔍 Q2. How do you reverse a string?
✅ Answer:
🔍 Q3. Write a function to find the factorial of a number.
✅ Answer:
🔍 Q4. How do you remove duplicates from an array?
✅ Answer:
🔍 Q5. Print numbers from 1 to 10 using a loop.
✅ Answer:
🔍 Q6. Check if a word is a palindrome.
✅ Answer:
💬 Tap ❤️ for more!
💎 @Htmlcss_channels | #css #JavaScript #HTML #interview
🔍 Q1. How do you check if a number is even or odd?
✅ Answer:
let num = 10;
if (num % 2 === 0) {
console.log("Even");
} else {
console.log("Odd");
}
🔍 Q2. How do you reverse a string?
✅ Answer:
let text = "hello";
let reversedText = text.split("").reverse().join("");
console.log(reversedText); // Output: olleh
🔍 Q3. Write a function to find the factorial of a number.
✅ Answer:
function factorial(n) {
let result = 1;
for (let i = 1; i <= n; i++) {
result *= i;
}
return result;
}
console.log(factorial(5)); // Output: 120🔍 Q4. How do you remove duplicates from an array?
✅ Answer:
let items = [1, 2, 2, 3, 4, 4];
let uniqueItems = [...new Set(items)];
console.log(uniqueItems);
🔍 Q5. Print numbers from 1 to 10 using a loop.
✅ Answer:
for (let i = 1; i <= 10; i++) {
console.log(i);
}🔍 Q6. Check if a word is a palindrome.
✅ Answer:
let word = "madam";
let reversed = word.split("").reverse().join("");
if (word === reversed) {
console.log("Palindrome");
} else {
console.log("Not a palindrome");
}
💬 Tap ❤️ for more!
💎 @Htmlcss_channels | #css #JavaScript #HTML #interview
❤4
✅ JavaScript Practice Questions – Part 2 💻🔥
🔍 Q1. Swap two variables without a third variable.
✅ Answer:
🔍 Q2. Find the largest number in an array.
✅ Answer:
🔍 Q3. Check if a number is prime.
✅ Answer:
🔍 Q4. Count vowels in a string.
✅ Answer:
🔍 Q5. Convert first letter of each word to uppercase.
✅ Answer:
💬 Tap ❤️ for Part 3!
💎 @Htmlcss_channels | #css #JavaScript #HTML #interview
🔍 Q1. Swap two variables without a third variable.
✅ Answer:
let a = 5, b = 10;
[a, b] = [b, a];
console.log(a, b); // Output: 10 5
🔍 Q2. Find the largest number in an array.
✅ Answer:
let numbers = [3, 7, 2, 9, 5];
let max = Math.max(...numbers);
console.log(max); // Output: 9
🔍 Q3. Check if a number is prime.
✅ Answer:
function isPrime(n) {
if (n <= 1) return false;
for (let i = 2; i <= Math.sqrt(n); i++) {
if (n % i === 0) return false;
}
return true;
}
console.log(isPrime(7)); // Output: true🔍 Q4. Count vowels in a string.
✅ Answer:
function countVowels(str) {
return str.match(/[aeiou]/gi)?.length || 0;
}
console.log(countVowels("Hello World")); // Output: 3🔍 Q5. Convert first letter of each word to uppercase.
✅ Answer:
let sentence = "hello world";
let titleCase = sentence.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
console.log(titleCase); // Output: Hello World
💬 Tap ❤️ for Part 3!
💎 @Htmlcss_channels | #css #JavaScript #HTML #interview
❤4
🚀 JavaScript Interview Questions with Answers — Part 3
21. What is an array in JavaScript?
An array is a special object used to store multiple values in a single variable.
Example:
const fruits = ["Apple", "Banana", "Mango"];
Access Elements:
console.log(fruits[0]); // Apple
Features:
• Ordered collection
• Zero-based indexing
• Can store mixed data types
Example:
const data = ["Deepak", 25, true];
22. How do you add/remove elements from an array?
Add Elements
push() → Add at end
const arr = [1, 2];
arr.push(3);
console.log(arr);
unshift() → Add at beginning
arr.unshift(0);
Remove Elements
pop() → Remove from end
arr.pop();
shift() → Remove from beginning
arr.shift();
Example:
const numbers = [1, 2, 3];
numbers.push(4);
numbers.pop();
console.log(numbers);
23. What is the difference between push(), pop(), shift(), unshift()?
push() → Add element at end
pop() → Remove element from end
shift() → Remove element from start
unshift() → Add element at start
Example:
const arr = [1, 2];
arr.push(3);
arr.unshift(0);
console.log(arr);
arr.pop();
arr.shift();
console.log(arr);
Output:
[0][1][2][3]
24. What is map(), filter(), and reduce()?
These are important array methods used in functional programming.
map()
Creates a new array by transforming elements.
const nums = [1, 2, 3];
const doubled = nums.map(num => num * 2);
console.log(doubled);
Output:
[2][4][6]
filter()
Returns elements matching a condition.
const nums = [1, 2, 3, 4];
const even = nums.filter(num => num % 2 === 0);
console.log(even);
Output:
[2][4]
reduce()
Reduces array to a single value.
const nums = [1, 2, 3];
const sum = nums.reduce((total, num) => total + num, 0);
console.log(sum);
Output:
6
25. How do you remove duplicates from an array?
Using Set
const nums = [1, 2, 2, 3, 4, 4];
const unique = [...new Set(nums)];
console.log(unique);
Output:
[1][2][3][4]
Why Set?
A Set stores only unique values.
Alternative Using filter()
const arr = [1, 2, 2, 3];
const unique = arr.filter((item, index) =>
arr.indexOf(item) === index
);
console.log(unique);
26. How do you flat / flatten an array?
Flattening means converting nested arrays into a single array.
Using flat()
const arr = [1, [2, 3], [4, 5]];
console.log(arr.flat());
Output:
[1][2][3][4][5]
Deep Flatten:
const arr = [1, [2, [3, 4]]];
console.log(arr.flat(Infinity));
Using reduce()
const arr = [[1, 2], [3, 4]];
const flat = arr.reduce((acc, val) => acc.concat(val), []);
console.log(flat);
27. What is an object in JavaScript?
An object is a collection of key-value pairs.
Example:
const person = {
name: "Deepak",
age: 25,
city: "Oslo"
};
Access Properties:
console.log(person.name);
Objects Can Store:
• Strings
• Numbers
• Arrays
• Functions
• Other objects
28. What is the difference between dot and bracket notation?
Dot Notation
console.log(person.name);
Bracket Notation
console.log(person["name"]);
Dot Notation
• Simple syntax
• Faster to write
Bracket Notation
• Dynamic keys supported
• Useful for spaces/special chars
Example:
const obj = {
"first name": "Deepak"
};
console.log(obj["first name"]);
29. How do you merge two objects?
Using Spread Operator
const obj1 = {a: 1};
const obj2 = {b: 2};
const merged = {...obj1,...obj2};
console.log(merged);
Output:
{a: 1, b: 2}
Using Object.assign()
const merged = Object.assign({}, obj1, obj2);
Important:
If duplicate keys exist, later values overwrite earlier ones.
30. How do you deep clone an object?
Deep cloning creates a completely independent copy of an object.
Using structuredClone()
const obj = {
name: "Deepak",
address: {
city: "Oslo"
}
};
const clone = structuredClone(obj);
Using JSON Method
const clone = JSON.parse(JSON.stringify(obj));
💌 Double Tap ❤️ For Part-4
💎 @Htmlcss_channels | #css #JavaScript #HTML #interview
21. What is an array in JavaScript?
An array is a special object used to store multiple values in a single variable.
Example:
const fruits = ["Apple", "Banana", "Mango"];
Access Elements:
console.log(fruits[0]); // Apple
Features:
• Ordered collection
• Zero-based indexing
• Can store mixed data types
Example:
const data = ["Deepak", 25, true];
22. How do you add/remove elements from an array?
Add Elements
push() → Add at end
const arr = [1, 2];
arr.push(3);
console.log(arr);
unshift() → Add at beginning
arr.unshift(0);
Remove Elements
pop() → Remove from end
arr.pop();
shift() → Remove from beginning
arr.shift();
Example:
const numbers = [1, 2, 3];
numbers.push(4);
numbers.pop();
console.log(numbers);
23. What is the difference between push(), pop(), shift(), unshift()?
push() → Add element at end
pop() → Remove element from end
shift() → Remove element from start
unshift() → Add element at start
Example:
const arr = [1, 2];
arr.push(3);
arr.unshift(0);
console.log(arr);
arr.pop();
arr.shift();
console.log(arr);
Output:
[0][1][2][3]
24. What is map(), filter(), and reduce()?
These are important array methods used in functional programming.
map()
Creates a new array by transforming elements.
const nums = [1, 2, 3];
const doubled = nums.map(num => num * 2);
console.log(doubled);
Output:
[2][4][6]
filter()
Returns elements matching a condition.
const nums = [1, 2, 3, 4];
const even = nums.filter(num => num % 2 === 0);
console.log(even);
Output:
[2][4]
reduce()
Reduces array to a single value.
const nums = [1, 2, 3];
const sum = nums.reduce((total, num) => total + num, 0);
console.log(sum);
Output:
6
25. How do you remove duplicates from an array?
Using Set
const nums = [1, 2, 2, 3, 4, 4];
const unique = [...new Set(nums)];
console.log(unique);
Output:
[1][2][3][4]
Why Set?
A Set stores only unique values.
Alternative Using filter()
const arr = [1, 2, 2, 3];
const unique = arr.filter((item, index) =>
arr.indexOf(item) === index
);
console.log(unique);
26. How do you flat / flatten an array?
Flattening means converting nested arrays into a single array.
Using flat()
const arr = [1, [2, 3], [4, 5]];
console.log(arr.flat());
Output:
[1][2][3][4][5]
Deep Flatten:
const arr = [1, [2, [3, 4]]];
console.log(arr.flat(Infinity));
Using reduce()
const arr = [[1, 2], [3, 4]];
const flat = arr.reduce((acc, val) => acc.concat(val), []);
console.log(flat);
27. What is an object in JavaScript?
An object is a collection of key-value pairs.
Example:
const person = {
name: "Deepak",
age: 25,
city: "Oslo"
};
Access Properties:
console.log(person.name);
Objects Can Store:
• Strings
• Numbers
• Arrays
• Functions
• Other objects
28. What is the difference between dot and bracket notation?
Dot Notation
console.log(person.name);
Bracket Notation
console.log(person["name"]);
Dot Notation
• Simple syntax
• Faster to write
Bracket Notation
• Dynamic keys supported
• Useful for spaces/special chars
Example:
const obj = {
"first name": "Deepak"
};
console.log(obj["first name"]);
29. How do you merge two objects?
Using Spread Operator
const obj1 = {a: 1};
const obj2 = {b: 2};
const merged = {...obj1,...obj2};
console.log(merged);
Output:
{a: 1, b: 2}
Using Object.assign()
const merged = Object.assign({}, obj1, obj2);
Important:
If duplicate keys exist, later values overwrite earlier ones.
30. How do you deep clone an object?
Deep cloning creates a completely independent copy of an object.
Using structuredClone()
const obj = {
name: "Deepak",
address: {
city: "Oslo"
}
};
const clone = structuredClone(obj);
Using JSON Method
const clone = JSON.parse(JSON.stringify(obj));
💌 Double Tap ❤️ For Part-4
💎 @Htmlcss_channels | #css #JavaScript #HTML #interview
❤6
🚀 JavaScript Interview Questions with Answers — Part 4
31. What is if/else and switch?
Both are conditional statements used to make decisions in JavaScript.
if/else
Executes code based on conditions.
switch
Used when checking multiple possible values.
Difference:
if/else - Better for conditions/ranges, Flexible
switch - Better for exact values, Cleaner for many cases
32. What is the difference between for, for...in, and for...of?
for
Traditional loop.
for...in
Used for iterating object keys.
for...of
Used for iterable values like arrays.
Key Difference:
Loop - Best For
for - Full control
for...in - Object properties
for...of - Array values
33. What is the while and do-while loop?
Both loops execute code repeatedly while a condition is true.
while Loop
Condition checked before execution.
do-while Loop
Runs at least once before checking condition.
Difference:
while - Condition first, May run zero times
do-while - Code first, Runs at least once
34. What is the ternary operator?
The ternary operator is a shorthand for if/else.
Syntax:
condition? trueValue : falseValue
Example:
Benefits:
• Shorter code
• Cleaner simple conditions
35. What is short-circuit evaluation?
JavaScript stops evaluating expressions as soon as the result is known.
Using &&
Returns first falsy value.
Output:
false
Using ||
Returns first truthy value.
Output:
Default
Practical Example:
36. What is the difference between break and continue?
Keyword - Purpose
break - Stops the loop completely
continue - Skips current iteration
break Example
Output:
1
2
continue Example
Output:
1
2
4
5
37. How do you iterate over an array or object?
Array Iteration
Using forEach()
Object Iteration
Using for...in
Using Object.keys()
38. How do you implement recursion?
Recursion is when a function calls itself until a stopping condition is met.
Example: Factorial
Output:
120
Important Parts:
1. Base condition
2. Recursive call
Without a base condition → infinite recursion.
31. What is if/else and switch?
Both are conditional statements used to make decisions in JavaScript.
if/else
Executes code based on conditions.
let age = 18;
if (age >= 18) {
console.log("Adult");
} else {
console.log("Minor");
}
switch
Used when checking multiple possible values.
let day = 2;
switch(day) {
case 1:
console.log("Monday");
break;
case 2:
console.log("Tuesday");
break;
default:
console.log("Invalid Day");
}
Difference:
if/else - Better for conditions/ranges, Flexible
switch - Better for exact values, Cleaner for many cases
32. What is the difference between for, for...in, and for...of?
for
Traditional loop.
for (let i = 0; i < 3; i++) {
console.log(i);
}for...in
Used for iterating object keys.
const person = {
name: "Deepak",
age: 25
};
for (let key in person) {
console.log(key);
}for...of
Used for iterable values like arrays.
const nums = [1, 2, 3];
for (let num of nums) {
console.log(num);
}
Key Difference:
Loop - Best For
for - Full control
for...in - Object properties
for...of - Array values
33. What is the while and do-while loop?
Both loops execute code repeatedly while a condition is true.
while Loop
Condition checked before execution.
let i = 1;
while (i <= 3) {
console.log(i);
i++;
}
do-while Loop
Runs at least once before checking condition.
let i = 1;
do {
console.log(i);
i++;
} while(i <= 3);
Difference:
while - Condition first, May run zero times
do-while - Code first, Runs at least once
34. What is the ternary operator?
The ternary operator is a shorthand for if/else.
Syntax:
condition? trueValue : falseValue
Example:
let age = 20;
let result = age >= 18 ? "Adult" : "Minor";
console.log(result);
Benefits:
• Shorter code
• Cleaner simple conditions
35. What is short-circuit evaluation?
JavaScript stops evaluating expressions as soon as the result is known.
Using &&
Returns first falsy value.
console.log(false && "Hello");
Output:
false
Using ||
Returns first truthy value.
console.log("" || "Default");Output:
Default
Practical Example:
let username = "";
let displayName = username || "Guest";
console.log(displayName);
36. What is the difference between break and continue?
Keyword - Purpose
break - Stops the loop completely
continue - Skips current iteration
break Example
for (let i = 1; i <= 5; i++) {
if (i === 3) {
break;
}
console.log(i);
}Output:
1
2
continue Example
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue;
}
console.log(i);
}Output:
1
2
4
5
37. How do you iterate over an array or object?
Array Iteration
Using forEach()
const nums = [1, 2, 3];
nums.forEach(num => {
console.log(num);
});
Object Iteration
Using for...in
const person = {
name: "Deepak",
age: 25
};
for (let key in person) {
console.log(key, person[key]);
}Using Object.keys()
Object.keys(person).forEach(key => {
console.log(key);
});38. How do you implement recursion?
Recursion is when a function calls itself until a stopping condition is met.
Example: Factorial
function factorial(n) {
if (n === 1) {
return 1;
}
return n * factorial(n - 1);
}
console.log(factorial(5));Output:
120
Important Parts:
1. Base condition
2. Recursive call
Without a base condition → infinite recursion.
❤1👍1
39. When would you use for vs forEach()?
for Loop vs forEach()
for - More control, Can use break/continue, Faster in heavy loops
forEach() - Cleaner syntax, Cannot stop early, Better readability
for Example
forEach() Example
Interview Tip:
Use forEach() for readability and for when more control is needed.
40. How do you handle early exits from loops?
Using break
Using return Inside Functions
Important:
forEach() does not support break directly.
Use:
• for
• for...of
• some()
• every()
for early exits.
Double Tap ❤️ For Part-5
💎 @Htmlcss_channels | #css #JavaScript #HTML #interview
for Loop vs forEach()
for - More control, Can use break/continue, Faster in heavy loops
forEach() - Cleaner syntax, Cannot stop early, Better readability
for Example
for (let i = 0; i < 3; i++) {
console.log(i);
}forEach() Example
[1, 2, 3].forEach(num => {
console.log(num);
});Interview Tip:
Use forEach() for readability and for when more control is needed.
40. How do you handle early exits from loops?
Using break
for (let i = 1; i <= 5; i++) {
if (i === 3) {
break;
}
console.log(i);
}Using return Inside Functions
function test() {
for (let i = 1; i <= 5; i++) {
if (i === 3) {
return;
}
console.log(i);
}
}
test();Important:
forEach() does not support break directly.
Use:
• for
• for...of
• some()
• every()
for early exits.
Double Tap ❤️ For Part-5
💎 @Htmlcss_channels | #css #JavaScript #HTML #interview
❤3
💻 Responsive HTML Video با Orientation Media Query
💻 کد CSS:
* حالت عمودی (موبایل) *
* حالت افقی (دسکتاپ) *
⚡ بهینهسازی بیشتر:
* فقط موبایل *
* فقط دسکتاپ *
🎬 مثال عملی:
💎 @Htmlcss_channels | #HTML #css #JavaScript
💻 کد CSS:
* حالت عمودی (موبایل) *
@media screen and (orientation: portrait) {
video {
width: 100%;
height: auto;
}
}* حالت افقی (دسکتاپ) *
@media screen and (orientation: landscape) {
video {
width: auto;
height: 100vh;
max-width: 100%;
}
}⚡ بهینهسازی بیشتر:
* فقط موبایل *
@media screen and (max-width: 768px) and (orientation: portrait) {
video {
object-fit: cover;
aspect-ratio: 9/16;
}
}* فقط دسکتاپ *
@media screen and (min-width: 769px) and (orientation: landscape) {
video {
object-fit: contain;
aspect-ratio: 16/9;
}
}🎬 مثال عملی:
<video controls poster="poster.jpg">
<source src="video-mobile.mp4" media="(orientation: portrait)">
<source src="video-desktop.mp4" media="(orientation: landscape)">
Your browser does not support the video tag.
</video>
💎 @Htmlcss_channels | #HTML #css #JavaScript
❤8
✨ مجموعهای از کدهای کوتاه ولی کاربردی CSS
۶ تکه کد که هر برنامهنویس وب باید داشته باشه
ارسال کدها در پست بعدی👇
💎 @Htmlcss_channels | #HTML #css #JavaScript
۶ تکه کد که هر برنامهنویس وب باید داشته باشه
ارسال کدها در پست بعدی👇
💎 @Htmlcss_channels | #HTML #css #JavaScript
❤3🔥1