Skip to content

(feat) day 31 - Prototype and Prototype Chain #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 7, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,4 @@ I am an independent educator and open-source enthusiast who creates meaningful p

- **`Day 29: Object Oriented Programming (OOP) Explained with Real-Life Analogies`** - [Watch Video](https://www.youtube.com/watch?v=oRQOiyO-kHg) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-29/README.md)
- **`Day 30: From Zero to OOP Hero with JavaScript ES6 Classes`** - [Watch Video](https://youtu.be/kG5t34ciG9w) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-30/README.md)
- **`Day 31: Master JavaScript Prototypes and Object Patterns - Confused to Confident!`** - [Watch Video](https://youtu.be/Uru85QW9zkk) || [Source Code](https://github.com/tapascript/40-days-of-javascript/blob/main/day-31/README.md)
47 changes: 47 additions & 0 deletions day-31/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
# Day 31 - 40 Days of JavaScript - Prototype & Prototype Chain

## **🎯 Goal of This Lesson**

- ✅ What Can You Expect
- ✅ JavaScript Object Literals Pattern
- ✅ Ways To Extract Values From Objects
- ✅ JavaScript Object and The const Keyword
- ✅ JavaScript Functions vs Methods
- ✅ The Constructor Function Pattern
- ✅ Composing Objects and References
- ✅ Object Prototypes
- ✅ Prototype Chain
- ✅ Constructor Function Visually
- ✅ The "prototype" Property
- ✅ The "prototype" Visually
- ✅ Prototype To Save Memory
- ✅ Prototype Chain(Lookup) Visually
- ✅ JavaScript Class Pattern
- ✅ JavaScript Class Inheritance
- ✅ The Object.create() Pattern
- ✅ How To Get Prototype Of An Object
- ✅ How To Set An Object Prototype
- ✅ The Closing Notes

## 🫶 Support

Your support means a lot.

- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.

> Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)

### 🤝 Sponsor My Work

I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.

## Video

Here is the video for you to go through and learn:

[![day-31](./banner.png)](https://youtu.be/Uru85QW9zkk "Video")

## **👩‍💻 🧑‍💻 Assignment Tasks**

Please find the task assignments in the [Task File](./task.md).
Binary file added day-31/banner.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 41 additions & 0 deletions day-31/task.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# Tasks

Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript".

> **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console.

## 1. Create a Simple Prototype Chain

- Define a base object animal with a method eat.
- Create another object dog that inherits from animal using Object.create.
- Call eat from dog and explain how the prototype chain resolves it.

## 2. Build a Custom Constructor Function

- Create a constructor function Book(title, author).
- Add a method getDetails() to the prototype of Book.
- Instantiate two books and show they share the method from the prototype.

## 3. Compare Object Creation Patterns

Create three objects using:

- Object literals
- Constructor functions
- Object.create

Add similar methods and compare how inheritance works in each pattern.

## 4. Simulate a Real-World Inheritance Chain

- Simulate a real-life hierarchy: Person → Student → GraduateStudent.
- Each level should add its own methods or properties using prototypes.
- Show how a GraduateStudent can access methods from both Student and Person.

## 5. Object.create vs Class vs Constructor Function

- Implement the same User entity using:
- Constructor Function
- ES6 Class
- Object.create
- Write a summary comparing syntax, readability, and prototype behavior.