Objects, constructors, prototypes!
So what did week 7 look like?
Looking at the scope!
We began with refreshing our understanding of scope. Scope is, at its simplest, the availability of functions/variables at a point in your code. There is global scope, where variables are available at all points, and local scope where variables are only available in that given code block. Scope is important to consider because functions and variables declared globally can be accessed by any code in the programme. Global scope declaration is generally discouraged so as to avoid issues with namespace clashes and scope pollution (too many global variables).
There are two ways to define local scope - block scope and function scope. Block scope is within a code block, i.e. inside curly braces {}, and are inaccessible outside of that block. Function scope refers to variables declared within a function, and therefore only accessed inside that function. Functions cannot access each other’s scope unless nested. This is called lexical scoping, where inner functions can see outer variables and functions, but outer functions can’t see inner ones. A useful way of thinking about this is one way glass:
When referring to a variable, the JavaScript engine looks for it within the current scope. If it is found then you get the value stored in that current scope, if not JavaScript will keep searching up into the outer scope and will continue until it finds the variable or reaches global scope. If it still can’t find the variable, JavaScript will return a reference error.
Here are two articles I found helpful when revising scope and my understanding of it. This freeCodeCamp article has some excellent examples and in-depth explanations and this blog post makes scope chaining much clearer
Object Orientated Programming (OOP)
In our second lecture of the week we looked at Object Orientated Programming (OOP). OOP is a programming paradigm (a “way” of approaching programming). It is based on the concept of objects and building a programme out of objects which interact with each other. JavaScript itself is not purely an OOP language as it is multi-paradigm; most object orientated languages are class-based and JavaScript is prototype-based.
A quick object recap
JavaScript objects group together related data. An object’s data is called properties and the functions of the object are referred to as methods. You access objects properties and methods with dot notation or square bracket notation. Objects can also be nested:
const car = {
parts: {
wheels: 4,
doors: 5
},
colour: 'red'
}
Here’s an easy-to-read quick recap from hackmd.
In OOP, code is grouped together with the state it modifies, i.e. functionality is grouped with the data it changes. Object properties represent their state, and object methods are the functions which access and alter their state. The grouping of state and methods is called encapsulation. As a result, code with OOP design is more flexible and modular, which is particularly useful when building larger programmes.
Our assignment for the week was to build a virtual pet using OOP, and test our code with the TDD skills we learned the week before. I have covered some of the new concepts from this assignment below:
Object constructor function - a way of creating many objects of the same "type", think of this like a blueprint for further objects. Below function Pet() an object constructor function.
function Pet(name){
this.name = name;
this.age = 0;
this.hunger = 0;
this.fitness = MAXIMUM_FITNESS;
};
new keyword - Instance of objects of the same type are created by calling the constructor function with the new keyword, for example: let pet = new Pet(‘Whiskers’);
this keyword - this refers to the object that "owns" the code. The value of this, when used in an object, is the object itself.
Prototype object - allows specific methods and properties to be shared across new object instances. As a prototype object is shared among all the objects created using the constructor function, its properties and methods are also shared among all the objects.
Magic number - A magic number is a number that appears in our code with no context as to what it represents. If this number appears multiple times it improves readability to declare the number as a variable in the global scope and use the variable name. For example my pet could only have a maximum fitness of 10, so I declared const MAXIMUM_FITNESS = 10; and used the variable name throughout.
Getter method (the get keyword) - Getter methods are methods that can be used like properties. They allow you to define an object's state, without actually managing a new piece of state
Here’s to week 8 of bootcamp!
My Key Take Aways
Being a bit scared is okay - Having just typed that we are going into week 8, I am still amazed by the amount I've learned. Sometimes I forget things, and it gets a bit scary, and that is okay because wow is there a lot to learn!
Things do start to click - I really didn't believe it at first, and still struggle to see the light a lot of the time! But the more code I see and write, the more comfortable I feel. The same about documentation. I guess this will be a constant for as long as I am learning (forever!)
Acknowledge your successes - As a manager I know this is important for morale and good feeling, so why don't I apply it to myself? This is one of my goals going forward, to acknowledge my good work and effort, to feel proud of it and celebrate it!