INTERVIEW QUESTION

Event bubbling is a method of event propagation in the HTML DOM API when an event is in an element inside another element, and both elements have registered a handle to that event. It is a process that starts with the element that triggered the event and then bubbles up to the containing elements in the hierarchy.

Events are actions or occurrences that happen in the system. In the world of programming, HTML events are something that happens to the HTML elements. But when JavaScript is used in HTML pages, it can react to these events.

preventDefault() prevents the browsers default behaviour, but does not stop the event from bubbling up the DOM. The event. stopPropagation() prevents the event from bubbling up the DOM, but does not stop the browsers default behaviour.

ES6 stands for ECMAScript 6. ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.
ECMAScript provides the specification on how JavaScript programming language should work.

The ES6 Featured I have used

• let and const keywords
• Arrow Functions.
• Multi-line Strings.
• Default Parameters.
• Template Literals.
• Destructuring Assignment.
• Enhanced Object Literals.
• Promises.
• Classes
• Promises.
• spread operator.
Top 10 ES6 Featured

i) var declarations are globally scoped or function scoped while let and const are block scoped.

ii) var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.

iii) While var and let can be declared without being initialized, const must be initialized during declaration.

iv) They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.

Arrow function is one of the features introduced in the ES6 version of JavaScript. It allows you to create functions in a cleaner way compared to regular functions.
Arrow functions are a new way to write anonymous function expressions
Arrow Functions Return Value by Default ​ Note:This works only if the function has only one statement.
Arrow functions with curly brackets are the only way to get multiple statements or expressions inside the function body. The return statement stops the execution of a function and will return a value from the function.

List down its advantages.

• This arrow function reduces lots of code and makes the mode more readable.


• Arrow function syntax automatically binds “this” to the surrounding code's context.


• Writing the arrow => is more flexible as compared with the writing function keyword.

also links: ES6: What are the benefits of the new features in practice?

The JavaScript spread operator ( ... ) allows us to quickly copy all or part of an existing array or object into another array or object.

The spread operator allows you to spread out elements of an iterable object such as an array, map, or set. For example:
const odd = [1,3,5];
const combined = [2,4,6, ...odd];
console.log(combined);
JavaScript (javascript)output: [ 2, 4, 6, 1, 3, 5 ]

The default parameter is a way to set default values for function parameters a value is no passed in (ie. it is undefined ). In a function, Ii a parameter is not provided, then its value becomes undefined . In this case, the default value that we specify is applied by the compiler.

Template literals are a new feature introduced in ECMAScript 2015/ ES6. It provides an easy way to create multiline strings and perform string interpolation. Template literals are the string literals and allow embedded expressions. Before ES6, template literals were called as template strings.

N.BTemplate literals are enclosed by backtick (`) characters instead of double or single quotes.

• This:Regular function have its their own this context, but the Arrow function don't have their own. Inside an Arrow function this value hold the this value of outer function. In the above example, We can see the greetMessage1(Arrow Functions) don't have its own this, But the greetMessage2(Regular Function) have it's own this due to which we can see the userName value in output.
• Using new Keywork:Regular function are constructible and callable.As it are constructible, they can be called using the ‘new’ keyword. But the arrow functions are only callable and not constructible. Due to which we will get a run-time error when trying to construct a non-constructible arrow functions using the new keyword.
• Implicit return:While working with Regular functions return expression statement is used to return the result from the function. It return statement is not available inside the function then udefined is returned from the function. But with Arrow function there is one exception where return is not mendatory to return result from the functions. See the example below:
  also visit: Difference Regular vs Arrow function

Find: The find() method returns the first value that matches from the collection. Once it matches the value in findings, it will not check the remaining values in the array collection.

Filter: The filter() method returns the matched values in an array from the collection. It will check all values in the collection and return the matched values in an array.

Every object in JavaScript has a built-in property, which is called its prototype. The prototype is itself an object, so the prototype will have its own prototype, making what's called a prototype chain. The chain ends when we reach a prototype that has null for its own prototype.

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.

Bracket notation is another way to access a property of an object. To use bracket notation, write the name of the object, followed by brackets [] . Inside the brackets, write the property name as a string. Bracket notation, unlike dot notation, can be used with variables.

When use: The dot notation is used mostly as it is easier to read and comprehend and also less verbose. The main difference between dot notation and bracket notation is that the bracket notation allows us to access object properties using variable.

api(Application Programming Interfaces)হচ্ছে এমন একটা পদ্ধতি বা এমন একটা কৌশল যে কৌশলে অন্য কোন প্লাটফর্ম থেকে ডেটাকে বা ফিচারকে বা সুযোগ সুবিধাকে লোড করে নিয়ে এসে নিজেদের সফট্ওয়ারে বা নিজেদের প্লাটফর্মে ব্যবহার করতে পারি। মুলত এই পদ্ধতিটিই হলো api.

কিছু api সমুহ হলো:

• Web API
• Browser API
• ThirtParty API

some thirty party APIs. Please search in google

• json placeholder api
• random user api
• Rest country api
• the meal db api
• the sportsDb api
• programming hero(phone hunter api) Phone Search URL Format: https://openapi.programming-hero.com/api/phones?search=${searchText} Example: https://openapi.programming-hero.com/api/phones?search=iphone Phone detail url: URL Format: https://openapi.programming-hero.com/api/phone/${id} Example: https://openapi.programming-hero.com/api/phone/apple_iphone_13_pro_max-11089
• https://openapi.programming-hero.com/api/course/curriculum
• weather api
• newsAPI

The primary or most-commonly-used HTTP verbs (or methods, as they are properly called) are POST, GET, PUT, PATCH, and DELETE. These correspond to create, read, update, and delete (or CRUD) operations, respectively.

No, you are not supposed to use PUT for GET. GET operations should only have view rights, while PUT resource is used for updating a data.

The difference between POST and PUT is that PUT requests are idempotent. That is, calling the same PUT request multiple times will always produce the same result. In contrast, calling a POST request repeatedly have side effects of creating the same resource multiple times.

JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa).

CRUD is a type of mechanism that allows you to create data, read data, edit it, and delete those data.

JSON is a language-independent data format. It was derived from JavaScript, but many modern programming languages include code to generate and parse JSON-format data. JSON filenames use the extension .json .

JSON supports a value of type String, Number and Boolean. It does not support octal and hexdecimal values.

Valid data type of JSON

• a string
• a number
• an object (JSON object)
• an array
• a boolean
• null

The JSON.stringify() method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.

The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string. An optional reviver function can be provided to perform a transformation on the resulting object before it is returned.

In GET method, values are visible in the URL. In POST method, values are not visible in the URL. GET has a limitation on the length of the values, generally 255 characters. POST has no limitation on the length of the values since they are submitted via the body of HTTP.

In JavaScript, the this keyword refers to an object. Which object depends on how this is being invoked (used or called). The this keyword refers to different objects depending on how it is used: In an object method, this refers to the object.

JavaScript is what is called a Client-side Scripting Language. That means that it is a computer programming language that runs inside an Internet browser (a browser is also known as a Web client because it connects to a Web server to download pages).

The way JavaScript works is interesting. Inside a normal Web page you place some JavaScript code (See How Web Pages Work for details on Web pages). When the browser loads the page, the browser has a built-in interpreter that reads the JavaScript code it finds in the page and runs it.

When the web browser fetches data from an internet connected server, it uses a piece of software called a rendering engine to translate that data into text and images. This data is written in Hypertext Markup Language (HTML) and web browsers read this code to create what we see, hear and experience on the internet.

The Primitive Data types in JavaScript include Number, String, Boolean, Undefined, Null and Symbol. The Non-Primitive data type has only one member i.e. the 'Object','Array','RegExp'

Primitive have value, non-primitives have reference, this is the main difference

Primitive data types are immutable values. and Non primitive is mutable.

mutuable-object

immutable this

Truthy values are values that evaluate to True in a boolean context.
Falsy values are values that evaluate to False in a boolean context.

undefined is a variable that refers to something that doesn't exist, and the variable isn't defined to be anything.
null is a variable that is defined but is missing a value.

undefined means a variable has been declared but has not yet been assigned a value:
null is an assignment value. It can be assigned to a variable as a representation of no value:

The main difference between the == and === operator in javascript is that the == operator does the type conversion of the operands before comparison, whereas the === operator compares the values as well as the data types of the operands.

the triple equals, === , is what's called a strict equality operator while the double equals is an equality operator.

Double Equals ( == ) checks for value equality only. It inherently does type coercion.Triple Equals ( === ) does not perform type coercion

= is used for assigning values to a variable in JavaScript. == is used for comparison between two variables irrespective of the datatype of variable. === is used for comparision between two variables but this will check strict type, which means it will check datatype and compare two values

Scope determines the accessibility (visibility) of variables. or Scope refers to the part of a program where we can access a variable.

JavaScript has 3 types of scope:

• Block Scope
• Function Scope
• Global Scope

In JavaScript, Hoisting is the default behavior of moving all the declarations at the top of the scope before code execution.

JavaScript hoisting occurs during the creation phase of the execution context that moves the variable and function declarations to the top of the script.

A callback is a function passed as an argument to another function

A JavaScript callback is a function which is to be executed after another function has finished execution. A more formal definition would be - Any function that is passed as an argument to another function so that it can be executed in that other function is called as a callback function or In JavaScript, the way to create a callback function is to pass it as a parameter to another function.

A closure is a function that accesses variables “outside” itself, in another function's scope, even after the parent function has closed. A closure is able to do this because of a saved reference to the lexical environment it was initially defined in. A closure is a function having access to the parent scope, even after the parent function has closed.

In pass by value in JavaScript, a copy of the original variable is created so any changes made to the copied variable do not affect the original variable. In pass by reference in JavaScript, we pass the reference of the actual parameter. No copy is created in the memory.

N.B: Primitive Data: Pass by value(string,boolean,number)

N.B: Non Primitive Data: Pass by Reference(array,object)

Props: Props are outside in a components
State: State are inside in a components.

Components: Components are like functions that return HTML elements.

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

Components come in two types, Class components and Function components
N.B: In older React code bases, you may find Class components primarily used. It is now suggested to use Function components along with Hooks, which were added in React 16.8. There is an optional section on Class components for your reference.

SPA stands for Single Page Application. It is a very common way of programming websites these days. The idea is that the website loads all the HTML/JS the first time you visit. When you then navigate, the browser will only rerender the content without refreshing the website.

An SPA (Single-page application) is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as XMLHttpRequest and Fetch when different content is to be shown.

SPA: single page application
MPA: Multi page application

MPAs require each page to be secured so it takes more effort and time to maintain security. SPAs, however, can make secure endpoints faster but they are not necessarily safer. SPAs run on JavaScript which makes them more prone to hacker attacks because it does not compile data for security.