Q1. How can you define a
selector that only works for a screen for more than 700px?
You can use **CSS media
queries**:
css
@media screen and (min-width: 700px) {
selector {
/* styles */
}
}
This ensures styles only apply when the screen width is more than 700px. Useful
for responsive design.
Q2. What is difference between let, const and var
-In JavaScript, let, const, and var are all used to declare variables, but they differ in scope, reassignment rules, and hoisting behavior
1. var
- Scope: Function-scoped (or global if declared outside a function) — not block-scoped.
- Reassignment: Can be reassigned and redeclared.
- Hoisting: Hoisted to the top of the scope, initialized with
undefined. - Use today: Rarely used now because it can cause bugs due to lack of block scope.
function testVar() {
if (true) {
var x = 10;
}
console.log(x); // 10 ✅ (var ignores block scope)
}
2. let
- Scope: Block-scoped (
{}), meaning it’s only accessible inside the block where it’s declared. - Reassignment: Can be reassigned but not redeclared in the same scope.
- Hoisting: Hoisted but not initialized — accessing it before declaration causes a ReferenceError (Temporal Dead Zone).
- Use: For variables whose values may change.
3. const
- Scope: Block-scoped.
- Reassignment: Cannot be reassigned.
- Hoisting: Same as
let— hoisted but not initialized (Temporal Dead Zone). - Use: For variables whose values should not change (constants).
- Note: For objects/arrays, the reference can’t change, but the contents can be modified.
Q. What is hoisting?
Hoisting in JavaScript means that variable and function declarations are moved to the top of their scope (global or function) during the compilation phase, before the code is executed.
But there’s a catch — only declarations are hoisted, not initializations.
1️⃣ Hoisting with var
varis hoisted and initialized withundefined.- That’s why you can use a
varvariable before its declaration without getting an error (though it’s bad practice).
2️⃣ Hoisting with let and const
- These are hoisted but not initialized.
- They stay in the Temporal Dead Zone (TDZ) from the start of the scope until their declaration line.
- Accessing them before declaration throws a ReferenceError.
3️⃣ Hoisting with Functions
- Function declarations are fully hoisted — both their name and body.
- You can call them before their definition.
-
Function expressions (assigned to
var,let,const) behave like variables — only the variable declaration is hoisted, not the function value.
Q3. How could you add an
element to the end and beginning of the array?
- Add at end:
`arr.push(element)`
- Add at beginning: `arr.unshift(element)`
Example:
let arr = [2,3];
arr.push(4); // [2,3,4]
arr.unshift(1); // [1,2,3,4]
Q4. How to validate a type of
a variable in JS?
Use `typeof` operator:
typeof 123; // 'number'
typeof 'abc'; // 'string'
typeof true; // 'boolean'
Q5. Few examples of typeof in
TypeScript?
TypeScript enhances `typeof`
for type queries.
let msg = "Hello";
let len: typeof msg; // string
function fn(x: number) { return x; }
let y: ReturnType<typeof fn>; // number
Q6. How to define a parameter
as an Option?
In TypeScript, mark it as
optional using `?`:
function greet(name?: string) {
console.log(name ? `Hello, ${name}` : "Hello");
}
Q7. How to define the constant
inside of a class?
Use `static readonly`:
class MyClass {
static readonly PI = 3.14;
}
console.log(MyClass.PI);
Q8. Few examples of main
building blocks in Angular
- **Modules**: Organize code.
- **Components**: UI building blocks.
- **Templates**: HTML with Angular syntax.
- **Services**: Business logic.
- **Directives**: Modify DOM behavior.
- **Dependency Injection**: Provides services.
Q9. What is the difference
between @Input and @Output, and where should they be used?
- @Input: Pass data **from
parent to child**.
- @Output: Send events/data **from child to parent**.
Example:
// child.component.ts
@Input() title: string;
@Output() clicked = new EventEmitter<string>();
Q10. Promises Vs Observables
- **Promise**: Single value,
eager, no cancellation.
- **Observable**: Multiple values over time, lazy, supports cancellation.
Example: Use Promise for one-time HTTP call, Observable for streaming data
(like WebSockets).
Q11. Whats @ViewChild
Decorator to access child
components, directives, or DOM elements directly.
@ViewChild('inputRef') input: ElementRef;
ngAfterViewInit() { this.input.nativeElement.focus(); }
Q12. What is HostListener
@HostListener listens to
events on the host element.
@Directive({selector: '[hoverHighlight]'})
class HoverDirective {
@HostListener('mouseenter') onEnter() { ... }
}
Q13. Subject Vs
BehaviourSubject
- **Subject**: Emits values
only to subscribers after subscription.
- **BehaviorSubject**: Stores last value and immediately sends it to new
subscribers.
Use BehaviorSubject when you want subscribers to always have the latest state.
Q14. JS synchronous or async?
JS is **single-threaded
synchronous** but uses **event loop** for async operations.
- Synchronous: Code runs line by line.
- Asynchronous: `setTimeout`, Promises handled via event loop.
Q15. Lifecycle hooks in
Angular
- ngOnInit: Init logic.
- ngOnChanges: When @Input changes.
- ngAfterViewInit: After view init.
- ngOnDestroy: Cleanup.
Helps manage component lifecycle.
Q16. console.log(1=='1') and
console.log(1==='1')
- '==': true (because it
coerces types).
- '===`': false (strict comparison).
Q17. So (4 == '5') will be
false?
Yes, because type coercion
converts `'5'` to number, and `4 != 5`. So result is **false**.
Q18. Anonymous functions
Functions without a name.
Often used in callbacks.
setTimeout(function(){ console.log('Hi'); }, 1000);
Q19. Calling Nested function
func()()
If a function returns another
function, you can call it immediately:
function outer() {
return function inner() { console.log('Hi'); }
}
outer()(); // Hi
Q20. Engine Execution:
setTimeout and console.log
`console.log` executes first
(synchronous).
`setTimeout` goes to Web API, then callback queue, then event loop executes it
**after main stack is empty**.
Q21. Global Context in JS
The default execution context:
In browsers it's the **window object**, in Node.js it's **global**.
Q22. GET and POST Security
aspects
- **GET**: Params visible in
URL (less secure).
- **POST**: Params in body (more secure).
Never send password in GET; risk of logging, bookmarking, caching.
Q23. Real time example where
you can use ViewChilds
Example: Auto-focusing an
input field after loading a component.
@ViewChild('searchBox') search: ElementRef;
ngAfterViewInit(){ this.search.nativeElement.focus(); }
Q24. Parent/Child Component
with @Input and @Output
Parent passes data to child
via `@Input`, child emits events to parent via `@Output`.
// parent.html
<child [title]="parentTitle"
(notify)="onNotify($event)"></child>
This enables component communication.
Q26. How to expose REST web
services to frontend in Spring
🔹 1. Create a REST Controller
in Spring Boot
In Spring, you expose REST
endpoints using @RestController and @RequestMapping (or @GetMapping, @PostMapping,
etc.).
import
org.springframework.web.bind.annotation.*;
import java.util.*;
@RestController
@RequestMapping("/api/users")
public class UserController {
// Example GET API
@GetMapping
public List<String> getAllUsers() {
return Arrays.asList("Aamir",
"John", "Maria");
}
// Example POST API
@PostMapping
public String createUser(@RequestBody
String userName) {
return "User " + userName +
" created successfully!";
}
}
👉 This
exposes endpoints:
- GET http://localhost:8080/api/users
- POST http://localhost:8080/api/users
🔹 2. CORS (Cross-Origin
Resource Sharing)
Frontend (Angular/React)
usually runs on a different port (e.g., Angular: http://localhost:4200).
To allow frontend calls, enable CORS:
Option A: At Controller Level
@RestController
@RequestMapping("/api/users")
@CrossOrigin(origins =
"http://localhost:4200") //
Allow Angular app
public class UserController {
// ...
}
Option B: Global Configuration
import
org.springframework.context.annotation.Bean;
import
org.springframework.context.annotation.Configuration;
import
org.springframework.web.servlet.config.annotation.CorsRegistry;
import
org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void
addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://localhost:4200")
.allowedMethods("GET", "POST", "PUT",
"DELETE");
}
};
}
}
🔹 3. Consume API from Frontend
Angular Example (using
HttpClient)
// user.service.ts
import { Injectable } from
'@angular/core';
import { HttpClient } from
'@angular/common/http';
import { Observable } from
'rxjs';
@Injectable({
providedIn: 'root'
})
export class UserService {
private apiUrl =
'http://localhost:8080/api/users';
constructor(private http: HttpClient) {}
getUsers(): Observable<string[]> {
return
this.http.get<string[]>(this.apiUrl);
}
addUser(userName: string):
Observable<string> {
return
this.http.post<string>(this.apiUrl, userName);
}
}
🔹 4. Security Aspect
- If using Spring Security, you need to
configure allowed endpoints for frontend.
- Example (permit /api/** without auth):
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/**").permitAll()
.anyRequest().authenticated();
✅ Summary (Interview
Answer):
To expose REST web services to frontend in Spring Boot:
- Create endpoints using @RestController.
- Handle cross-origin requests with @CrossOrigin or WebMvcConfigurer.
- Frontend calls these endpoints using HTTP clients
(e.g., Angular HttpClient, React fetch).
- If Spring Security is enabled, configure access
rules for APIs.
Q27. URL Shortening using
TinyURL
You generate a unique key for
a long URL and store mapping in DB. When user hits tiny URL, backend redirects
to original.
Can use hashing + base62 encoding.
Q28. AuthGuard &
Interceptor in Angular
- **AuthGuard**: Protects
routes (checks if user logged in).
- **Interceptor**: Intercepts HTTP requests, adds JWT, handles errors.
Together they ensure security in Angular apps.
