50 JavaScript Concepts Every Developer Should Know The Perfect Guide Every JavaScript Developer Needs to Get Started (50… (Hernando Abella) (Z-Library)

📄 File Format: PDF

💾 File Size: 19.7 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

50 JavaScript Concepts Every Developer Should Knouu Hernando Abella

📄 Page 2

THANK YOU FOR TRUSTING OUR PUBLISHING HOUSE. IF YOU HAVE THE OPPORTUNITY TO EVALUATE OURWORK AND GIVE US A COMMENT ON AMAZON, WE WILL APPRECIATE IT VERY MUCH! THIS BOOK MAY NOT 8E COPIED OR PRINTED WITHOUT THE PERMISSION OF THE AUTHOR COPYRIGHT 2023 ALUNA PUBLISHING HOUSE

📄 Page 3

1. Call Stack 06 2. Primitive Types 07 3. Value Types and Reference Types 08 4. Implicit, Explicit, Nominal, Structural, and Duck Typing 10 5. == vs === vs typeof 12 6. Function Scope, Block Scope, and Lexical Scope 13 7. Expression vs Statement 15 8. IIFE, Modules, and Namespaces 17 9. Message Queue and Event Loop 19 10. setTimeout, setinterval, and requestAnimationFrame 21 11. JavaScript Engines 23 12. Bitwise Operators, Typed Arrays, and Array Buffers 25 13. DOM and Document Trees 27 14. Factories and Classes 29 15. this, call, apply, and bind 31 16. new, Constructor, instanceof, and Instances 33 17. Prototypal Inheritance and Prototype Chain 35 18. Object.create and Object.assign 37 19. map, reduce, and filter 39 20. Pure Functions, Side Effects, State 40 Mutation, and Event Propagation

📄 Page 4

21. Closures 42 22. High Order Functions 43 23. Recursion 45 24. Collections and Generators 46 25. Promises 48 26. async/await 50 27. Data Structures 52 28. Costly Operations and Big O Notation 54 29. Algorithms 56 30. Inheritance, Polymorphism, and Code Reusability 58 31. Design Patterns 61 32. Partial Application, Currying, Composition, and Pipe 64 33. Clean Code 67 34. Error Handling (try...catch) 69 35. ES6 Modules 70 36. Ternary Operator 72 37. Spread and Rest Operators 73 38. Destructuring 75 39. Template Literals 77 40. Arrow Functions 79 41. Array Methods (forEach, some, every, find, findindex, etc.)

📄 Page 5

42. String Methods (split, trim, replace, eta) 84 43. Object Methods (kegs, values, entries, etc.) 86 44. Math Methods (floor, ceil, random, etc.) 88 45. JSON and Object Serialization/Deserialization 90 46. Fetch API and AJAX 92 47. Localstorage and Sessionstorage 94 48. WebSockets and Socket.10 96 49. Canvas and WebGL 100 50. Testing with Jest or Mocha 102

📄 Page 6

This book is on essential guide for all JavaScript programmers since it has very important concepts such as: • Design Patterns • Clean Code • Fetch API and AJAX • Destructuring • Partial Application, Currying, Composition, and Pipe Learning these concepts will help you level up quickly as a JavaScript developer, they are concepts that you should know if you want to be at a higher level. 05

📄 Page 7

1. Call Stack A call stack is a data structure that stores information about the active subroutines or function calls in a computer program. It operates on a Last In, First Out (LIFO) basis, meaning that the last function called is the first one to be resolved or completed. // Function definitions function washDishO { console.log("Washing dish"); dryDishO; console.log("Finished washing dish"); } function dryDishO { console.log("Drying dish"); storeDish(); console.logC'Finished drying dish"); } function storeDishO { console.log("Storing dish"); } // Calling the main function washDishO; In this example, when washDish is called, it gets added to the call stack. Inside washDish, dryDishO's called, which, in turn, gets added to the call stack Finally, storeDishQ is called from dryDishQ, and it also gets added to the call stack 06

📄 Page 8

2. Primitive Types Primitive types refer to the fundamental data types that are not composed of other types. They are the simplest and most basic data entities directly supported by the programming language. Primitive types are usually built-in and include fundamental data categories such as integers, floating-point numbers, characters, and boolean values. Integer: let age = 25; // Integer Floating-point: let temperature = 26.5; // Float Floating-point: let grade = 'A1; // Character Floating-point: let isStudent = true; // Boolean These are examples of primitive types because they represent the most basic forms of data in the language and are not composed of other types. They serve as the building blocks for more complex data structures. 97

📄 Page 9

3. Value Types and Reference Types Values can be classified into two categories: value types and reference types. This distinction is crucial to understand how data is handled and stored in memory. Value Types (Primitives): Value types represent simple data and are stored directly in the variable. When you assign a primitive value to a variable, the actual value is copied into the variable. Example: 1. Number 2. String 3. Boolean 4. Null 5. Undefined 6.Symbol 7. Biglnt let numl = 42; // Value type (Number) let text = "Hello"; // Value type (String) let isTrue = true; // Value type (Boolean) 08

📄 Page 10

Reference Types (Objects): Reference types represent more complex objects and are stored by reference, meaning the variable contains a reference to the memory location where the object is stored. 1 .Literal Objects 2 .Arrays 3 . Functions 4 .User-Defined Objects Example: let person = { name: "Ana", age: 30 }; // Reference type (Literal Object) let colors = ["red", "green", "blue"]; 11 Reference type (Array) function greet() { console.log("Hello"); } // Reference type (Function) Key Difference: The main difference between value types and reference types Lies in how they are stored and manipulated in memory. Value types are immutable, meaning that modifying them creates a new instance in memory. In contrast, reference types are passed by reference, so modifying them also modifies the original object in memory. 09

📄 Page 11

4. Implicit, Explicit, Nominal, Structural, and Duck Typing The concepts of typing refer to how data types are managed and assigned in a language. Here is a description of the different types of typing: Implicit Typing: In Languages with implicit typing, a variable's data type is automatically determined based on the assigned value. No explicit type declaration is needed. let number = 42; // Type is inferred as Number Explicit Typing: In languages with explicit typing, the programmer must explicitly declare the data type of a variable during its creation. let name: string = "Juan"; // Type is declared as String Nominal Typing: Nominal typing relies on type names and focuses on nominal differences between types, even if their internal structure is identical. type User = { name: string }; type Employee = { name: string }; function greet(user: User) { console.log('Hello, ${user.name}'); } const employee: Employee = { name: "Ana" }; greet(employee); // Nominal typing error, even though the structure is the same ie

📄 Page 12

Structural Typing: Structuraltyping is based on the structure and shape of data types, rather than their names. Two types are considered compatible if they have the same structure. type Person = { name: string type Citizen = { name: string }; function greet(person: Person) ■{ console.log('Hello, ${person.name}'); } const citizen: Citizen = { name: "Carlos" }; greet(citizen); // No structural typing error, the structure is the same Duck Typing: Duck typing is based on whether an object behaves Like a certain type, regardless of its structure or name. interface CanSing { sing(): void; function entertain(concert: CanSing) { concert.sing(); const canary = ■{ sing: () => console.log("Tweet tweet") }; entertain(canary); // Type doesn't matter, as long as it has the 'sing' method

📄 Page 13

5. == vs === vs typeof =- ==- and typeof are operators used to compare values and retrieve information about data types. Here's an explanation of each: == (Weak Equality): The == operator compares two values for equality but performs type conversion if the values are of different types. This is called "weak equality" or "type coercion." 5 == "5"; // true, type conversion is performed === (Strict Equality): The === operator compares two values for equality without performing type conversion. This is known as "strict equality" and is recommended for precise comparisons. 5 === "5"; // false, no type conversion is performed typeof (typeof Operator): The typeof operator is used to obtain the data type of an expression. It returns a string representing the data type. typeof 42; // "number" typeof "Hello"; // "string" typeof true; // "boolean" • == compares values allowing type conversion. • === compares values without allowing type conversion (strict equality). • ypeof returns the data type of an expression as a string. It is important to understand the difference between == and === to avoid unexpected comparison issues due to automatic type conversion. The use of === is generally safer and recommended as it provides more accurate comparisons and avoids surprises in your program's behavior. ii n

📄 Page 14

xc 6. Function Scope, Block Scope, and Lexical Scope The concepts of function scope, block scope, and Lexical scope refer to how variables are accessed and managed in different contexts within the code. Function Scope: In JavaScript, variables declared within a function are visible and accessible only within that function and any nested functions within it This is called function scope. Variables declared with var have function scope. function myFunctionO { var functionvariable = 42; console.log(functionVariable); // Accessible within the function } console.log(functionvariable); // Not accessible outside the function Block Scope: With the introduction of Let and const in ES6, block scope was introduced. Variables declared with let and const have a scope Limited to the block in which they are declared, such as within an if, a for, a while, etc. if (true) { let blockvariable = "Hello"; const anotherBlockVariable = "World"; console.log(blockvariable); // Error, outside block scope console.log(anotherBlockVariable); // Error, outside block scope

📄 Page 15

16 Lexical Scope: Lexical scope refers to how nested functions can access variables from their parent functions, regardless of where they are called. This is because functions in JavaScript maintain a reference to the scope in which they were created. function outer() { let outervariable = "Outer"; function inner() { console.log(outerVariable); // Access to the variable from the parent function } return inner; } const nestedFunction = outerO; nestedFunctionO; // Prints "Outer" Function scope, block scope, and lexical scope are essential concepts to understand how variables behave in different contexts. These concepts play a key role in understanding JavaScript execution and preventing errors related to variable scope.

📄 Page 16

14 7. Expression vs Statement Expressions and statements are fundamental concepts used to construct programs. Expression: An expression is a combination of values, operators, and function calls that evaluates to a single value. It can be as simple as a literal value or as complex as a mathematical operation or a function call. 5 + 3 "Hello, " + "World" myFunctionO 42 // Mathematical operation // String concatenation // Function call // Literal value Statement: A statement is a unit of code that performs an action or a series of actions. It represents a complete instruction in a program and can be a control flow statement, an assignment, a function declaration, etc. if (condition) { // If statement } let x = 10; // Assignment function greet() { // Function statement } for (let i = 0; i < 5; i++) { // For loop statement }

📄 Page 17

15 • Expression: It is a combination of values, operators, and/or function calls that evaluates to a single value. • Statement: It is a unit of code that performs an action or a series of actions in a program. An important distinction is that expressions have a resulting value, while statements can change the program's execution flow or perform operations without necessarily returning a value. Both concepts are essential for writing coherent and effective code in any programming language.

📄 Page 18

16 8. IIFE, Modules, and Namespaces Immediately Invoked Function Expressions (IIFE), modules, and namespaces are techniques used to modularize and organize code. Each addresses scope management and code organization in different ways. IIFE (Immediately Invoked Function Expression): An IIFE is a function that is defined and executed immediately after its creation. It is useful for creating a private function scope and avoiding pollution of the global scope. (functionO { // Code inside the IIFE BO; Modules: Modules are a more modern and structured way of organizing code, f hey allow breaking the code into separate and reusable parts while maintaining the local scope of variables. In ES6, the import and export keywords were introduced to work with modules. // module.js export function greet() { console.log("Hello from the module!"); } // main.js import { greet F from "./module.js"; greet();

📄 Page 19

17 Namespaces: Namespaces are an older approach to code organization. They allow grouping related objects and functions under a common name to avoid naming collisions. This is done using global objects. // MyNamespace.js var MyNamespace = { variable: 42, func: functionO { console.logC'Function in MyNamespace"); MyNamespace.funcO; Each approach has its own advantages and disadvantages. IIFE is useful for creating private scopes but can become complex in large projects. Modules are the modern way to modularize code and are more efficient for maintenance and scalability. Namespaces are an older technique but can still be useful in certain situations where full modularity is not necessary. In modern projects, it is recommended to use modules to effectively organize code and maintain cleaner control over scope and code reuse.

📄 Page 20

18 9. Message Queue and Event Loop The message queue and event Loop are crucial concepts to understand how event handling and asynchronous operations work in JavaScript Message Queue: The message queue is a structure where events and pending callback functions are stored to be executed. These events can include user interactions, timers, network requests, and more. Event Loop: The event Loop is a continuous cycle running in the background of the JavaScript program. Its function is to constantly check if there are tasks in the message queue to be processed. If there are tasks pending in the queue, the event Loop takes them one by one and executes them in order. The interaction between the message queue and the event loop is fundamental to understanding how JavaScript handles asynchronous and non-blocking tasks. When an event occurs or an asynchronous task is completed (such as an AJAX request or a timer), a callback function is added to the message queue. The event Loop takes these functions one by one and executes them. Example of Message Queue and Event Loop: console.log("Start of the program"); setTimeout(function() { console.log("Asynchronous task completed"); }, 1000); console.log("End of the program");