JavaScript Revelations: Journeying Through Frontend Interview Preparation (live-stream note)
Tags: javascript, interview, frontend, datastructures
Published: 2023-09-13 14:42:15

It's not my first job as a frontend developer, but I prepare for EVERY interview because some things have changed, some I need to revise, and some I have never known before.

I'm going to write a list of small JavaScript notes that I learned (or found interesting) during the preparation this time. This is a live-stream note, so bookmark this! 😏

## Javascript

**1. ForEach loop cant be stopped by `return` or `break`**
Consider the following code snippet. Would you expect it to print '1', '2', and then halt?


```
array = ['a', 'b', 'c'];
array.forEach(function (element) {
  console.log(element);
  
  if (element === 'b') 
    return;
  
});
// Output: 1 2 3 4
```
Surprisingly, it doesn't. And the same with `break`
_If there is a case when you definately need to stop it use `for` instead of `forEach` and `break` inside it_

or with throwing the exception and wrapping the loop with `try-catch` - thanks @szalonna 

**2. The `__proto__` references can’t go in circles.**

Thanks god JavaScript will throw an error if we try to assign and there is no need to care with any try-catch 🙃

`M715:1 Uncaught TypeError: Cyclic __proto__ value
    at set __proto__ [as __proto__] (<anonymous>)
    at <anonymous>:1:13`

The most clear Prototyping inheritance [description](https://javascript.info/prototype-inheritance)

**3. logical assignment was added in ES2021**

`a &&= b` // equivalent to a && (a = b). will assign if a is `false`
`a ||=b` // equvalent to a || (a = b). will assign if a is `false`


## Web
1. Web security issues (XSS, XSRF). This _could be_ included to the interview, but most you need to know as a FE dev is

**XSS** - when an application includes untrusted data in a web page sent to the browser without proper validation or escaping. Attackers can inject malicious scripts into web pages.
how to prevent
- Input Validation and Sanitization: Ensure that user input is validated before rendering it on the web page. Use security libraries or frameworks that offer built-in protection against XSS.
- Content Security Policy (CSP): Implement a CSP that restricts the sources from which scripts can be loaded, preventing unauthorized scripts from executing.
- Escape User-Generated Content: Escape any user-generated content when rendering it on the page. This involves converting special characters to their HTML entity equivalents.
- Use HTTP-Only Cookies: Store session cookies with the HttpOnly attribute, which prevents JavaScript from accessing them. This helps protect against cookie theft via XSS.

**CSRF** - attacker tricks a user into performing actions on a website without the user's knowledge or consent. The attacker crafts malicious requests that are executed using the user's authenticated session.
how to prevent:
-  Anti-CSRF Tokens: Generate unique tokens for each user session and include them in forms or AJAX requests. Verify these tokens on the server side to ensure that requests are legitimate.
- Same-Site Cookies: Set the SameSite attribute on cookies to restrict when cookies are sent in cross-origin requests, reducing the risk of CSRF attacks.
- Check Referer Header: Verify the Referer or Origin headers on incoming requests to ensure that they match the expected source of the request.
- Implement Safe HTTP Methods like GET for actions that should not modify data. Reserve POST, PUT, DELETE, etc., for actions that make changes.


..to be continued