This repo will contain 500 frontend interview questions which will have HTML, CSS, Javascript & React questions. I will add not any problems or long questions for now, just theory questions.
I will add 5 questions a day in this repo till day 100 days and after this, I am also planning to do 100 days of javascript questions too.
If you want to see the 5 questions daily in your social media feed, connect with me on Twitter and LinkedIn cause I will be posting them on my social media accounts too.
I've also added some tables, no need to memorize them, just take a look at them once a day or few times and you'll able to understand those concepts easily
Source of the questions: Google, ChatGPT, Github repos, etc
| Techs | No. of Questions | Range | Day Range |
|---|---|---|---|
| HTML | 50 | 0-50 | Day 1 - 10 |
| CSS | 100 | 51-150 | Day 11 - 30 |
| Javascript | 200 | 151-350 | Day 31 - 70 |
| React | 150 | 351-500 | Day 71 - 100 |
-
HTML (Hyper Text Markup Language) is the standard markup language for creating web pages. It's basics components includes element, tags and attribute.
-
The Doctype declaration specifies the type of document being used and tell the web browser how to interpret the pages content. It is located at the top of the HTML document.
-
Semantic HTML uses specific HTML elements to provide additional information about the structure and content of the page, making it more accessible and easy to read.
-
There are 3 types of list in HTML. They are Ordered list, unordered list and definition list.
-
The div element is a block-level element that is used to group and organize other HTML elements while span element is an inline-element that is used to apply style or attribute to a specific part of a block-level element.
-
The <B> tag is used to apply bold formatting to text, while the <strong> tag is used to indicate that the text is important and carries stronger semantic meaning than <b>.
-
There are several types of input field in HTML including text, password, checkbox, radio, button, submit, file and reset.
-
The GET request is used to retrieve data from a web server, while a POST request is used to submit data to a web server. GET requests are less secure and have limit on the amount of data that can be sent while POST request have no limit and are more secure.
-
Hyperlinks are created using <a>(anchor) tag, which contains the URL of the link and the text to be displayed.
-
The alt attribute is used to provide a text description of an image for users who are unable in to see the image, such as those who use screen readers.
-
Void elements are those elements in HTML which do not have closing tag or do not need to be closed. Example: <br />, <img />, etc.
-
Yes, we can display a web page inside another HTML web page. HTML provides <iframe> tag using which we can achieve this functionality.
-
The anchor tag <a> is used to create a hyperlink to another web page or to a certain part of a web page and these links are clickable, whereas, link tag <link> defines a link between a document and external resource and these are not clickable.
-
Some advantages of HTML5 are:
- It has multi media support
- Improved performance (faster loading)
- Better accessibility
-
The <canvas> element is a container that is used to draw graphics on the web page using scripting language like javascript.
-
HTML form is a section of a web page that allows users to input and submit data to the server.
-
The "action" attribute specifies the URL to which the form data is submitted, while the "method" attribute specifies the HTTP method when submitting the form data(either "GET" or "POST").
-
There would be nothing to format if there is not text present between the tags. Therefore, nothing will appear on the screen. Tags without closing tag like <img> do not require any text between them.
-
The <head> tag in HTML is used to provide metadata about document, such as title of page, links and other information that is not directly displayed on the web page. This information is used by browser and search engine to understand the content and structure of the web page.
-
The <meta> tag is used to provide additional information about the webpage, such as author, keywords, description which is used by search engines to understand the content of the page.
-
The <script> tag is either used to embed client-side script(Javascript), or it points to an external script file through the src attribute.
-
Viewport meta tag lets us control the width and scaling of the viewport so that it's sized correctly on all devices.
-
The <noscript> tag in used to display text for those browsers which does not support script tag or the browser disabled the script by user.
-
Fieldset is used to group related elements in a form. The <fieldset> tag draws a box around the related elements.
-
HTML tag is just opening or closing entity. For example <p> and </p> are called HTML tags.
HTML element consists of opening tag, closing tag and content(optional for content-less tags). For example: <p> This is the content </p>, this complete thing is called HTML element.
-
The color of the bullet is always the color of the first text of the list. So, if we can change the color of the bullets by changing the color of the text.
-
If we don't put <!Doctype HTML> tag, the browser will not be able to identify that it is an HTML document and HTML5 tags will not function properly.
-
HTML5 Web Storage is a mechanism in modern web browsers that allows web applications to store data locally within the user's browser. It provides two storage options: Local Storage and Session Storage.
-
The "target" attribute is used to specify where to open the linked document when the user clicks on the hyperlink.
-
The "em" tag is a semantic tag which is used to apply emphasis to a word or phrase within a paragraph.
Example: The sentence "I really enjoyed cycling" could be written using the "em" tag to emphasize the word "really": "I <em>really </em> enjoyed the concert last night."
-
The <header> tag is used to defined the header section of a webpage which includes site logo, navigation menu, and other introductory content.
-
The <nav> tag used to define a section of a webpage that contains links to other pages or sections of the current page.
-
The <main> tag is used to define the main content of a webpage, where the most important information is displayed.
-
The <article> tag is used to define a self-contained piece of content, such as a blog post, news article, or product review.
-
The <section> tag is used to group together related content and can be thought of as a container for content.
-
The <aside> tag is used to define content that is related to the main content of a webpage, but is not directly part of it. It is often used to provide additional information to the main content.
-
The <footer> tag is used to define the footer section of a webpage which contains copyright information, contact details, and other legal content.
-
The <figure> tag is used to group together media content, such as images or video with their associated captions or explanatory text.
-
The <figcaption> is used to define the caption or description of a media that is contained within a <figure> tag.
-
The <blockquote> tag is used to indicate that a section of text is being quoted from another source. It is used to highlight a particularly important quote.
-
The <datalist> tag is new addition to HTML5, and it is used to provide a list of pre-defined options for an input field. It allows us to create dropdown list of options.
-
The <option> tag is used to define an option in a dropdown list. The 'value' attribute in <option> tag is specifies the value of the option that will be submitted when the form is submitted.
-
To make an image clickable, we have to use anchor tag with the image tag nested inside it and specify where we want to be directed to in "href" attribute when image in click.
-
Tag Name Definition <table> Defines a table <caption> Defines a title or caption for a table <thead> Defines the header of a table <tbody> Defines the body of a table <tfoot> Defines the footer of a table <tr> Defines a row in a table <th> Defines a header cell in a table <td> Defines a standard cell in a table <colgroup> Defines a group of columns in a table <col> Specifies column properties for each column within <colgroup> <caption> Defines a title or caption for a table -
Attribute Description borderSpecifies the width of the border around the table. cellpaddingSpecifies the amount of padding to be added to the cells in the table. cellspacingSpecifies the amount of space to be added between cells in the table. widthSpecifies the width of the table. heightSpecifies the height of the table. alignSpecifies the horizontal alignment of the table within its containing element. Possible values are left,center,right, andjustify.valignSpecifies the vertical alignment of the table within its containing element. Possible values are top,middle,bottom, andbaseline.bgcolorSpecifies the background color of the table. bordercolorSpecifies the color of the border around the table. border-collapseSpecifies whether the borders of the cells in the table should be collapsed into a single border or not. Possible values are collapseandseparate. Default isseparate.border-spacingSpecifies the amount of space to be added between the cells in the table when the border-collapseproperty is set toseparate.captionSpecifies the title or caption of the table. caption-sideSpecifies the side of the table on which to place the caption. Possible values are top,bottom,left, andright. Default istop.empty-cellsSpecifies whether or not to display borders around empty cells in the table. Possible values are showandhide. Default isshow.frameSpecifies which sides of the table should have borders. Possible values are void,above,below,hsides,vsides,lhs,rhs, andbox.rulesSpecifies which parts of the table's border should be shown. Possible values are none,groups,rows,cols, andall. Default isnone.summarySpecifies a summary of the contents of the table. dirSpecifies the direction of the table's text. Possible values are ltr(left-to-right) andrtl(right-to-left).
-
The data=* attribute allows us to store additional information about an HTML element that is not otherwise displayed on the page, but may be useful to scripts that interact with the page.
-
The <legend> tag provides semantic caption or title for a <fieldset> element. It is optional but better for better to have for accessibility.
-
HTML entities are codes used to represent special characters in HTML that cannot be easily typed or displayed. Example:
&represents (&) -
The <picture> element in HTML5 is used to provide multiple versions of an image at different resolutions or sizes, and allows the browser to choose the best version to display based on the user's device and viewport size.
-
Attribute Description Example aria-labelProvides a short, descriptive label for an element that isn't already provided by its text content or associated label element. <button aria-label="Search">🔍</button>aria-describedbyReferences another element that provides additional information about the current element, such as instructions or help text. <input type="text" aria-describedby="name-help"> <div id="name-help">Enter your full name</div>aria-requiredIndicates which form fields are mandatory and must be filled out before the form can be submitted. <input type="text" aria-required="true">aria-expandedIndicates whether a collapsible element like an accordion or dropdown menu is currently expanded or collapsed. <button aria-expanded="true" aria-controls="menu">Menu</button> <div id="menu">...</div>aria-disabledIndicates whether an element is currently disabled or not, such as a disabled button. <button aria-disabled="true">Submit</button>aria-checkedIndicates whether a checkbox or radio button is currently checked or not. <input type="checkbox" aria-checked="true">aria-haspopupIndicates that an element has a pop-up or dropdown menu associated with it. <button aria-haspopup="true" aria-controls="menu">Menu</button> <div id="menu">...</div>aria-selectedIndicates that an element is currently selected or highlighted, such as a selected item in a list <li aria-selected="true">Item 1</li>aria-hiddenIndicates that an element is currently hidden or not visible to users, such as content that is only revealed when certain conditions are met. <div aria-hidden="true">Hidden content</div>
-
CSS stands for Cascading Style Sheets. CSS is used to define styles for web pages, including the design, layout and variations in display for different devices and screen sizes.
-
There are 3 ways to apply CSS styles to a web page. They are:
- Inline CSS
- Internal CSS
- External CSS
-
Some new features of CSS3 are:
- New selectors.
- Pseudo-classes
- Rounded Corners(Border-radius)
- Text shadow
- Gradient, etc
-
CSS selector is a part of css rule which is used to apply styles to a target specific HTML element or group of elements.
-
The universal selector is a css selector that can be used to apply styles to all elements on a page or to reset styles for all elements to their default values
-
Classes are used to group together elements with similar styles, while IDs are used to target specific elements on a page. IDs must be unique, while classes can be used multiple times on a page.
-
The box model in CSS is a way of representing elements as boxes with content, padding, borders, and margins. The content area is the actual content of the element, the padding is the space between the content and the border, the border is a line around the element, and the margin is the space between the border and the surrounding elements.
-
Margin is the space between the border of an element and the surrounding elements, while padding is the space between the content of an element and its border.
-
The CSS display property controls how an element is displayed on a page. The possible values are block, inline, inline-block, none, and others.
-
The CSS position property controls how an element is positioned on a page. The possible values are static, relative, absolute, fixed, and sticky
-
Relative positioning moves an element relative to its current position without affecting the position of other elements, while absolute positioning positions an element relative to its closest parent element, potentially affecting the position of other elements.
-
The CSS float property controls the alignment of an element in a page layout. The possible values include left, right, none, and inherit. When an element is floated left or right, other elements will flow around it.
-
The CSS clear property controls whether an element is allowed to float next to another element or not. The possible values include left, right, both, and none. When an element is cleared, it will be moved below any floated elements.
-
The CSS z-index property controls the stacking order of elements on a page. Elements with a higher z-index value are displayed on top of elements with a lower z-index value. The default value of z-index is auto.
-
CSS pseudo-classes are selectors that target elements based on their state or position in the document. Some examples include :hover, :active, :focus, :first-child, :last-child, and :nth-child.
-
CSS animation is a way to add movement and dynamism to the HTML element on a web pages using CSS. It is used to enhance users experience.
-
We can define CSS animation by creating a set of keyframes that specify the start and end states of an animation. We can apply the animation to an element using the animation property in css.
-
You can trigger a CSS animation to start and stop using various CSS selectors and events. For example, you can use the :hover pseudo-class to start an animation when a user hovers over an element.
-
We can create responsive CSS animation by using relative units like percentages instead of fixed units like pixels. We can also use media queries to adjust the animation properties based on the size of the viewport.
-
We can optimize CSS animation for performance by using techniques like reducing the number of elements being animated, minimizing the use of box-shadow and text-shadow, and using transform and opacity instead of top, left, bottom, and right.
-
How do you debug CSS animations and troubleshoot common issues, such as animations not playing or playing too quickly?
We can debug CSS animations by checking for typos or syntax errors, checking browser's compatibility if it supports the property or not, checking for code that may override the animation.
-
A transition in CSS is a way to create animation effects when a property of an HTML element changes, allowing developers to smoothly animate changes to an element's style over a specified duration.
-
Yes, you can specify multiple CSS transitions for an element by separating them with commas in the "transition" property.
-
It is a property of CSS which allows you to display a smooth transformation between two or more than two specified colors. There are two types of gradients in CSS. They are: Linear gradient and radial gradient.
-
A linear gradient creates a smooth transition between two or more colors in a straight line while the radial gradient creates a smooth transition between two or more colors in a circular shape.
-
Flexbox is a CSS3 layout module which provides more flexible and efficient way to align arrange and align the elements within the container. It is widely supported by the modern web browser.
-
flex-growis a property in Flexbox that specifies how much a flex item should grow relative to the other items in the container, whileflex-shrinkspecifies how much a flex item should shrink relative to the other items when there is not enough space available in the container. -
What is the difference between flex-wrap: nowrap and overflow: hidden in CSS?
flex-wrap: nowrapprevents flex items from wrapping to the next line when they overflow the container, whileoverflow: hiddenhides any content that overflows the container's boundaries. -
The
gapproperty in Flexbox sets the spacing between flex items, both horizontally and vertically. It is a shorthand forrow-gapandcolumn-gap. -
To center an element using flexbox, we need to set the parent container's display property to
flexand use thejustify-content&align-itemsproperties with the value ofcenter.
-
CSS grid is a layout system in CSS that allows you to create complex, multi-dimensional grid layouts for web pages.
-
How do you use the grid-template-columns and grid-template-rows properties to define the size and number of columns and rows in a grid?
You can use the grid-template-columns and grid-template-rows properties to define the size and number of columns and rows in a grid. For example, you might define a grid with three columns, where the first column is 100 pixels wide, the second column is 50% of the available width, and the third column takes up the remaining space, with the following CSS:
grid-template-columns: 100px 50% 1fr; -
You can specify the number of columns in a grid by using the
grid-template-columnsproperty. For example,grid-template-columns: repeat(3, 1fr)will create a grid with three columns that are each one fraction of the available space. -
You can align items within a grid using the
justify-itemsandalign-itemsproperties. justify-items aligns items horizontally within a grid, whilealign-itemsaligns items vertically. -
grid-rowis used to position an item within a row, whilegrid-columnis used to position an item within a column. Both properties can take a value of either a number or a named grid line.
-
A CSS transition is a way to add a gradual animation effect to an element when its CSS properties change.
-
The
transition-propertyproperty specifies which CSS property or properties should be transitioned when a change occurs. -
The
transition-timing-functionproperty specifies the rate of change of the transition over time. This can be used to control the speed of the transition and how it accelerates and decelerates. Example:ease-in,ease,ease-out. -
You can delay the start of a CSS transition using the transition-delay property. This property specifies the amount of time to wait before starting the transition, in seconds or milliseconds. Example:
transition-delay: 1s; -
You can apply a transition to multiple properties at once by separating the property names with commas in the
transition-propertyproperty. example,transition-property: background-color, color, opacity;
-
CSS 2D Transforms are a set of properties that allow you to transform the position, rotation, scaling, and skewing of an element in two dimensions, without affecting the surrounding elements.
-
Yes, you can use negative values with CSS 2D transforms. The effect of negative values depends on the function being used. For example, a negative value for the
rotate()function will rotate the element counterclockwise instead of clockwise. -
The properties of CSS 2D Transforms are:
- transform: specifies the transformation functions to be applied to an element
- transform-origin: specifies the point around which the transformation should occur
- translate: moves an element along the x-axis and/or y-axis
- rotate: rotates an element clockwise or counterclockwise around a given point
- scale: increases or decreases the size of an element
- skew: skews an element along the x-axis and/or y-axis
-
Yes, you can apply multiple transformations to the same element using CSS 2D transforms. You can do this by separating each transformation function with a space in the
transformproperty. -
The
translate()function is used to move an element along the x-axis and/or y-axis, while therotate()function is used to rotate an element clockwise or counterclockwise around a given point.
-
The properties of CSS 3D Transforms are:
- transform-style: determines whether an element's children are transformed in 3D space
- perspective: determines the distance between the viewer and the element, affecting the appearance of 3D transforms
- perspective-origin: specifies the origin point of the perspective
- transform: applies a 3D transformation to an element, such as rotateX(), rotateY(), rotateZ(), translateX(), translateY(),translateZ(), scale(), and skew()
- transform-origin: specifies the origin point of the transformation
- backface-visibility: determines whether or not the back face of an element should be visible when the element is rotated.
-
RGBA is similar to RGB, but it includes an additional alpha value that represents the opacity of the color. The alpha value is a number between 0 and 1, with 0 being completely transparent and 1 being completely opaque.
-
Color contrast is how much the colors of the text and the background of a website stand out from each other.
-
It is important because people with visual impairments or color blindness may have trouble seeing things if there is not enough contrast. There are guidelines for making sure there is enough contrast which makes the website content more accessible to the people.
-
CSS filters are a set of visual effects that can be applied to HTML elements using CSS. Filters can be used to adjust the appearance of an element in various ways, such as changing its color, blurring or sharpening it, adjusting its brightness or contrast, and more.
-
Important considerations include making sure the text remains readable and legible, ensuring the effect is appropriate for the overall design, and avoiding overuse of effects.
-
A CSS sprite is a technique used to combine multiple images into a single image file, reducing the number of HTTP requests required to load the page and improving loading times.
-
The :not() pseudo-class is used to select all elements that do not match the specified selector.
-
The :nth-child() pseudo-selector can be used with the "even" or "odd" keyword to target all even or odd elements of a parent element.
-
The :visited pseudo-class is used to target a link that has been visited by the user.
-
The ::first-letter pseudo-element is used to target the first letter of a text element.
-
The :active pseudo-class is used to target an element when it is in an active state, such as when a user clicks on it.
-
The lang() pseudo-class is used to target elements based on the language attribute of the HTML document. For example, you can use :lang(en) to target all elements in English, or :lang(fr) to target all elements in French.
-
The :checked pseudo-class is used to target form elements that have been selected by the user, such as checkboxes or radio buttons. This can be used to change the appearance or behavior of the selected element.
-
The @media rule in CSS allows developers to apply styles to a web page based on the size of the device or screen being used to view it, making it more responsive.
-
A fluid layout in CSS adjusts its width and height based on the size of the screen, while a fixed layout has a set width and height. Fluid layouts use percentages to set their dimensions, while fixed layouts use pixels.
-
To make images responsive in CSS, you can use the max-width: 100% property, which will make the image scale down proportionally to fit the width of its container while maintaining its aspect ratio.
-
In CSS media queries, min-width sets the minimum screen width at which a set of styles will be applied, while max-width sets the maximum screen width at which a set of styles will be applied. For example, if you use min-width: 768px, the styles will only be applied to screens that are 768 pixels wide or larger, while if you use max-width: 768px, the styles will only be applied to screens that are 768 pixels wide or smaller.
-
Responsive design in CSS adapts to different screen sizes and devices by using flexible grids, fluid images, and media queries to adjust the layout and content of the website. Adaptive design in CSS, on the other hand, uses predefined layout sizes and breakpoints to adjust the layout and content based on the screen size and device being used.
-
To optimize responsive images for faster loading in CSS, you can use smaller file formats like JPEG and PNG, reduce the image size and resolution, and use lazy loading to only load images when they are needed.
-
The CSS3 calc() function allows us to perform mathematical operations on property values. Example:
div{width: calc(100px + 50px)} -
The overflow property specifies what should happen if content overflows an element’s box. It's possible values are: auto, none, scroll, visible.
-
What is the difference between
visibility:hiddenanddisplay:none?visibility:hiddenmeans the tag is not visible, but the space is allocated for it on the page.display:nonemeans the tag will not appear at all and there will be no space allocated for it between the other tags. -
Quotes are optional in URL’s, and it can be single or double.
-
Web-safe fonts are fonts that are commonly installed on most devices and web browsers. Fallback fonts are alternative fonts specified in case the primary font is not available on the user's device.
-
The CSS content property is used to insert content before or after an HTML element using the ::before and ::after pseudo-elements.
-
To create a custom cursor in CSS, you can use the "cursor" property and set it to "url" with the path to the image file that you want to use as the cursor.
-
The "line-height" property in CSS is used to control the spacing between lines of text within an element.
-
Specificity in CSS is a way of determining which CSS rule applies to an element. It is based on the number of selectors and their types in a CSS rule. Specificity is calculated using a formula: inline styles have the highest specificity, followed by IDs, classes, and then elements.
-
The
background-attachmentproperty is used to control the scrolling of an image in the background.
-
The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
-
The word-wrap property allows long words to be able to be broken in order to prevent overflow and wrap onto the next line.
-
It is an instruction that tells browser on how to render a specific element on the HTML page. It consists of a selector with a declaration block that follows.
-
A CSS-only dropdown menu can be created by using the "hover" pseudo-class and the "display" property. When the user hovers over a parent element, the "display" property of the child element can be set to "block" or "inline-block" to reveal the dropdown menu.
-
Using CSS frameworks like Bootstrap can lead to bloated code, difficulties in customizing the design, and unoriginal or generic looks
-
TailwindCSS is a utility-first CSS framework that provides pre-defined CSS classes that can be used to rapidly build custom user interfaces.
-
TailwindCSS provides a configuration file that can be customized to match a specific design system or brand guidelines. This file includes variables for colors, fonts, spacing, and more, which can be adjusted to match the project's needs.
-
Utility classes in TailwindCSS are small, single-purpose classes that provide a specific styling utility, such as padding, margin, or text alignment. Component classes, on the other hand, are larger classes that provide a collection of styles for a specific component, such as a button or card.
-
TailwindCSS provides a purge option that removes any unused classes from the final CSS file, reducing its size. This option should be enabled in a production environment to minimize the CSS file size.
-
What are some common performance issues with TailwindCSS, and how do you optimize performance in your projects?
Common performance issues with TailwindCSS include the size of the CSS file and the number of classes being generated. To optimize performance, it is important to enable the purge option in a production environment, use a caching mechanism to speed up builds, and avoid generating unnecessary classes.
-
A CSS preprocessor is a scripting language that extends the capabilities of CSS which makes it easier and more efficient to write CSS code.
-
A CSS preprocessor generates CSS code from source code written in a higher-level scripting language, whereas a post-processor takes existing CSS code and applies transformations or optimizations to it. In other words, a preprocessor is used during development, while a post-processor is used after development to optimize performance.
-
Sass is a CSS preprocessor that adds functionality to CSS, such as variables, nesting, and more. It allows us to write more efficient code and simplifies task like browser compatibility.
-
Sass and SCSS are both CSS pre-processors and are very similar, but they have different syntax. Sass has a more concise and less verbose syntax, with no curly braces and no semicolon whereas SCSS has a syntax that is almost identical to standard CSS, with curly braces and semicolons
-
A developer might choose not to use Sass if they prefer to stick with standard CSS for simplicity or if they are working on a small project where the added features of Sass may not be necessary.
-
Sass nesting is a feature that allows us to write CSS selectors that are nested within one another which makes our code easier to read and understand.
-
Variables in Sass allow you to assign values to a variable name, which can then be used throughout your stylesheet.
-
A mixin is a feature in Sass that allows you to define a set of CSS styles that can be reused throughout your stylesheet. Example:
@mixin my-text-style { font-size: 16px; font-weight: bold; } /* we can use the whole style like this now */ h1 { @include my-text-style; } -
Inheritance allows us to define a set of styles in one selector, called a "parent", and then extend those styles to another selector, called a "child". Example:
@mixin button-style($bg-color, $text-color) { background-color: $bg-color; color: $text-color; display: inline-block; padding: 8px 16px; } // Use the mixin to create different button styles .button-primary { @include button-style(#007bff, #fff); } .button-secondary { @include button-style(#6c757d, #fff); } -
In SCSS, you can use the @if directive to add conditional logic to your styles. Example:
//declaring variable $background-color: #333; body { @if $background-color == #333 { background-color: $background-color; } @else { background-color: #fff; } }
-
Common mistakes in CSS include over-reliance on frameworks, lack of organization, and using non-semantic HTML
-
How do you balance the need for visual aesthetics with the need for website or application functionality?
I balance the need for visual aesthetics with the need for functionality by designing with the user in mind, testing designs with real users, and incorporating feedback and data into the design process.
-
We can ensure CSS is optimized for SEO by minimizing code bloat to improve load time, use relevant class names, avoiding inline styles, etc.
-
We can ensure that our CSS is scalable and maintainable for large project by:
- Using proper naming convection for ID and classes.
- Using preprocessor like sass, less, etc.
- Using performance enhancing techniques like lazy-loading, etc.
-
How do you use CSS variables to create more flexible and dynamic designs, and what are some use cases where variables are particularly useful?
CSS variables can improve maintainability and reduce repetition. Variables are particularly useful for theming, creating responsive designs, and making changes to global styles.
-
JavaScript is a programming language used to create interactive and dynamic web pages, as well as to create more complex applications on the client and server side.
-
Null represents a deliberate non-value or absence of any object value, while undefined represents a lack of value or an uninitialized variable.
-
The double equals (==) compares the value of two variables, while the triple equals (===) compares both the value and the data type of two variables.
-
The var keyword is used for variable declaration in older versions of JavaScript, while let and const were introduced in ES6. Var has a function-level scope, while let and const have block-level scope. Additionally, const variables cannot be reassigned after being declared, while let variables can be.
-
You can use the
Number()orparseFloat()functions to convert a string to a number in JavaScript.
-
The
slice()method returns the selected elements in an array as a new array object. It selects the elements starting at the given start argument, and ends at the given optional end argument without including the last element. -
The
splice()is an array method in JavaScript that allows you to modify an array by adding, removing, or replacing elements. It takes two required parameters: the index at which to start making changes to the array, and the number of elements to remove. It also has an optional parameter for adding one or more elements to the array. -
slice splice Doesn't modify the original array(immutable) Modifies the original array(mutable) Returns the subset of original array Returns the deleted elements as array Used to pick the elements from array Used to insert or delete elements to/from array -
Arrow functions are a shorthand syntax for writing function expressions in JavaScript. They use the
=>syntax to separate the function parameters from the function body and have a concise syntax that makes them ideal for writing short, one-liner functions. -
First-class functions means when functions in that language are treated like any other variable. This means that functions can be assigned to variables, passed as arguments to other functions, and returned from functions.
-
A pure function is a function that, given the same input, will always return the same output and does not have any observable side effect.
-
The scope chain is how Javascript looks for variables. When looking for variables through the nested scope, the inner scope first looks at its own scope.
-
A higher-order function is a function that takes one or more functions as arguments and/or returns a function as its result.
-
Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their respective scopes during compilation or interpretation, before the code is actually executed. This means that you can use a variable or function before it has been declared, but only if it is declared using the
varorfunctionkeywords. However, only the declarations themselves are hoisted, not their values or assignments. -
modules are a way of organizing code into separate files or components that can be reused in different parts of an application. Modules allow you to encapsulate data and functionality, making your code more organized and easier to maintain
-
In JavaScript, a closure is created when a function is defined inside another function and the inner function is returned from the outer function. The inner function has access to the variables in the outer function, even after the outer function has returned.
function outer() { var name = "John"; function inner() { console.log("Hello " + name); } return inner; } var greeting = outer(); greeting(); // Output: "Hello John" -
A callback is a function that is passed as an argument to another function and is intended to be called when the first function has completed its task. The primary use of callbacks in JavaScript is to handle asynchronous operations, such as making an AJAX request or waiting for a user to click a button.
-
Callback hell is a term used to describe a situation where multiple callbacks are nested within one another, making the code difficult to read, debug, and maintain. It often arises when dealing with asynchronous operations, such as making HTTP requests or working with databases.
-
Memoization is a technique used in computer science to speed up the execution of functions by caching the results of expensive function calls and returning the cached result when the same inputs occur again.
-
The "use strict" statement is used to enable strict mode in JavaScript, which helps to prevent common errors and make the code more secure. It prevents things like use of undeclared variable, use of keywords as variable name, using duplicate property names in objects, etc.
-
A cookie is a small data file that a website stores on a user's computer or device. Cookies are commonly used to remember user preferences and login information, and to track user activity on a website. Cookies can also have an expiration date, after which they are automatically deleted.
-
Feature Cookie Local storage Session storage Accessed on client or server side Both server-side & client-side client-side only client-side only Lifetime As configured using Expires option until deleted until tab is closed SSL support Supported Not supported Not supported Maximum data size 4KB 5 MB 5MB -
AJAX (Asynchronous JavaScript and XML) is a technique to create more dynamic and interactive web pages. It allows a web page to update content without requiring the page to reload. With AJAX, data is sent to and from the server in the background, using JavaScript and other data formats like JSON. This makes web applications more seamless and responsive, providing users with a faster and more engaging browsing experience.
-
Synchronous code executes tasks in sequence and waits for each task to complete before moving on, while asynchronous code can execute multiple tasks simultaneously and doesn't wait for them to complete before moving on to the next task.
-
Promises in JavaScript are a way of handling async operations. They help us write async code that looks and behaves like sync code, making it easier to read and maintain. Promises have three states: pending, fulfilled, and rejected.
-
JavaScript was created by Brendan Eich in 1995.
-
Both async/await and Promises are used to handle asynchronous operations in JavaScript. However, async/await is built on top of Promises which makes asynchronous code more readable, easier to write and reason about.
-
In JavaScript, errors can be handled using try-catch blocks. The code that might generate an error is enclosed in a try block, and if an error occurs, the catch block is executed. The catch block can then handle the error, such as by logging it to the console or displaying an error message to the user.
-
NaN (Not A Number) is a special value in JavaScript that represents a situation where a value is not a valid number. One important thing to note is that NaN is not equal to any value, including itself. We can use the
isNaN()function to check whether a value is NaN or not. -
In JavaScript, you can find the operating system details of the user by accessing the
navigatorobject, which contains information about the user's browser and environment.
-
The DOM (Document Object Model) is a programming interface that represents the structure and content of an HTML document as a tree-like structure of nodes. It allows developers to access and manipulate the content and structure of a web page using programming languages like JavaScript.
-
HTML is a markup language used to define the structure and content of a web page, while the DOM is an interface that represents that structure and content as a tree-like structure. The DOM provides a way to access and manipulate the content and structure of a web page, while HTML is simply a static markup language.
-
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, while the load event is fired when all resources on the page, including images and scripts, have finished loading.
-
The main difference between
innerTextandinnerHTMLin the DOM is thatinnerTextreturns only the visible text content of an element, excluding any HTML tags, whileinnerHTMLreturns the complete HTML content of an element, including any nested elements and tags. -
The Window object in the DOM represents the browser window or tab that displays the web page. It provides methods and properties for controlling and manipulating the browser window.
-
A node in the DOM is a fundamental unit that represents an element, attribute, or text content in a web page. Every node has a relationship with other nodes, such as a parent, child, or sibling. The parent node contains the child nodes, and the child nodes can have siblings that share the same parent
-
To prevent the default behavior of an event in the DOM using JavaScript, you can use the preventDefault() method. This method is called on the event object that is passed to the event handler function
-
Event propagation in the DOM refers to how events move or flow through different elements on a webpage. When an event happens on an element, like a click, it can travel to its parent elements and eventually to the whole document. This is called event bubbling. Alternatively, events can also travel from the document to the element that triggered the event, which is called event capturing.
-
The call stack in JavaScript is a data structure that stores information about the currently executing functions. When a function is called, a new frame is added to the top of the stack, and when the function completes, its frame is removed from the stack. This helps the JavaScript engine keep track of where it is in the execution of a script and manage the order in which functions are called.
-
The event loop in JavaScript handles asynchronous operations by queuing them up and processing them one by one in a non-blocking way. It checks the event queue continuously and processes the oldest operation first. When an operation is completed, its callback function is executed.
-
BOM stands for Browser Object Model. It is a set of APIs provided by the browser that allow JavaScript to interact with the browser window.
-
setTimeout()is a built-in function in JavaScript that allows you to schedule a function to be executed after a specified amount of time has elapsed. -
setInterval()is a function in JavaScript that allows you to repeatedly execute a given function at a specified interval. It works by calling the function repeatedly with a specified time delay between each call, until the interval is cancelled. -
The clearTimeout method is a built-in function in JavaScript that is used to cancel a timer created by the setTimeout function and clearInterval method is a built-in function in JavaScript that is used to cancel a recurring timer created by the setInterval function.
-
To redirect to a new page using JavaScript, you can use the
window.locationobject'sassignorreplacemethods. Example:// Redirect to a new page window.location.assign("https://www.example.com"); // Redirect to a new page and replace the current page in the browser history window.location.replace("https://www.example.com");
-
JavaScript object is a non-primitive data-type that allows you to store multiple collections of data. It is a container of key-value pairs in which value may be a variable, function or object itself.
-
What is the difference between dot notation and bracket notation when accessing properties of an object?
Dot Notation only allows static keys while Bracket Notation accepts dynamic keys. Static key here means that the key is typed directly, while Dynamic key here means that the key is evaluated from an expression.
-
Object literal is a syntax for creating object in javascript in which property and method are inside of curly braces separated by comma. We assign a variable to an object in object literal.
-
There are four ways to clone an object in javascript. They are:
- Use the spread operator.
- Call the Object.assign() function.
- Use JSON parsing.
- Use the structuredClone() function.
const data = { name: "Alice", age: 26 } // 1 const copy1 = { ...data } // 2 const copy2 = Object.assign({}, data) // 3 const copy3 = JSON.parse(JSON.stringify(data)) // 4 const copy4 = structuredClone(data) -
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 .
-
Class is a template that can be used to create objects that share the same properties and methods. When an object is created from a class, it is called an instance of that class. Class was introduced in ECMAScript(ES6).
-
In JavaScript, a constructor is a special method that is used to create and initialize objects that are based on a class. It's like a blueprint for creating new objects.The constructor method is called automatically when a new object is created from a class, using the new keyword. It's used to set the initial state of the object by assigning values to its properties.
-
An instance method is a method that can be called on an instance of a class, and it can access and modify instance-specific data, like properties of the object. A static method, on the other hand, is a method that belongs to the class itself, not to any instance of the class. It can only access class-level data and can be called on the class itself, rather than on an instance of the class.
-
In JavaScript classes,
thisrefers to the current object that is being worked on. It's like a placeholder for the object. For example, if you have a class that createsPersonobjects, and you want to give each person aname, you can usethis.nameto refer to thenameproperty of the currentPersonobject that is being created or accessed. So,thisis just a way to access the current object's properties and methods inside a class. -
There are several benefits of using classes in javascript. Some of them are:
-
Encapsulation: Classes allow you to encapsulate related data and behavior into a single object, making it easier to manage and organize your code.
-
Inheritance: Classes support inheritance, which allows you to create subclasses that inherit properties and methods from a parent class. This can help you avoid duplicating code and make your code more modular and reusable.
-
Code Reusability: With classes, you can create objects that share common properties and behavior. This can help you avoid writing the same code over and over again, making your code more efficient and easier to maintain.
-
Readability: Classes provide a clean and organized way to structure your code, which can make it easier to read and understand.
-
-
Method overriding is a concept in JavaScript where a subclass can provide its own implementation of a method that is already defined in the parent class. To override a method in a subclass, you simply define a method with the same name as the method in the parent class
-
Composition in class JS is a technique of building complex classes by combining smaller, more focused classes that represent specific behaviors or properties.Composition is a flexible and powerful technique for creating modular, reusable code in JavaScript.
-
Inheritance in classes in JavaScript is the ability to create a new class based on an existing class. The new class inherits all the properties and methods of the existing class, and can also add new properties and methods or override existing ones.
-
The
extendskeyword is used in JavaScript to create a new class that inherits from an existing class. It is used in the class declaration syntax, like this:class ChildClass extends ParentClass { // ChildClass methods and properties } -
The
super()keyword in JavaScript is used to call a method or constructor of a parent class from within a subclass. It allows a subclass to inherit and use functionality from the parent class, while also adding its own functionality.
-
A private class field in JavaScript refers to a class field that is only accessible within the class in which it is defined. It cannot be accessed or modified from outside the class, not even by instances of the class.
-
Encapsulation is a concept in object-oriented programming that refers to bundling data and methods within a single unit, such as a class, and hiding the internal details of the class from the outside world. This makes the code more secure and maintainable.
-
The
getkeyword is used to define a method that retrieves the value of a property. When the property is accessed, thegetmethod is automatically called, and its return value is used as the property's value. -
The
setkeyword is used to define a method that sets the value of a property. When the property is assigned a value, thesetmethod is automatically called, and it can perform any necessary validation or processing before setting the property's value. -
In JavaScript, instance variables are properties of an object that are specific to an instance of a class. When we create a new instance of a class using the
newkeyword, each instance has its own set of instance variables that are separate from other instances.
-
functions and classes are both important tools in JavaScript for defining reusable code, but they serve different purposes. Functions are used to encapsulate logic and perform specific tasks, while classes are used to create objects with shared properties and methods. Knowing when to use each one depends on the specific problem being solved and the design of the application.
-
In JavaScript, an abstract class is a blueprint for creating other classes that share some common properties and methods. However, unlike regular classes, abstract classes cannot be directly instantiated. Instead, they are meant to be extended or subclassed by other classes.
-
In JavaScript, you can convert an object to a JSON string using the
JSON.stringify()method, and you can convert a JSON string back to an object using theJSON.parse()method. -
Classes and interfaces are both used in JavaScript to define object types, but serve different purposes. A class defines a blueprint for creating objects that have properties and methods, while an interface describes the shape of an object and enforces a contract between different parts of a program. Classes define what an object is, while interfaces define what an object can do.
-
Polymorphism in JavaScript classes means that different objects can share the same methods, even if they belong to different classes. This allows us to reuse code across multiple classes and write more flexible, maintainable code.
-
In JavaScript, a prototype is an object that contains properties and methods that can be shared by all objects created with the same constructor function. It helps to reduce code duplication and makes your code more efficient.
-
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.
-
Prototypal inheritance allows objects to inherit properties and methods from their parent objects. When an object is created with a constructor function, its prototype is automatically set to the prototype object associated with that constructor function. Any properties or methods defined in the prototype object are shared by all objects created with that constructor function. When an object tries to access a property or method, JavaScript first looks for it in the object itself. If it's not found, it looks up the prototype chain until it finds the property or method.
-
The main difference between prototypal and classical inheritance is that prototypal inheritance allows objects to inherit properties and methods directly from other objects, without the need for classes or constructors. This makes the code more flexible and easier to maintain. Classical inheritance relies on classes and constructors to define the inheritance hierarchy, which can provide better organization and structure but is more rigid and requires more upfront planning.
-
Prototype Constructor Function An object that is shared by all instances created by the constructor function A function that is used to create new objects Used to define properties and methods that are shared by all instances Used to define properties and methods that are unique to each instance Accessed using the prototypeproperty of the constructor functionAccessed using the newkeyword followed by the constructor functionModifying the prototype affects all instances created by the constructor function Modifying the constructor function does not affect existing instances
-
We can add properties and methods to an object's prototype by using the constructor function's prototype property. To add a property, simply assign a value to a property on the prototype object. To add a method, define a function and assign it to a property on the prototype object.
MyConstructor.prototype.myProperty = "some value"; -
In other words,
Object.prototypeis the object that provides default properties and methods that all objects in JavaScript inherit from. On the other hand,Object.__proto__is the object that theObjectconstructor itself inherits from, and it provides the properties and methods that are specific to theObjectconstructor. -
We can check if an object inherits from a specific prototype by using the
isPrototypeOf()method. This method can be called on a prototype object to check if it appears anywhere in the prototype chain of another object. If the prototype object does appear in the prototype chain of the other object,isPrototypeOf()will returntrue. Otherwise, it will returnfalse.// Check if person inherits from the Object.prototype console.log(Object.prototype.isPrototypeOf(person)); // Outputs true if it inherits or else false -
We can override a method in an object's prototype by redefining the method on the prototype. To do this, you simply assign a new function to the existing property on the prototype. When you do this, any objects that were created using the constructor function whose prototype you are modifying will now have the new version of the method available to them.
-
The main difference between
new Object()andObject.create()is thatnew Object()creates a new object from scratch, whileObject.create()creates a new object that inherits from an existing object.
-
A regular expression, or regex for short, is a set of characters that form a pattern. This pattern is used to search for and match specific sequences of text.
-
A regular expression is a pattern used to match against a string. A string is simply a sequence of characters.
-
The syntax for creating a regular expression pattern consists of a combination of characters, special characters, and operators that define the pattern to match.
// Define the regex pattern const pattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/; -
A character class in regular expressions is a set of characters that can be matched in a single position in the text. It is denoted by enclosing the characters in square brackets [].
// Define the regex pattern using a character class const pattern = /[aeiou]/; -
In regular expressions, the asterisk (*) matches zero or more occurrences of the preceding character, while the plus sign (+) matches one or more occurrences of the preceding character.
For example, if we want to match the letter "a" followed by zero or more "b" characters, we would use the asterisk in our regular expression like this: /ab*/. This would match strings like "a", "ab", "abb", "abbb", and so on.
On the other hand, if we want to match the letter "a" followed by one or more "b" characters, we would use the plus sign in our regular expression like this: /ab+/
-
The question mark (?) is a metacharacter used in regular expressions to indicate that the preceding character or group of characters is optional. It means that the preceding character or group of characters may appear zero or one time. For example, the regular expression "colou?r" will match both "color" and "colour".
-
Backslashes () are used in regular expressions to indicate that the following character has a special meaning. For example, the regular expression "\d" matches any digit character, while the regular expression "\s" matches any whitespace character. If you want to match a literal backslash character, you need to escape it by using two backslashes ().
-
In a character class, you can specify a range of characters by using a hyphen (-) between two characters. For example, the regular expression "[a-z]" matches any lowercase letter from "a" to "z". Similarly, the regular expression "[0-9]" matches any digit character from "0" to "9". Note that the range is inclusive, so the characters at both ends are included in the match.
-
In regular expressions, a greedy match will match as much as possible while still allowing the overall pattern to match. A non-greedy match, on the other hand, will match as little as possible while still allowing the overall pattern to match. Greedy matching is the default behavior in most regex engines. To make a match non-greedy, you can use the question mark (?) after the quantifier. For example, the regular expression ".*?" will match as few characters as possible.
-
The pipe (|) operator is used in regular expressions to match either one pattern or another. For example, the regular expression "cat|dog" will match either "cat" or "dog". You can also use parentheses to group patterns together when using the pipe operator. For example, the regular expression "(red|green|blue) car" will match "red car", "green car", or "blue car".
-
The caret (^) and dollar sign ($) characters in regular expressions are used to match the beginning and end of a string, respectively.
-
Common use cases for regular expressions include text parsing, search and replace operations, and input validation.
-
To match a specific number of characters in a regular expression, you can use quantifiers such as {n} to match exactly n occurrences of a pattern, or {n,m} to match between n and m occurrences.
-
To match a specific character that has a special meaning in a regular expression, you can use an escape character () before the special character.
-
Lookarounds in regular expressions allow you to look ahead or behind the current position in the string without including the matched text in the result. Positive lookaheads (?=) and negative lookaheads (?!), as well as positive lookbehinds (?<=) and negative lookbehinds (?<!), are the four types of lookarounds that can be used.
-
The
window.locationobject is a built-in object in JavaScript that contains information about the current URL of the webpage. It is a property of the globalwindowobject and provides several properties and methods to work with URLs. -
Some of the properties of the window.location object are:
href: returns the entire URL of the current page
protocol: returns the protocol of the URL (http:, https:, etc.)
host: returns the hostname and port number of the URL
hostname: returns the hostname of the URL
port: returns the port number of the URL
pathname: returns the path and filename of the URL
search: returns the query string of the URL
hash: returns the anchor part of the URL -
We can redirect to another page using the
assign()method of thewindow.locationobject.window.location.assign("https://www.google.com"); -
You can reload the current page using the reload() method of the window.location object.
window.location.reload(); -
How do you get the value of a query parameter from the URL using JavaScript's
window.locationobject?You can get the value of a query parameter from the URL using the
searchParamsproperty of thewindow.locationobject. For example, to get the value of a query parameter namedid.const id = new URLSearchParams(window.location.search).get("id");
-
The Date object in JavaScript represents a date and time value, which can be used to perform various operations on dates and times.
-
You can format a date in JavaScript using the toLocaleDateString() method of the Date object, which returns a string representation of the date in the specified locale.
var date = new Date(); var formattedDate = date.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' }); console.log(formattedDate); // Output: "05/14/2023" -
You can compare two dates in JavaScript using the <, >, <=, >=, ==, and != operators, which compare the numeric values of the Date objects (i.e., their timestamps).
var date1 = new Date('2023-05-14'); var date2 = new Date('2023-05-15'); if (date1 < date2) { console.log('date1 is earlier than date2'); } else { console.log('date1 and date2 are equal'); } -
You can get the current timestamp in JavaScript using the
getTime()method of the Date object, which returns the number of milliseconds since January 1, 1970, 00:00:00 UTC. -
You can add or subtract days to a date in JavaScript using the
setDate()method of the Date object, which allows you to set the day of the month for a given date.var date = new Date(); date.setDate(date.getDate() + 3); console.log(date); // Output: the date 3 days from now
-
In JavaScript, an iterator is an object that provides a way to access elements of a collection or a custom data structure in a sequential manner. It allows you to loop over the elements one at a time, retrieving them on demand.
The most important method is next(), which is responsible for returning the next element in the sequence. When you call next() on an iterator, it returns an object with two properties: value, representing the current element, and done, indicating whether there are more elements or if the iteration is complete.
-
In JavaScript, a decorator is a design pattern that allows you to modify the behavior of an object or a function by wrapping it with another function. It provides a way to add new functionality or modify existing functionality dynamically, without changing the original code.
-
Babel is a tool that helps you write modern JavaScript code while ensuring compatibility with older environments by transforming or transpiling that code into an older JavaScript version. It allows developers to take advantage of new language features without worrying about browser compatibility issues.
-
Optional chaining is a js feature by which using the
?.operator, you can directly access nested properties or call nested functions, and if any part of the chain is null or undefined, the expression short-circuits and returns undefined instead of throwing an error. -
Throttling is a technique used in JavaScript to control the rate at which a particular function or code block is executed. It ensures that the function is called at a maximum frequency or a specified interval, preventing it from being invoked too frequently.
-
Debouncing in JavaScript is a way to control how often a function gets called when there are frequent events happening, like typing or scrolling. This can be useful for optimizing performance and avoiding unnecessary function calls.
-
The global execution context is the default or first execution context that is created by the JavaScript engine before any code is executed(i.e, when the file first loads in the browser). All the global code that is not inside a function or object will be executed inside this global execution context. Since JS engine is single threaded there will be only one global environment and there will be only one global execution context.
-
In JavaScript, the function execution context refers to the environment in which a function is executed or called. Each time a function is invoked, a new execution context is created specifically for that function. It consists of two main components: the variable environment and the scope chain.
-
What does the variable environment in JavaScript's function execution context contain, and what is its purpose?
The variable environment contains all the variables, function declarations, and function arguments specific to that function. It keeps track of the function's local variables and parameters, allowing the function to access and manipulate them during its execution.
-
The scope chain is a list of all the variable environments that are accessible to the function. It is used to resolve variable references during the function's execution. When a variable is not found in the current variable environment, JavaScript looks up the scope chain to find the variable in outer environments until it reaches the global execution context.
-
Minification is the process of removing all unnecessary characters(empty spaces are removed) and variables will be renamed without changing it's functionality.
-
The
window.location.hrefproperty will be helpful to modify the url but it reloads the page. HTML5 introduced thehistory.pushState()andhistory.replaceState()methods, which allow you to add and modify history entries, respectively. Example:window.history.pushState("page2", "Title", "/page2.html"); -
Dynamic imports in JavaScript allow you to load modules or scripts dynamically at runtime, instead of including them statically in the initial page load.
import('module.js') .then(module => { // Use the imported module // ... }) .catch(error => { // Handle any import errors // ... }); -
JavaScript is a multi-paradigm language, supporting imperative/procedural programming, Object-Oriented Programming and functional programming. JavaScript supports Object-Oriented Programming with prototypical inheritance.
-
You can empty an array quickly by setting the array length to zero.
let cities = ["Singapore", "Delhi", "London"]; cities.length = 0; // cities becomes []
-
A lambda function, also known as an arrow function in JavaScript, is a concise and shorthand way of defining a function. It uses the => arrow syntax to indicate a function, allowing for shorter and more readable code.
-
If there is a variable in the global scope, and you'd like to create a variable with the same name in a function. The variable in the inner scope will temporarily shadow the variable in the outer scope. It is called variable shadowing.
-
You can use the logical or operator || in an assignment expression to provide a default value. The syntax looks like as below,
var a = b || c; -
The rest operator in JavaScript is a special syntax that allows you to pass an indefinite number of arguments to a function. It is represented by three dots ( ... ).
function partyGuests(...names) { console.log(names); } partyGuests('Alice', 'Bob', 'Charlie'); -
The spread operator (
...) is used to spread elements from an array or object into another array, function call, or object literal. It allows you to unpack or expand the individual items or properties from the source into a destination.const fruits = ['apple', 'banana', 'orange']; const fruitSalad = ['kiwi', 'grape', ...fruits, 'melon']; //fruitSalad = ["kiwi", "grape", "apple", "banana", "orange", "melon"]
-
Why would you use something like the load event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?
The
loadevent fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.The DOM event
DOMContentLoadedwill fire after the DOM for the page has been constructed, but do not wait for other resources to finish loading. This is preferred in certain cases when you do not need the full page to be loaded before initializing. -
Native objects are objects that are part of the JavaScript language defined by the ECMAScript specification, such as String, Math, RegExp, Object, Function, etc on the other hand, the host objects are provided by the runtime environment (browser or Node), such as window, XMLHTTPRequest, etc.
-
Anonymous functions are functions that are not bound to a name. They are often used as inline functions, or as arguments to other functions. One typical use case for anonymous functions is as callback functions.
-
Negative Infinity is a number in JavaScript which can be derived by dividing negative number by zero.
-
All variables in JavaScript are object data types.
-
A prototype is a blueprint for creating objects. An instance is an object that is created from a prototype. Instances inherit properties and methods from their prototypes.
-
A function expression in JavaScript is a way to define a function by assigning it to a variable. Instead of using the traditional function declaration syntax, a function expression involves creating an anonymous function that can be stored in a variable.
-
A module is a self-contained unit of code that can be imported into another program. A library is a collection of modules that can be used to perform a specific task. Modules are typically used to organize code and make it easier to reuse, while libraries are typically used to provide functionality that is not available in the core language.
-
ECMA Script is like rules and guidelines, while Javascript is a scripting language used for web development.
-
We can delete a variable and remove it from memory in the following ways:
-
Using the
deletekeyword:let x = 10; console.log(x); // Output: 10 delete x; console.log(x); // Output: 10 (variable still exists but with no value) -
Setting the variable to
undefinedornull:let x = 10; console.log(x); // Output: 10 x = undefined; console.log(x); // Output: undefined -
Using a block scope with
letorconst://Variables declared with let or const within a block scope will automatically be removed // from memory once the block is exited. { let x = 10; console.log(x); // Output: 10 } console.log(x); // Output: ReferenceError: x is not defined
-
-
There are three types of errors:
- Load time errors: Errors that come up when loading a web page, like improper syntax errors, are known as Load time errors and generate the errors dynamically.
- Runtime errors: Errors that come due to misuse of the command inside the HTML language.
- Logical errors: These are the errors that occur due to the bad logic performed on a function with a different operation.
-
In JavaScript, the
blur()function is used to remove the focus from a specific element on a web page. When an element has focus, it typically means that it is selected or ready to receive user input, such as when a user clicks on an input field or a button. -
An alert box is a simple message box with an OK button for displaying information, while a confirmation box allows users to confirm or cancel an action with OK and Cancel buttons respectively. The alert box is non-interactive and pauses code execution until closed, whereas the confirmation box returns a boolean value indicating the user's choice and doesn't halt code execution.
-
prompt()is a built-in JavaScript function that displays a dialog box to the user with a message, an input field, and OK/Cancel buttons. It allows the user to input data, which can then be captured and used in JavaScript code. Theprompt()function halts the code execution until the user enters a value and clicks OK or cancels the dialog. If the user clicks OK, the entered value is returned as a string. If the user cancels or closes the dialog, the function returns null. -
If you have only a few lines of code that is specific to a particular webpage. In that case, it is better to keep your JavaScript code internal within your HTML document. On the other hand, if your JavaScript code is used in many web pages, you should consider keeping your code in a separate file.If your code is too long, it is better to keep it in a separate file. This helps in easy debugging.
-
NPM(Node Package Manager) is a helpful tool for developers that makes working with JavaScript easier. It's like a big library where they can find ready-to-use code and easily add it to their own projects. It is also the name of the command line package manager used to interact with npm.
-
The file that npm uses to identify the project and its dependencies is called "package.json". It serves as a configuration file where developers can specify information about their project, such as its name, version, and dependencies on external packages.
-
Both are defined in the
package.json. dependencies lists the packages that the project is dependent on. devDependencies lists the dependencies which are only required during testing and development. -
A non-blocking function, also known as an asynchronous function, is a type of function that does not block the execution of other code while it is running. Instead of waiting for the function to complete before moving on to the next task, non-blocking functions allow the program to continue executing other tasks while it performs its operation in the background.
-
A blocking function is a type of function that halts the execution of the program until it completes its task or receives a response.
-
Function composition in JavaScript refers to the process of combining two or more functions to create a new function. To compose functions, you typically create a higher-order function that takes two functions as arguments and returns a new function. This new function executes the functions in order, passing the result of one function as the argument to the next function.
-
In JavaScript, the "heap" refers to a part of the memory where dynamic memory allocation takes place. It is the memory region used for storing objects and variables that are created during the execution of a program. The heap is an essential component of the JavaScript runtime environment. It is responsible for managing and allocating memory for objects that are created dynamically at runtime, such as objects created using the new keyword, arrays, and function closures.
-
Typed Arrays are specialized array-like objects that allow you to work with binary data in a structured and efficient manner. They come in different types, such as numbers and bytes, and provide optimized operations for reading, writing, and manipulating binary data. They offer better performance and memory efficiency compared to regular arrays.
-
Node.js is a JavaScript runtime for server-side applications. It lets you run JavaScript outside of web browsers, handle network requests, access databases, and build scalable apps efficiently. It's widely used for creating web servers, APIs, real-time apps, and command-line tools.
-
PWAs (Progressive Web Apps) are web applications that use JavaScript, HTML, and CSS to provide a mobile app-like experience. They work offline, send push notifications, and can be installed on devices. PWAs combine the best of web and app technologies, allowing users to access them directly through web browsers without the need for app store downloads.
-
It is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand. This can be contrasted with the logical OR (||) operator, which returns the right-hand side operand if the left operand is any falsy value, not only null or undefined.
console.log(null ?? true); // true -
You can apply the checked property on the selected checkbox in the DOM. If the value is true it means the checkbox is checked, otherwise it is unchecked. For example, the below HTML checkbox element can be access using javascript as below:
console.log(document.getElementById(‘checkbox_name’).checked); // true or false -
The double tilde operator(~~) is known as double NOT bitwise operator. This operator is a slightly quicker substitute for Math.floor().
-
To debug JavaScript code, you can use console.log() statements to print values and messages to the console, browser developer tools for breakpoints, stepping through code, and variable inspection, the debugger statement to trigger breakpoints, exception handling to catch and log errors, linters and code analyzers to detect potential issues, and remote debugging for debugging code running in a different environment.
-
To optimize JavaScript code, you can combine and minify files, minimize global variables, optimize loops and conditionals, use efficient data structures and algorithms, cache data, leverage asynchronous programming, and optimize DOM manipulation.
-
Undeclared variables are those that do not exist in a program and are not declared. If the program tries to read the value of an undeclared variable, then a runtime error is encountered. Undefined variables are those that are declared in the program but have not been given any value. If the program tries to read the value of an undefined variable, an undefined value is returned.
-
Since 2 and 5 are integers, they will be added numerically. And since 3 is a string, its concatenation will be done. So the result would be 73. The ” ” makes all the difference here and represents 3 as a string and not a number.
-
What is statically typed and dynamically typed language and is javascript a statically typed or a dynamically typed language?
Dynamically-typed languages perform type checking at runtime, while statically typed languages perform type checking at compile time.Javascript is a dynamically typed language.
-
Function currying is a process in which we convert a function with multiple parameters to a chain of functions with a single parameter.
// Normal function function sum(a, b) { return a + b; } // Curried function function currySum(a) { return function (b) { return a + b; } } -
The
deleteoperator is used for deleting an object’s property or key.
-
A control flow function in JavaScript refers to a function that controls the flow of execution within a program, particularly when dealing with asynchronous operations.
-
Control flow functions provide mechanisms to coordinate and handle asynchronous operations, ensuring that certain actions occur before or after others. They help to maintain the desired order and synchronization in asynchronous code.
-
No, you cannot directly access the DOM in Node.js. Node.js is a runtime environment for running JavaScript outside of web browsers, and it does not have a built-in DOM implementation.
-
In the client-side/browser environment, if variables and functions are declared in the global scope (window), they can be accessed and shared by all scripts on the page. This is often referred to as the global scope or global namespace.
-
The
instanceofoperator checks whether the prototype property of a constructor appears anywhere in the prototype chain of an object. In other words, theinstanceofoperator checks if the object is an instance of a class or not at run time.class Person { constructor(name) { this.name = name; } } const john = new Person("John"); console.log(john instanceof Person); // Output: true console.log(john instanceof Object); // Output: true (all objects inherit from Object) const str = "Hello"; console.log(str instanceof String); // Output: false (str is a primitive string, not an instance of the String constructor)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent