A Beginner’s Guide to Reading Code - Part 3

This is the final post in the 3 part series. You can find part 1 here and part 2 here. If you have not read them yet, start from the beginning. It won’t take too long, I promise 😋

Here is the list of core concepts that we listed in our first part, for your reference.

1. Constants
2. Variables
3. Operators
4. Conditionals (if, switch)
5. Loops (while, for)
6. Functions
7. Classes
8. Objects

Topics 1-6 were covered already. We will cover points 7 and 8 now, along with a few more mindset hacks.

We will flip the order today. First, we will look at Objects (the 8th concept in the list) and then look at Classes (the 7th concept)

8. Objects

Whenever you see the word new in a line of code, you can be sure that the author is creating an object in that line.

For example, if the Javascript code reads

var friendsList = new Array()

You can notice the use of the new keyword and assume that the author is creating an Array object.

Here, Array is an object that Javascript knows about already, because it is a pre-defined object that comes packaged with the language. If you are curious, Array is nothing but a set of items.

You can create your own objects too but more about that later (when we see classes).

Yet another way to identify objects in the code is this - whenever you see the dot(.) operator, you can be sure that some object is being used in that line.

But, what are objects?

Objects are nothing but a programmatic representation of real-world objects. Any real-world object will exhibit these two things:

1. Properties or attributes (like length, weight, color)
2. Uses or functionalities (how someone or something can use that object)

Let me take a code example and explain the same. Consider the following code.

var friendsList = new Array();
friendsList.push(1);
friendsList.push(5);

console.log(friendsList); //This will print [1,5]

console.log(friendsList.length); // This will print 2 - the length of the array

console.log(friendsList.reverse()); // This will print [5,1]

In the above example,

1. friendsList is a newly created object of type Array.
2. length is a property/attribute of the Array. Hence, friendsList.length translates to 2, the number of elements in the array.
3. push is a functionality/use of Array. It adds new items. Hence, friendsList.push(1) adds an element 1 to the array. Note the usage of () at the end. This is nothing but a function (Remember this word function? This was our concept number 5 explained in the part 2)
4. reverse is also a functionality/use of Array. Hence, friendsList.reverse() invokes that functionality or operation.
5. The dot (.) operator is used to refer to a property/attribute or a function

Let us see another example. You tell me if you understand anything at all 😃

//This is JavaScript code

var x = new TennisBall();
x.setColor("Green");
x.setWeightInGrams(56);

console.log(x.color); //Probably prints "Green"

console.log(x.weightInGrams); //probably prints 56

console.log(x.bounce()); //probably does some operation that is equivalent to the ball bouncing in the real world

Just by reading the above code, you could guess (the operative word here is “guess”) that this code is doing something with tennis balls.

The author is creating a new tennis ball named x with Green color and 56 grams of weight. He is printing the color and weight. Then, the author tries to simulate the bouncing of the ball.

We don’t know the in-depth implementation of how the author simulated the bounce or how the weight matters, etc. But, we know just enough information to move ahead, just by reading the above code. It is not gibberish, at least!

The code examples we saw for objects were in Javascript so far. Let us try looking at a Java example. The only difference is this - instead of var, you will use the TennisBall as the data type of the variable, like this:

// This is Java code
TennisBall x = new TennisBall();
x.setColor("Green");
x.setWeightInGrams(56);

System.out.println(x.color); //Probably prints "Green"

System.out.println(x.weightInGrams); //probably prints 56

System.out.println(x.bounce()); //probably does some operation that is equivalent to the ball bouncing in the real world

Very similar, right? 😯

But, how did the author make the computer understand the word TennisBall as an object? This is where the class comes in. Classes are our 7th core concept.

7. Classes

Classes are used by programmers to create their own definitions of real-world objects. For example, if I want to model a tennis ball in my code, I can create a class named TennisBall and after that, I can create objects of the type TennisBall, much like the variable x in the previous code snippet.

In short, classes are templates for objects.

First, let us see a sample class and explain what it contains.

class TennisBall{
	 
	   setColor(newcolor){
			this.color = newColor;  // Store the input color to property color
     }

     setWeightInGrams(newWeight){
      this.weightInGrams = newWeight; // Store the input weight to property weightInGrams
     }

     bounce(){
      console.log("Bounce Bounce Bounce a ball of "+ this.color + " color");
     }
     
}

When you look at the class above, you can notice that there are 3 possible functions that you can call from the object:

1. setColor - You pass any color "Blue", "Green" as input and it gets stored as property named color
2. setWeightInGrams - You pass a number and it gets stored as property named weightInGrams

3. bounce - No inputs needed. Just prints a funny text.

   Once this class is defined, then you can create objects of type TennisBall using the new TennisBall() notation and then go ahead and use . operator to call its functions or to read its properties.

The above code sample was in Java Script. In Java, the only difference is that you need to declare all the properties before typing your function code.

class TennisBall{
     //declare all the properties along with their data types
	   String color;
     int weightInGrams;

	   setColor(newcolor){
			this.color = newColor;  // Store the input color to property color
     }

     setWeightInGrams(newWeight){
      this.weightInGrams = newWeight; // Store the input weight to property weightInGrams
     }

     bounce(){
      console.log("Bounce Bounce Bounce a ball of "+ this.color + " color");
     }     
}

When you know the concepts detailed above, then you can read more than 80% of class-related code comfortably.

More Tips for Reading Code

Now, let us see a few tips for reading code. These may sound a little basic but are very important.

1. Not all languages are programming languages. For example, HTML is not a programming language but instead a markup language - the one used to display stuff on browsers. There is no if or function or for keywords in HTML. The concepts you studied just now apply only to the programming languages listed here.
2. Whenever you see an = operator, read the right side first. In fact, even in a computer, the right-hand side of the = is fully evaluated and then assigned to the variable on the left of =symbol . For example, in the line var a = (2+3)*2; the right-hand side is evaluated 5*2 = 10 and 10 is assigned as the value of the variable a.
3. Unlike normal English, each bracket symbol is different and has a different meaning. For example, you can write (3+2) and not as [3+2] or {3+2}.
   1. () is used to call/execute a function. It is also used to make some calculations easily readable like (3+4)*(3-2)
   2. {} is used to create a block of code. We use these wherever we have a logical grouping of code. For example, we use them after if, for, and while statements. We also use them to start and end a function and a class.
   3. [] is used in arrays. In order to denote the 0th element in an array named x, we use x[0] , x[1] to denote the first element, and so on.
4. Generally, the names of classes start with capital letters. This is more of a convention. Whenever you see a new word starting with a capital letter, you can be sure it is a class and someone is creating an object with it.
5. Generally, the names of functions start with small letters. This is also a convention that most people follow. For example, a function may be named as getAllNumbers(). Note that it starts with a small letter but a capital letter is used to start every subsequent word. This way of writing a function name is called Camel Case. Whenever you see a camel case, followed by a ( then think it is a function.
6. While reading a piece of code, if you encounter a word or symbol that you don’t know already, and you know it is not a class or a function, it could be a keyword of the language. You could learn more about that keyword by doing a Google search of the word prefixed by the language name. For example, when you encounter a word break in a Java code, you could know what it is by googling the “Java break keyword”.
7. Even better, each language has a very small list of keywords. You can google the language’s keywords list and refer to their official documentation too. If that doesn’t help, there is a last resort of posting in some communities like our TCC discussion forums or Stackoverflow.
8. In recent times, Javascript developers use a new way of defining a function without using the function keyword. They use an arrow operator (=>) instead. It takes a while to get used to the new syntax. This happened to me also. So don’t panic when you see a function without a function keyword. Here is an example of how to write the same function using the arrow operator.

// Function we know
function (a){
  return a + 100;
}

// Arrow Function for the same
// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
}

//This code is copied from developer.mozilla.org

More Mindset Hacks

1. Infer the functionality by names of classes. You don’t have to read the code of every class to infer what it is for. For example, whenever you see a line x = new InterestCalculator(), it is ok to assume that there is a class InterestCalculator and it houses the functions to calculate interest. This means that you zoom in to the definition of InterestCalculator class only when you cant guess what it is, or if you are curious about aspects of its implementation.
2. There is no shame in asking for help. If you do not understand what a code does, talk to your colleague, your community (like our Tech Coach Circle) or the author of the code. Stackoverflow built its entire operating model based on the fact that coders don’t shy to ask for help. The people who ask questions in Stackoverflow are not just beginners. For example, on this page, a Stackoverflow user with huge karma (65000+) asks a question. If they can ask for help, we certainly can 😃
3. As a beginner, spend 5 minutes and read at least one function or class every day until you get comfortable reading code. You can find other people’s codes on Github for free. Use them as your practice ground.
4. What you know now (and everyone else knows) is only the surface. An average professional coder may know a little more deep than you, but it is still top layer of the surface when compared to how deep things can go in coding world. No one knows every single thing.
5. Fortunately, to be in the industry, it is enough to cover very less depth from the top and then be ready to learn whenever the need arises. Build the familiarity with core concepts and use Google or communities to ask for help when you see unfamiliar code.
6. Teach yourself how to search online. This is a huge topic and a potential new blog post for future but you can start from here. Most of the success in the modern world comes to those who know how to search for anything and not to those who know everything.

Practice Exercises

1. Read this file and try to make sense of it.
2. Does this class make sense to you?
3. Search for any code on Github and make sense of it. It will be difficult at first. So don’t worry. Do this every day at your own pace. You will be amazed at how much you learn by investing 5-10 minutes every day, with the basics set by this blog post series.

This brings us to the end of this series on how to read code. Hope you enjoyed it! Thanks for reading.

Hey 👋 liked the stuff here?

Subscribe to updates from Tech Coach Circle here.