Objects, Arrays, Loops & TDD Copy

Introduction to Objects

Objects are a very important part of the JavaScript language. Although simple and even intermediate tasks can be accomplished without them, any real project that you are going to attempt is going to feature Objects.

In this topic we are going to cover the basics and later on we will dive deeper.

Learning Objectives

• The syntax of declaring and creating an object.
• How to :
  • Add new properties.
  • Access object’s properties.
  • Change the value of any key.
  • Delete any property from your object.
  • loop over your object properties using (for … in) loop.
• What are the differences between bracket notation and Dot notation .
• Object methods, Object.keys(),Object.values() and other methods

Study

Let’s get started!

1. This JavaScript.info article is the best place to get started with Objects.

2. The MDN tutorial isn’t bad either, so check it out if you need another take on the subject.

Introduction to Arrays

As the scripts get more complex we are going to need a way to deal with large quantities of data. Fortunately JavaScript, apart from numbers and strings, has a couple of data types that are used for just that. An Array is simply an ordered collection of values (Strings, Numbers, other Arrays, etc.).

Learning Objectives

• What is an array.
• How to:
  • create an array.
  • finding the length of an array.
  • Accessing and modifying array items.
  • Adding and removing items.
  • Accessing every item in your array.
• Zero indexed array.
• Arrays’ methods -> .shift(),.unshift(),.push(),.pop(),.slice(),.splice() and others.

Study

Watch this short introductory video on Arrays by Code.org:

Duration: 4 minutes

1. Carefully go through the JavaScript Arrays tutorial at W3Schools and make sure to practice the concepts on your own coding environment. Try as many examples as possible for every concept mentioned in the tutorial and don’t forget to complete the quizzes at the end of the page. (Estimated reading and practicing time: 8~10h)

Some things to be aware of while going through the tutorial:

Avoid using var to declare variables in JavaScript. Prefer the modern and safer let keyword. You will learn more about the distinction at later chapters and live sessions.

Avoid using vague and meaningless variable names such as x or y as mentioned in the tutorial. Always prefer meaningful and descriptive names. See examples below:

BAD

var x = cars.length;   
var y = cars.sort();   

MUCH BETTER

let carsLength = cars.length;   
let sortedCars = cars.sort();   

2. Read the JavaScript Array Methods post at W3Schools which covers some of the most useful built-in array methods. These fundamentals are something you’ll use every day, so don’t rush too much and miss out! Practice as much as you can on each concept, create your own examples, try to think of real-life applications for each method and don’t forget to complete the quiz at the end of the page.

The same best practices mentioned above (avoid var, use meaningful variable names) apply to this tutorial also.

You can play around with this codepen we created to get a better understanding of how the Array splice method works.

NOTES: If you are unaware of the following command mentioned in this tutorial, here’s a short explanation of what it does:

document.getElementById("demo").innerHTML = fruits;

This command searches through the document (our HTML page), for an element with id demo and replaces its HTML content with the contents of the fruits variable.

For example, let’s say we have the following HTML content in our document:

<div id="target">Some content here</div>

The following code will replace the current HTML content of this div (Some content here) with <strong>JS rocks!</strong>:

let content = "<strong>JS rocks!</strong>";
document.getElementById("target").innerHTML = content;

The getElementById command is part of the so-called DOM Manipulation API, a fancy word for the set of JavaScript commands available to us for manipulating our page’s HTML and CSS (adding elements, removing elements, creating elements, updating the elements’ content, and much much more). This is the true power of JS.

Intermediate/Advanced Array Magic

Arrays are not only a handy way to store data but also have a set of functions for manipulating that data. These functions are very important and once you start using them you will see that the possibilities of what you can do with them are near endless.

Objectives of these section:

• Learn about the forEach Array method

• Learn about the filter Array method

• Learn about the map Array method

• Learn about the sort Array method

• Learn about the reduce Array method

1. Start out by watching the video JavaScript Array Cardio Practice – Day 1 from Wes Bos.

Duration: 24 minutes

To follow along clone the JavaScript30 repository.

2. Watch and code with Part 2 of Wes Bos’s array series.

Duration: 8 minutes

Introduction to Loops

Programming languages are very useful for completing repetitive tasks. Fortunately computers are able to solve problems that involve lot of calculations multiple times. Something that will take a human hours to complete, computers can do that in a few seconds. As expected the speed depends on the complexity of the calculation as well as the computer itself. A way to make a computer to do a repetitive task is using a loop.

1. Read this MDN article: Looping Code. This article is a long one, but make sure you tackle the ‘Active Learning’ sections at the bottom of the page.

2. This article has the same info as the previous one but in slightly different context JavaScript.info

Introduction to Test Driven Development

Test Driven Development (TDD) refers to the practice of writing automated tests before completing the entire code. In other words, you write some code and then you test it before you write more code.

For example let’s say you want to write a function that multiplies two numbers and returns their product. With the TDD approach you should first write a test that uses that function and gives the expected output. As expected the test will fail before you write the code and when the tests pass then you know that your code works correctly.

In the example above if we had a simple function such as multiply(2, 2) it wouldn’t be a big deal to check the function ourselves. We would have to run the code over and over again plugging in different numbers until we were sure that it was working. However what would have happened if we had a much more complicated function, for example a function that checks whether or not someone has won a game of tic tac toe gameWin(["o", null,"x",null,"x",null,"x", "o", "o"])? We would have to play multiple games against ourselves to check that the function is working correctly!

For this reason TDD is a much more productive than writing code without tests. Later in this course we will teach you how to write these tests.

In the exercises we have the tests already written out for you. All you have to do is read the specs and write the code that makes them pass! The very first exercise (01-helloWorld) is intentionally very simple and walks you through the process of running the tests and making them pass.

Want MORE practice?

You really can’t spend too much time reviewing and practicing the fundamentals that we’ve covered here and luckily for you there are several websites that offer just this type of thing. Seriously, the better you grasp and the more fluently you can use the fundamental building blocks of JavaScript, the easier the hard stuff is going to come to you when we get to it. Take a minute to check out the following links.

• Exercism – Uses a neat command-line interface to download and submit exercises and allows you to give and get feedback on your solutions.

• CodeWars – A neat gamified system with leveled exercises. As you complete more exercises you level up and access more difficult ones.

• HackerRank – Similar in setup to CodeWars, but this site is more focused on interview question type tasks. Some companies even use this site to interview candidates.