It is important to be prepared prior to a job interview as you only have 1️⃣ chance to impress and convince the interviewers that you are the one they are looking for. Typically, you will meet up with different engineers who will ask very hard questions, and unfortunately, you will most likely not get the job 🤦🙅 if one of them says 'NO' 🚫 especially the senior ranking interviewer.
There would be a time for an engineer to look for a new role whether it is driven by a new challenge, more money, or to move to a different place.
In this case, it is vital to be completely ready and know the common questions that are commonly asked so you are able to answer correctly and confidently.
Below are some questions that will definitely be asked in your next job interview.
JAVASCRIPT Questions:
1. What is a closure?
Closure is a function in a function. The inner function has access to the outer's function scope and parameters even after the outer function has returned.
2. What are the differences between call, apply, and bind?
call and apply immediately calls a function while bind creates a new function that can be invoked in the future. Arguments with call are passed in one by one, separated with a comma while apply expects an array as its argument.
3. What is an event loop?
An event loop is responsible for executing javascript code, collecting and processing events, and executing queued sub-tasks.
4. What is currying function?
A currying function is the process of taking a function with multiple arguments and turning it into a sequence of functions each with a single argument.
Curried functions are a great way to improve code reusability and functional composition
5. What is prototype in javascript?
Prototypes are the mechanism by which JavaScript objects inherit from another object.
6. What is memoization?
Memoization is an optimization technique by storing the result of expensive function calls and returning the cached results when the same inputs occur again.
7. What is a higher-order function?
a higher-order function is a function that accepts another function as an argument or returns a function as a return value or both of them.
Map, filter and reduce are some examples of higher-order functions that are already built-in to JavaScript.
8. What is event delegation?
Event delegation is a pattern of adding a single event listener to a parent element instead of multiple elements.
9. Name some ways to handle asynchronous operation in javascript
Callback is a function that is used to notify the calling instance
Promise is an object representing the eventual completion or failure of an asynchronous operation. A pending promise can either be fulfilled with a value or rejected with a reason.
Callbacks are attached to the returned promises that make handling of asynchronous code easier and more readable.async/await is a new addition to ES2017 which is syntactic sugar on top of promises and make asynchronous code look synchronous code
10. What is recursion?
Recursion is a technique for iterating over an operation by having a function call itself repeatedly until it arrives at a result.
This is most effective for solving problems like sorting or traversing the nodes of complex or non-linear data structures
1. What is Javascript?
it is the scripting language of the web that was initially intended to run on the browser. Today, JavaScript is used in the server.
2. What is ECMAScript?
is a standard specification for scripting languages. JavaScript is based on ECMAScript.
3. What is the difference between == and ===?
== compares values
=== compares both type and value
4. What is a promise?
is an object that may produce a single value sometime in the future with either a resolved value or a reason for not being resolved
5. What is strict mode in JS?
it is useful for writing secure JS code. It prevents some bugs from happening and throws more exceptions.
6. What is the difference between null and undefined?
null type is an object that is explicitly assigned to a variable.
undefined type is undefined where the variable has been declared but has no assigned value
7. What is AJAX?
stands for Asynchronous JavaScript and XML. We can send data to the server and get data without refreshing the page.
8. Explain the difference between synchronous and asynchronous.
Synchronous is blocking operation while asynchronous is not. Synchronous complete the current code before the next code is executed while asynchronous continue on the next code without completing the current code
9. What are the differences between var, let, and const
var is scoped to a function. let and const are block-scoped. Accessible to nearest curly braces (function, if-else, for-loop)
10. What is the DOM?
it stands for Document Object Model. This can be used to access and change the document structure, style, and content.
CSS Questions:
What is CSS Box model?
The box model is a box that wraps around every HTML element.
The box contains content, padding, border, and margin.
Content of the box is where text and images appear
Padding is the area around the content. The padding is transparent
Border is the border that goes around the padding and content
Margin is the area outside the border. The margin is transparent
What is a CSS sprite?
CSS sprites combine multiple images into one single larger image. This would only require one server request resulting in a faster loading time. Without CSS sprites, each image will send out individual server requests.
What is a CSS preprocessor?
A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS preprocessors to choose from and each one will add some features that don’t exist in pure CSS such as variables, mixin, nesting selector, and many more. These features make the CSS structure more readable and easier to maintain.
Explain the concept of specificity in CSS.
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element that will be applied. Specificity applies a weight to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element.
What is !important?
Important is used to provide more weight (importance) than normal property.
It is used for overriding other styles that are declared elsewhere in order to achieve a certain design.
We can think of important as the main priority so it needs to be applied and ignore other rules.
Explain the difference between visibility: hidden and display: none?
visibility: hidden hides the element, but it occupies space and affects the layout of the document.
display: none also hides the element but not occupy space. It will not affect the layout of the document.
What are the different ways to position a certain element in CSS?
Position can be static, relative, absolute, fixed, and sticky
Static is the default position value. The element will flow into the page as it normally would. The top, right, bottom, left and z-index properties do not work with static positioning.
Relative element is adjusted relative to itself, without changing the layout
Absolute element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block.
Fixed element is also removed from the flow of the page. It is positioned relative to the viewport and doesn’t move when scrolled.
Sticky element is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
What does box-sizing: border-box do?
This tells the browser to account for any border and padding with the element's width and height. This makes dealing with the sizes of elements much easier. It will also eliminate a number of pitfalls you can stumble while laying out your content.
What is the difference between inline, inline-block, and block?
Block elements always start on a new line. They will also take space of an entire row.
Inline elements don't start on a new line, These elements appear on the same line with the content and tags beside them.
Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides.
What is pseudo-element?
A pseudo-element allows you to manipulate parts of an element in a special way. You can use only one pseudo-element in a selector but It must appear after the simple selectors in the statement.
p::first-letter {
color: #ff0000;
}
What is pseudo-class?
A pseudo-class is a selector that selects elements that are in a specific state. Like regular classes, you can chain together as many pseudo-classes as you want in a selector.
a:hover {
color: red;
}
What is the difference between Flexbox and Grid?
flexbox is a one-dimensional layout to create either a row or a column layout while grid Is a two-dimensional layout that can handle both row and column layout.
Both approaches make it easy to design and build a layout on web pages without writing a lot of CSS.
A general rule to follow is to use flexbox if you need to define a layout as a row or a column.
Use a grid If you want to define a grid and place the content into it.
You can also mix these two together.
HTML Questions:
What are HTML Entities?
HTML entities are a piece of text ("string") that begins with an ampersand ( & ) and ends with a semicolon ( ; ) . They are frequently used to display reserved (which would otherwise be interpreted as HTML code), and invisible characters (like non-breaking spaces).
What are semantic elements in HTML?
Semantic elements are HTML elements that represent its meaning to the browser and developer about its contents. Elements like , , and
are semantic elements.
What are meta tags?
Meta tags are HTML tags that can be included in webpages that describe what the web page is about. These tags are not displayed on the page itself but are read by search engines like google.com and web crawlers.
What are two types of Web Storage in HTML5?
Session Storage stores data of the current session. Data stored in session storage is cleared automatically when the browser is closed.
Local Storage data is not deleted automatically when the current browser window is closed.
What are web workers?
A web worker is a JavaScript code that runs on a separate thread. It is used to compute long and heavy tasks as it doesn’t affect the performance of the page.
What is HTML?
HTML or HyperText Markup Language is the standard markup language for creating web pages. It is used to structure a web page and its content.
What are HTML attributes?
HTML attributes are additional information on html tags that change the way the html element behaves or is displayed. Attributes are specified directly after the opening name of the tag, inside the two angled brackets.
What are data-attributes good for?
Data attribute lets you assign custom data to an element to store more information or data when no suitable HTML5 element or attribute exists.
What is the difference between ‘id’ and the ‘class’ attribute?
ID is only used to identify one single element. Class can be used to identify more than one HTML element.
What is the purpose of the alt attribute on images?
The alt attribute provides alternative information in case the user cannot view the image. This attribute can be also used for accessibility.
What are the differences between inline and block-level elements?
Inline elements just take up the space that is absolutely necessary for the content and does not start from a new line. Block elements start on a new line and consume the full width of the page available.
How can we create a hyperlink in HTML?
An anchor tag or tag is used to create hyperlinks. This creates a path between two different HTML web pages.
Name the three list types in HTML
Ordered list displays elements in a numbered format where order of items matter
Unordered list displays elements in a bulleted format where order of items does not matter
Definition list displays elements in definition form like in a dictionary. It contains key-value pairs.
Happy coding and good luck if you are interviewing.