Fundamentals: Part 4 (v1)

Fundamentals: Part 4 (v1)

Arrays

Strings and numbers may be our building blocks but as your scripts get more complex you’re going to need a way to deal with large quantities of them. Luckily, JavaScript 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.).

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

Duration: 4 minutes

Watch this recorded Live Session (04/11/2020) about String and Array Methods

Part 1/3 | Duration: 1 hour

Part 2/3 | Duration: 2 hours

Part 3/3 | Duration: 1 hour

The code and exercises for this live session can be found here: JavaScript: Array and String Methods.

Do you have any questions regarding the concepts and code presented in the videos? Leave your questions and comments on the comments section at the bottom of the page.

  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 fo 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();
  1. 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.

Loops

Computers don’t get tired, and they’re really really fast! For that reason they are well suited to solving problems that involve doing calculations multiple times. In some cases a computer will be able to repeat a task thousands or even millions of times in just a few short seconds where it might take a human many hours. (obviously speed here depends on the complexity of the calculation and the speed of the computer itself). One way to make a computer do a repetitive task is using a loop

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

  2. Once again, same info, slightly different context from JavaScript.info (Skim the info if you think you know it all, but don’t forget the tasks at the end of the page. You learn best by doing)

Test Driven Development

Test Driven Development (TDD) is a phrase you often hear in the dev world. It refers to the practice of writing automated tests that describe how your code should work before you actually write the code. For example, if you want to write a function that adds a couple of numbers, you would first write a test that uses the function and supplies the expected output. Before you write your code the test will fail, and you should be able to know that your code works correctly when the tests pass.

In many ways TDD is much more productive than writing code without tests. If we didn’t have the test for the adding function above, we would have to run the code ourselves over and over, plugging in different numbers until we were sure that it was working… not a big deal for a simple add(2, 2), but imagine having to do that for more complicated functions, like checking whether or not someone has won a game of tic tac toe: (game_win(["o", null,"x",null,"x",null,"x", "o", "o"])) If you didn’t do TDD then you might actually have to play multiple games against yourself just to test if the function was working correctly!

We will teach you the art of actually writing these tests later in the course. The following exercises 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.

Exercises

Complete the following exercises found in the repository here and submit the Quiz.

UPDATED: 27.11.2020

  • [27.11.2020] Added codepen to better understand Array.prototype.splice