Common Frontend Interview Questions I've Been Asked

The source of dread we all endure while interviewing is the unpredictable nature of the hiring process. With so many companies and even more technical questions, it feels useless trying to study every single concept and definition. Being new to the field compounds with the existing feelings of anxiety when finding the right opportunity.

Having graduated from bootcamp late 2021, I've applied for over 300 positions and acquired a decent amount of interviews. During that time, I compiled some of the most common questions I've been asked as a software engineer looking for front end leaning positions.

1.What is Semantic HTML?

The use of HTML elements that define their purpose to the browser and developer.
Examples are: <form></form>, <table></table>, <footer></footer> --these elements are defined by their name where as elements like

Semantic HTML defines sections in a document. So why is this important, you may ask?

This is extremely important for developers to understand when working off of existing code as it is for accessibility. For engineers, semantic HTML allows data to be shared and reused across applications. This promotes structure and assists in helping search engines understand the document and rate it by relevance for search queries.

From the user's perspective, semantic HTML assists in readability because it is sectioned by semantic HTML elements. Ordering a document's layout is crucial, especially for user's with disabilities. Having a uniform and universal set of elements to define the contents of a document supports an optimum level of user accessibility.

2.What are closures in JavaScript?

Closures in JavaScript give you access to an outer functions scope from an inner function. Closures are created whenever a function is created/initialized.

Seems like a simple question, so why is it asked so often?

Personally, I think interviewers want to establish a baseline knowledge in the language of specialization. Even though you may intuitively know that scope exists for every function, interviewers want to if you can talk about the concept in question. You may have worked with functions on an every day basis, but can you explain how/why they exist? It's important to build the skill of always questioning as an engineer. They want to see that you're always learning, and not blindly accepting things as they are.

3.What is the alt tag used for in HTML? What is their purpose?

It is the text description for media like images and videos on a web page. They are displayed when a video or image cannot be loaded onto the web page. They are accessed by screen readers to provide users with the text equivalent of images and videos.

4.What does important mean in CSS styling?

When an element is styled with the important property, it overrides all other styling. This is a great tip to know when specifying styling elements without repeating code or writing bloated code. Knowing tips like these will ensure to your interviewers that you know how to implement clean and reusable code.

5.What is the difference between const, var, and let?

These three keywords are used to define variables. But there are huge differences in their usages pertaining their scope and data.

Const is a great way to remember "constant", the keyword cannot be reassigned. When a variable is defined using const, it remains constant with it's original definition. This means it is not accessible before it appears within the code. It is also block scoped.

Var is a keyword that can be reassigned and can only be available inside the function that it is created in, therefore it is function scoped.

Let is a keyword that can be reassigned but it is similar to the scope of const, being block scoped. If variables are not created inside a function or block, then they're globally scoped.

6.Explain the DOM:

The DOM stands for Document Object Model, it's a method of translating HTML elements into a form that JavaScript can understand and interact with. JavaScript needs to understand the web page so it can manipulate, style, behave, and work as a dynamic web page.

6a. What are various ways to get elements from the DOM?

• getElementsById

• getElementsByClassName

• getElementsByTagName

• querySelector

• querySelectorAll

7.What is the difference between forEach and map?

forEach Method:
-executes a function by iterating through each element of an array
-does NOT return anything, returns undefined
-allows you to modify the values of an existing array by applying the callback function on each element of an array (it mutates the original array)

map Method:
-creates a new array using the return values of this function
-creates a new array by applying the callback function on each element of the source array (does not mutate the original array)
-returns the new array

Both: execute a function for each element of an array

Takeaway Tips:

-Understand fundamental knowledge of your language, try not to let laziness hinder from asking questions about even the most basic concepts, herein lies the importance of a strong foundation

-get comfortable talking about concepts and definitions with another person (this will help you organize your thoughts, and come off clear and concise)

-in conjunction with the last tip, talk through your code with a friend, this is a great exercise in understanding your own code flow and communicating the nitty gritty details

-don't be afraid to look up studying materials and create your own study methods ie codepen, freecodecamp, udemy, github, articles, flashcards, note taking, etc

-have patience, what I know now couldn't have been learned without experience of interviewing

Saying you don't know to a question is not the end of the world.

It is not definitive of your knowledge. It is not a determination of the outcome of your interview. Admitting you don't know an answer proves that it's impossible to know everything. But more importantly, it displays your vulnerability and openness to learn.

I've had millions of moments in interviews blanking, stuttering, and tripping over my words. But when I accept the experience, and acknowledge my nervousness, I can focus on the feedback I receive from my interviewer. It let me take note of what I understood and what I didn't from the technical questions.

I wish that this was reminded more when I was entering my job hunting process. You are not going to know what they will ask you, and it's impossible to prepare for every situation. So no matter the outcome of an interview, what you gain from interviewing is how to let go.

Learning to let go allows you to let go of expectations or anxiety in the interview. It forces you to focus on yourself in a different light in understanding yourself, the knowledge you've acquired, and the insight you will gain from the interview experience.