Answers to questions about hard skills
(not finished)

1. What is the difference between null and undefined?

JS have a 7 primitive types: string, bigint, null, undefined, number, boolean, symbol

undefined means a variable has been declared but has not yet been assigned a value.

null is an assignment value. It can be assigned to a variable as a representation of no value.

From the preceding examples, it is clear that undefined and null are two distinct types:
undefined is a type itself (undefined) while null is an object.

2. Can you name two programming paradigms important for JavaScript app developers?

functional programming and object-oriented programming

3. Which values in JS are false?

'', 0, null, undefined, NaN, false

4. How do I check if the value is false?

use the Boolean function or the "!!" operator (double negation).

5. What is IIFE?

An immediately-invoked function expression (IIFE) immediately calls a function. This simply means that the function is executed immediately after the completion of the definition.
 
Example ;(function(){})()

6. What's the difference between 'call/apply' and 'bind'?

Bind returns a new function whose this value is the object specified as the first parameter. Unlike bind, call and apply immediately call the function. In apply, arguments are passed as an array, in call — separated by commas.

const newfunc=func.bind(obj1);newfunc();
func.apply(obj1, [1, 2, 3, 4, 5])
func.call(obj2, 1, 2, 3, 4, 5)

7. What are Higher Order Functions?

A higher—order function is a function that returns another function or takes another function as an argument.

function HOC(param, callback) { return callback(param) }

8. What is ECMAScript?

ECMAScript is a specification, a standard for scripting programming languages, it is the basis of JS, so any ECMAScript changes are reflected in JS.

9. What are Modules?

Modules allow us to combine (use) code from different files and save us from having to keep all the code in one large file. Before the introduction of modules in JS , there were two popular module systems for code support:

• CommonJS — Nodejs
• AMD (AsyncronousModuleDefinition) — Browsers

Today we can use import to import functionality or values from another file or files and export to export.

10. What is the keyword "new" used for?

The keyword "new" is used in constructor functions to create a new object (a new instance of the class).

11. What is the memoization?

Memoization is a term describing an optimization technique where you cache previously computed results, and return the cached result when the same computation is needed again.

12. What programming languages are you familiar with?

It's JavaScript because it could use for fronted, backed and file system side. Also, I think that JS will not become obsolete, because all browsers use it for work processes.

13. What is “Agile” software development and what are your thoughts on it?

Agile it is methodology those includes six steps of work processes: requirements, design, development, testing, deployment, review.

14. What's the meaning of the closures in javascript?

A closure is the combination of a function and the lexical environment (scope) within which that function was declared. 
const closer(propName) = (a, b) => a[propName] - b[propName];

15. What is the Scope?

Scope is the area within which the variable is active. Like a function or a page.
global_var and f are global to the page because they are outside of all functions, so they are available to all functions.
local_var is local to function f(), so it is not available outside of function f().
Scope is divided into GLOBAL, OUTER and INNER.

Also need to know that JavaScript resolves identifiers within a particular context by traversing up the scope chain, moving from locally to globally.

16. What is the hoisting?

Hoisting — this is a term describing the lifting of a variable or function into a global or functional scope.
 

console.log(y) // undefined
y = 1
console.log(y) // 1
console.log(greet('Mark'))
function greet(name) { return 'Hello ' + name + '!' }
var y // Hello Mark!

17. What is the pure function?

A function is called pure function if it always returns the same result for same argument values and it has no side effects like modifying an argument (or global variable) or outputting something.

18. What is the Referential transparency?

Referential transparency, a term commonly used in functional programming, means that given a function and an input value, you will always receive the same output. That is to say there is no external state used in the function.

Here is an example of a referential transparent function:

function plusOne(x) { return x+1; }

Also need to know that pure function have a full referential transparency.

19. What is the DOM?

DOM or Document Object Model (document Object model) is an application programming interface (API) for working with HTML and XML documents. When the browser reads ("parses") an HTML document for the first time, it forms a large object, a really large object based on the document — DOM. DOM is a tree structure (document tree). DOM is used to interact and change the structure of the DOM itself or its individual elements and nodes.

20. What is CRP?

The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance. The critical rendering path includes:

1. Document Object Model
2. CSS Object Model
3. JavaScript
4. Accessibility Tree
5. Render Tree
6. Layout/Reflow
7. Paint/Repair
8. Compositing

21. Why need to use the Semantic Tag in Html5?

The core characteristic of a semantic element is that it clearly communicated its meaning to both the developer and the browser. These elements clearly define its content. 

• The semantic HTML tags help the search engines and other user devices to determine the importance and context of web pages.
• The pages made with semantic elements are much easier to read.
• It has greater accessibility. It offers a better user experience.

22. What is an object prototype?

The prototype is a plan (scheme or project) of an object. It is used as a fallback for properties and methods that exist in this object. It is also one of the ways to exchange properties and functionality between objects.

const o = {}
console.log(o.toString()) // [object Object]
console.log(o.toString === Object.prototype.toString) // true

23. How do I create an object that does not have a prototype?

If use Object.create()

24. What is the GOF patterns?

Gangs of Four Design Patterns is the collection of 23 design patterns from the book “Design Patterns: Elements of Reusable Object-Oriented Software”.

Creational	Structural	Behavioral
Singleton	Adapter	Template Method
Factory	Composite	Mediator
Abstract Factory	Proxy	Chain of Responsibility
Builder	Flyweight	Observer
Prototype	Facade	Strategy
	Bridge	Command
	Decorator	State
		Visitor
		Interpreter
		Iterator
		Memento

25. What is the GRASP patterns?

General Responsibility Assignment Software Patterns (or Principles), abbreviated GRASP, is a set of "Nine fundamental principles in object design and responsibility assignment" first published by Craig Larman in his 1997 book Applying UML and Patterns.

1. Information expert
2. Creator
3. Controller
4. Indirection
5. Low coupling
6. High cohesion
7. Polymorphism
8. Protected variations
9. Pure fabrication

26. What is meaning the phrase "Favor object composition over class inheritance."?

Composition instead of inheritance is the principle that classes should achieve polymorphic behavior and code reuse by composing them, rather than inheriting from the base.

27. What are the SOLID principles?

SOLID is an acronym for the first five object-oriented design (OOD) principles by Robert C. Martin

S — Single-responsiblity Principle
A class should have one and only one reason to change, meaning that a class should have only one job.

O — Open-closed Principle
Objects or entities should be open for extension but closed for modification.

L — Liskov Substitution Principle
Let q(x) be a property provable about objects of x of type T. Then q(y) should be provable for objects y of type S where S is a subtype of T.
This means that every subclass or derived class should be substitutable for their base or parent class.

I — Interface Segregation Principle
A client should never be forced to implement an interface that it doesn’t use, or clients shouldn’t be forced to depend on methods they do not use.

D — Dependency Inversion Principle
Entities must depend on abstractions, not on concretions. It states that the high-level module must not depend on the low-level module, but they should depend on abstractions.

28. What is meaning KISS, YANGI and DRY?

KISS — KEEP IT SIMPLE STUPID

YAGNI — You aren't gonna need it

DRY — DON’T REPEAT YOURSELF

Also should know about APO(Avoid Premature Optimization).

29. What data structures do you know?

Stack, Queue, Linked List, Set, Hash Table, Tree, Trie, Graph

30. What is an arguments object?

Arguments is a collection of arguments passed to a function. This is an array-like object, it has a length property, we can access a certain value using arguments[i], but it lacks the forEach, reduce, filter and map methods. It allows you to find out the number of parameters of the function.

31. What are the different types of errors in JavaScript?

Load time errors, occurring during the loading of a web page, are associated with issues like improper syntax errors and are generated dynamically.
Runtime errors arise from the incorrect use of commands within the HTML language.
Logical errors are caused by flawed logic applied to a function, leading to unexpected outcomes with different operations.

Also we should know about EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError.

32. When to Use Internal and External JavaScript Code?

Use internal JavaScript for small, page-specific scripts. Choose external JavaScript for reusable code across multiple pages, promoting code organization, caching, and collaboration.

33. What is event bubbling and capturing?

JavaScript allows DOM elements to be nested inside each other. In such a case, if the handler of the child is clicked, the handler of the parent will also work as if it were clicked too. 

In this example button will not working beacouse we used stop propagation:
<body onclick="alert(`the bubbling doesn't reach here`)">
   <button onclick="event.stopPropagation()">Click me</button>
</body>

Сapturing is the opposite process to bubbling.
elem.addEventListener(..., {capture: true})

34. What is JavaScript Unit Testing, and what are the challenges in JavaScript Unit Testing?

JavaScript Unit Testing: JavaScript Unit Testing involves testing individual units or components of JavaScript code in isolation to ensure they function correctly and produce the expected output. It focuses on validating the smallest testable parts of the code, such as functions and methods.

Challenges in JavaScript Unit Testing:

1. Asynchronous Code: JavaScript often involves asynchronous operations like AJAX requests and timers, making it challenging to write tests that handle such scenarios effectively.
2. DOM Interaction: Testing code that manipulates the DOM can be difficult, as unit tests typically run in a non-browser environment where the DOM is not accessible.
3. Dependency Management: Managing dependencies, especially external libraries or modules, during testing can be complex and may require the use of mocking or stubbing techniques.
4. Browser Compatibility: Ensuring that unit tests run consistently across different browsers can be problematic due to browser-specific variations.
5. Code Coupling: Tight coupling between different components can make it harder to isolate and test units independently.
6. Test Maintenance: As the codebase evolves, unit tests may need frequent updates to reflect the changes, which can be time-consuming.
7. Test Coverage: Achieving comprehensive test coverage can be challenging, ensuring that all possible scenarios and edge cases are covered.
8. Performance: Writing efficient tests that execute quickly is crucial to avoid slowing down the development process.

Overcoming these challenges requires using appropriate testing frameworks, tools, and methodologies like mocking libraries, testing utilities, and following best practices in unit testing JavaScript code.

35. What is TDD, BDD and ATDD ?

Test-Driven Development (TDD) is a software development approach where developers write tests before implementing the code, ensuring better code quality and reliability.

Behavior-Driven Development (BDD) is a software development methodology that focuses on collaboration between developers, testers, and business stakeholders to define and verify the behavior of a system through easily understandable scenarios written in natural language. BDD aims to improve communication and ensure that the software meets the desired functional requirements.

Acceptance Test-Driven Development (ATDD) is a software development approach where developers, testers, and business stakeholders collaborate to define specific and concrete acceptance criteria in the form of automated tests before implementing new features. These acceptance tests ensure that the software meets the desired requirements and functions as expected from the user's perspective.

36. What is OWASP ?

OWASP is the acronym for the "Open Web Application Security Project," a nonprofit organization committed to enhancing the security of software and web applications. This organization offers developers and security professionals a wealth of valuable resources, tools, and best practices, aiding them in the identification and mitigation of security vulnerabilities in their applications.

OWASP top 10 the list typically includes security risks such as:

1. Injection: Attacks that exploit vulnerabilities in input handling to execute malicious code.
2. Broken Authentication: Weaknesses in authentication and session management.
3. Sensitive Data Exposure: Inadequate protection of sensitive data like passwords or financial information.
4. XML External Entities (XXE): Exploitation of insecure XML processing, leading to unauthorized access and disclosure of data.
5. Broken Access Control: Failure to restrict users' access to authorized resources and actions.
6. Security Misconfiguration: Errors in security settings, leading to potential vulnerabilities.
7. Cross-Site Scripting (XSS): Injection of malicious scripts into web pages viewed by other users.
8. Insecure Deserialization: Issues arising from the mishandling of serialized data, leading to remote code execution.
9. Using Components with Known Vulnerabilities: Use of outdated or vulnerable third-party components.
10. Insufficient Logging and Monitoring: Lack of proper monitoring and logging, hindering the detection of security breaches.

37. Which method is used to retrieve a character from a certain index?

The JavaScript string's charAt() function locates a character at a given index, starting from 0 up to n-1, where n is the string's length. The index must be non-negative and within the string's length.

38. What is the temporal dead zone?

The Temporal Dead Zone (TDZ) in JavaScript is the period between entering a scope and the actual declaration of a variable using let or const. During this time, accessing the variable results in a ReferenceError. It highlights the phase where the variable exists in the scope but hasn't been assigned a value yet.

console.log(x); // ReferenceError: x is not defined

let x = 10;

39. What is a lexical environment?

A lexical environment is a connection between variables and their values within a specific scope of code. It defines where variables are accessible and how they can be used during program execution.

40. Encapsulation, Inheritance, Polymorphism, Abstraction in OOPs

1. Encapsulation: Bundling data and methods into a single unit and restricting access.
2. Inheritance: Mechanism for creating new classes based on existing ones, promoting code reuse.
3. Polymorphism: Ability of objects to take on different forms and respond to the same message differently.
4. Abstraction: Simplifying complex systems by focusing on essential aspects and hiding unnecessary details.

41. What’s the difference between normalization and denormalization?

42. When to use canary vs. blue/green vs. rolling deployment?

Each of these deployment methods represents a strategy for updating software in a production environment. Here's a brief overview of their characteristics and when to use them:

Canary Deployment:

• What it is: In canary deployment, a new version of the application is deployed to a small, limited subset or portion of servers, allowing its performance and stability to be evaluated before full deployment.

• When to use: When it's important to minimize the risk associated with a new version of the application, and when feedback from a small group of users or servers is needed.

Blue/Green Deployment:

• What it is: In blue/green deployment, two complete copies of the infrastructure (blue and green) are maintained simultaneously, but only one is active at any given time. The new version of the application is deployed and tested in the inactive environment, then traffic is switched to the new version.

• When to use: When continuous operation of the application without downtime is required, and when there is the capability to maintain two identical environments.

Rolling Deployment:

• What it is: In rolling deployment, the new version of the application is gradually rolled out to servers one by one without stopping the application. This typically involves disabling a portion of servers, deploying the new version to them, verifying their functionality, and then moving on to the next servers.

• When to use: When it's important to minimize impact on the application and ensure continuous operation. This method is well-suited for high-availability applications.

The choice of a specific deployment method depends on the requirements of the application, the readiness of the infrastructure, and the risk of changes.

43. What does ACID mean in Database systems?

44. Which methods life cycle VUE do you know?

beforeCreate: Called before the instance is initialized, useful for setting up initial data.

created: Called after the instance is created, allowing you to perform actions like data fetching.

beforeMount: Called before the mounting begins, right before rendering the template.

mounted: Called after the component is mounted to the DOM, suitable for interacting with the mounted component.

beforeUpdate: Called before a component is updated, but not immediately before re-rendering.

updated: Called after a component has been updated, allowing you to perform additional actions on the updated state.

beforeDestroy: Called before a component is destroyed, useful for cleaning up tasks or event listeners.

destroyed: Called after a component is destroyed, providing an opportunity to perform cleanup.

45. What's the difference between reflow and repaint?

Reflow (Re-layout):

• Reflow (also known as re-layout or reflowing) is the process of recalculating the layout of elements on a web page. It occurs when changes are made to the structure or style of the DOM (Document Object Model) that affect the positioning or size of elements.
• Examples of changes that trigger reflows include adding or removing elements, changing CSS properties (such as width, height, padding, margin, or font size), or modifying the content of elements.
• Reflow is a computationally expensive operation because the browser needs to recalculate the geometry of all affected elements and their relationships with each other. It can cause performance issues, especially on complex web pages or when changes are made frequently.

Repaint:

• Repaint is the process of updating the visual appearance of elements on a web page without changing their layout. It occurs when changes are made to the style of elements that affect their appearance but not their position or size.
• Examples of changes that trigger repaints include modifying CSS properties such as color, background color, or visibility, or adding or removing CSS classes.
• Unlike reflow, repaint is generally less computationally intensive because it only involves updating the pixels on the screen without recalculating the layout of elements.
• Repaints are typically faster than reflows, but they can still impact performance, especially if there are many elements that need to be repainted or if the changes are made frequently.

In summary, reflow involves recalculating the layout of elements on a web page, while repaint involves updating the visual appearance of elements without changing their layout