JavaScript Revelations: Journeying Through Frontend Interview Preparation (live-stream note)

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

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

Comments

[Joe]

You can stop if you throw sg in the callback. Like:

[1, 2, 3, 4, 5, 6].forEach((e) => {
  console.log(e);
  if (e > 2) throw 'foreach stopped':
});

Console output be like:

> 1
> 2
> 3
> Uncaught foreach stopped

Of course you can prepare for this case by wrapping it into a try-catch.

[Tymur Minhaziiev]

so, how to stop the loop?

[Nastassia Danilava]

@tymur_minhaziiev you can use break inside the for. there is no way for forEach or map