DEV Community: Saqib Jamil

5 JavaScript coding interview questions - Part 8

Saqib Jamil — Mon, 06 Oct 2025 14:37:59 +0000

Q1: Find the Intersection of Two Arrays.
Write a function that returns the common elements between two arrays.
Ans:

function arrayIntersection(arr1, arr2) {
  return arr1.filter(item => arr2.includes(item));
}

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

🧠 Tip: Use Set for better performance with large datasets.

Q2: Capitalize the First Letter of Each Word.
Write a function that takes a sentence and capitalizes the first letter of each word.
Ans:

function capitalizeWords(sentence) {
  return sentence
    .split(" ")
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(" ");
}

console.log(capitalizeWords("hello world from javascript"));
// Output: "Hello World From Javascript"

Q3: Count the Frequency of Each Element in an Array
Write a function that counts how many times each element appears in an array.
Ans:

function countFrequency(arr) {
  return arr.reduce((acc, item) => {
    acc[item] = (acc[item] || 0) + 1;
    return acc;
  }, {});
}

console.log(countFrequency(["apple", "banana", "apple", "orange", "banana", "apple"]));
// Output: { apple: 3, banana: 2, orange: 1 }

Q4: Check if Two Strings Are Anagrams
Write a function to check whether two strings are anagrams of each other.
Ans:
Anagrams are words or phrases that can be rearranged to make an entirely different word or phrase.

function isAnagram(str1, str2) {
  const normalize = str => str.toLowerCase().split("").sort().join("");
  return normalize(str1) === normalize(str2);
}

console.log(isAnagram("listen", "silent")); // true
console.log(isAnagram("hello", "world"));   // false

💡 Explanation:
We normalize both strings by converting them to lowercase, sorting, and comparing.
If both sorted versions match — they’re anagrams!

Q5: Chunk an Array
Write a function that splits an array into chunks of a specified size.
Ans:

function chunkArray(arr, size) {
  let result = [];
  for (let i = 0; i < arr.length; i += size) {
    result.push(arr.slice(i, i + size));
  }
  return result;
}

console.log(chunkArray([1, 2, 3, 4, 5, 6, 7], 3));
// Output: [[1, 2, 3], [4, 5, 6], [7]]

💡 Explanation:
This is the core part of the loop that allows the function to chunk the array efficiently. Let’s go step by step 👇
for (let i = 0; i < arr.length; i += size)

🧩 1. Normal for-loop structure
A typical for loop looks like this:
for (initialization; condition; increment) { // code to execute }
Here:

initialization — sets up a variable (like let i = 0)
condition — loop continues while this is true
increment — runs after each loop iteration (to move to the next step)

🧠 2. In this code:
for (let i = 0; i < arr.length; i += size)

let i = 0 → start from index 0
i < arr.length → keep looping until i reaches the end of the array
i += size → instead of increasing i by 1, we increase it by size That means each time, the loop jumps forward by size elements.

💡 3. Example to visualize
Suppose:

arr = [1, 2, 3, 4, 5, 6, 7]
size = 3

Here’s how the loop runs:

Iteration	`i` Value	Slice (`arr.slice(i, i + size)`)	Result
1	0	arr.slice(0, 3) → `[1, 2, 3]`	result = `[[1,2,3]]`
2	3	arr.slice(3, 6) → `[4, 5, 6]`	result = `[[1,2,3],[4,5,6]]`
3	6	arr.slice(6, 9) → `[7]`	result = `[[1,2,3],[4,5,6],[7]]`

After that, i = 9, which is greater than arr.length (7), so the loop stops.

✅ Final Thoughts

These questions are simple yet powerful for testing problem-solving and array manipulation in JavaScript.

If you haven’t already, check out my previous parts:
👉 Part 1
👉 Part 2
👉 Part 3
👉 Part 4
👉 Part 5
👉 Part 6
👉 Part 7

5 Javascript coding interview questions - Part 7

Saqib Jamil — Fri, 26 Sep 2025 19:58:58 +0000

5 Javascript coding interview questions - Part 6
5 Javascript coding interview questions - Part 8

Q1. Flatten a Nested Object
Write a function that takes a nested object and flattens it into a single-level object with dot-separated keys.

Ans:

function flattenObject(obj, parent = '', res = {}){
  for(let key in obj){
    let newKey = parent ? `${parent}.${key}` : key;
    if(typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])){
      flattenObject(obj[key], newKey, res);
    } 
   else{
      res[newKey] = obj[key];
    }
  }
  return res;
}

// Example
const input = { a: 1, b: { c: 2, d: { e: 3 } } };
console.log(flattenObject(input)); 
// { a: 1, "b.c": 2, "b.d.e": 3 }

Q2. Debounce Function
Implement a debounce function to delay execution until after a pause in calls.

Ans:

function debounce(fn, delay){
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn.apply(this, args), delay);
  };
}

// Example
const log = debounce(() => console.log("Debounced!"), 1000);
log();
log();
log(); // Only runs once after 1s

Q3. Throttle Function
Implement a throttle function to limit execution of a function to once every X milliseconds.

Ans:

function throttle(fn, limit) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= limit) {
      lastCall = now;
      fn.apply(this, args);
    }
  };
}

// Example
const log = throttle(() => console.log("Throttled!"), 2000);
setInterval(log, 500); // Runs every 2s, not every 0.5s

Q4. Group Anagrams
Given an array of strings, group words that are anagrams of each other.

Ans:

function groupAnagrams(words) {
  const map = {};
  for (let word of words) {
    const key = word.split('').sort().join('');
    if (!map[key]) map[key] = [];
    map[key].push(word);
  }
  return Object.values(map);
}

// Example
console.log(groupAnagrams(["eat", "tea", "tan", "ate", "nat", "bat"]));
// [["eat","tea","ate"], ["tan","nat"], ["bat"]]

Q5. Currying Function
Implement a function that transforms a normal function into a curried one.

Ans:

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function (...nextArgs) {
        return curried.apply(this, args.concat(nextArgs));
      };
    }
  };
}

// Example
function add(a, b, c) {
  return a + b + c;
}

const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAdd(1, 2)(3)); // 6

5 Javascript coding interview questions - Part 6

What is Temporal dead zone in javascript?

Saqib Jamil — Sun, 29 Dec 2024 17:06:03 +0000

The Temporal Dead Zone (TDZ) in JavaScript refers to the period between the creation of a variable in the scope and its initialization. During this period, the variable is in an uninitialized state and cannot be accessed. Attempting to access it will result in a ReferenceError.

Key Points:

TDZ occurs with let and const: Unlike var, variables declared with let and const are not hoisted to the top of their scope in an accessible way.
Access before initialization throws ReferenceError: The variable exists in memory but is not initialized until the declaration is executed.
TDZ ends when the variable is initialized: Once the declaration line is executed, the variable becomes accessible.

Code Example 1: Accessing a Variable in the TDZ

console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 10;
console.log(x); // 10

Explanation:

The variable x exists in memory due to let declaration but is not initialized.
Attempting to access it before initialization throws a ReferenceError.

Code Example 2: TDZ with const

console.log(y); // ReferenceError: Cannot access 'y' before initialization
const y = 20;
console.log(y); // 20

Explanation:

const behaves the same as let during the TDZ. Accessing y before its initialization results in a ReferenceError.

Code Example 3: TDZ in Block Scope

{
    console.log(a); // ReferenceError: Cannot access 'a' before initialization
    let a = 5;
    console.log(a); // 5
}

Explanation:

The variable a is in the TDZ until the let a = 5 line is executed within the block.

Code Example 4: No TDZ with var

console.log(b); // undefined
var b = 15;
console.log(b); // 15

Explanation:

Variables declared with var are hoisted and initialized with undefined. There is no TDZ for var.

Code Example 5: Function and TDZ

function example() {
    console.log(c); // ReferenceError: Cannot access 'c' before initialization
    let c = 30;
}
example();

Explanation:

c is in the TDZ until the let c = 30 line is executed.

Code Example 6: TDZ with Default Parameter

function test(x = y, y = 10) {
    console.log(x, y);
}
test(); // ReferenceError: Cannot access 'y' before initialization

Explanation:

Default parameters are evaluated left-to-right. Here, x tries to access y before it is initialized, causing a ReferenceError.

How to Avoid Issues with TDZ

Declare variables at the top of their scope.
Initialize variables immediately after declaring them if possible.
Understand the block scope behavior of let and const.

By being mindful of the TDZ, you can write more predictable and bug-free JavaScript code.

Event Delegation in JavaScript

Saqib Jamil — Wed, 11 Dec 2024 18:38:06 +0000

Event Delegation is a technique in JavaScript where you add a single event listener to a parent element instead of adding multiple event listeners to child elements. The event listener on the parent element listens for events on its children using event bubbling.

This technique is useful for improving performance and managing dynamically added elements.

How Event Delegation Works

Event Bubbling: When an event occurs on an element, it bubbles up from the target element to its parent elements.
Event Targeting: You can identify which child element triggered the event using the event.target property.

Why Use Event Delegation?

Better performance (especially for a large number of elements).
Simplifies code by reducing the number of event listeners.
Works well with dynamically added elements.

Example: Without Event Delegation

// Add individual event listeners to each button
const buttons = document.querySelectorAll(".child-button");
buttons.forEach((button) => {
  button.addEventListener("click", (event) => {
    console.log(`Button ${event.target.textContent} clicked!`);
  });
});

Drawback:
If you dynamically add a new button, the event listener won’t be automatically applied.

Example: With Event Delegation

// Add one event listener to the parent element
const parent = document.querySelector(".parent");

parent.addEventListener("click", (event) => {
  if (event.target.classList.contains("child-button")) {
    console.log(`Button ${event.target.textContent} clicked!`);
  }
});

//HTML
<div class="parent">
  <button class="child-button">Button 1</button>
  <button class="child-button">Button 2</button>
  <button class="child-button">Button 3</button>
</div>

Explanation:

The event listener is added only to the parent (.parent).
When any button inside the parent is clicked, the event.target identifies the specific button.
You use a condition (event.target.classList.contains) to ensure the event handler runs only for child-button.

Benefits of Event Delegation

Dynamically Added Elements: Event delegation works for elements added after the page is loaded.

// Dynamically add a new button
const parent = document.querySelector(".parent");
const newButton = document.createElement("button");
newButton.className = "child-button";
newButton.textContent = "Button 4";
parent.appendChild(newButton);

// No need to add a new event listener manually

Reduced Memory Usage: Instead of attaching event listeners to multiple elements, a single listener is attached to the parent.

Summary:
Event delegation is a powerful pattern for efficiently handling events on many elements, especially when they are created dynamically. It uses the event bubbling and event.target to manage events effectively.

5 Javascript coding interview questions - Part 6

Saqib Jamil — Wed, 11 Dec 2024 18:16:15 +0000

5 Javascript coding interview questions - Part 5
5 Javascript coding interview questions - Part 7

Q1: What is the difference between let, const, and var?

Ans:

var: Function-scoped, can be redeclared, hoisted, and doesn’t support block scoping.
let: Block-scoped, can’t be redeclared in the same scope, hoisted but not initialized.
const: Block-scoped, must be initialized at declaration, hoisted but not initialized. its value cannot be reassigned.

const and let variables are hoisted, but they are not accessible before their declaration due to the temporal dead zone (TDZ).

// var example
if (true) {
  var x = 10;
}
console.log(x); // 10

// let example
if (true) {
  let y = 20;
  console.log(y); // 20
}
// console.log(y); // ReferenceError: y is not defined

// const example
const z = 30;
// z = 40; // TypeError: Assignment to constant variable

Q2: What is Event Delegation in JavaScript?

Ans: Event Delegation is a technique in JavaScript where you add a single event listener to a parent element instead of adding multiple event listeners to child elements. The event listener on the parent element listens for events on its children using event bubbling.
Here is my separate blog on event delegation

// Add one event listener to the parent element
const parent = document.querySelector(".parent");

parent.addEventListener("click", (event) => {
  if (event.target.classList.contains("child-button")) {
    console.log(`Button ${event.target.textContent} clicked!`);
  }
});

//HTML
<div class="parent">
  <button class="child-button">Button 1</button>
  <button class="child-button">Button 2</button>
  <button class="child-button">Button 3</button>
</div>

Q3: What is the this keyword in JavaScript?

Ans: The value of this depends on the context:

In global scope, it refers to the global object (e.g., window in browsers).
Inside a function, it depends on how the function is called (e.g., in strict mode, it’s undefined by default).
Inside an object method, it refers to the object.
Inside an arrow function, it inherits this from the parent context.

const obj = {
  name: 'JavaScript',
  regularFunc() {
    console.log(this.name); // 'JavaScript'
  },
  arrowFunc: () => {
    console.log(this.name); // undefined (inherits from global scope)
  },
};

obj.regularFunc();
obj.arrowFunc();

Q4: How do you flatten a deeply nested array in JavaScript?

Ans: You can use recursion or the Array.prototype.flat() method with an appropriate depth.

// Recursive function to flatten an array
function flattenArray(arr) {
  return arr.reduce((acc, val) => 
    Array.isArray(val) ? acc.concat(flattenArray(val)) : acc.concat(val), []);
}

const nestedArray = [1, [2, [3, [4, 5]]]];
console.log(flattenArray(nestedArray)); // [1, 2, 3, 4, 5]

// Using flat()
console.log(nestedArray.flat(Infinity)); // [1, 2, 3, 4, 5]

Q5: What is the difference between == and === in JavaScript?

Ans:

== compares values after performing type coercion.
=== compares values and types without type coercion.

console.log(5 == '5');  // true (type coercion occurs)
console.log(5 === '5'); // false (no type coercion, types are different)

console.log(null == undefined);  // true (both are loosely equal)
console.log(null === undefined); // false (different types)

5 Javascript coding interview questions - Part 5
5 Javascript coding interview questions - Part 7

JavaScript and Its Core Concepts: A Beginner’s Guide to Web Development

Saqib Jamil — Mon, 09 Dec 2024 19:23:46 +0000

What is JavaScript?

JavaScript is a programming language that helps make websites interactive and dynamic. While HTML is used to structure the content of a webpage, and CSS is used to style it, JavaScript adds functionality and allows the webpage to respond to user actions.

For example:
• You click a button, and something happens (like a menu opening).
• You scroll, and content appears dynamically.
• A form checks your input (like email validation) before submission.

Key Features of JavaScript (Simplified)

Runs in the Browser: JavaScript runs directly in browsers like Chrome, Firefox, or Safari, so it works without installing anything extra.
Dynamic: You can change a webpage (its content or appearance) without reloading it.
Interactive: It responds to events like clicks, mouse movements, or key presses.
Fast: It works quickly because it runs directly in the browser.
Works Everywhere: JavaScript is used on both the browser (frontend) and servers (backend, using Node.js).

How JavaScript Works (Simplified)

When you visit a webpage:

JavaScript Loads: The browser loads the JavaScript file alongside HTML and CSS.
Executes Code: The browser’s JavaScript engine (like V8 in Chrome) runs the JavaScript line by line.
Interacts with the webpage: JavaScript can access and modify parts of a web page, like:

Adding or removing elements.
Styling parts of the page dynamically.
Showing or hiding content based on user actions.

Examples to Make It Clear

Changing Text on a Page
Let’s say you have a heading, and you want JavaScript to change its text.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>JavaScript Example</title>
</head>
<body>
  <h1 id="heading">Welcome!</h1>
  <script>
    // JavaScript changes the heading text
    document.getElementById("heading").innerText = "Hello, JavaScript!";
  </script>
</body>
</html>

Explanation:

The getElementById("heading") selects the 'h1' element.
.innerText = "Hello, JavaScript!"; changes its text.

Button Click Example
You can make a button do something when clicked.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Click Example</title>
</head>
<body>
  <button id="myButton">Click Me</button>
  <p id="message"></p>

  <script>
    const button = document.getElementById("myButton");
    button.addEventListener("click", function() {
      document.getElementById("message").innerText = "You clicked the button!";
    });
  </script>
</body>
</html>

What Happens:

The button listens for a “click.”
When clicked, JavaScript updates the
tag with a message.

Simple Calculator
Let’s create a calculator for adding two numbers.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Simple Calculator</title>
</head>
<body>
  <input type="number" id="num1" placeholder="First number">
  <input type="number" id="num2" placeholder="Second number">
  <button id="addButton">Add</button>
  <p id="result"></p>

  <script>
    document.getElementById("addButton").addEventListener("click", function() {
      const num1 = parseFloat(document.getElementById("num1").value);
      const num2 = parseFloat(document.getElementById("num2").value);
      const sum = num1 + num2;
      document.getElementById("result").innerText = "Sum: " + sum;
    });
  </script>
</body>
</html>

How It Works:

The user enters numbers in two input fields.
When the “Add” button is clicked, JavaScript calculates the sum and displays it.

Key Concepts in JavaScript

Variables:
Variables store data that can be used later.

Why Use Variables?

Variables help you:

Store Information: Keep data in memory for later use.
Reuse Values: Avoid rewriting the same value multiple times.
Make Code Dynamic: Change variable values to alter program behavior.

let name = "John"; // Storing the value "John" in a variable called name
console.log(name); // Output: John

Functions:
In JavaScript, functions are reusable blocks of code designed to
perform a specific task. They allow you to write a piece of logic
once and use it multiple times, making your code more efficient and
organized.

function greet(name) {
  return "Hello, " + name;
}

console.log(greet("Alice")); // Output: Hello, Alice
console.log(greet("Bob"));   // Output: Hello, Bob

Events:
Events in JavaScript are actions or occurrences that happen in the browser, often triggered by the user (e.g., clicking a button, typing in an input field, or resizing the window). JavaScript can “listen” for these events and perform specific actions in response. This is a key concept for creating interactive and dynamic web pages.

<button id="myButton">Click Me</button>

<script>
  const button = document.getElementById("myButton");

  // Add an event listener for a click
  button.addEventListener("click", function () {
    alert("Button was clicked!");
  });

const div = document.getElementById("myDiv");
div.addEventListener("mouseover", function () {
  console.log("Mouse is over the div!");
});
div.addEventListener("mouseout", function () {
  console.log("Mouse left the div!");
});
</script>

Conditions:
In JavaScript, conditions are used to perform different actions
based on whether a specified condition evaluates to true or false.
This helps control the flow of your program, allowing it to make
decisions.

Why Use Conditions?

Decision Making: Execute code based on specific situations.
Dynamic Behavior: React to user input or external data.
Error Handling: Handle unexpected cases gracefully.

let age = 20;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are not an adult.");
}

Loops:
In JavaScript, loops are used to repeat a block of code multiple times. They are helpful when you want to perform an action or series of actions several times, such as iterating over items in an array or performing a task until a condition is met.

There are several types of loops in JavaScript, each useful for different situations. Let’s go over the most common ones

for Loop:

The for loop is the most basic loop. It repeats a block of code for a specified number of times.

// Print numbers 1 to 5
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// Output: 1, 2, 3, 4, 5

while Loop:

The while loop runs as long as a specified condition is true. It checks the condition before each iteration.

// Print numbers 1 to 5 using a while loop
let i = 1;
while (i <= 5) {
  console.log(i);
  i++;  // Don't forget to increment i!
}
// Output: 1, 2, 3, 4, 5

do...while Loop:

The do...while loop is similar to the while loop, but it guarantees that the code will run at least once, even if the condition is false initially. It checks the condition after each iteration.

// Print numbers 1 to 5 using do...while loop
let i = 1;
do {
  console.log(i);
  i++;
} while (i <= 5);
// Output: 1, 2, 3, 4, 5

for...in Loop:

The for...in loop is used to iterate over the properties of an object (keys).

let person = {
  name: "John",
  age: 30,
  city: "New York"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}
// Output:
// name: John
// age: 30
// city: New York

for...of Loop:

The for...of loop is used to iterate over the values in an iterable object (like an array, string, or other iterable objects).

let numbers = [1, 2, 3, 4, 5];

for (let number of numbers) {
  console.log(number);
}
// Output: 1, 2, 3, 4, 5

Where JavaScript is Used

Frontend Development: JavaScript frameworks like React, Angular, and Vue.js are used to build interactive websites.
Backend Development: Node.js allows JavaScript to run on servers, powering backend logic.
APIs: JavaScript fetches data from remote servers.

Why Learn JavaScript?

Widely Used: Almost every website uses JavaScript.
Career Opportunities: Essential for web developers.
Easy to Start: You only need a browser to write and test JavaScript.

Conclusion

JavaScript is a beginner-friendly yet powerful programming language.
By practicing simple examples and understanding key concepts, you
can unlock the ability to create interactive and engaging web
applications!

5 Javascript coding interview questions - Part 5

Saqib Jamil — Sat, 18 Nov 2023 11:56:24 +0000

5 Javascript coding interview questions - Part 4
5 Javascript coding interview questions - Part 6

Q1: Explain Prototypal Inheritance in JavaScript.

Ans: Prototypal inheritance is a programming concept that allows objects to inherit properties and methods from other objects. In JavaScript, all objects are created with a prototype object, which is an object that contains the properties and methods that the object will inherit.
When you create a new object, you are essentially creating a copy of the prototype object. This means that the new object will have all of the same properties and methods as the prototype object. However, the new object also has its own set of properties and methods, which can be used to override or extend the properties and methods of the prototype object.

function Person(name) {
    this.name = name;
}
Person.prototype.greet = function() {
    return `Hello, my name is ${this.name}`;
};

function Student(name, grade) {
    this.name = name;
    this.grade = grade;
}
Student.prototype = Object.create(Person.prototype);

const student = new Student('Alice', 'A');
console.log(student.greet()); //Hello, my name is Alice

Q2: Explain Asynchronous JavaScript and its use cases.

Ans: Asynchronous JavaScript refers to the capability of executing code out of sequence, allowing other code to run while waiting for certain tasks to complete, such as network requests, file I/O, or timers. It's a fundamental feature in JavaScript, enabling non-blocking behavior and improving the responsiveness of web applications. Here are some key aspects and use cases of asynchronous JavaScript.

--Key Aspects--
Non-blocking Execution: Asynchronous operations don't halt the program's execution. Instead, they are initiated and allowed to complete independently while the main program continues to execute.

Callbacks: Often used to handle asynchronous operations, callbacks are functions passed as arguments to be executed once the operation is complete. However, nesting callbacks can lead to callback hell or difficult-to-read code.

Promises: Introduced to address the callback hell issue, promises provide a cleaner way to handle asynchronous code. They represent the eventual completion or failure of an asynchronous operation and enable chaining, error handling, and more readable code.

Async/Await: A more modern approach introduced in ES2017, async functions and the await keyword simplify working with asynchronous code, making it look more synchronous and easier to reason about.

--Use Cases--
HTTP Requests: Fetching data from APIs or servers is one of the most common use cases for asynchronous JavaScript. It prevents the user interface from freezing while waiting for the server's response.

Timers and Intervals: Setting timeouts or intervals for executing specific tasks asynchronously without blocking the main thread is another use case. For instance, updating the UI periodically or delaying certain actions.

File Operations: Reading and writing files asynchronously in web applications or Node.js environments, allowing other operations to proceed while waiting for file I/O to complete.

Database Operations: Asynchronous handling of database queries, especially in web servers, helps maintain responsiveness when dealing with databases.

Event Handling: Asynchronous code is commonly used in event-driven programming, where events can occur at unpredictable times. For example, handling user interactions in web applications.

Concurrency: Running multiple tasks concurrently without blocking each other, such as parallel processing or executing multiple asynchronous operations simultaneously.

console.log('Start');
setTimeout(() => {
    console.log('Delayed message');
}, 2000);
console.log('End');
// Outputs: Start, End, (after 2 seconds) Delayed message

Q3: What is the purpose of the async and await keywords in JavaScript?.

Ans: The async and await keywords in JavaScript are used to handle asynchronous code in a more synchronous and cleaner manner, making it easier to write and maintain asynchronous code. These keywords were introduced in ECMAScript 2017 (ES8) to simplify working with promises and asynchronous operations

--Purpose--
1. Async Functions (async): The async keyword is used to define an asynchronous function. It indicates that the function will always return a promise implicitly, even if the return value is not a promise.
Async functions enable you to write code that behaves asynchronously, but they look and feel like synchronous code, making asynchronous code more readable and easier to understand.

2.Await Keyword: The await keyword can only be used inside an async function. It is used to pause the execution of the async function until the promise is settled (resolved or rejected).
It waits for the promise to resolve and returns the resolved value or throws an error if the promise is rejected.
await can be applied to any promise-based function or operation that returns a promise (e.g., fetch, Promise.all, etc.).

Example:

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching data:', error);
        throw error;
    }
}

Q4: What are Promises in JavaScript?.

Ans: In JavaScript, a promise is an object that represents the eventual completion (or failure) of an asynchronous operation. Promises are a powerful tool for handling asynchronous operations, as they allow you to write code in a more synchronous-style.

function asyncOperation() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Operation completed successfully!');
            // or reject(new Error('Operation failed!'));
        }, 2000);
    });
}
asyncOperation()
    .then(result => console.log(result))
    .catch(error => console.error(error));

Q5: What is Callbacks in javascript?.

Ans: A callback is a function that is passed as an argument to another function and is intended to be executed after a specific task or event completes. Callbacks are a fundamental concept in asynchronous programming and are widely used in JavaScript to handle events, perform asynchronous operations, and more.

--Benefits of Callbacks--
Asynchronous Operations: Callbacks are extensively used to handle asynchronous tasks, such as making AJAX requests, reading files, or executing timers. They allow you to define what should happen after an asynchronous operation completes.

Event Handling: In event-driven programming, callbacks are used to respond to user actions or system events (e.g., click events, timers, HTTP requests). They allow you to define actions to be taken when an event occurs.

Modularity and Reusability: Callbacks promote modularity by allowing you to pass functions as arguments, making code more reusable. This enables the creation of higher-order functions that accept different callbacks to achieve different behaviors.

Error Handling: Callbacks can handle errors in asynchronous operations by using error-first callbacks (commonly used in Node.js). This convention enables handling both success and error cases within the same callback function.
Example

readFile('file.txt', function(err, data) {
    if (err) {
        console.error('Error reading file:', err);
        return;
    }
    console.log('File content:', data);
});

Control Flow: Callbacks facilitate control flow mechanisms like serial or parallel execution of asynchronous tasks.We can pass a function as parameter in a function and called it from where we want.

function logString(){
  console.log("This is callback function")
}

function mainFun(callbackFun){

  console.log("Main function called.");
  callbackFun();
}

mainFun(logString);

5 Javascript coding interview questions - Part 4
5 Javascript coding interview questions - Part 6

5 Javascript coding interview questions - Part 4

Saqib Jamil — Mon, 04 Sep 2023 13:01:43 +0000

5 Javascript coding interview questions - Part 3
5 Javascript coding interview questions - Part 5

Q1:Implement a function to check if two arrays are equal.
Ans:

function arraysEqual(arr1, arr2) {
  return JSON.stringify(arr1) === JSON.stringify(arr2);
}

Q2: Implement a function to perform a deep comparison of two objects
Ans:

function deepEqual(obj1, obj2) {
  if (obj1 === obj2) return true;
  if (typeof obj1 !== 'object' || typeof obj2 !== 'object') return false;
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) return false;
  for (const key of keys1) {
    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) return false;
  }
  return true;
}

Q3: Write a function that generates all permutations of a string.
Ans:

function permuteString(str) {
  if (str.length <= 1) return [str];
  const permutations = [];
  for (let i = 0; i < str.length; i++) {
    const char = str[i];
    const rest = str.slice(0, i) + str.slice(i + 1);
    const subPermutations = permuteString(rest);
    for (const perm of subPermutations) {
      permutations.push(char + perm);
    }
  }
  return permutations;
}

// Example usage:
permuteString('test')
Output:
['test', 'tets', 'tset', 'tste', 'ttes', 'ttse', 'etst', 'etts', 'estt', 'estt', 'etts', 'etst', 'stet', 'stte', 'sett', 'sett', 'stte', 'stet', 'ttes', 'ttse', 'tets', 'test', 'tste', 'tset']

Q4: Write a function to find the maximum sum of a subarray in an array of integers .
Ans:

function maxSubarraySum(arr) {
  if (arr.length === 0) {
    return 0; // Handle empty array
  }

  let maxSum = arr[0];
  let currentMax = arr[0];

  for (let i = 1; i < arr.length; i++) {
    currentMax = Math.max(arr[i], currentMax + arr[i]);
    maxSum = Math.max(maxSum, currentMax);
  }

  return maxSum;
}

// Example usage:
const arr = [-2, 1, -3, 4, -1, 2, 1, -5, 4];
const maxSum = maxSubarraySum(arr);
console.log("Maximum sum of a subarray:", maxSum); // Output: 6

Q5: Implement a function to find the longest substring without repeating characters.
Ans:

function longestSubstringWithoutRepeatingChars(str) {
  let longestSubstr = '';
  let currentSubstr = '';
  const charIndexMap = {};

  for (let i = 0; i < str.length; i++) {
    const char = str[i];

    if (charIndexMap[char] === undefined || charIndexMap[char] < i - currentSubstr.length) {
      // If the character is not in the current substring
      currentSubstr += char;
    } else {
      // If the character is in the current substring, update the current substring
      currentSubstr = str.slice(charIndexMap[char] + 1, i + 1);
    }

    charIndexMap[char] = i;

    if (currentSubstr.length > longestSubstr.length) {
      longestSubstr = currentSubstr;
    }
  }

  return longestSubstr;
}

// Example usage:
const inputString = "abcabcbb";
const longestSubstr = longestSubstringWithoutRepeatingChars(inputString);
console.log("Longest substring without repeating characters:", longestSubstr); // Output: "abc"

Explanation:

We maintain a currentSubstr variable to store the current substring being examined and a longestSubstr variable to store the longest substring found so far.
We use a charIndexMap object to keep track of the most recent index at which each character was seen.
We iterate through the input string, checking each character.
If the character is not in the current substring (not in charIndexMap or its last occurrence is not within the current substring), we append it to currentSubstr.
If the character is already in the current substring, we update currentSubstr by slicing it from the index after the last occurrence of that character to the current position.
We update the index of the character in charIndexMap.
If the length of currentSubstr becomes greater than the length of longestSubstr, we update longestSubstr.

After the loop, longestSubstr will contain the longest substring without repeating characters.

5 Javascript coding interview questions - Part 3

5 Javascript coding interview questions - Part 5

5 Javascript coding interview questions - Part 3

Saqib Jamil — Sun, 27 Aug 2023 18:35:20 +0000

5 Javascript coding interview questions - Part 2
5 Javascript coding interview questions - Part 4

Q1: Write a function that implements a simple version of Array.prototype.map(). Your function should take an array and a mapping function as inputs and return a new array with the results of applying the mapping function to each element of the input array.

Here's an example of how the function should work:

const inputArray = [1, 2, 3, 4, 5];
const mappingFunction = (x) => x * 2;

const outputArray = customMap(inputArray, mappingFunction);
console.log(outputArray); // Should output: [2, 4, 6, 8, 10]

Your task is to implement the customMap function using JavaScript.

Answer:
Here's a possible implementation of the customMap function:

function customMap(arr, mapFunction) {
  const result = [];

  for (let i = 0; i < arr.length; i++) {
    result.push(mapFunction(arr[i], i, arr));
  }

  return result;
}

In this implementation, the customMap function takes an array (arr) and a mapping function (mapFunction) as parameters. It iterates through each element of the input array, applies the mapping function to each element, and adds the result to the result array. The mapping function can optionally take three parameters: the current element, the current index, and the original array. This implementation is a simplified version of how the map function works in JavaScript.

Q2: Can you explain what will be logged to the console in the following code snippet?

for (var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}

Answer: This code might not behave as one might initially expect. It seems like it should log the numbers 0 to 4 to the console, each after a delay of 1000 milliseconds (1 second). However, due to the asynchronous nature of JavaScript and closures, the output will actually be five instances of the number 5 logged to the console.

Explanation: When the loop runs, it schedules five setTimeout functions to execute after 1000 milliseconds, each with its own closure. However, by the time the first setTimeout function executes, the loop has already finished, and the value of i is 5. Since closures capture references to variables, not their values at the time of creation, all five closures share the same i variable.

So, after 1000 milliseconds, each of the five functions reads the current value of i, which is 5, and logs it to the console. Hence, you will see:

To achieve the desired behavior of logging numbers 0 to 4 with the corresponding delays, you can use the IIFE (Immediately Invoked Function Expression) technique or ES6's let block scoping in the loop:

Using IIFE:

for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(() => {
      console.log(j);
    }, 1000);
  })(i);
}

Using let block scoping:

for (let i = 0; i < 5; i++) {
  let j = i; // Create a new variable j in each iteration
  setTimeout(() => {
    console.log(j);
  }, 1000);
}

These approaches will ensure that each closure captures a unique variable with the correct value for the corresponding iteration.

Q3: What is the output?

console.log(1 + '1' - 1);

Answer: The output will be 10. JavaScript coerces the addition operation to concatenate the strings initially, resulting in "11". Then, it performs a subtraction operation converting the string "11" to a number, resulting in 11 - 1 = 10.

Q4: What is a closure?
Answer: A closure refers to a combination of a function (or method) and its lexical environment, within which that function was declared. This allows the function to access variables and parameters from its outer scope even after that outer scope has finished execution.

In simpler terms, a closure "closes" over the lexical scope (variables and methods) from its surrounding context, allowing it to maintain access to those even after the outer function has finished executing.

function outerFunction(outerVariable) {
  // Inner function is a closure
  return function innerFunction(innerVariable) {
    console.log('Outer variable:', outerVariable);
    console.log('Inner variable:', innerVariable);
  };
}

const closureExample = outerFunction('Hello');
closureExample('World');  
// Output: Outer variable: Hello, Inner variable: World

In the above example innerFunction maintain access to variable outerVariable even after outerFunction finished its execution.

Note: The lexical environment

The lexical environment in JavaScript is the set of variables and functions that are accessible to a function at any given point in time.
The lexical environment is created when a function is declared, and it is destroyed when the function exits. The lexical environment of a function consists of the following:

The function's own scope: This contains all of the variables and functions that are declared within the function.
The scope of the function's parent: This contains all of the variables and functions that are declared in the scope where the function is declared.
The global scope: This contains all of the variables and functions that are declared outside of any function.

Q5: What's the difference between null and undefined?
Answer: null represents the intentional absence of any value and is often used to indicate the absence of an object value. undefined typically signifies an uninitialized variable, missing property, or an empty value.

5 Javascript coding interview questions - Part 2

5 Javascript coding interview questions - Part 4

5 Javascript coding interview questions - Part 2

Saqib Jamil — Mon, 07 Aug 2023 08:25:33 +0000

Javascript coding interview questions part 1
Javascript coding interview questions part 3

1: Two Sum - Given an array of integers nums and an integer target, return the indices of the two numbers that add up to the target.

function twoSum(nums, target) {
  const numMap = new Map();

  for (let i = 0; i < nums.length; i++) {
    const complement = target - nums[i];
    if (numMap.has(complement)) {
      return [numMap.get(complement), i];
    }
    numMap.set(nums[i], i);
  }

  return null; // If no such pair exists
}

// Test
console.log(twoSum([2, 7, 11, 15], 9)); // Output: [0, 1]

2: Find the Largest Number in an Array:
Write a function that takes an array of numbers as input and returns the largest number.

function findLargestNumber(arr) {
  return Math.max(...arr);
}

// Test
console.log(findLargestNumber([3, 5, 1, 9, 2])); // Output: 9

3: Find the Longest Word
Write a function that takes a sentence as input and returns the longest word in the sentence.

function findLongestWord(sentence) {
  const words = sentence.split(' ');
  let longestWord = '';

  for (const word of words) {
    if (word.length > longestWord.length) {
      longestWord = word;
    }
  }

  return longestWord;
}

// Test
console.log(findLongestWord('The quick brown fox jumped over the lazy dog')); // Output: "jumped"

4: Count Vowels
Write a function that takes a string as input and returns the number of vowels (a, e, i, o, u) in the string.

function countVowels(str) {
  const vowels = str.match(/[aeiou]/gi);
  return vowels ? vowels.length : 0;
}

// Test
console.log(countVowels('Hello World')); // Output: 3

5: Find Missing Number
Write a function that takes an array containing integers from 1 to n (excluding one number) and returns the missing number.

function findMissingNumber(nums) {
  const n = nums.length + 1;
  const totalSum = (n * (n + 1)) / 2;
  const currentSum = nums.reduce((sum, num) => sum + num, 0);
  return totalSum - currentSum;
}

// Test
console.log(findMissingNumber([1, 2, 4, 5])); // Output: 3

Javascript coding interview questions part 1
Javascript coding interview questions part 3

5 Javascript coding interview questions - Part 1

Saqib Jamil — Mon, 07 Aug 2023 07:37:07 +0000

Javascript coding interview questions part 2

Question 1: Reverse a String
Write a function that takes a string as input and returns its reverse.

function reverseString(str) {
  return str.split('').reverse().join('');
}

// Test
console.log(reverseString('hello')); // Output: "olleh"

Question 2: Check for Palindrome
Write a function that checks if a given string is a palindrome (reads the same forwards and backward).

function isPalindrome(str) {
  const reversedStr = str.split('').reverse().join('');
  return str === reversedStr;
}

// Test
console.log(isPalindrome('racecar')); // Output: true
console.log(isPalindrome('hello'));   // Output: false

Question 3: Find the First Non-Repeated Character
Write a function that takes a string as input and returns the first non-repeated character in the string.

function firstNonRepeatedChar(str) {
  const charCount = {};

  for (const char of str) {
    charCount[char] = (charCount[char] || 0) + 1;
  }

  for (const char of str) {
    if (charCount[char] === 1) {
      return char;
    }
  }

  return null; // If all characters are repeated
}

// Test
console.log(firstNonRepeatedChar('abacdbe')); // Output: "c"

Question 4: FizzBuzz
Write a function that prints the numbers from 1 to n. For multiples of 3, print "Fizz" instead of the number. For multiples of 5, print "Buzz" instead of the number. For numbers that are multiples of both 3 and 5, print "FizzBuzz".

function fizzBuzz(n) {
  for (let i = 1; i <= n; i++) {
    let output = '';
    if (i % 3 === 0) {
      output += 'Fizz';
    }
    if (i % 5 === 0) {
      output += 'Buzz';
    }
    console.log(output || i);
  }
}

// Test
fizzBuzz(15); // Output: 1, 2, "Fizz", 4, "Buzz", "Fizz", 7, 8, "Fizz", "Buzz", 11, "Fizz", 13, 14, "FizzBuzz"

Question 5: Remove Duplicates from an Array
Write a function that takes an array as input and returns a new array with duplicates removed.

function removeDuplicates(arr) {
  return [...new Set(arr)];
}

// Test
console.log(removeDuplicates([1, 2, 2, 3, 4, 4, 5])); // Output: [1, 2, 3, 4, 5]

These are just a few examples of JavaScript coding interview questions. Remember to practice and understand the concepts thoroughly to perform well in technical interviews.

Javascript coding interview questions part 2

Python Machine Learning - Handwritten Digit Recognition with TensorFlow

Saqib Jamil — Sun, 06 Aug 2023 19:48:41 +0000

Introduction:
Machine learning has witnessed remarkable advancements in recent years, enabling a wide range of applications. One such fascinating application is Handwritten Digit Recognition. In this article, we will explore how to build a digit recognition model using TensorFlow, a popular deep learning library in Python. We will create a neural network that can identify handwritten digits from the famous MNIST dataset.

Prerequisites:
To follow along with this tutorial, you should have a basic understanding of Python programming and some familiarity with machine learning concepts. Additionally, ensure that you have TensorFlow and its dependencies installed on your system.

The MNIST Dataset:
The MNIST dataset is a classic dataset widely used for training and testing machine learning models. It consists of 28x28 grayscale images of handwritten digits (0 to 9) and their corresponding labels. The dataset contains 60,000 training images and 10,000 testing images.

Getting Started:
First, let’s install TensorFlow and numpy if you haven’t already:

pip install tensorflow
pip install numpy

//or  If you are using Python 3
pip3 install tensorflow
pip3 install numpy

TensorFlow and NumPy are both popular and powerful libraries in Python, but they serve different purposes in the field of data science and machine learning.

TensorFlow: TensorFlow is an open-source machine learning library developed by the Google Brain team. It is primarily used for building and training machine learning and deep learning models. TensorFlow allows developers to define and train complex mathematical computations involving multi-dimensional arrays, known as tensors. It provides a flexible and efficient ecosystem for various machine learning tasks, including neural networks, natural language processing, computer vision, and more.

NumPy: NumPy is a fundamental library for numerical computing in Python. It stands for “Numerical Python” and provides support for large, multi-dimensional arrays and matrices, along with a collection of high-level mathematical functions to operate on these arrays. NumPy is the foundation of many other scientific computing libraries in Python, including pandas, SciPy, and scikit-learn.

Import the required libraries:

import tensorflow as tf
from tensorflow.keras.datasets import mnist
from tensorflow.keras.models import Sequential
from tensorflow.keras.layers import Dense, Flatten

//or you can use it manually in the code without importing like this

tf.tensorflow.keras.datasets.mnist

Load and Preprocess the Data:
We will load the MNIST dataset and preprocess the data by normalizing the pixel values to a range between 0 and 1:

Load the MNIST dataset

(train_images, train_labels), (test_images, test_labels) = mnist.load_data()

Normalize the pixel values to [0, 1]

train_images, test_images = train_images / 255.0, test_images / 255.0

Building the Neural Network:
Now, let’s create a simple neural network using TensorFlow’s Sequential API. Our model will have one input layer, one hidden layer, and one output layer:

model = Sequential([
    Flatten(input_shape=(28, 28)),  # Flatten the 28x28 input images to a 1D array
    Dense(128, activation='relu'),   # Hidden layer with 128 neurons and ReLU activation
    Dense(10, activation='softmax')  # Output layer with 10 neurons and softmax activation
])

Compile the Model:
Before training the model, we need to compile it by specifying the optimizer, loss function, and metrics:

model.compile(optimizer='adam',
loss='sparse_categorical_crossentropy',
metrics=['accuracy'])

Training the Model:
It’s time to train our digit recognition model on the training data:

model.fit(train_images, train_labels, epochs=5, batch_size=32)

Evaluating the Model:
Once the model is trained, we can evaluate its performance on the test data:

test_loss, test_accuracy = model.evaluate(test_images, test_labels)
print(f"Test Accuracy: {test_accuracy}")

Making Predictions:
Finally, we can use our trained model to make predictions on new images:

import numpy as np

Choose a random test image

random_test_image = np.expand_dims(test_images[0], axis=0)

Make a prediction on the random test image

prediction = model.predict(random_test_image)

Get the predicted digit

predicted_digit = np.argmax(prediction)

print(f"Predicted Digit: {predicted_digit}")

Conclusion:
In this article, we have explored how to build a digit recognition model using TensorFlow in Python. We leveraged the MNIST dataset to train and test the model’s accuracy. Handwritten digit recognition is just one example of the endless possibilities of machine learning. With TensorFlow’s capabilities, we can develop sophisticated models to tackle a wide range of real-world challenges.

Machine learning opens up a world of opportunities for automation and pattern recognition. As you continue your journey in the field of AI and machine learning, keep exploring different datasets, architectures, and optimization techniques to enhance your models’ performance. Happy coding!

(Note: This article provides a basic example of digit recognition using TensorFlow. For real-world applications, consider using more complex models and larger datasets for better accuracy.)