Week 9 has been supplementing our JavaScript learning with more in-depth lectures, practicals and some wider skills learning. As our bootcamp is designed to make us job-ready, we are learning a lot of skills simultaneously. I like the mix of material as variety keeps me interested. Again, the feeling that we are learning a lot in a small window was very prevalent...
So, what did week 9 look like?
Debugging Skills
The first point highlighted to us about debugging is that this is a skill that will come with pratice. Of course, prevention is better than cure so what can you do to try and prevent bugs in your code?
- Write concise, modular, readable code (easy as that right?!).
- Keep it simple - avoid variable reassignment, type changes etc.
- Use visual tools like Prettier/ ESLint which analyse your code to find problems.
- Have your code reviewed.
- Write tests for your code.
Debugging has several steps to it and there are many techniques you can adopt. Firstly, read the error messages. It can take a while to get used to these as sometimes there are long lines of errors, try and make sense of it and spot key words or line references you might recognise. This can help you isolate the source of the bug; where it is in your code. It will also give you a starting point to start utilising techniques such as googling the error, console logging, rubber ducking & investigating with Chrome Dev Tools, see more techniques here. Also, try and challenge your assumptions, take a step back and think if the code is doing what you presume it's doing. I find writing out the flow of the logic really helps with this. If you think you have isolated the problem, try and fix it or figure out a workaround, and test that to see if it works!
We got to do a practical during this bootcamp session which was great practice. It involved a mob programming exercise, you can see the finished result on my GitHub here
More ES6 Features
Classes
Classes provide more convenient syntax for constructor functions:
Constructor function
function Pet(name){
this.name = name;
}
Pet.prototype.describe = function () {
return `My pet is called ${this.name}`
};
ES6 Class
class Pet{
constructor(name){
this.name = name;
}
describe() {
return `My pet is called ${this.name}`
}
};
You can read in-depth about classes here. I definitely find class syntax easier to follow and understand, just remember that is it syntactic sugar, classes still act in the same way as prototype constructors and prototype methods.
Arrow Functions, () => {} and this.
Firstly, I love the succinctness of an arrow function. Secondly, they don't bind their own this they pick it up lexically. This means that the arrow function uses the this context from the current surrounding scope and no further.
const pet = {
name: 'Whiskers',
activities: ['sleep', 'eat', 'purr'],
pickActivity() {
this.activities.forEach((activity) => {
alert(`${this.name} wants to ${activity}`);
})
}
};
Therefore in this example, the inner function binds to the inner function only, and not the object or the method. The W3Schools examples here are really helpful too, and you can read more in-depth here.
Here's to week 10 of bootcamp!
My Key Take Aways
Not everyone works the same way - Possibly an obvious one, but when you do group-work I think it's important to remember that everyone learns and processes differently. It is key to be flexible, allowing for different styles and ways of working. Otherwise the outcome may not what you wanted!
It isn't all about the technical knowledge - Certainly, when learning to be a developer, technical knowledge is important. But in some ways, a natural curiosity and motivation to figure things out is as important (sometimes more so). Don't discount your soft skills in these situations.