JavaScript

Question 1

What is JavaScript

Answer 1

Javascript is a programming language that allows us to implement complex features on the web by integrating with HTML and CSS

Question 2

what is CI / CD

Answer 2

CI/CD stands for Continuous Integration and Continuous Deployment/Delivery. It is a set of practices and processes used in software development to automate the building, testing, and deployment of applications

Question 3

What is regex

Answer 3

Is a tool used to
-Matching specific patterns in strings (e.g., email addresses, phone numbers, URLs)
-Searching and replacing text within a larger body of text
-Validating input data against specific patterns or formats
-Extracting specific portions of text from a larger string

Question 4

what is AJAX?

Answer 4

Is a technique of accessing web servers from web page, it allows us:-

• update the web page without reloading the whole page
• request and receive data from a server after the page has loaded
• and also we can send data from the server in the background

Question 5

What is the latest version of JavaScript?

Answer 5

The latest version of JavaScript is ES6 and it has some new features like arrow Functions, Template literals, classes, let and const, destructing, default parameters, rest, promises (like asynchronous), modules. And those new features make JavaScript easy to write code and debag.

Question 6

Data Types in JavaScript:

Answer 6

JavaScript have two types of data types primitive and non-primitive,
primitives are:
* Boolean
* String
* Number
* Null
* Undefined
Non-primitives are:
* Object
* Array
* Functions

Question 7

What are the difference between undifiend and null?

Answer 7

Undefined is a return we get when we try execute a variable that have no value it return undefined because the excuter found the variable on the memory space
Null in other hand is used to represent intentional absence of a value. Often used to indicate that a variable or object property has ben delebretly set no value.

Question 8

What are Array methods?

Answer 8

Push, pop, shift, unshift,slice

Question 9

What are the string methods?

Answer 9

CharAt, concat, indexOf, substring, replace, toUpperCase

Question 10

what are the object methods?

Answer 10

Object.keys(), Object.values(), Object.entries(), Objec.assighn()

Question 11

How do you clone objects?

Answer 11

• Spread operator {…}
• Object.assign()
  Const obj = {name: “john”, age:30}
  Const obj2 = Object.assign({}, obj1)
• JSON.parse() and JSON.stringify()
  Const obj = {name: “john”, age:30}
  Const obj2 = JSON.parse(JSON.stringify(obj1)

Question 12

What is Map, reduce, and filter

Answer 12

They are a higher-order function that applied on an array

map:- retrurns a new transformed/modified array based on a provided callback function

filter:- returns a new filtered array containing only an element that passed a provided condition

reducer:- return a single output, it accepts accumulator and current element and returns the updated accumulated value

Question 13

what are call, apply and bind?

Answer 13

They are a methodes used to manuplate how functions are invoked and how they reference the “this” value

call:- allow us to invoke a value with a specified “this” value and argument provieded
Syntax:-
function.call(thisArg, arg1, agr2, …)

apply:- similar to call but it accept arguments as an array or array-like element
Syntax:-
function.apply(thisArg, [argumentsArr])

bind:- returns a new function with a specified this,
Syntax:-
function.bind(thisArg, optionalArguments)

Question 14

what is Hoisting?

Answer 14

Hoisting is a javascript behaviour where variables and functions were moved to the top of the respective scope during the compilation phase, before the code is exuted. which means that regardless of wher the variable and the function declared with in their scope they allways declared as they declared at the begning of the scope.

Question 15

What is variable Hoisting?

Answer 15

function decalration

sayHello() //hello

function sayHello(){
console.log(“hello”)
}

it only works when the function is declared using a function key word

when the variable declaration

console.log(number) //undifined

var nuber = 10

it doesen’t throw the error instade it return undified

Question 16

what is lexical scope?

Answer 16

It is a programming principle that determaines variable accessebility based on their locations in the source code

Question 17

what is closures?

Answer 17

Closure is a combination of function and it’s lexical enviroment. it is created when function is created within another function and has access variables from outer(enclosed) function, even after the outer function has finished the exution.

example
function outer() {
var outerVariable = ‘I am from the outer function’;

function inner() {
console.log(outerVariable);
}

return inner;
}

var closureFunction = outer(); // Assign the inner function to a variable
closureFunction(); // Output: “I am from the outer function”

Question 18

Diff between == and ===

Answer 18

”==” lose equality only checks the value without considering the type
for example:-
5 == ‘5’; // true
true == 1; // true
null == undefined; // true

but “===” strict equality checks for both type and value

Question 19

let, const and var

Answer 19

var

function scoped when it is declared in the function
can be re-declared and updated
- declarations are hoisted on the top and initialized with undefined
let
- block scoped {}
- can be updated but not re-declared
- declarations are hoisted on the top but is not
initialized

const
- block scoped {}
- can not be updated or re-declared
- declarations are hoisted on the top but is not
initialized

Question 20

Create vs Assign

Answer 20

create:- is involved in declaring a new variable and sometimes with a value
assingn:- assigning a value on the existing variable

Question 21

Use Strict

Answer 21

It is a directive the enables a strict mode to our code, some of it’s charcterstics are:-
enhancing error chacking:- disallowing the use of undlared varible…
restrictive variable scoping

Question 22

Prototypical Inheritance

Answer 22

It is one of the main consept of object oreanted programming, it is a mechanisem of inheriting methods and values from parenent object

// Create a parent object
var parent = {
property1: ‘value1’,
method1: function() {
console.log(‘Method 1’);
}
};

// Create a child object that inherits from the parent
var child = Object.create(parent);

// Access properties and methods from the parent object
console.log(child.property1); // Output: “value1”
child.method1(); // Output: “Method 1”

// Add new properties to the child object
child.property2 = ‘value2’;

// Access the new property from the child object
console.log(child.property2); // Output: “value2”

it allows code reusability and provide a flexable way of inheritance without using a class based component

Question 23

Prototype chain

Answer 23

In JavaScript, every object has an internal property called [[Prototype]], which references its prototype object. This prototype object, in turn, can have its own prototype object, forming a chain of objects linked together through their prototypes.

Question 24

Event bubbling

Answer 24

Event bubbling is a behavior in which an event that is triggered on a specific element is propagated up through its parent elements.

forexample:-

<div>
<div>
<button>Click me!</button>
</div>
</div>

outer.addEventListener(‘click’, function(event) {
console.log(‘Outer div clicked’);
});

inner.addEventListener('click', function(event) {
  console.log('Inner div clicked');
});

btn.addEventListener('click', function(event) {
  console.log('Button clicked');
});

When you click the button, the event is triggered and starts to bubble up the DOM hierarchy. The button’s click event handler is executed first, printing “Button clicked” to the console. Then, the event continues to bubble up to the inner div, where its click event handler is executed, printing “Inner div clicked”. Finally, the event reaches the outer div and triggers its click event handler, printing “Outer div clicked”.

Question 25

Event Capturing

Answer 25

In this phase, the event travels down from the top-level element (usually the document or window) through the DOM hierarchy to the target element. and have a third paramater to the “true” to the event handler

outer.addEventListener(‘click’, function(event) {
console.log(‘Outer div clicked during capturing phase’);
}, true);

inner.addEventListener('click', function(event) {
  console.log('Inner div clicked during capturing phase');
}, true);

btn.addEventListener('click', function(event) {
  console.log('Button clicked during capturing phase');
}, true);

Question 26

Event Delegation

Answer 26

Event delegation is a technique in JavaScript where you attach a single event listener to a parent element instead of attaching individual event listeners to multiple child elements.
for example:-

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

var parentList = document.getElementById(‘parent-list’);

// Add a single event listener to the parent element
parentList.addEventListener('click', function(event) {
  // Check if the clicked element is an <li> element
  if (event.target.tagName === 'LI') {
    // Handle the event for <li> elements
    console.log('Clicked:', event.target.textContent);
  }
});

Question 27

“this” in JavaScript

Answer 27

In JavaScript, the this keyword refers to the context within which a function is executed. Its value is determined by how the function is invoked and can vary depending on the execution context.

1. on the global scope this refers to the window
2. on object method this refers to the object

Question 28

Spread Operator and rest parameters

Answer 28

1. Spread Operator (…):
   The spread operator is denoted by three dots (…) and is used to expand an iterable (such as an array) into individual elements. It can be used in various contexts, but its primary use is for array manipulation.
   Combining Arrays, copying array and Spreading Function Arguments
2. Rest Parameters:
   Rest parameters are denoted by three dots (…) preceding a named parameter in a function declaration. They allow you to represent an indefinite number of arguments as an array.

Question 29

Arguments object

Answer 29

The arguments object is a special JavaScript object that is available inside functions and provides access to the arguments passed to the function at runtime.

• is not avialble in arrow function if we want to access it in arrow function we have to use the rest parameter

Question 30

Arrow functions

Answer 30

Arrow functions, introduced in ECMAScript 6 (ES6), provide a concise syntax for writing JavaScript functions. They offer a more streamlined and expressive way to define functions, their diffference are from the traditional functions are:-
1.Lexical “this” binding:- it recommended to use traditional function on methods that are inside the object
2.No binding of “arguments” object:- you have to use rest paramater

Question 31

Pass by value and pass by reference

Answer 31

Pass by Value:
In pass by value, a copy of the value is made and passed to the function or assigned to a new variable. Any modifications made to the copied value do not affect the original value.
Example:
function increment(number) {
number = number + 1;
console.log(number); // Output: 6
}

let value = 5;
increment(value);
console.log(value); // Output: 5

Pass by Reference:
In pass by reference, a reference to the original value or object is passed to the function or assigned to a new variable. Any modifications made to the referenced value or object also affect the original value or object.
Example:
function addOne(array) {
array.push(1);
console.log(array); // Output: [2, 3, 4, 1]
}

let numbers = [2, 3, 4];
addOne(numbers);
console.log(numbers); // Output: [2, 3, 4, 1]

Question 32

what is responsive design?

Answer 32

Is an approach that makes web pages render well on different devices, window, and screens

Question 33

What is Restful API

Answer 33

API is a set of rules that define how devices can connect and communicate with each other

and REST API is an architectural style for an application program interface (API) that uses HTTP requests to access and use data

Example of RESTful API endpoints:

GET /users: Retrieve a list of users.
GET /users/{id}: Retrieve a specific user.
POST /users: Create a new user.
PUT /users/{id}: Update a specific user.
DELETE /users/{id}: Delete a specific user.

Question 34

what is the difference between REST and RESTful API

Answer 34

REST (representational state transfer) is an architectural style for API and
A RESTful API, also known as a REST API, is an implementation of the principles and constraints defined by REST

Question 35

what is the point of RESTful API

Answer 35

provide a standardized and scalable way for different systems, applications, or services to communicate and exchange data over the internet.

Question 36

what is promise

Answer 36

A promise is an object that represents the eventual completion or failure of the asynchronous operation

Promises have three states:

1. Pending: The initial state. The Promise is neither fulfilled nor rejected. It is still in progress.
2. Fulfilled: The Promise has resolved successfully, and the associated value is available. This is often referred to as “resolved” or “resolved with a value.”
3. Rejected: The Promise encountered an error or exception during its execution, and the associated reason for rejection is available. This is often referred to as “rejected” or “rejected with a reason.

Promises have two main methods:

1. then(): The then() method is used to handle the fulfilled state of a Promise. It takes two optional callback functions as arguments: one for handling the fulfillment case (onFulfilled) and another for handling the rejection case (onRejected).

2.catch(): The catch() method is used to handle the rejection state of a Promise. It takes a single callback function as an argument, which is called when the Promise is rejected. It is a shorthand for .then(undefined, onRejected).

Question 37

what is a callback?

Answer 37

In JavaScript, a callback is a function that is passed as an argument to another function and is executed at a later point in time or after a particular event occurs. The purpose of a callback is to provide a way to handle asynchronous operations or to define custom behavior that should occur after a certain task is completed.

Callbacks are commonly used in scenarios where an operation takes some time to complete, such as reading a file, making an API request, or performing a database query. Rather than blocking the execution and waiting for the operation to finish, a callback function is provided to the asynchronous function, which will be called when the operation is completed or when a specific event happens.

Question 38

How to copy an array

Answer 38

1. Spread Syntax:
   const originalArray = [1, 2, 3];
   const copiedArray = […originalArray];
   The spread syntax (…) can be used to create a shallow copy of the original array. It spreads out the elements of the original array into a new array, effectively creating a new array with the same values.
2. Array.from():
   const originalArray = [1, 2, 3];
   const copiedArray = Array.from(originalArray);
   The Array.from() method creates a new array from an existing iterable object or array-like structure. In this case, it creates a new array with the same elements as the original array.
3. Array.slice():

const originalArray = [1, 2, 3];
const copiedArray = originalArray.slice();
The slice() method without any arguments returns a shallow copy of the original array. It creates a new array and copies all the elements from the original array into the new one.

4. Array.concat():
   const originalArray = [1, 2, 3];
   const copiedArray = [].concat(originalArray);

Question 39

How to compare two objects

Answer 39

1. strict Equality (===)
   const obj1 = { name: ‘John’, age: 30 };
   const obj2 = { name: ‘John’, age: 30 };
   const areEqual = obj1 === obj2;
   console.log(areEqual); // false

2.JSON.stringify()
const obj1 = { name: ‘John’, age: 30 };
const obj2 = { name: ‘John’, age: 30 };
const areEqual = JSON.stringify(obj1) === JSON.stringify(obj2);
console.log(areEqual); // true

Question 40

what is the benefit of using Async/Await

Answer 40

To increase the performance of the application, particularly when you have long-running operations that do not require blocking execution, we can perform other works while waiting for the long-running task

It’s less code and more readeable

Question 41

What is asynchronous programming and why it is important in javascript

Answer 41

Asynchronous programming is a programming paradigm that allows code execution to continue without waiting for long-running operations to complete. It enables the execution of multiple tasks concurrently, improving the responsiveness and efficiency of programs.

In JavaScript, asynchronous programming is crucial because JavaScript is a single-threaded language, meaning it can only execute one task at a time. However, JavaScript often needs to handle time-consuming operations like fetching data from servers, reading/writing files, or making API calls, which can cause blocking behavior and make the program unresponsive.