vuejs interview questions

 whats the difference  between null adn undefined value 

In JavaScript, null and undefined are two distinct values that represent different states of a variable.

Null value: The null value is a primitive value that represents the intentional absence of any object value. It is explicitly assigned to a variable or a property to indicate that it has no value or does not refer to any object. It is a way to signify that something is intentionally empty or non-existent.

Example:

javascript

Copy code

let myVariable = null;

console.log(myVariable); // Output: null

Undefined value: The undefined value is a built-in value in JavaScript that is assigned to variables or object properties by default when they are declared but not explicitly assigned any value. It represents the absence of a value or the lack of an assigned value.

Example:

javascript

Copy code

let myVariable;

console.log(myVariable); // Output: undefined

Key differences between null and undefined:

Null is a value that can be assigned to a variable or an object property, while undefined is a default value automatically assigned by JavaScript to variables that are declared but not assigned a value.

Null is used to explicitly indicate the absence of a meaningful value, while undefined represents the absence of any value, including the absence of a variable or an object property.

Null is an intentional assignment, whereas undefined is an implicit assignment made by JavaScript.

When comparing with strict equality (===), null is only equal to null or undefined, while undefined is only equal to undefined or null.

It's important to handle null and undefined values appropriately in your code to avoid unexpected behavior or errors when working with variables and object properties.

a

difference between var ,let and constant

The first of the three keywords, “var,” has been a part of JavaScript since its inception. It declares variables that, regardless of where they are declared within that scope, are accessible from anywhere in the function — this process is known as “hoisting.” If var is used to declare a variable in the global scope, it's available everywhere.

function testVar() {
var x = 10
if (true) {
var x = 20
console.log(x) // Output: 20
}
console.log(x) // Output: 20
}
​testVar()

Let Declarations

let was added in ECMAScript 6 (ES6). It lets you declare variables within a block. This means that a variable declared with let can only be used in the block where it was defined or in any blocks that are nested inside it.

function testLet() {
   let x = 10
   if (true) {
       let x = 20
       console.log(x) // Output: 20
  }
   console.log(x) // Output: 10
}
​
testLet()

Const Declarations

ES6 also added the const keyword, which lets you define variables that can't be changed. This means that once you use const to create a variable, you can't change its value.

Here’s what I mean:

function testConst() {
 const x = 10;
 x = 20; // Error: Assignment to constant variable.
}
​
testConst();

In this example, we used the const keyword to declare x and then tried to give it a new value. This causes an error because const values can't be changed.

When a const variable is defined, it must immediately be given a value, and that value cannot be changed later. This behavior can make your code easier to understand and stop important data from being changed by accident

string to json

what is window object

In JavaScript, the window object represents the global window in a web browser environment. It is an important object that provides access to various properties and methods related to the browser window or tab.

The window object serves as the global scope for JavaScript code running in a browser, meaning that variables and functions defined directly in the global scope become properties and methods of the window object.

Here are some key points about the window object:

1. Global scope: Variables and functions defined in the global scope are attached to the window object. For example:

javascript
var message = "Hello, world!";
console.log(window.message); // Output: Hello, world!

2. Browser-related functionality: The window object provides access to several browser-related properties and methods, such as window.location (provides information about the current URL), window.document (represents the DOM document object), window.alert() (displays an alert dialog), and window.setTimeout() (schedules the execution of a function after a specified delay), among others.

3. Inner objects: The window object contains inner objects representing different aspects of the browser window, such as window.document (the DOM document object), window.navigator (information about the user's browser and operating system), window.history (the browsing history), window.localStorage and window.sessionStorage (APIs for storing data locally in the browser), and more.

4. Global methods: The window object also provides global methods like window.open() (opens a new browser window or tab), window.close() (closes the current window), window.print() (prints the current page), and others.

It's important to note that the window object is specific to browser-based JavaScript environments and may not be available in other contexts, such as Node.js. In a browser, you can often omit the window prefix and directly access properties and methods defined on the window object.

handle an exception

In JavaScript, you can handle exceptions using the try-catch statement. The try-catch statement allows you to define a block of code to be executed and specifies a block of code to handle any exceptions that may occur within the try block. Here's the basic syntax:

javascript

Copy code

try {

  // Code that may throw an exception

} catch (error) {

  // Code to handle the exception

}

Here's how exception handling works with the try-catch statement:

The code within the try block is executed. If an exception occurs during this execution, it "throws" an error.

If an error is thrown within the try block, the code execution within the try block stops, and the catch block is executed.

The catch block receives the error object as a parameter. You can choose to handle the error by executing specific code within the catch block.

After the catch block is executed, the program continues executing the code that follows the try-catch statement.

Here's an example to demonstrate exception handling:

javascript

Copy code

try {

  // Code that may throw an exception

  const result = 10 / 0; // This will throw a 'TypeError'

  console.log(result); // This line will not be executed

} catch (error) {

  // Code to handle the exception

  console.log("An error occurred:", error.message);

}

In the example above, dividing by zero throws a TypeError, which is caught by the catch block. The catch block logs an error message to the console.

You can also use multiple catch blocks to handle different types of exceptions:

javascript

Copy code

try {

  // Code that may throw an exception

} catch (error) {

  if (error instanceof TypeError) {

    // Code to handle TypeError

  } else if (error instanceof RangeError) {

    // Code to handle RangeError

  } else {

    // Code to handle other types of errors

  }

}

By using the try-catch statement, you can gracefully handle exceptions and prevent your code from abruptly crashing when errors occur.

opacity 

transparent

what is sass,less,stylus

sass is css frame work, $color='green"; it can use directly that variable in our styles

Sass, Less, and Stylus are three popular preprocessor languages for CSS (Cascading Style Sheets). They introduce additional features and functionality to CSS, making it more powerful and easier to work with. Here's a brief explanation of each preprocessor:

1. Sass (Syntactically Awesome Style Sheets): Sass is one of the most widely used CSS preprocessors. It provides a more advanced syntax with features like variables, nesting, mixins, functions, and control directives. Sass files use the .scss file extension, and they are compiled into standard CSS that the browser can understand. Sass offers improved code organization, reusability, and maintainability of stylesheets.

2. Less: Less is another popular CSS preprocessor. It shares many similarities with Sass and provides features such as variables, nesting, mixins, and functions. Less files use the .less file extension. The main difference between Less and Sass is the syntax. Less follows a slightly simpler and more concise syntax compared to Sass. Like Sass, Less is compiled into regular CSS.

3. Stylus: Stylus is a CSS preprocessor that takes a more minimalistic and expressive approach. It aims to have the least amount of syntax possible while still providing powerful features. Stylus files use the .styl file extension. Stylus supports variables, nesting, mixins, and functions, similar to Sass and Less. It also introduces some unique features like optional braces and indentation-based syntax.

All three preprocessors offer benefits such as code reusability, modularity, and improved workflow for large-scale projects. They allow you to write CSS in a more efficient and maintainable manner, reducing duplication and making it easier to manage stylesheets. However, it's worth noting that using a preprocessor requires an additional compilation step to convert the preprocessor code into regular CSS before it can be served to the browser

universal selector

* { color: red; }

*

liefecycle hooks in vuejs

v-show and v-if -> difference

v-if removed from dom

v-show- it will be just hide from dom

dynamic css in vuejs

<div :class="{ 'active': isActive, 'highlight': shouldHighlight }"></div>

data() { return { isActive: true, shouldHighlight: false }; }

one way databinding and two way data bidning 

conditonal directives

how to share components in vuejs

what are the various components ion state management

how can we redirect user to another page progratamatically

difference between slot and scoped slot in vuejs

use of this.next();

forceupdate();

purpose of v-once directive 

perform testing in vuejs, what do you use for it

filters in vuejs (its like computed property)

mixins in vuejs

middleware in vuejs

which one call first actions or mutations or state in vuex

primitive and non primitive datatypes in js

high order function in javasript

composition api and option api

waht is direcitves

v-once

virtual dom in vuejs

benefit of virtual dom

vuex-> how to manage the state-> 

click on button _-> which one will ist ccall in vuex

computed has caching or not

how to call api -> axios or ajax

authentication what  middleware in vuejs

store token usign middelware

cookeis and  session stored ?

local storage and sesion storage

life cycle and hooks

create and before create

vue3 and vue2 difference

scoped slot and vslot in vuejs

css

lifecycl

box model in css

css specificty

css display properties

display inlineand display inline block

flex properties in vuejs

css positon properties css

postion releative and absolute

how does relative position works

primitive nad not primitive and reference data type

let,const and var diference

es6 new features

regular and arrow function difference

main difference above two

undefined and null in javascript

what is call back in javascript

why we use call back 

javascript is synchrnous or asynchronoys

how to write async function 

higher order function is synchronous or async

map, filter

m

call apply bind method (spread oparator )

difference between promise adn async

typs of state in pro,mise(reject, pending,accept)

css postiotn properties

difference between postion relative sticky absolute

getters and setters in vuejs

let app_settings = this.$store.getters.getAppSetting();

sss==========================================================================

15/5/2024 5-6 pm

ojas

ss

vuejs

do u have any experinece in custom directives invuejs

difference betewwen vue3 and vue2

difference between optiona api and compositiona api

what is pinia

coimmunicate between two components

what is promises

what is asyn and await

what is event loop

difference between var , let and cosnt

if function it has no return, what it will return

/*

2 dropdowns to select `from` and `to` currency

An input box that allows user to enter the amount of `from` currency

A convert button - when clicked converts the amount of `from` currency to `to` currency and

displays the result below.

*/

currency_api:'https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies.json',

converter_api:'https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/',

this.$store.commit('setAppSettings', app_settings_data);