JavaScript Intermediate Course

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.