"Encapsulation is one of the fundamentals of OOP (object-oriented programming). It refers to the bundling of data with the methods that operate on that data. "
Encapsulation is the idea of grouping together your data with the functions that use it. That's it! (for now :) There are many ways to achieve this, but the end result is code that is easier to understand and nicer work with.
Heads up! In this module you'll be encountering some of the most important (and most challenging!) aspects of the JavaScript language this, inheritance & classes. These are all features of JS that allow you to encapsulate functions & data for readable, reusable code.
Along the way you will get your first introduction to one of the main programming paradigms in JS: object oriented. At their simplest level, programming paradigms are just different answers to the same question "How will I group my data and my functions?".
- Learning Objectives
- About the Projects
- Suggested Study
- Sundays & Projects
- Class Recordings
- Curriculum (external)
- HYF Home (external)
- Encapsulation
- Object Oriented Programming
- Inheritance
- Code Reuse (DRY)
Soft Skills
- Data-first development
- Understanding applications as Data + User Interactions
- Developing from the "inside" out: Writing the core object before the user interface
- Organizing your projects into modules
- Object Oriented TDD
- Using tests to define and verify OOP programs
Hard Skills
- Use the keyword
this- Be able to refactor functions into methods
- Be able to refactor methods into functions
- Plan and implement objects based on User Stories
- Use
gettersandsetters- Be able to refactor between properties, methods and getters/setters
- Using
import&exportto organize your codebase - Understand prototypical inheritance
- Use ES6
Classes to organize your code- Be able to refactor between constructor functions & classes
- Use classes to create simple programs
binding handlers tothisfunction () {}vs.() => {}- How does each one treat
thisdifferently?
- How does each one treat
- Closure 101:
- Using
() => {}handlers to avoid binding
- Using
Projects in this module will have all the same concerns as projects in the last module, they'll just be organized a little differently. In the last module every function was a free-floating function written in a separate file and required separately into your .html files.
In this module you'll learn how to:
- Encapsulate your application's data with the functions that operate on it using object oriented programming.
- Organize your code base using ES Modules (
importandexport). Yo - Reuse your methods with inheritance and ES6
classes
- Practical JavaScript Tutorial (best tutorial ever)
- study.hyf.be/js/oop (more links)
- Getters & Setters
- Examples of
thisand bind - FunFunFunction
- Zach Gordon: this, binding this, example: event handlers
- Binding example in JS Tutor
- numbery-organizer
- Bowling
- Iron Hack: Maze (constructor), Vikings (classes)
- Rolling Scopes: TicTacToe, Finite State Machine
- Kata for Fun (not only OOP)
Learn to use function () {} functions and this to encapsulate your data and logic.
before class
- Mosh explains
this - Traversy OOP Crashcourse (first 10 minutes)
- javascript.info/object-methods
- StackOverflow
- () => {} vs. function() {}
- In this module you will be learning to use
function
- In this module you will be learning to use
- Isolate: Functions to Methods
during class
- Functions to Methods
- Getters & Setters
- Refactor Code-Along
after class
this is an individual project
Your project this week is to build something inspired by the Practical JavaScript Tutorial (best tutorial ever).
To help you get off the ground here is a starter repository. There is already some code to
You don't find a todo app so interesting? not a problem! Your group is free to invent a new project idea, just be careful about scoping!
- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_)
- Project Planning
- [ ] [Backlog](https://github.com/_/_/tree/master/project-planning/backlog.md)
- [ ] [Development Strategy](https://github.com/_/_/tree/master/project-planning/development-strategy.md)
- [ ] [Project board](https://github.com/_/_/projects/_)
- Implementation
- [ ] Tests for core app object
- [ ] Tests for views (optional)
- [ ] Initial state in `src/data.js`
- [ ] Logs of each user interactionLearn to:
- inspect prototype chains in the debugger
- tell the difference between static and instance methods
- use
Object.createfor code reuse
before class
- Prototype Delegation
Object.create()- FunFunFunction: Prototypes in JavaScript, Prototype Basics,
Object.create() - Griffith
- WebTunings
- MDN
- FunFunFunction: Prototypes in JavaScript, Prototype Basics,
- Code to Study:
- Cycler Refactor through
5-create-many.html
- Cycler Refactor through
during class
- Isolate: 7. Prototype Delegation
- Isolate: 8.
Object.create - Integrate: 3.
Object.create
after class
List Manager! Following up on the tutorial from last week, your group will be building a web page that allows users to create as many lists as they want. You will need to refactor the todo list from WatchAndCode into a prototype object that can be used to create so list instances. A suggestion: users can input a title and create a new list with that title.
Along with prototypes, your group will be exploring import and export. This week's starter repository has the basics already in place for you. Enjoy!
- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_)
- Project Planning
- [ ] [Backlog](https://github.com/_/_/tree/master/project-planning/backlog.md)
- [ ] [Communication](https://github.com/_/_/tree/master/project-planning/backlog.md)
- [ ] [Development Strategy](https://github.com/_/_/tree/master/project-planning/development-strategy.md)
- [ ] [Project board](https://github.com/_/_/projects/_)
- Implementation
- [ ] ES Modules (`import`/`export`)
- [ ] Logs of each user interactionLearn to use Classes for a reusable code base.
before class
- Classes
during class
- isolate
-
- Classes
-
- integrate
-
- Classes
-
after class
Impress yourselves! Using this starter repository, plan and scope a project of your choosing. This can be a totally new idea or a reworking of a previous project, maybe even a continuation of last week's project!
- [ ] [repo](https://github.com/_/_) (with a complete README)
- [ ] [live demo](https://_.github.io/_)
- Project Planning
- [ ] [Backlog](https://github.com/_/_/tree/master/project-planning/backlog.md)
- [ ] [Communication](https://github.com/_/_/tree/master/project-planning/backlog.md)
- [ ] [Development Strategy](https://github.com/_/_/tree/master/project-planning/development-strategy.md)
- [ ] [Project board](https://github.com/_/_/projects/_)
- Implementation
- [ ] ES Modules (`import`/`export`)
- [ ] at least one `class`
- [ ] Logs of each user interactionCoaches, when sending your PR's with links please ...
- Indicate which class you were teaching
- Which week it was
- Give your name
- and a helpful description
- week 1:
- Part 1:
this - Part 2: Object Oriented Programming
- Part 1:
- week 2:
- Part 1: binding, and why it matters
- Part 2: binding handlers
- Week 1:
- Part 1:
this - Part 2: OOP Refactor
- Part 1:
- Week 2:
- Part 1: getting/setting & Prototypes
- Part 2:
Object.creatept. 1, pt. 2
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
