Skip to content

Latest commit

 

History

History
209 lines (158 loc) · 7 KB

README.md

File metadata and controls

209 lines (158 loc) · 7 KB

JavaScript Intermediate Course

JS Intermediate Course Banner

GitHub Twitter Discord YouTube

A comprehensive collection of JavaScript intermediate-level examples and exercises covering ES6+ features, advanced concepts, and object-oriented programming principles.

📚 Course Overview

This course is designed to bridge the gap between beginner and advanced JavaScript by focusing on modern ES6+ features, proper understanding of this keyword, function methods, and object-oriented programming principles.

🎯 Learning Objectives

  • Master modern JavaScript (ES6+) features and syntax
  • Understand the this keyword and its binding rules
  • Learn advanced function methods (call, apply, bind)
  • Implement object-oriented programming principles
  • Develop clean, maintainable JavaScript code

📋 Course Content

Module 1: ES6+ Features (050-057)

050 - ES6 Overview

  • Introduction to ES6/ES2015 and subsequent versions
  • Key improvements over traditional JavaScript
  • Browser compatibility and transpilation basics
  • Feature detection techniques

051 - Template Literals & Tagged Templates

  • String interpolation with template literals
  • Multi-line strings
  • Tagged templates for advanced string processing
  • Practical examples: HTML generation, URL building, data formatting

052 - Arrow Functions

  • Concise function syntax
  • Lexical this binding
  • When to use (and when not to use) arrow functions

053 - Default Parameters & Rest Parameters

  • Function parameter defaults
  • Rest operator for variable arguments
  • Combining with destructuring

054 - Spread Operator

  • Array and object spreading
  • Function arguments spreading
  • Practical use cases and examples

055 - Array Destructuring

  • Extracting values from arrays
  • Skipping values with comma separators
  • Nested array destructuring

056 - Enhanced Object Literals

  • Shorthand property names
  • Computed property names
  • Method shorthand syntax

057 - For...of Loop

  • Iterating over iterable objects
  • Comparison with for...in loop
  • Working with strings, arrays, and other iterables

Module 2: Advanced JavaScript Concepts (058-064)

058 - For...in vs For...of

  • Key differences and use cases
  • When to use each loop type
  • Common pitfalls and best practices

059 - The this Keyword

  • Four binding rules: Default, Implicit, Explicit, New
  • Context loss in callbacks
  • Debugging this issues
  • Practical solutions and patterns

060 - Call, Apply, Bind Methods

  • Function borrowing techniques
  • Setting explicit context
  • Common use cases and examples
  • Modern alternatives (spread operator)

061 - Arrow Functions and this

  • Lexical this binding behavior
  • Solving context issues with arrow functions
  • When arrow functions are NOT appropriate

062 - IIFE (Immediately Invoked Function Expressions)

  • Creating private scopes
  • Module pattern implementation
  • Common use cases

063 - Function Constructors

  • Creating objects with constructors
  • Prototype chain basics
  • Comparison with ES6 classes

064 - Variable Shadowing

  • Understanding scope and shadowing
  • Common bugs and how to avoid them
  • Best practices for variable naming

Module 3: Object-Oriented Programming (065)

065 - OOP Principles

  • Encapsulation: Data hiding and bundling
  • Inheritance: Code reuse and hierarchical relationships
  • Polymorphism: Multiple forms and dynamic behavior
  • Real-world examples and implementations

🚀 Getting Started

Prerequisites

  • Basic understanding of JavaScript fundamentals
  • Familiarity with variables, functions, and basic control structures
  • A modern web browser or Node.js environment

How to Use This Course

  1. Sequential Learning: Start with file 050-es6-overview.js and progress through each numbered file
  2. Hands-on Practice: Each file contains commented examples - uncomment and modify them to understand concepts
  3. Experiment: Try creating your own examples based on the patterns shown
  4. Build Projects: Apply these concepts in small projects to solidify understanding

Running the Code

# Using Node.js
node 050-es6-overview.js

# Or open files directly in your browser console

📁 File Structure

JS Intermediate Course/
├── 050-es6-overview.js
├── 051-template-literals-tagged.js
├── 052-arrow-functions.js
├── 053-default-parameters-rest.js
├── 054-spread-operator.js
├── 055-destructuring-arrays.js
├── 056-enhanced-object-literals.js
├── 057-for-of-loop.js
├── 058-for-in-vs-for-of.js
├── 059-this-keyword.js
├── 060-call-apply-bind-methods.js
├── 061-arrow-fn-this.js
├── 062-iife.js
├── 063-function-constructor.js
├── 064-variable-shadowing.js
├── 065-oop-principles-encapsulation-inheritance-polymorphism.js
└── README.md

🎯 Key Features of This Course

  • Progressive Learning: Each file builds upon previous concepts
  • Practical Examples: Real-world code examples and use cases
  • Commented Code: Detailed explanations within each file
  • Modern JavaScript: Focus on current best practices and ES6+ features
  • Hands-on Approach: Uncomment and experiment with code directly

🛠️ Tools and Resources

  • MDN Web Docs: Comprehensive JavaScript reference
  • Can I Use: Browser compatibility checker
  • VS Code: Recommended code editor with JavaScript extensions
  • Chrome DevTools: For debugging and experimentation

📈 What You'll Learn

By completing this course, you will:

  • Write modern, clean JavaScript using ES6+ features
  • Understand and manage the this keyword effectively
  • Create reusable and maintainable code
  • Implement object-oriented programming principles
  • Debug common JavaScript issues
  • Prepare for advanced JavaScript frameworks and libraries

🤝 Contributing

This is a learning repository. Feel free to:

  • Report issues or unclear explanations
  • Suggest improvements or additional examples
  • Share your own implementations

📄 License

This educational repository is open for learning purposes. Feel free to use, modify, and distribute for educational purposes.

Happy Coding! 🚀

Remember: The best way to learn is by doing. Experiment with the code, break it, fix it, and understand why it works the way it does.