Spelchan.com Logo

From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 7.2: Arrays and Objects Overview

This chapter covers two important concepts. Arrays are a way of storing multiple items in a single variable using indexes to access the item that you want. I have separated it from the first section on programming as many people have a stumbling block here, and it is possible to solve a lot of problems without using it. For instance, the tic-tac-toe can be created without an array, though the use of an array makes creating this project much easier.

JavaScript has an incredibly powerful Array class allowing for you to easily use the array as you would other data structures. While data structures is a bit beyond the scope of this book, we will briefly look at what can be done with the Array class. This then naturally leads into multi-dimensional arrays and associative arrays where you use values and keys to store data. As you will discover, associative arrays lead directly to JavaScript objects.

Object-Oriented programming has become the predominant way of developing software today. While there are some people who believe that object-oriented programming (OOP) is a misstep, there are also people who quite dogmatic about OOP. Both Universities I have attended tend to favor the OOP approach but there is starting to be a look at the alternatives to OOP, with a return to procedural programming and functional programming both gaining traction. I am a bit more flexible when it comes to programming believing that methodologies, like languages, are tools and one should try and use the appropriate tool for the problem they are dealing with.

Object-Oriented approaches are so common, however, that no matter what your stance on OOP is, you should at least be familiar with the concepts behind it. This section of the book looks at the core OOP features that JavaScript supports. Unfortunately, like a lot of things about JavaScript, things are not as straightforward as they should be. While JavaScript has always had support for Objects, the language itself did not explicitly support OOP constructs until the ECMAScript 6 standard was released. This means that older browsers do not support the new language keywords but there are a shrinking number of people who use those browsers. It also means that there is a lot of legacy code out there that does OOP the hard way. These techniques are still valid, so it is wise to at least be familiar with them.

In this chapter, we will look at several OOP related concepts looking at what the idea behind the concept is, how ECMAScript 6 supports that concept, and the "old" way of handling the concept. We will look at how to create stand alone objects then take a look at creating classes that let you create many instances, each it’s own object but all sharing the same structure.

One of the more powerful, albeit over-abused, features of OOP is the use of inheritance. This allows you to create new classes based off existing classes without needing to write most of the functionality and will be explained in the "Inheritance" section. Polymorphism is how OOP languages take advantage of inheritance by letting you use a child class in place of a parent class. JavaScript uses a variant of polymorphism known as Duck Typing which gives you a lot of flexibility and power but has some downsides. These issues will be covered in "Polymorphism and Duck Typing".

JavaScript handles classes a bit different from most other object-oriented languages. This leads to a strange issue when trying to use an objects function as a call-back. This issue can be solved using something known as binding, which we will explain in a section strangely named "Binding".

What allows JavaScript to bind functions is a very powerful construct known as a closure. Closures can be a bit confusing, and you may not want to use them in your programs, but they are an important JavaScript technique so I will be covering them in the "Closures" section.

Finally, before we get to our project, we will be looking at a data transfer format known as JSON which is built on top of JavaScript Objects.

Chapter contents

Chapter 7 Contents

7.1 Arrays and Objects Cheat Sheets

A cheat sheet covering the topics in this chapter.

7.2 Arrays and Objects Overview

A breakdown of the chapter topics.

7.3 Arrays

Arrays allow you to store a list of items as a single variable.

7.4 Tic-Tac-Toe with Arrays

Target release date July 6th, 2025

7.5 Multidimensional arrays

Target release date July 13th, 2025

7.6 Associative arrays

Target release date July 20th, 2025

7.7 Creating Objects

Target release date July 27th, 2025

7.8 Constructing Classes

Target release date August 10th, 2025

7.9 Inheritance

Target release date August 17th, 2025

7.10 Polymorphism and Duck Typing

Target release date August 24th, 2025

7.11 Binding

Target release date September 7th, 2025

7.12 closures

Target release date September 14th, 2025

7.13 JSON

Target release date September 21st, 2025

7.14 Project Threes

Target release date October 5th, 2025

7.15 Project Threes Solution

Target release date October 19th, 2025

← previous section
Arrays and Objects Cheat Sheet
next section →
Arrays
Table of Contents