Frontend Bootcamp Session 2 slides 1. Closure 2. The Module Pattern and ES6 Modules 3. Asynchronous Code 4. Working with APIs 5. Async and Await

1. FRONTEND BOOTCAMP
Session #2

2. JavaScript
• JavaScript Code Execution
• Temporal Dead Zone
• Asynchronous Code
• Closures
• Common Errors
• Modules and Bundlers

3. Javascript Code Execution
How the browser will run your code

4. JavaScript Code Execution
-Dynamically Typed Interpreted Language
-Uses V8 Engine that follows a JIT(Just In Time) compilation methodology
-Single Threaded Architecure, this thread is commonly known as main thread or main
execution thread.

5. Javascript Code Execution

6. Temporal Dead Zone
What even is temporal dead zone and why should I know?

7. Temporal Dead Zone
-There are three ways to declare a variable in JS var, let, const
-Three associated concepts: scoping, hoisting, reassignment
• Scoping: var is function scoped while let and const are block scoped
• Hoisting: var is hoisted, while let and const need to be called after
execution
• Reassignment: const cant be reassigned while let and var can
-Takeaway: use let and const in code and avoid var

8. Asynchronous Code
Callbacks, promises ad async await

9. Callbacks
Callbacks are functions that are passed as arguments to other functions
and executed when an asynchronous operation completes. They are
used to ensure that code is executed in the correct order, even when
the execution of some operations takes longer than others. Callbacks
can be error-prone, however, due to the potential for callback hell (i.e.
deeply nested callbacks that are difficult to read and maintain).

10. Promises
Promises are objects that represent the eventual completion (or
failure) of an asynchronous operation and allow for more
structured and readable code than callbacks. Promises can be
chained together using .then() and .catch() methods to handle
successful and failed outcomes, respectively.

11. async await
Async/await is a newer syntax for working with promises that
makes asynchronous code look more like synchronous code,
and therefore easier to read and write. The async keyword is
used to define a function that returns a promise, and the await
keyword is used to pause the execution of the function until the
promise is resolved or rejected.

12. Closures
A way to implement encapsulation!

13. Closures
In JavaScript, a closure is created when a function is defined inside
another function and has access to variables in its outer (enclosing)
function's scope chain, even after the outer function has returned. The
inner function has access to the outer function's variables, parameters,
and any other variables that were declared in the outer function's
scope at the time of the closure's creation.
Importantly, inner function can access outer function’s variables, while
outer can’t access inner’s.

14. Common Errors
And how to handle them???

15. Common Errors
• Syntax errors: These are errors that occur when the syntax of the code is incorrect
• Reference errors: These are errors that occur when you try to use a variable or
function that has not been declared or is out of scope.
• Asynchronous errors: These are errors that occur when working with asynchronous
code, such as Promises or callbacks, and can result in unexpected behavior or
unhandled exceptions.
• Type errors: These are errors that occur when you try to use a variable or function in a
way that is not allowed by its type. For example, trying to call a method on an
undefined variable or passing a string to a function that expects a number.

16. Modules and Bundlers
A way to organize code!

17. Modules
ES6 modules are a feature of JavaScript that allows developers to
organize and share code across multiple files and projects. They provide
a way to export functions, classes, variables, and other code from one
module and import them into another module. ES6 modules are
supported in modern web browsers, Node.js, and many other JavaScript
environments.
Two types of exports/imports:
-Named exports/imports (require { } when importing/exporting)
-Default exports/imports (require export default , import direct by
name)

18. Bundlers
Module bundlers are tools that are used to combine multiple JavaScript
modules into a single file for use in a web application. They are useful
for reducing the number of network requests required to load a web
page, and for optimizing the size and performance of JavaScript code.
Some popular module bundlers in the JavaScript ecosystem include:
- Webpack (most commonly used)
- Rollup
- Parcel

19. SOLID principles
A way to organize the size and organization of modules to make code
readable, maintainable
• Single Responsibility Principle (SRP): A class should have only one reason to
change. This principle ensures that each class has a clear and specific
purpose, making it easier to maintain and modify.
• Open-Closed Principle (OCP): A class should be open for extension but
closed for modification.This principle promotes the use of abstraction and
inheritance to create new functionality, rather than changing existing code.
• Liskov Substitution Principle (LSP): Subtypes must be substitutable for their
base types. In other words, any function or method that accepts an instance
of a base class should also accept instances of its derived classes.

20. SOLID principles
• Interface Segregation Principle (ISP): Clients should not be forced to depend on
interfaces they do not use. In other words, a class should only expose the
methods that are relevant to its clients. This principle ensures that classes have
small and focused interfaces, making them easier to understand and use.
• Dependency Inversion Principle (DIP): High-level modules should not depend
on low-level modules. Both should depend on abstractions. Abstractions
should not depend on details. Details should depend on abstractions. This
principle encourages the use of interfaces and dependency injection to
decouple high-level modules from low-level modules, making the code more
flexible and easier to test.

21. Make sure to join us in the next session!!
Thank You!