DEV Community

Cover image for Week 2
maryredlinger
maryredlinger

Posted on

Week 2

   WEEK 2

This week we learned about JSON objects and classes.

A JSON object is a kay value pair in a variable. An example of this would be var person = { name : “Alex”, phone : 123456789} where the key is the name and phone while the value is “Alex” and 123456789. We can access these properties with dot notation such as person.name which would display “Alex” and person.phone would display 123456789. Objects are collections of key value pairs. Calling on this. followed by the key is also a way of calling on the scope for the object of that function.

Now lets dive into Javascript Classes. Classes are the blueprint that will later be called on by extending said class through another class. Classes have a constructor which makes it run in .log and it also has data and behavior which has a new that calls on that blueprint. So lets bring this all together in an example.

// class names have to be capitalized
class Book {
//dont forget to call on your constructor so it can run
constructor() {
// we are setting the state for the current page which is 0
this.currentPage = 0
}
// when turnPage is called on the state of currentPage will increase by 1 and reassign its value from 0 to 1
turnPage() {
this.currentPage += 1
}
// when readPage is called on, it will display the string that will tell you the page you are currently on
readPage(){
return you are on #{this.currentPage}
}
}

Destructuring was also brought up this week. Restructuring is a great way to have cleaner code and makes it easier to call on a certain key value pair.

var{ name, author } = book
console.log(name, author)

we can do this similarly with dot notation

console.log(book[“name”], book[“author”])
console.log(book.name, book.author)

Getting a little deeper into class, we learned about class inheritance next. Class inheritance is a way for a child class to inherit from a parent class which is being extended. It is a very similar setup for class but we will be adding another class. Lets show a quick example of what this would look like in Javascript:

//class Bike is our parent class
class Bike {
constructor () {
this.speed = 0
}
accelerate(){
this.speed += 10
}
}

//now we are getting into the child class which is pulling from our parent class Bike
class RoadBike extends Bike {
accelerate(){
//this.speed will change from the parent which adds 10 to be specific to RoadBike which will add 20
this.speed += 20
}
applyBrakes(){
this.speed -=10
}
}

We also learned about testing with JEST and yarn. Some commands I now know are mkdir (which makes a new directory), cd (change directory), touch (create a new file), atom . (to start the cd in atom), as well are yarn add jest, yarn jest, and describe. Writing tests seemed a little backwards to me. We first start by writing a test to fail and then adding in more code to pass. This is red green refactoring. We start with the least amount of code to fail then add the least amount of code to pass. Testing is a great way to have more efficient code.

Classes gave me a bit of trouble that week. I understood the concept and how it worked but the new syntax was giving me a lot of trouble to understand at first. Writing this blog 2 weeks post learning, I am seeing how confident in class and objects I am. All in all, it was a good week. Checking out!

Top comments (0)