We are ready for a new lesson in Skillcrush 102. Today’s lesson tackles objects and functions. Objects and functions are very important programming concepts. You won’t just be writing them in your Skillcrush projects.

You will be using them often throughout your coding journey. In this post, you will learn how objects and functions work as well as get a chance to write some of your own. We are doing some more project prep for phase one of Skillcrush 102.

Today we will be switching gears from the LOL Cat Clock and preparing the magic 8 ball project, the second project in Skillcrush 102. Skillcrush says the magic 8 ball is a great project for newbies to build first since it covers important programming concepts such as objects, functions, and arrays. We’ll cover arrays in a future post, but we will look at objects and functions today.

You will be using what you learn about objects and functions to set up most of the functionality of our project. By the end of this post, you’ll have most of the magic 8-ball pseudocode written.

What is a magic 8 ball?

Magic 8 balls are a toy that looks just like an 8 ball seen on a billiard table. This toy is made of plastic and has blue liquid inside. A plastic die is inside the ball and has different answers written on the die.

These toys allow people to get answers to yes-no questions. To use a magic 8 ball, you just ask a yes-no question to the ball. You shake the ball then flip it over to look at the small plastic window at the bottom of the ball.

The die will then reveal one of the possible answers to your question. A good example of a magic 8 ball in action is in the movie Toy Story. In the movie, Andy’s mom is taking the family to Pizza Planet. When she tells Andy he can take one toy with him, Woody uses the magic 8-ball toy to see if he will be the one chosen to go with Andy.

Objects

Let’s begin this lesson with objects. Objects can be anything in the real world. As you think of some real-life objects, a common thing you might notice is that each object has different characteristics that make it easy to identify.

You will think about lots of characteristics for objects, but remember the abstraction principle from the 4 principles of computational theory. For example, take a look at candy bars near the magazines at the check-out areas at grocery stores. Candy bars are objects.

Yet each candy bar is made of different characteristics that make them stand out from each other. Some of these characteristics you might notice about candy bars are the following:

• Sweetness
• Shape
• Number of calories
• Ingredients
• Low fat
• Sugar-free

Let’s take a look at another real-life example. A house is a real-life object. As you drive by houses, you can see the characteristics that make a house object. Some of these characteristics you might notice in a house are below.

• Exterior
• Roof
• Number of stories
• Number of bedrooms
• Number of bathrooms
• Number of other rooms

These characteristics are something houses have in common. There are going to be minor differences between them such as how many stories or materials make up a house. Despite these differences, the characteristics still help people identify objects like a house and what characteristics make up a house.

How do objects work in programming?

Objects appear in code too! Like their real-life counterparts, they can be anything. It just depends on what the algorithm wants.

When developers use objects in web projects, an object’s characteristics are called properties. Properties still help developers identify an object as well as being used later as variables. For example, let’s revisit the peanut butter and jelly sandwich algorithm we wrote earlier in this course.

The sandwich we created in that algorithm is an object. To help the computer identify the peanut butter and jelly sandwich as an object, we created properties for our sandwich object. Some of these properties were the type of bread, jam, peanut butter, and slices of bread being used.

If the computer were to run this algorithm, users might change the values of the sandwich properties. You might see users want a different type of bread or jam to make their sandwiches. Although the property values will change, the sandwich itself won’t change. The computer understands that these properties are still creating a peanut butter and jelly sandwich.

So how would objects look on the web?

A good example of objects in action is blogs. Blog posts have lots of properties that make up their identity. Some of the properties that come to mind are the title, publish date, and content.

While these property values will vary for every blog post, the computer still can identify the blog post as an object thanks to these properties. Another good example is social media. It doesn’t matter what social media platform you visit.

The posts people write are objects with many properties. Tweets on Twitter have properties such as publishing dates and character numbers. Regardless of how many tweets you post, the properties still let the computer know they are creating a tweet object.

You’ll be using objects in our Magic 8 ball as well as our election map project later. In our magic 8 ball, you’ll be using objects to make our magic 8 ball and properties for the magic 8 ball. The political candidates for the election map project are objects and will have properties that help identify each of the candidates.

Objects in Pseudocode

Here’s an example of how objects might look like in pseudocode. When we write an object, we will use the object keyword in our pseudocode. This indicates we are creating an object.

In this example, we are going to create a house object. So after our object keyword, we name the object house. Next, we will want to create the properties of a house.

For every property, we will use the property keyword. The property keyword means that there will be object properties. They are indented underneath the object. Below is what the house object and properties would look like.

OBJECT House
    PROPERTY exterior
    PROPERTY paint color
    PROPERTY roof
    PROPERTY stories
    PROPERTY bedrooms
    PROPERTY bathrooms
    PROPERTY other rooms

As you make objects in JavaScript, you will be able to give new values to different versions of the objects you create. So if we wanted to create a bunch of houses using our house object, we could give new values for the properties in each house object. A developer can give new values to the exterior, roof, and stories of the house for each new house object that is made. You can learn more about instances in the objects below.

==> Click to read the answer to What is an instance of an object in JavaScript!

Challenge: Defining the Properties of a Chair

How to Define Properties of a Chair

Sarah Dye ・ Jul 5 '21

#skillcrush

Challenge: Write out the Magic-8 Ball Instructions

How to Write Out the Magic 8-Ball Instructions

Sarah Dye ・ Jul 5 '21

#skillcrush

Challenge: Objects in Magic 8 Ball Project

How to Solve Objects in Magic 8 Ball Project

Sarah Dye ・ Jul 5 '21

#skillcrush

Functions, Inputs, and Outputs

We are getting ready to start turning our written instructions into pseudocode. Before you can move any further with our project prep, we are going to take a break to talk about functions, inputs, and outputs. These concepts aren’t just important to this project.

They are very important programming concepts you will use throughout your coding journey. Developers are constantly using these concepts in this code so today you will be writing the first of many functions, inputs, and outputs in your code.

Functions

Let’s start by looking at the technical definition Mozilla Developer Network uses to define a function. MDN defines functions as “a JavaScript procedure - a set of statements that performs a task or calculates a value.”

==> Click here to read about functions on the Mozilla Developer Network!

When Skillcrush explains functions, they describe them as mini-algorithms that exist inside your main algorithm. These min-algorithms have their own set of mini-instructions to do within the larger set of instructions for the entire algorithm. I think this definition and example can be rather confusing, so here’s another way to think of functions.

A more authentic way of thinking about functions is juice machines. When I was learning about functions for the first time, I learned about this example before I began writing any functions. Juice machines are great examples of functions because these machines put ingredients into the machine to create a finished output.

After the ingredients are put in, the user turns on the machine to create a juice. Functions work the same way since the code inside the function is the ingredients. When a function is turned on, the function performs the actions based on what is written inside the function.

The purpose of any function is to keep groups of similar actions together. Skillcrush wants students to think of putting actions together in little bundles or packages. Developers love functions because they keep code organized so it is easier to use it again later in a project. That means writing instructions once.

Every function is going to be different, but there are some common components you’ll see that make up a function. Three components you will often see with functions are the following:

• Require an input (or a parameter) to run
• Produce an output after they’ve been run
• Call function to get it to work

Remember the peanut butter and jelly algorithm we wrote earlier in phase one? We had to take time to explain concepts such as opening the peanut butter jar and spreading peanut butter to the computer. We later had to repeat these steps when we came to the jelly.

So this meant rewriting the same instructions again just to put jam on our sandwich. Although there’s nothing wrong with explaining these concepts the way we did in our algorithm, you can use a function so you don’t have to copy and paste a lot of code. All you need to do is create functions for opening jars and spreading. This way you can just call these functions later in your code when you want to open any jar or spread anything onto the bread.

How to Write a Function

We are going to be writing some functions in our pseudocode. You can tell the computer what functions will be using the function keyword. This keyword lets the computer know we are going to start making a function.

For example, take a look at the spreading function for our peanut butter and jelly algorithm. The function begins with our function keyword. After the keyword is the name of our function.

Underneath are all the instructions for spreading something over bread. When the function is turned on, the computer will do all of the things inside the function.

FUNCTION spread 
    Take knife
    Dip into peanut butter
    Grab bread
    Place knife with peanut butter on the bread 
    Move knife back and forwards so that peanut butter is transferred to the bread

So when you need to spread peanut butter and jelly, all you need to do is use the spread function instead of rewriting all the instructions inside the function. Notice that this code reduces a large number of lines. That’s why developers love functions. Developers want to make things easier for them too and many prefer to write fewer lines instead of more and functions allow them to do this.

How to Call a Function

So how do you turn on a function? Functions are unique in programming since they don’t just automatically start working on a website. They need to be turned on to get the function working.

Although computers often do what they are told when they read code, this is different when it comes to functions. When it is time to run a function, developers need to call it. This is another way of saying developers are directing a computer on what to do.

Skillcrush encourages students to think of calling a function as activating it. Functions allow developers to run the function only once instead of writing the instructions out every single time. Skillcrush encourages students to think of calling functions similar to being handed a recipe.

If you are handed a recipe to bake cookies, you don’t just start baking cookies. You will only bake cookies if you are given an order to do so by another person. In pseudocode, you can show when a function is being called by using the run function keywords.

These keywords let the computer know you want to turn on your function. So if you want to activate the spreading function in the peanut butter and jelly algorithm, you will put RUN FUNCTION with the name of your function. This lets the computer know you want to start the function.

This is a common mistake developers will often make when they work with functions. Even the most experienced developers are prone to making this mistake. If you don’t call your function, the computer will not know what to do so it will simply skip over that code.

So when your function isn’t working in your code, you will always want to check if you are calling your function. You will see a function called in two different ways on the code. First, you will see it on its own in your code.

For example, if a developer wrote a function for weatherproofing a house, they could call the function at the end of their code using the following line:

RUN FUNCTION Weatherproof house WITH INPUTS House 1, aluminum, Bob’s Allweather

Another way you will see a function being called is inside the set of instructions. A popular way you will see this being used is in an if-else statement. If a developer wants to run their weatherproofing function in an if statement, they just call their function inside the if statement.

IF the house has been built
    RUN FUNCTION Weatherproof house WITH INPUTS House 1, aluminum, Bob’s Allweather
STOP

Inputs

Inputs are what the users will give the computer to make the function work. When developers use inputs in code, they are often referred to as parameters. Parameters help make functions work properly.

If we go back to the spread function we made earlier, you will notice the function will only work for peanut butter. To get the function to work for peanut butter and jelly, we can use inputs to make it work for both peanut butter and jelly. In our spread function, we are going to add the parameters after the name of our function using the with keyword.

When the computer sees with, it will understand that these items will be parameters the user is giving to them to use. We will need two parameters for the spread function. You can use any parameters you like for the spread function, but this example is going to be different since it uses a variable.

One is the bread while the other one is the spreadable item we want to put on the bread. This parameter has to work with both peanut butter and jelly so I’m going to name this parameter breadspread. This parameter will let you use the function for both peanut butter and jelly in the algorithm we are creating.

Once you’ve added the parameters to the function, we need to make changes to our instructions. Inside our instructions, we are going to exchange peanut butter for breadspread. This way the computer can replace breadspread with the variable value later when the code is being run.

Here’s a look at the updated spread function in pseudocode.

FUNCTION spread WITH bread and breadspread
    Take knife
    Dip into breadspread
    Grab bread
    Place knife with breadspread on the bread 
    Move knife back and forwards so that breadspread is transferred to the bread

Now we can turn our attention to the breadspread variable. If I want to spread some jelly on the bread, I just need to set the value of breadspread to jelly. You will want to put any variables you want to use as parameters at the beginning of your function.

This way the computer will know what breadspread variable is before it starts reading the spread function.

breadspread = jelly

FUNCTION spread WITH bread and breadspread
    Take knife
    Dip into breadspread
    Grab bread
    Place knife with breadspread on the bread 
    Move knife back and forwards so that breadspread is transferred to the bread

Feel free to change the breadspread value to anything you want. No matter what you pick, the computer knows exactly what to do. You can change the spread to Nutella, butter, vegan butter, and hummus.

All that is left to do is call our function. When you use inputs in a function, you need to call the parameters along with the function name. If I want to call the spread function, I just add the with keyword after the function name and the parameters.

So you will see the following line at the bottom of your pseudocode to call the spread function.

RUN FUNCTION spread WITH bread & breadspread

Outputs

When you see inputs with a function, you will also need outputs. Outputs are the results being returned to the users after you run the function. Outputs need to be specified very clearly to get the result.

Computers don’t know anything so they need specific details to achieve the result you want. Let’s go back to the spread function we’ve been working on. We might want the computer to give a slice of bread with some spread on it. To get this output, we are going to use the return or output keyword in our pseudocode.

The return or output keywords let the computer know this is what we want to be returned once the function is finished. Here’s the updated pseudocode with the return keyword at the bottom of the function. After the return keyword, you will notice I’m using the parameters I put at the beginning of the function.

So when the computer gets to this line of code, it will show a bread with the spread set in the breadspread variable, giving us a peanut butter and jelly sandwich.

FUNCTION spread WITH bread and breadspread
    Take knife
    Dip into peanut butter
    Grab bread
    Place knife with peanut butter on the bread 
    Move knife back and forwards so that peanut butter is transferred to the bread
    RETURN bread with breadspread

Methods

You can use functions with objects too. When developers use functions with objects, functions get a special name called methods. Methods act the same way as a function.

We only use them with objects. Methods are a type of property because functions become a property inside an object. So you will need to call methods to get them to work inside an object.

For example, let’s go back to the house object. We want to create a function that weatherproofs the exterior of the house. This function uses an object so it will become a method.

It will be one of the properties as part of the house object and we can call on it later to get it to work. Writing a method in pseudocode is similar to how we write a function. We still use the function keyword to let the computer know we are creating a function.

The only difference is when we write our instructions we will be using the object properties throughout the function. If you look at the weatherproof method below, the method uses the house object properties as part of the instructions.

FUNCTION Weatherproof house
    INPUT house, house exterior, and weatherproofing brand
    Use weatherproofing to weatherproof the house exterior
    OUTPUT weatherproofed house
STOP

What do you notice about these functions? After the function keyword is the name weatherproof house. At the end of the function is the stop keyword to let the computer know our method is ending.

Inside these two lines are the instructions for our method. First, we have our inputs. The inputs are the house object and properties.

The properties we are calling are the weatherproofing brand and house exterior. In this example, the function is going to do something. It will apply weatherproofing to the exterior of the house only.

The output will be the weatherproofed house. We can make this method even better. Objects don’t need to put themselves as part of the inputs.

This means in our weatherproofing method we don’t need to put the house as one of the inputs. So let’s remove it from the method.

How to Run a Method

When you want to run a method, you need to make sure the parameters are defined first. After the stop keyword, we are going to define the values as parameters. So after the run function keywords we have the name of our function followed by the with keyword.

Then we will put our values for our inputs. If you take a look at the weatherproof house function, we are going to remove the house as one of the inputs since we already created a House object earlier. After the function, I run the function with the run function keywords.

After the with inputs keywords I put the values for the house exterior and weatherproofing brand. These will be the values we will use for the parameters.

FUNCTION Weatherproof house
    INPUT house exterior, and weatherproofing brand
    Use weatherproofing to weatherproof the house exterior
    OUTPUT weatherproofed house
STOP

RUN FUNCTION Weatherproof house WITH INPUTS aluminum, Bob’s Allweather

When the function is run, it will take aluminum and Bob’s Allweather values and put them in place of the house exterior and weatherproofing brand. The computer will take these inputs and incorporate them into the instructions inside our function.

Challenge: Write your first method!

How to Write Your First Method

Sarah Dye ・ Jul 5 '21

#skillcrush

Challenge: Write out your magic 8-ball method!

How to Write Out Your Magic 8 Ball Method

Sarah Dye ・ Jul 5 '21

#skillcrush

Conclusion

You did an awesome job today with the latest Skillcrush lesson! You learned how objects and functions work in programming. Then you wrote objects and functions yourself.

You also learned how functions work with objects and wrote your first method. You also got a good start on your magic 8-ball prep by creating the object and method. We are almost done with the magic 8-ball prep.

All that is left to do is get the list of answers the magic 8 ball needs to reference when the method is running. This is where loops and arrays come in. Loops and arrays are often used in programming. Up next, you will learn how loops and arrays work in programming and have a chance to write your own before you add them to your magic 8-ball project.

Author’s Note - July 5, 2021

At the time I wrote this post, Skillcrush made big updates to Skillcrush 102. The latest version has removed the phases so the computer science fundamentals we have talked about are no longer part of the course. Instead, it concentrates on JavaScript fundamentals only.

The new version has also replaced the LOL cat clock, magic 8 ball, and election map projects with two new JavaScript projects. Skillcrush has removed the past version of Skillcrush 102 from their website while the new version is currently in beta. Despite these changes, I still plan on covering the walkthroughs for the LOL cat clock, magic 8 ball, and election map projects in the Skillcrush 102 series.

I will also cover all the content in the newest version of Skillcrush 102 including the two new projects included in the course. The format for these posts will remain the same.

This post was originally published on July 5, 2021 on CodeNewbie. I made minor changes to the original post to work here on DEV.