JavaScript Interview Questions for Freshers

Published by techbloggerworld.com on

Spread the love

Table of Contents

JavaScript Interview Questions for Freshers

Understanding JavaScript: Key Concepts and Techniques Explained

JavaScript is one of the most versatile and widely-used programming languages in the world. Whether you’re building a simple web page or a complex web application, understanding the core concepts of JavaScript is crucial. This article will delve into some of the fundamental aspects of JavaScript, offering clear explanations and examples to help you grasp these concepts.

Data Types in JavaScript

JavaScript has two main categories of data types: primitive and non-primitive.

Primitive Data Types

  • String: Represents a sequence of characters. Example: let name = "John";.
  • Number: Represents numeric values, both integers and floating-point numbers. Example: let age = 30;.
  • Boolean: Represents a true or false value. Example: let isStudent = true;.
  • Undefined: A variable that has been declared but not assigned a value. Example: let x;.
  • Null: Represents an intentional absence of any object value. Example: let y = null;.
  • Symbol: A unique and immutable primitive value, often used as object property keys. Example: let sym = Symbol('unique');.
  • BigInt: Allows representation of integers larger than the Number type can handle. Example: let bigNumber = 1234567890123456789012345678901234567890n;.

Non-Primitive Data Types

  • Object: Represents collections of key-value pairs. Example: let person = { name: "John", age: 30 };.
  • Array: A special type of object used for storing multiple values in a single variable. Example: let colors = ["red", "green", "blue"];.
  • Function: Represents a block of code designed to perform a particular task. Example:
    function greet() {
    console.log("Hello, world!");
    }

Understanding Hoisting in JavaScript

Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their containing scope during the compile phase.

For example:

console.log(hoistedVar); // Output: undefined
var hoistedVar = "I am hoisted!";

Here, hoistedVar is hoisted, meaning its declaration is moved to the top of the scope, but its assignment stays in place.

Purpose of the debugger Keyword in JavaScript

The debugger keyword is a powerful tool for debugging your code. When the debugger statement is encountered, execution is paused, and the debugging console (if open) is activated.

Example:

function checkNumber(num) {
debugger;
return num > 10;
}

In this example, when the checkNumber function is called, the debugger will pause execution, allowing you to inspect the value of num.

Comparison Between == and === Operators

  • == (Loose Equality): Compares two values for equality after converting both to a common type.
    console.log('5' == 5); // Output: true
  • === (Strict Equality): Compares two values for equality without type conversion.
    console.log('5' === 5); // Output: false

Differences Between var and let Keywords

The var and let keywords both declare variables but behave differently in terms of scope and hoisting.

  • Scope Differences: var is function-scoped, while let is block-scoped.
    if (true) {
    var x = 5;
    let y = 10;
    }
    console.log(x);
    // Output: 5
    console.log(y);
    // Output: ReferenceError
  • Hoisting Differences: Both var and let are hoisted, but let does not allow access before initialization.
    console.log(a);
    // Output: undefined
    var a = 10;
    console.log(b);
    // Output: ReferenceError
    let b = 20;

Understanding Implicit Type Coercion in JavaScript

Implicit type coercion occurs when JavaScript automatically converts one data type to another, such as converting a string to a number or vice versa.

Example:

console.log('5' - 3);
// Output: 2 (string '5' is converted to number)
console.log('5' + 3);
// Output: '53' (number 3 is converted to string)

In the first example, JavaScript converts the string ‘5’ to a number. In the second, it converts the number 3 to a string.

Static Typing vs. Dynamic Typing in JavaScript

JavaScript is a dynamically typed language, meaning variables can change type at runtime.

Example:

let data = 5;
// data is a Number
data = "Hello";
// data is now a String

In contrast, a statically typed language requires the data type to be declared and does not allow changes.

What is the NaN Property in JavaScript?

NaN stands for “Not-a-Number.” It’s a property that indicates a value is not a legal number.

Example:

let result = Math.sqrt(-1);
console.log(result);
// Output: NaN

In this example, the square root of a negative number is not a real number, so JavaScript returns NaN.

Passed by Value vs. Passed by Reference

  • Passed by Value: When you pass a primitive type (like a number or string), you pass a copy of the value.
    let a = 5;
    function modifyValue(b) {
    b = 10;
    }
    modifyValue(a);
    console.log(a);
    // Output: 5
  • Passed by Reference: When you pass an object, you pass a reference to the object, not the actual value.
    let obj = {
    value: 5
    };
    function modifyObject(o) {
    o.value = 10;
    }
    modifyObject(obj);
    console.log(obj.value);
    // Output: 10

Immediately Invoked Function Expressions (IIFE)

An IIFE is a function that runs as soon as it is defined. It’s useful for isolating code to avoid polluting the global scope.

Example:

(function() {
console.log("This is an IIFE");
})
();

Strict Mode in JavaScript

Strict mode is a way to opt into a stricter version of JavaScript, catching more errors and preventing some unsafe actions.

Characteristics of Strict Mode:

  • Variables must be declared before use.
  • Deletes cannot be applied to variables.
  • Duplicate parameter names are not allowed.

Example:

"use strict";
x = 3.14; // This will cause an error

Higher Order Functions in JavaScript

A higher-order function is a function that takes another function as an argument or returns a function.

Example:

function greaterThan(n) {
return function(m) {
return m > n;
};
}
let greaterThan10 = greaterThan(10);
console.log(greaterThan10(11));
// Output: true

Understanding the this Keyword

this refers to the object that is executing the current function. It behaves differently depending on the context in which it is used.

Example:

const obj = {
name: "John",
getName: function() {
return this.name;
}
};
console.log(obj.getName());
// Output: John

Here, this refers to obj.

Self-Invoking Functions in JavaScript

Self-invoking functions, or IIFEs (as mentioned earlier), are functions that automatically execute themselves once defined.

Example:

(function() {
console.log("This function runs itself");
})();

Explaining call(), apply(), and bind() Methods

  • call(): Invokes a function with a specific this value and arguments provided individually.
    function greet() {
    console.log(this.name);
    }
    let obj = {
    name: "John"
    };
    greet.call(obj);
    // Output: John
  • apply(): Similar to call(), but arguments are provided as an array.
    greet.apply(obj);
    // Output: John
  • bind(): Returns a new function with a specific this value.
    let boundGreet = greet.bind(obj);
    boundGreet();
    // Output: John

Difference Between exec() and test() Methods

  • exec(): Executes a search for a match in a string and returns the result as an array or null.
    let regex = /hello/;
    let result = regex.exec("hello world");
    console.log(result);
    // Output:
    ["hello"]
  • test(): Tests for a match in a string and returns true or false.
    let result = regex.test("hello world");
    console.log(result);
    // Output: true

Understanding Currying in JavaScript

Currying is a technique of evaluating a function with multiple arguments, one at a time.

Example:

function add(a) {
return function(b) {
return a + b;
};
}
console.log(add(2)(3));
// Output: 5

Advantages of Using External JavaScript

  • Separation of Concerns: Keeps HTML, CSS, and JavaScript files separate.
  • Cache Benefits: External JS files can be cached by the browser.
  • Reusability: External scripts can be reused across multiple pages.

Scope and Scope Chain in JavaScript

  • Scope: The area of the code where a variable can be accessed.
  • Scope Chain: A list of objects accessible in the current context.

Example:

function outer() {
let outerVar = "Outer";
function inner() {
let innerVar = "Inner";
console.log(outerVar); // Accessing outerVar

}
inner();
}
outer();

Closures in JavaScript

A closure is a function that remembers its outer variables even after the outer function has executed.

Example:

function outer() {
let counter = 0;
return function() {
counter++;
return counter;
};
}
const increment = outer();
console.log(increment());
// Output: 1
console.log(increment());
// Output: 2

Advantages of JavaScript

  • Versatility: JavaScript can be used for both front-end and back-end development.
  • Large Community: A huge ecosystem of libraries, frameworks, and tools.
  • Cross-Platform: Runs on nearly every device with a browser.

Understanding Object Prototypes

Prototypes are objects from which other objects inherit properties and methods.

Example:

function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log("Hello, " + this.name);
};
let person = new Person("John");
person.sayHello();
// Output: Hello, John

What are Callbacks in JavaScript?

A callback is a function passed into another function as an argument, to be executed later.

Example:

function fetchData(callback) {
setTimeout(() => {
callback("Data received");
}, 2000);
}
fetchData((message) => {
console.log(message);
// Output: Data received
});

Types of Errors in JavaScript

  • Syntax Errors: Errors in the code syntax.
    console.log("Hello world" // Missing closing parenthesis
  • Runtime Errors: Errors that occur while the code is executing.
    console.log(undeclaredVariable); // ReferenceError
  • Logical Errors: Errors in the logic that produces incorrect results.

What is Memoization?

Memoization is an optimization technique where results of expensive function calls are cached.

Example:

function memoize(fn) {
const cache = {};
return function(...args) {
const key = JSON.stringify(args);
if (cache[key]) {
return cache[key];
}
const result = fn(...args);
cache[key] = result;
return result;
};
}
const factorial = memoize((n) => {
if (n === 0) return 1;
return n * factorial(n - 1);
});
console.log(factorial(5));
// Output: 120

Understanding Recursion in JavaScript

Recursion is when a function calls itself to solve a smaller instance of the problem.

Example:

function factorial(n) {
if (n === 0) return 1;
return n * factorial(n - 1);
}
console.log(factorial(5));
// Output: 120

Constructor Functions in JavaScript

Constructor functions are used to create objects with the same properties and methods.

Example:

function Car(make, model) {
this.make = make;
this.model = model;
}
const myCar = new Car("Toyota", "Corolla");
console.log(myCar.make);
// Output: Toyota

What is the DOM?

Explanation of the Document Object Model (DOM)

The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document as a tree of objects, each corresponding to a part of the document. The DOM allows scripts and programs to dynamically access and update the content, structure, and style of a document.

For example, in an HTML document, the DOM represents each element (like <div>, <p>, etc.) as a node in a tree structure, which can be manipulated with JavaScript.

Example of Interacting with the DOM

To interact with the DOM using JavaScript, you can use various methods provided by the DOM API. For instance, to change the text content of a <p> element with the id of “myParagraph”:

document.getElementById('myParagraph').textContent = 'New text content!';

Retrieving Characters by Index in JavaScript

Using charAt() Method

The charAt() method returns the character at a specified index in a string.

let str = 'Hello, world!';
let char = str.charAt(4); // Returns 'o'

Example of charAt() in Use

If you want to extract the letter ‘e’ from the string "Hello":

let word = 'Hello';
 let letter = word.charAt(1); // Returns 'e'

What is the BOM (Browser Object Model)?

Explanation of the BOM

The Browser Object Model (BOM) provides access to the browser’s functionality and window. Unlike the DOM, which is concerned with the document content, the BOM allows interaction with the browser itself. This includes handling things like the browser window, location, history, and navigator.

Differences Between DOM and BOM

  • DOM: Focuses on the document’s content and structure (HTML/CSS).
  • BOM: Focuses on the browser environment and functionalities (window, history, location).

Client-Side vs. Server-Side JavaScript

Explanation of Client-Side JavaScript

Client-side JavaScript runs in the browser and is used to enhance the user experience by manipulating the DOM, handling user events, and communicating with the server asynchronously (e.g., using AJAX). It executes on the client’s device.

Explanation of Server-Side JavaScript

Server-side JavaScript runs on the server and is used to handle backend logic, database interactions, and server-side operations. Node.js is a popular runtime for server-side JavaScript.

Comparison with Examples

  • Client-Side: Validating form inputs before submission.
    document.getElementById('myForm').addEventListener('submit', function(e) {
    if (!document.getElementById('myInput').value) {
    e.preventDefault();
    alert('Input is required!');
    }
    });
  • Server-Side: Handling a database query.
    const express = require('express');
    const app = express();
    const mongoose = require('mongoose');
    app.get('/data', async (req, res) => {
    const data = await MyModel.find();
    res.json(data);
    });
    app.listen(3000);

Conclusion

Recap of Key JavaScript Concepts

  • DOM: Represents and manipulates HTML documents.
  • BOM: Manages the browser environment.
  • Client-Side JavaScript: Enhances the user interface and interacts with the document.
  • Server-Side JavaScript: Manages server operations and interacts with databases.

Importance of Mastering JavaScript Fundamentals

Mastering JavaScript fundamentals is crucial for web development as it empowers developers to build interactive, dynamic, and responsive web applications. Understanding both client-side and server-side aspects of JavaScript helps in creating a seamless user experience and efficient backend operations.

FAQs

Why is understanding JavaScript so important for web development?

JavaScript is essential for creating interactive and dynamic web experiences. It’s a core technology of the web, alongside HTML and CSS, and is used to enhance user interfaces, handle events, and communicate with servers.

What are the most common errors in JavaScript?

Common errors include:

  • Syntax errors (e.g., missing brackets)
  • Reference errors (e.g., using undeclared variables)
  • Type errors (e.g., calling a method on undefined)
  • Logical errors (e.g., incorrect algorithm)

Can you mix var, let, and const in the same code?

Yes, you can mix var, let, and const in the same code, but it’s important to understand their differences:

  • var is function-scoped and can be re-assigned.
  • let is block-scoped and can be re-assigned.
  • const is block-scoped and cannot be re-assigned.

How does JavaScript handle type conversion?

JavaScript performs type conversion automatically (coercion) in many situations, such as when combining different types in an expression. For example, adding a number and a string will convert the number to a string.

let result = 5 + '5'; // '55'

What are the limitations of JavaScript?

Some limitations include:

  • Single-threaded nature, which can lead to performance bottlenecks.
  • Limited access to system resources (e.g., file system).
  • Differences in implementation across different browsers can lead to compatibility issues.
Post Views: 106
Categories: JavaJavascripts
Tags:

techbloggerworld.com

Nagendra Kumar Sharma I Am Software engineer

1 Comment

JavaScript · October 12, 2024 at 5:19 am

[…] JavaScript is an interpreted language, which means it executes code line by line in the browser without the need for a separate compilation step. This feature simplifies the development process and allows for immediate feedback during coding.(Js Interview) […]

Reply

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

Related Posts

48bae1e32b226ad3e3fda9daef873761677e50af
Javascripts

Global and Local variables in JavaScript

Spread the loveIn JavaScript, understanding the distinction between global and local variables is crucial for effective programming. Each type of variable has its own scope, which determines where it can be accessed within the code. Global Variables Definition: Global Read more…

Data Types In JavaScript
Blogs

Variables and Datatypes in JavaScript

Spread the loveIn JavaScript, understanding variables and data types is crucial for effective programming. This knowledge forms the foundation for managing data and controlling program behavior. Aspect Description Variables Containers for storing data values. Declaration Keywords – var: Function-scoped or Read more…

syntax highlighter javascript snippets
Javascripts

JavaScript Syntax

Spread the loveJavaScript syntax is the set of rules that dictate how JavaScript code is structured and written. Understanding these rules is essential for creating functional and efficient JavaScript programs. Below is a comprehensive overview Read more…