JavaScript Bible - JavaScript and ES6 Bootcamp 2019

JavaScript Bible - JavaScript and ES6 Bootcamp 2019

by Bogdan Stashchuk
Released August 2019
Publisher(s): Packt Publishing
ISBN: 9781839211782

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

This course covers everything you need to know about JavaScript to become a frontend web developer, a full-stack web developer, or a backend developer. You'll start from the very beginning and learn the fundamentals and basic concepts of JavaScript. Then you will learn new features included in ES6, ES7, and more. Also, you'll explore the Node.js environment for JavaScript code execution and you will understand the difference between a web browser and Node.js.

In separate sections, we will discuss Babel, NPM, Webpack, and MongoDB. Also, you will master the most popular JavaScript framework: React. JavaScript Bible – JavaScript and ES6 Bootcamp 2019 was designed for developers with different levels of JavaScript knowledge. If you are a beginner in JavaScript, start with the very first section called JavaScript Basics. If you have some experience with JavaScript, jump directly TO the sections where I cover ES6 topics such as REST/spread parameters, arrow functions, ES6 Classes, and more. By the end of the course, you'll have hands-on experience in developing WITH JavaScript and in front-end development.

This course covers everything you need to know about JavaScript and become either Frontend Web developer, or Full-stack Web Developer, or Backend developer.

We will start from the very beginning and you will learn the fundamentals and basic concepts of JavaScript. Then you will learn new features included in ES6, ES7, etc. Also, we will dive into the Node.js - environment for JavaScript code execution and you will understand what is the difference between Web Browser and Node.js. In separate sections, we will discuss Babel, NPM, Webpack, and MongoDB. Also, you will learn the most popular JavaScript framework - React.

JavaScript Bible was designed for developers with different levels of JavaScript knowledge. Each challenge has a task and solution in separate Git branches.

What You Will Learn

  • Learn JavaScript, ES6, NPM, Webpack, Babel, Node, and React by solving lots of challenges with real-world scenarios
  • Each challenge has a task and solution. And all of them are available in the GIT repositories that you will download at the beginning of the course
  • Learn all fundamental features of JavaScript, starting with basic concepts such as variables, objects, functions, scopes, and operators and finishing with advanced topics as closures, hoisting, IIFEs (Immediately
  • Invoked Function Expressions), classes, and many more
  • Learn and understand ES6 features such as arrow functions, destructuring, default function parameters, template literals, array helper methods, and classes

Audience

This course targets JavaScript developers at all levels: beginners; full-stack developers; frontend developers; web developers; backend developers; JavaScript developers who feel that they don't fully understand all its concepts; beginners in JavaScript; developers with some knowledge of other programming languages such as Python, Java, C++, and more; and advanced JavaScript developers who want to test their knowledge.

About The Author

Bogdan Stashchuk: Bogdan Stashchuk is an experienced instructor (over 20+ years) with a software engineering background. He teaches complex stuff in an easy step-by-step manner. All his courses include practical exercises, which allow the learners to follow him from the start of any course till the end. Learners will perform all tasks the same way he does in his video lectures. There are a lot of challenging assignments, the solutions for which are discussed inside the course. This is the perfect combination that enables you to really learn and retain gained knowledge for a long period of time.

Table of contents

  1. Chapter 1 : Intro
    1. Intro
    2. Course Navigation
  2. Chapter 2 : EXERCISE Files and SOFTWARE Setup
    1. INTRO - Exercise Files and Software Setup
    2. VIDEO - Software Setup Overview
    3. PRACTICE - WINDOWS ONLY - Install "cmder"
    4. PRACTICE - Visual Studio Code Setup
    5. PRACTICE - Launch Node.js and execute test JavaScript file
    6. PRACTICE - Git Overview - PART 1
    7. PRACTICE - Git Overview - PART 2
    8. PRACTICE - Clone remote GIT repository and switch Branches
    9. PRACTICE - Use SourceTree for Git repositories management
  3. Chapter 3 : JAVASCRIPT BASICS - Intro
    1. INTRO - JAVASCRIPT BASICS - Intro
    2. PRACTICE - Exploring Web Sites in the Browser
    3. PRACTICE - Create first HTML file and start Live Server
    4. PRACTICE - Add favicon to the HTML file
    5. PRACTICE - JavaScript embedded into the HTML
    6. DEMO - Git branches management
    7. PRACTICE - JavaScript in the separate file
    8. CHALLENGE - External Scripts
    9. CHALLENGE - External Scripts - SOLUTION
    10. PRACTICE - JavaScript in the Console of the Browser
  4. Chapter 4 : JAVASCRIPT BASICS - Types and Variables
    1. INTRO - JAVASCRIPT BASICS - Types and Variables
    2. VIDEO - Object in JavaScript
    3. VIDEO - Primitive vs Reference Value Types
    4. PRACTICE - Exploring Primitive Value Types
    5. PRACTICE - Exploring Reference Type - Object
    6. VIDEO - Variable declaration using "var", "let" and "const"
    7. PRACTICE - Variable declaration and assignment
    8. CHALLENGE - Variable Declaration and Assignment
    9. CHALLENGE - Variables Reusage
    10. VIDEO - Statically vs Dynamically typed Languages
    11. PRACTICE - Dynamic typing in JavaScript
  5. Chapter 5 : JAVASCRIPT BASICS - Objects
    1. INTRO - JAVASCRIPT BASICS - Objects
    2. VIDEO - Variety of Objects in JavaScript
    3. VIDEO - Objects Modification
    4. PRACTICE and CHALLENGES - Objects - PART 1
    5. PRACTICE and CHALLENGES - Objects - PART 2
    6. PRACTICE and CHALLENGES - Objects - PART 3
    7. VIDEO - Global Objects - "window" and "global"
    8. VIDEO - Methods of the Object
  6. Chapter 6 : JAVASCRIPT BASICS - Functions
    1. INTRO - JAVASCRIPT BASICS - Functions
    2. VIDEO - Introduction to the Functions
    3. VIDEO - Syntax of the Function
    4. PRACTICE - Functions - PART 1
    5. PRACTICE - Functions - PART 2
    6. CHALLENGES - Functions - PART 1
    7. CHALLENGES - Functions - PART 2
    8. VIDEO - Function Expressions vs Function Declarations
    9. PRACTICE - Function Expressions, setTimout(), setInterval()
    10. CHALLENGE - Function Expressions
    11. ✔ CHALLENGE - Function Expressions - SOLUTION
  7. Chapter 7 : JAVASCRIPT BASICS - Operators
    1. INTRO - JAVASCRIPT BASICS - Operators
    2. VIDEO - Operators
    3. VIDEO - Operands, Unary vs Binary Operators and Notations
    4. PRACTICE - Arithmetic Operators - PART 1
    5. PRACTICE - Arithmetic Operators - PART 2
    6. PRACTICE - Comparison Operators - PART 1
    7. PRACTICE - Comparison Operators - PART 2
    8. PRACTICE - Logical Operators - PART 1
    9. PRACTICE - Logical Operators - PART 2
    10. PRACTICE - Operators Precedence and Associativity
    11. CHALLENGES - Operators - PART 1
    12. CHALLENGES - Operators - PART 2
  8. Chapter 8 : JAVASCRIPT BASICS - Expressions vs Statements
    1. INTRO - JAVASCRIPT BASICS - Expressions vs Statements
    2. VIDEO - Expressions vs Statements - PART 1
    3. VIDEO - Expressions vs Statements - PART 2
    4. PRACTICE - Expressions vs Statements - PART 1
    5. PRACTICE - Expressions vs Statements - PART 2
    6. CHALLENGES - Expressions vs Statements
  9. Chapter 9 : JAVASCRIPT BASICS - Scopes
    1. INTRO - JAVASCRIPT BASICS - Scopes
    2. VIDEO - Scopes - PART 1
    3. VIDEO - Scopes - PART 2
    4. VIDEO - Undeclared Variables and "use strict"
    5. PRACTICE - Scopes - PART 1
    6. PRACTICE - Scopes - PART 2
    7. CHALLENGES - Scopes
  10. Chapter 10 : JAVASCRIPT BASICS - Arrays
    1. INTRO - JAVASCRIPT BASICS - Arrays
    2. VIDEO - Arrays
    3. VIDEO - Array Methods
    4. PRACTICE - Arrays - PART 1
    5. PRACTICE - Arrays - PART 2
    6. CHALLENGES - Arrays
  11. Chapter 11 : JAVASCRIPT BASICS - Loops and Conditional Statements
    1. VIDEO - Introduction to the Loops
    2. VIDEO - "for" Loop
    3. VIDEO - "while" Loop
    4. VIDEO - "do while" Loop
    5. VIDEO - "for in" and "for of" Loops
    6. PRACTICE Loops - PART 1
    7. PRACTICE Loops - PART 2
    8. PRACTICE Loops - Looking for loops in a pubic JavaScript library
    9. VIDEO - Conditional Statements - if, if else and switch
    10. VIDEO - Ternary Operator
    11. PRACTICE - Conditional statements and ternary operator - PART 1
    12. PRACTICE - Conditional statements and ternary operator - PART 2
    13. CHALLENGES - Loops and Conditions - PART 1
    14. CHALLENGES - Loops and Conditions - PART 2
    15. CHALLENGES - Loops and Conditions - PART 3
    16. CHALLENGES - "for in" and Ternary Operator
  12. Chapter 12 : JAVASCRIPT BASICS - Advanced Topics
    1. PRACTICE - Mutable vs Immutable Values
    2. PRACTICE - "typeof" and "instanceof" Operators
    3. PRACTICE - "new Array", "new String"
    4. PRACTICE - "new Object", "new Function"
    5. PRACTICE - Execution contexts and Execution contexts stack
    6. PRACTICE - "this"
    7. PRACTICE - "call", "apply" methods of the Function
    8. PRACTICE - "bind" method of the Function
    9. PRACTICE - "pass by value" vs "pass by reference"
    10. PRACTICE - IIFE - Immediately Invoked Function Expression
    11. PRACTICE - Synchronous Code Execution
    12. PRACTICE - Events and Events queue
    13. PRACTICE - Callbacks - PART 1
    14. PRACTICE - Callbacks - PART 2
    15. PRACTICE - Closures
  13. Chapter 13 : ES6 Variables Lifecycles
    1. VIDEO - Recap of the "var"
    2. VIDEO - Scopes - Global, Function and Block
    3. VIDEO - let
    4. VIDEO - const
    5. VIDEO - Variables Usage Guidelines
    6. VIDEO - Var, Let or Const?
    7. CHALLENGE 1-1 - let, var and const
    8. ✔ CHALLENGE 1-1 - let, var and const - SOLUTION
    9. CHALLENGE 1-2 - let, var and closures
    10. ✔ CHALLENGE 1-2 - let, var and closures - SOLUTION
    11. VIDEO - JavaScript Engine Phases
    12. VIDEO - Variable Lifecycle Phases
    13. VIDEO - Var lifecycle
    14. VIDEO - Undeclared variable lifecycle
    15. VIDEO - Let lifecycle
    16. VIDEO - Const lifecycle
    17. VIDEO - Function lifecycle - Part 1
    18. VIDEO - Function lifecycle - Part 2
    19. VIDEO - What is finally hoisting?
    20. DEMO - Putting different variables lifecycles together
    21. ✔ DEMO - Putting different variables lifecycles together - SOLUTION, Part 1
    22. ✔ DEMO - Putting different variables lifecycles together - SOLUTION, Part 2
    23. CHALLENGE 1-3 - Variable Lifecycles
    24. ✔ CHALLENGE 1-3 - Variable Lifecycles - SOLUTION
    25. VIDEO - Variables Phases Section Summary
  14. Chapter 14 : ES6 Arrow functions
    1. VIDEO - Introduction to the Arrow Functions Section
    2. VIDEO - Traditional JavaScript Functions Overview.
    3. VIDEO - Introduction to the Arrow Functions
    4. VIDEO - Arrow Functions syntax
    5. PRACTICE - Arrow Functions
    6. VIDEO - Arrow Functions and "this".
    7. VIDEO - Regular functions instead of Arrow Functions
    8. CHALLENGE 2-1 - Regular vs Arrow Functions
    9. CHALLENGE 2-1 - Regular vs Arrow Functions - SOLUTION
    10. VIDEO - Arguments in the Functions
    11. VIDEO - Arrow Functions Summary
  15. Chapter 15 : ES5.1 Array Helper Methods
    1. VIDEO - forEach() Overview
    2. PRACTICE - forEach()
    3. CHALLENGE 3-1 - forEach() with Index
    4. ✔ CHALLENGE 3-1 - forEach() with Index - SOLUTION
    5. VIDEO - map() Overview
    6. PRACTICE - map()
    7. CHALLENGE 3-2 - map() JSON to Object
    8. ✔ CHALLENGE 3-2 - map() JSON to Object - SOLUTION
    9. VIDEO - filter() Overview
    10. PRACTICE - filter()
    11. VIDEO - find() Overview
    12. PRACTICE - find()
    13. CHALLENGE 3-3 - find() Single Post
    14. ✔ CHALLENGE 3-3 - find() Single Post - SOLUTION
    15. VIDEO - every() and some() Overview
    16. PRACTICE - every() and some()
    17. CHALLENGE 3-4 Is Array of Numbers Sorted?
    18. ✔ CHALLENGE 3-4 Is Array of Numbers Sorted? - SOLUTION
    19. CHALLENGE 3-5 Are Arrays Equal or not?
    20. ✔ CHALLENGE 3-5 Are Arrays Equal or not? - SOLUTION
    21. CHALLENGE 3-6 Check if Element is in Array
    22. ✔ CHALLENGE 3-6 Check if Element is in Array - SOLUTION
    23. VIDEO - includes() Overview
    24. PRACTICE - includes()
    25. CHALLENGE 3-7 Includes() with Array or Object
    26. ✔ CHALLENGE 3-7 Includes() with Array or Object - SOLUTION
    27. CHALLENGE 3-8 Push Element to Array if Not Exists
    28. ✔ CHALLENGE 3-8 Push Element to Array if Not Exists - SOLUTION
    29. VIDEO - reduce() Overview
    30. PRACTICE - reduce()
    31. CHALLENGE 3-9 Reduce Array of Objects
    32. ✔ CHALLENGE 3-9 Reduce Array of Objects - SOLUTION
    33. CHALLENGE 3-10 Reduce Array of Objects to Object
    34. ✔ CHALLENGE 3-10 Reduce Array of Objects to Object - SOLUTION
    35. VIDEO - Do you know how sort() works?
    36. VIDEO - Sorting Algorithms Overview
    37. VIDEO - Stable vs Unstable Sort
    38. VIDEO - sort() Overview
    39. VIDEO - sort() without Arguments
    40. VIDEO - sort() Analyze sorting algorithms
    41. VIDEO - sort() Algorithms in different browsers
    42. CHALLENGE 3-11 sort() Array of objects
    43. ✔ CHALLENGE 3-11 sort() Array of objects - SOLUTION
    44. CHALLENGE 3-12 sort() Long Array of objects
    45. ✔ CHALLENGE 3-12 sort() Long Array of objects - SOLUTION
    46. VIDEO - sort() Summary
    47. VIDEO - Array helper methods Summary
  16. Chapter 16 : ES6 Template Literals
    1. VIDEO - Template Literals Overview
    2. VIDEO - Tagged Templates Overview
    3. CHALLENGE 4-1 Template Literals
    4. ✔ CHALLENGE 4-1 Template Literals - SOLUTION
    5. CHALLENGE 4-2 Default tagged template
    6. ✔ CHALLENGE 4-2 Default tagged template - SOLUTION
  17. Chapter 17 : ES6 Rest/Spread Operators and Default Function Parameters
    1. VIDEO - Rest Parameters Overview
    2. PRACTICE - Rest Parameters
    3. VIDEO - Spread Operator Overview
    4. PRACTICE - Spread Operator
    5. CHALLENGE 5-1 Rest and Spread Operators
    6. ✔ CHALLENGE 5-1 Rest and Spread Operators - SOLUTION
    7. VIDEO - Default Function Parameters Overview
    8. PRACTICE - Default Function Parameters
    9. CHALLENGE 5-2 Default value without default parameters
    10. ✔ CHALLENGE 5-2 Default value without default parameters - SOLUTION
    11. CHALLENGE 5-3 Generate Missing Unique IDs
    12. ✔ CHALLENGE 5-3 Generate Missing Unique IDs - SOLUTION PART 1
    13. ✔ CHALLENGE 5-3 Generate Missing Unique IDs - SOLUTION PART 2
    14. ✔ CHALLENGE 5-3 Generate Missing Unique IDs - SOLUTION PART 3
    15. ✔ CHALLENGE 5-3 Generate Missing Unique IDs - SOLUTION PART 4
  18. Chapter 18 : ES6 Enhanced Object Literals
    1. VIDEO - Enhanced Object Literals Overview
    2. PRACTICE - Enhanced Object Literals
    3. CHALLENGE 6-1 Enhanced Object Literals
    4. ✔ CHALLENGE 6-1 Enhanced Object Literals - SOLUTION
  19. Chapter 19 : ES6 Array and Object Destructuring
    1. VIDEO - Destructuring Overview
    2. PRACTICE - Array Destructuring
    3. CHALLENGE 6-2 Array Destructuring
    4. ✔ CHALLENGE 6-2 Array Destructuring - SOLUTION
    5. CHALLENGE 6-3 Destructure Result of the Function
    6. ✔ CHALLENGE 6-3 Destructure Result of the Function - SOLUTION
    7. PRACTICE - Object Destructuring - PART 1
    8. VIDEO - New Variable Names and Default Values in Object Destructuring
    9. PRACTICE - Object Destructuring - PART 2
    10. CHALLENGE 6-4 Object Destructuring
    11. ✔ CHALLENGE 6-4 Object Destructuring - SOLUTION
    12. CHALLENGE 6-5 Object Destructuring and Array Helper Methods
    13. ✔ CHALLENGE 6-5 Object Destructuring and Array Helper Methods - SOLUTION
    14. CHALLENGE 6-6 Delete Object Properties
    15. ✔ CHALLENGE 6-6 Delete Object Properties - SOLUTION
  20. Chapter 20 : ES6 Classes, Prototypes and Function Constructors
    1. VIDEO - Class-based vs Prototype-based
    2. VIDEO - What is inheritance?
    3. VIDEO - Prototype Chain
    4. VIDEO - __proto__ and [[Prototype]]
    5. VIDEO - What is Prototype?
    6. VIDEO - Don't reassign __proto__
    7. VIDEO - Native Prototypes - PART 1
    8. VIDEO - Native Prototypes - PART 2
    9. VIDEO - Prototypal Inheritance in JavaScript
    10. PRACTICE - Function Constructors - PART 1
    11. VIDEO - Function Constructors Overview
    12. PRACTICE - Function Constructors - PART 2
    13. PRACTICE - Function Constructors - PART 3
    14. VIDEO - Object.create() Overview
    15. PRACTICE - Object.create()
    16. PRACTICE - Function Constructors - PART 4
    17. VIDEO - Function Constructors - New Prototype in the Chain
    18. CHALLENGE 7-1 Insert Prototype into the Existing Prototype Chain
    19. CHALLENGE 7-1 Insert Prototype into the Existing Prototype Chain - SOLUTION
    20. VIDEO - "instanceof" and "typeof" in the Prototype Chain
    21. CHALLENGE 7-2 Fix Mistakes in the Function Constructors
    22. CHALLENGE 7-2 Fix Mistakes in the Function Constructors - SOLUTION
    23. VIDEO - Classes - Overview
    24. VIDEO - Classes vs Function Constructors
    25. PRACTICE - Classes - PART 1
    26. PRACTICE - Classes - PART 2
    27. PRACTICE - Classes - PART 3
    28. CHALLENGE 7-3 Convert Function Constructors to Classes
    29. CHALLENGE 7-3 Convert Function Constructors to Classes - SOLUTION
    30. CHALLENGE 7-4 Extend Array
    31. CHALLENGE 7-4 Extend Array - SOLUTION
    32. CHALLENGE 7-5 Custom Push Method for Arrays
    33. CHALLENGE 7-5 Custom Push Method for Arrays - SOLUTION
    34. VIDEO - React and ES6 Classes
    35. CHALLENGE 7-6 Classes in React - Additional Button
    36. CHALLENGE 7-6 Classes in React - Additional Button - SOLUTION
  21. Chapter 21 : Babel Introduction
    1. Babel Module Introduction
    2. VIDEO - What is Compiler?
    3. VIDEO - Compiled vs Interpreted languages
    4. VIDEO - Transpiler
    5. VIDEO - Transpling vs Compiling
    6. VIDEO - ES5, ES6 and JavaScript
    7. VIDEO - What Babel does?
    8. VIDEO - Why do we need Babel?
    9. VIDEO - ES6 support by Browsers
    10. VIDEO - How many browsers need compiled ES5 code?
    11. PRACTICE - Babel in action - ES6 Rest operator
    12. PRACTICE - Compare performance - ES6 Rest Operator(Node.js)
    13. PRACTICE - Compare Performance - ES6 Rest Operator (Google Chrome)
    14. CHALLENGE - Compare Performance - ES6 Destructuring
    15. CHALLENGE - Compare Performance - ES6 Destructurng - SOLUTION
    16. VIDEO - What is User Agent?
    17. VIDEO - Serve different JS files to different browers
    18. VIDEO - Different JS files on the server
    19. PRACTICE - Browser detection on the client
    20. CHALLENGE - Detect feature support in the Browser
    21. CHALLENGE - Detect feature support in the Browser - SOLUTION
    22. CHALLENGE - Insert different script tags into the DOM
    23. CHALLENGE - Insert different script tags into the DOM - SOLUTION
    24. VIDEO - How Babel Works?
    25. PRACTICE - Online Babel Compiler
    26. VIDEO - Install Babel Globally
    27. PRACTICE - Compile JS file using Babel
    28. VIDEO - Plugins and Presets
  22. Chapter 22 : NPM - Node Package Manager
    1. VIDEO - Introduction to the NPM
    2. PRACTICE - Exploring NPM packages
    3. VIDEO - Package.json and init
    4. VIDEO - Semantic Versioning
    5. VIDEO - Packages Installation
    6. PRACTICE - Install package in the project
    7. CHALLENGE - Install Semver package
    8. ✔ CHALLENGE - Install Semver Package - SOLUTION
    9. PRACTICE - Install Browserslist - package with own dependencies
    10. VIDEO - Dependencies and Development Dependencies
    11. PRACTICE - Examine Development Dependencies
    12. PRACTICE - Browser App vs Server Package
    13. CHALLENGE - Clock Browser Application
    14. ✔ CHALLENGE - Clock Browser Application - SOLUTION
    15. VIDEO - Clock Challenge Summary
    16. VIDEO - Browser App vs Public Package
    17. PRACTICE - Exploring Package Information and Versions
    18. PRACTICE - Installing Specific Package Version
    19. VIDEO - Why package-lock.json file is needed?
    20. CHALLENGE - Reinstall old package version without lock file
    21. ✔ CHALLENGE - Reinstall old package version without lock file - SOLUTION
    22. VIDEO - How lock file is handled
    23. VIDEO - Lock file summary
    24. VIDEO - Update NPM packages overview
    25. CHALLENGE - Update project dependencies
    26. ✔ CHALLENGE - Update project dependencies - SOLUTION
    27. VIDEO - Introduction to the NPM scripts
    28. PRACTICE - Start npm script
    29. CHALLENGE - Create prestart script
    30. ✔ CHALLENGE - Create prestart script - SOLUTION
    31. PRACTICE - Custom NPM scripts
    32. CHALLENGE - Run NPM scripts simultaneously
    33. ✔ CHALLENGE - Run NPM scripts simultaneously - SOLUTION
    34. VIDEO - NPM .bin Folder with Executable Scripts
    35. PRACTICE - Explore .bin Folder on the Mac
    36. PRACTICE - Explore .bin Folder on Windows
    37. VIDEO - NPM Scripts Wrap-Up

Product information

  • Title: JavaScript Bible - JavaScript and ES6 Bootcamp 2019
  • Author(s): Bogdan Stashchuk
  • Release date: August 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781839211782