"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?".
- Getting Started
- Learning Objectives
- About the Projects
- Suggested Study
- Sundays & Projects
- Class Recordings
- HYF Home (external)
- Study Book (external)
How to study the code in this repo.
expand/collapse
You will need NPM and nvm on your computer to study this material
Using a browser with good DevTools will make your life easier: Chromium, FireFox, Edge, Chrome
- Install or update the
study-lenses
package globallynpm install -g study-lenses
(if you do not have it already)npm update -g study-lenses
(if you already have it installed)
- Clone this repository:
git clone git@github.com:HackYourFutureBelgium/encapsulation.git
(SSH) (recommended)git clone https://github.com/HackYourFutureBelgium/encapsulation.git
(HTTPS)gh repo clone HackYourFutureBelgium/encapsulation
(GH CLI)
cd
into the repositorycd state
- Run the
study
command from your CLIstudy
- The material will open in your default browser, you're good to go!
If you have a windows computer and get this error:
... /study.ps1 cannot be loaded because running scripts ...
follow the instructions in this StackOverflow answer, that should take care of it ; )
open/close
- Encapsulation
- Object Oriented Programming
- Inheritance
- Code Reuse (DRY)
- 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
- 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
getters
andsetters
- Be able to refactor between properties, methods and getters/setters
- Using
import
&export
to organize your codebase - Understand prototypical inheritance
- Use ES6
Class
es to organize your code- Be able to refactor between constructor functions & classes
- Use classes to create simple programs
bind
ing handlers tothis
function () {}
vs.() => {}
- How does each one treat
this
differently?
- 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.
- Reuse your methods with inheritance and ES6
class
es
links to help with this module.
open/close
- Practical JavaScript Tutorial (best tutorial ever)
- study.hyf.be/js/oop (more links)
- Getters & Setters
- Playlist -'Complicated' elements of Javascript on simple examples (RUS + English subs)
- Examples of
this
and bind - FunFunFunction
- Zach Gordon: this, binding this, example: event handlers
- Binding example in JS Tutor
() => {}
vs.function() {}
- articles
- videos
- 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, logic and views.
open/close
- Mosh explains
this
- Traversy OOP Crashcourse (first 10 minutes)
- javascript.info/object-methods
- StackOverflow
- () => {} vs. function() {}
- Isolate:
- Functions to Methods (examples)
- Isolate
- Functions to Methods
- Getters & Setters
- ./refactors/cycler (example)
- 2-encapsulated
- Integrate (exercise)
- 01-app-objects/exercises/average
No project this week.
Spend your time getting familiar with this
and following the Practical JavaScript Tutorial (best tutorial ever). It will be a great review of what we've covered at HYF. Take a moment to appreciate how much you've learned!
Looking for a little challenge? Try refactoring the tutorial's final code into this Practical JavaScript starter repo
Learn to:
- inspect prototype chains in the debugger
- tell the difference between static and instance methods
- use
Object.create
for code reuse
open/close
- 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
- Isolate: 7. Prototype Delegation
- Isolate: 8.
Object.create
- Integrate: 3.
Object.create
group or individual, your choice
List Manager! Following up on the tutorial from last week, you will build a web page that allows users to create as many lists as they want, each with a different title. You will need to refactor the todo list from WatchAndCode into a prototype object that can be used to create new list instances with Object.create
. There is a starter repository with the basics to get you started. Enjoy!
Individual Checklist:
- [ ] [repo](https://github.com/_/_) with a complete README
- [ ] [live demo](https://_.github.io/_)
- [ ] [project-planning](_https://github.com/_/_/tree/master/project-planning)
Group Checklist:
- [ ] [repo](https://github.com/_/_) with a complete README
- [ ] [live demo](https://_.github.io/_)
- [ ] [planning](_https://github.com/_/_/tree/master/planning)
- [ ] [A project board](https://github.com/_/_/projects/X)
- [ ] [One issue per task](https://github.com/_/_/issues) (with labels and milestones)
- [ ] [One branch per issue](https://github.com/_/_/network)
- [ ] [One reviewed PR per completed issue](https://github.com/_/__/pulls?q=is%3Apr+is%3Aclosed)
Learn to use Class
es for a reusable code base.
open/close
- Classes
- isolate
-
- Classes
-
- integrate
-
- Classes
-
Impress yourselves!
Using this starter repository, plan and scope a project of your choosing. This can be a totally new idea or a refactor of a previous project, just keep it small ;)
- [ ] [repo](https://github.com/_/_) with a complete README
- [ ] [live demo](https://_.github.io/_)
- [ ] [planning](_https://github.com/_/_/tree/master/planning)
- [ ] [A project board](https://github.com/_/_/projects/X)
- [ ] [One issue per task](https://github.com/_/_/issues) (with labels and milestones)
- [ ] [One branch per issue](https://github.com/_/_/network)
- [ ] [One reviewed PR per completed issue](https://github.com/_/__/pulls?q=is%3Apr+is%3Aclosed)
Coaches, 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.create
pt. 1, pt. 2
- Week 3:
- Part 1: Isolating Classes
- Part 2: Integrating Classes
- Week 1:
- Part 1:
this
& object methods - Part 2: more
this
& separated vs. encapsulated
- Part 1:
- Week 2:
- Part 1: Prototypes
- Part 2: More prototypes
- Week 3: