SlideShare a Scribd company logo
1 of 21
FRONTEND BOOTCAMP
Session #2
JavaScript
• JavaScript Code Execution
• Temporal Dead Zone
• Asynchronous Code
• Closures
• Common Errors
• Modules and Bundlers
Javascript Code Execution
How the browser will run your code
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.
Javascript Code Execution
Temporal Dead Zone
What even is temporal dead zone and why should I know?
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
Asynchronous Code
Callbacks, promises ad async await
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).
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.
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.
Closures
A way to implement encapsulation!
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.
Common Errors
And how to handle them???
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.
Modules and Bundlers
A way to organize code!
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)
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
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.
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.
Make sure to join us in the next session!!
Thank You!

More Related Content

Similar to FRONTEND BOOTCAMP Session 2.pptx

Introduction to Spring
Introduction to SpringIntroduction to Spring
Introduction to Spring
Sujit Kumar
 
Concurrency Learning From Jdk Source
Concurrency Learning From Jdk SourceConcurrency Learning From Jdk Source
Concurrency Learning From Jdk Source
Kaniska Mandal
 
Struts 2-overview2
Struts 2-overview2Struts 2-overview2
Struts 2-overview2
divzi1913
 
Angularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetupAngularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetup
Goutam Dey
 
Unit 1 Core Java for Compter Science 3rd
Unit 1 Core Java for Compter Science 3rdUnit 1 Core Java for Compter Science 3rd
Unit 1 Core Java for Compter Science 3rd
prat0ham
 

Similar to FRONTEND BOOTCAMP Session 2.pptx (20)

Refactoring_Rosenheim_2008_Workshop
Refactoring_Rosenheim_2008_WorkshopRefactoring_Rosenheim_2008_Workshop
Refactoring_Rosenheim_2008_Workshop
 
.net Based Component Technologies
.net Based Component Technologies.net Based Component Technologies
.net Based Component Technologies
 
JavaFX in Action Part I
JavaFX in Action Part IJavaFX in Action Part I
JavaFX in Action Part I
 
ASP.NET MVC Best Practices malisa ncube
ASP.NET MVC Best Practices   malisa ncubeASP.NET MVC Best Practices   malisa ncube
ASP.NET MVC Best Practices malisa ncube
 
WEB MODULE 3.pdf
WEB MODULE 3.pdfWEB MODULE 3.pdf
WEB MODULE 3.pdf
 
Introduction to Spring
Introduction to SpringIntroduction to Spring
Introduction to Spring
 
android principle.pptx
android principle.pptxandroid principle.pptx
android principle.pptx
 
Concurrency Learning From Jdk Source
Concurrency Learning From Jdk SourceConcurrency Learning From Jdk Source
Concurrency Learning From Jdk Source
 
Struts 2-overview2
Struts 2-overview2Struts 2-overview2
Struts 2-overview2
 
React & Redux JS
React & Redux JS React & Redux JS
React & Redux JS
 
What To Leave Implicit
What To Leave ImplicitWhat To Leave Implicit
What To Leave Implicit
 
Angularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetupAngularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetup
 
Eclipse plug in development
Eclipse plug in developmentEclipse plug in development
Eclipse plug in development
 
Core JavaScript
Core JavaScriptCore JavaScript
Core JavaScript
 
Designing Better API
Designing Better APIDesigning Better API
Designing Better API
 
Introduction to Spring Framework
Introduction to Spring FrameworkIntroduction to Spring Framework
Introduction to Spring Framework
 
Java 9, JShell, and Modularity
Java 9, JShell, and ModularityJava 9, JShell, and Modularity
Java 9, JShell, and Modularity
 
SOLID Design Principles for Test Automaion
SOLID Design Principles for Test AutomaionSOLID Design Principles for Test Automaion
SOLID Design Principles for Test Automaion
 
Unit 1 Core Java for Compter Science 3rd
Unit 1 Core Java for Compter Science 3rdUnit 1 Core Java for Compter Science 3rd
Unit 1 Core Java for Compter Science 3rd
 
01 oracle architecture
01 oracle architecture01 oracle architecture
01 oracle architecture
 

Recently uploaded

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 

FRONTEND BOOTCAMP Session 2.pptx

  • 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.
  • 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
  • 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!

Editor's Notes

  1. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  2. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  3. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  4. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  5. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  6. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  7. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  8. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  9. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  10. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  11. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  12. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  13. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  14. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  15. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  16. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  17. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  18. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  19. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  20. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library
  21. © Copyright PresentationGO.com – The free PowerPoint and Google Slides template library