DEV Community: ChooKing

Alien Fugitive

ChooKing — Sat, 28 Sep 2024 21:35:46 +0000

This is a submission for the Web Game Challenge, Build a Game: Alien Edition

What I Built

This is a game in which an alien fugitive is being hunted by UFOs that drop deadly spores. The goal is to dodge/destroy the spores and shoot down UFOs.

Demo

Journey

I originally built a different game with similar mechanics using KaboomJS a few years ago. For this current challenge, I built it in pure vanilla JS.

Counting things in Javascript

ChooKing — Wed, 07 Aug 2024 21:17:26 +0000

If you want to count how many items of a specific variety are in an array, you could filter that array and check the length of the result.

const letters = ['a','b','b','c','c','c'];
const numberOfC = letters.filter(letter => letter === 'c').length;
console.log(numberOfC); // 3

This has a time complexity of O(n), which is the theoretical ideal for this type of problem. It does use some extra memory to hold a second array, but for counting only one variety of items, this is a common approach and efficient enough in most situations. However, it is not an efficient approach if you want counts of every variety of items in the array.

The problem with filter

If we wanted counts not only of 'c' but of every letter in the array, the naive application of this technique would be something like this:

const letters = ['a','b','b','c','c','c'];
letters.forEach((letter, _, arr) => {
   const count = arr.filter(otherLetter => otherLetter === letter).length;
   console.log(letter, count);
});

This produces the following output:

a 1
b 2
b 2
c 3
c 3
c 3

The counts are correct, but there is redundancy, which can be fixed by first using a Set.

const letters = ['a','b','b','c','c','c'];
const uniqueLetters = new Set(letters);
for(const letter of uniqueLetters){
   const count = letters.filter(otherLetter => otherLetter === letter).length;
   console.log(letter, count);
};

The resulting output has no duplicates:

a 1
b 2
c 3

However, it does have a time complexity of O(n^2), because each filter iterates through the whole array, and it must do that for each unique letter.

A more efficient approach

It is possible to perform this count with O(n) time complexity. The general principle is to iterate the array only once. For each item encountered, check if you already have a count for that item. If you do, increment it by 1. If you don't, add a count for that item with a value set to 1.

Javascript has two different mechanisms that are suitable for storing the counts. We can use objects or Maps. Note that this is a reference to the Map data structure and not the map() method of arrays. Using a Map is more efficient, but using objects for this is still quite common, so we will look at how to count with both.

Counting with a Map

const letters = ['a','b','b','c','c','c'];
const counts = new Map(); // Creates an empty Map
letters.forEach(letter => {
    if(counts.has(letter)) {//Determine if the letter already has a count
        counts.set(letter, counts.get(letter) + 1);//Increment existing count
    }
    else counts.set(letter, 1);//Set new count to 1
});
console.log(counts); //Map(3) { 'a' => 1, 'b' => 2, 'c' => 3 }

The has() checks if the value is already in the Map. The set() stores a value in the Map, either creating a new value or overwriting an existing one. The get() obtains the current value. Note that has(), set(), and get() are O(1) time complexity, because a hash is used internally.

If we wanted to later extract a specific letter's count, we could do something like:

console.log(counts.get('c'));//3

Counting with an object

Although counting with objects is slower, the difference in performance might not be noticeable if you aren't counting a tremendous quantity of items. Objects also have more browser support than Maps, although that difference has becomes almost inconsequential at this point. According to caniuse.com, Map is supported in 96.28% of browsers at the time of this writing. Objects are an integral part of the Javascript language and should have 100% browser support, but caniuse.com does not have a listing for it. The main reason for learning how to use objects for counts is because a lot of old code exists that use this technique. Some people who learned from old code also write new code using this approach.

const letters = ['a','b','b','c','c','c'];
const counts = {};//Create empty object for holding counts
letters.forEach(letter => {
    if(letter in counts) {//Check if the count exists
        counts[letter]++;//Increment the count
    }
    else counts[letter] = 1;//Set new count to 1
});
console.log(counts);//{ a: 1, b: 2, c: 3 }

This code follows the same structure as the code using a Map. The differences are in syntax for Maps and objects. The "in" keyword is used to test if the object has a key with that name. Bracket syntax is used both to get and set the values. Note that testing for membership, setting, and getting values from an object are O(1) time complexity operations, because objects internally use a hash for the keys.

The problem of counting objects

If the things that you are counting are objects, extra care is required. Maps are capable of storing objects as keys, and they preserve the type, but that creates a problem for equality comparison if you have a totally different object that has all the exact same keys and values.

const m = new Map();
m.set({name: "John"}, 5);
console.log(m.has({name: "John"}));//false

This code outputs "false", because the two objects do not have referential equality. The two objects are identical in keys and values, but they aren't the exact same object.

const m = new Map();
const obj = {name: "John"}
m.set(obj, 5);
console.log(m.has(obj));//true

This version of the code outputs "true", because the value set is the exact same object being tested for membership.

The result of trying to count objects with Maps in most cases is all objects will end up with a count of 1, because every has() returns false.

Using objects for counting objects has a related but slightly different problem. Object keys are automatically coerced to string (Except when they are symbols). If you try to use an object as the key of another object, that type coercion creates a key equal to "[object Object]".

const obj = {name: "John"}
const count = {};
count[obj] = 5;
console.log(count);// { '[object Object]': 5 }

The result of trying to count objects using objects is you will end up with an object that has "[object Object]" as the key, and the value will be the total number of all the things that were counted. There won't be any individual counts, because every item is treated as "[object Object]".

How to count objects

It is not common that you would need to count objects. If the need arises, the solution depends on whether or not the objects have a unique property that is guaranteed to be unique. For example, objects that have an id number could be counted by counting the id number occurrences instead of counting occurrences of the whole object.

const employees = [
    {id: 1, name: "John"},
    {id: 1, name: "John"},
    {id: 2, name: "Mary"},
    {id: 2, name: "Mary"},
    {id: 2, name: "Mary"},
]
const counts = new Map();
employees.forEach(employee => {
    if(counts.has(employee.id)) {
        counts.set(employee.id, counts.get(employee.id) + 1);
    }
    else counts.set(employee.id, 1);
});
console.log(counts);//Map(2) { 1 => 2, 2 => 3 }

This only gives counts with ids and an extra lookup would be needed to associate the counts with names, but we can fix that with a bit more code:

const countsWithNames = [];
for(const count of counts) {
    const employee = employees.find((employee) => employee.id === count[0]);
    countsWithNames.push({employee, count: count[1]});
}
console.log(countsWithNames);

The resulting output is:

[
  { employee: { id: 1, name: 'John' }, count: 2 },
  { employee: { id: 2, name: 'Mary' }, count: 3 }
]

If there isn't anything like an id that guarantees uniqueness, the only remaining practical option would be to first convert the object to JSON.

const people = [
    {name: "John Doe", age: 25},
    {name: "John Doe", age: 25},
    {name: "Mary Jane", age: 24},
    {name: "Mary Jane", age: 24},
    {name: "Mary Jane", age: 24}
]
const counts = new Map();
people.forEach(person => {
    const personString = JSON.stringify(person);
    if(counts.has(personString)) {
        counts.set(personString, counts.get(personString) + 1);
    }
    else counts.set(personString, 1);
});
console.log(counts);

The resulting output is:

Map(2) {
  '{"name":"John Doe","age":25}' => 2,
  '{"name":"Mary Jane","age":24}' => 3
}

Note that there are limitations to this approach. For example, objects with circular references cannot be stringified using JSON.stringify().

Counting non-array items

Both the techniques for counting with Maps and for counting with objects can be used to count anything, as long as you can find a way to iterate through the items. Some types of data can be converted to an array, for example, strings can be split, and keys of objects can be accessed as an array via Object.keys().

There are also some iterables that don't need to be converted into an array. For example, it's possible to iterate through the characters of a string by using an index. The same principle can be used in array-like structures like HTML Collections.

The JS string replace() method

ChooKing — Thu, 25 Jul 2024 20:42:21 +0000

Intro

The string replace() method is typically learned by Javascript students early in their studies, but only the basic form of usage is covered at that time, and the topic is usually not revisited later on. As a consequence, many Javascript developers only use it in its most basic form.

Basis Usage

The basic usage of replace() involves passing it two strings. The first is the string that is being replaced, and the second is the string that is used to replace it.

const strOriginal = "The quick brown fox jumps over the lazy dog.";
const strReplaced = strOriginal.replace("jumps", "flies");
console.log(strReplaced);

That produces this output:

The quick brown fox flies over the lazy dog.

Regular Expressions

Instead of providing a string as the first parameter to replace(), it is also possible to provide a regular expression.

const strOriginal = "The PIN is 1234."
const strReplaced = strOriginal.replace(/\b\d{4}\b/, "<redacted>");
console.log(strReplaced);//The PIN is <redacted>.

The \d matches a digit, and the {4} matches exactly 4 of them. The \b at the beginning and end match boundaries. This prevents matching parts of numbers longer than 4 digits. In real world use, you might need extra code to distinguish the 4 digit sequence from part of a phone number or credit card number, but I left that out, because this is not intended to be a regex tutorial.

Replacer Function

The second parameter to the replace() method can be a function. Whatever this function returns is used to replace the matched text specified in the first parameter. This works both with strings and regular expressions provided as the first parameter.

When the first parameter of replace() is a string or a regex without capture groups, the replacer function is passed 3 parameters in the following order:

matched text
position of match
original complete string

If the first parameter of replace() is a regex with capture groups, the second and all subsequent parameters, except the last two, will be the captures. The second to last will be the position of the first capture and the final parameter will be the original full string.

If a regular expression is used with the global flag, the function is called once for each match that is found.

The replacer function is less often accompanied by a string as the first parameter of the replace(), because a string is a constant value, so it's generally possible to pre-compute the substitute for it. However, it can be used with a string to do something like this:

const names = ["birds", "dogs", "cats", "pandas"];
const str = "We hold these truths to be self-evident, that all <ANIMALS> are created equal."
const strReplaced = str.replace("<ANIMALS>",
    ()=> names[Math.floor(Math.random() * names.length)]
);
console.log(strReplaced);

This replaces "<ANIMALS>" with a randomly selected string from the names array to produce a random sentence like this:

We hold these truths to be self-evident, that all dogs are created equal.

Combining RegEx with Replacer Function

The real power of the replacer function comes from combining it with a regular expression as the first parameter of the replace(). Because regex can match patterns, it can match strings that aren't known in advance, so a function might be needed to handle the matched text to produce its replacement.

Here is an example of converting snake case to camel case:

const snakeStr = "my_favorite_variable_name";
function snakeToCamelCase(str) {
    return str.replace(/_(\w)/g, function(_, letter) {
        return letter.toUpperCase();
    });
}
console.log(snakeToCamelCase(snakeStr)); //myFavoriteVariableName

The \w matches a single character of text. It comes after an underscore in the regex, so it will match the first letter after an underscore. Parentheses are used to create a capture group which contains only this letter without the underscore as part of the string. (It would be simple to just take the second character of the match, but I wanted to illustrate capture groups.) This letter is received by the replacer function as its second parameter, and it is then capitalized and returned as a substitute for the whole substring that originally consisted of underscore and letter, so this erases the underscore and capitalizes the letter that comes after it.

Here is another example that converts hex color codes to rgb colors.

const css = `body{
    background-color: #88FF00;
    color: #0d2651;
}`;
const hex2RGB = str => str.replace(/#[0-9A-F]{6}/ig,(hex)=>{
    return "rgb(" +
        //skip first character which is #
        parseInt(hex.substring(1,3), 16) +
        ", " +
        parseInt(hex.substring(3,5), 16) +
        ", " +
        parseInt(hex.substring(5,7), 16) +
        ")";
});
console.log(hex2RGB(css));

The resulting output is:

body{
    background-color: rgb(136, 255, 0);
    color: rgb(13, 38, 81);
}

The regex matches the # followed immediately by exactly 6 hexadecimal digits, which are defined as character 0 through 9 and A through F. The i flag is used to ignore case, so it works both for upper and lower case. The replacer function takes substrings from the hex code and parses them to produce decimal numbers, and these numbers are placed in between "rgb(" and ")" to produce the rgb() colors.

Conclusion

There are many ways to modify an existing string, but using the replace() method is often a good choice when the goal is to substitute substrings based on content instead of position. Without it, the typical solution involves first searching the position of a substring, followed by splitting the string at that point and concatenating with a substitute, and that is not efficient.

Object Mutability in Javascript

ChooKing — Fri, 19 Jul 2024 21:10:01 +0000

Object Mutability

Mutability is the ability to change a value. A mutable value can be changed, and an immutable value cannot be changed. A common misconception is that the "const" keyword makes a variable immutable.

const

In actuality, "const" only prevents reassignment. For non-object types, values can only be changed via reassignment, so declaring them with "const" actually makes them immutable. Consider, for example, the following code:

const num = 5;
num = 7; // illegal reassignment of const variable

There is no way to change the value of num in this code. Note that using ++ or -- are still considered to be reassignments, and that is indicated in the error message if we try to use them on a variable declared with const.

const num = 5;
num++;//illegal reassignment of constant

The resulting error is:

Uncaught TypeError: Assignment to constant variable.

const objects can be mutable

Objects are fundamentally different in regard to mutability in that their values can change without reassignment of the variable. Note that reassignment of properties is not prevented by "const". Only the variable name is prevented from reassignment.

const obj = {num: 5};
obj.num = 7; //legal
obj = {num: 7}; //illegal reassignment

Objects can also have methods that change the internal values.

const obj = {
    num: 5,
    increment(){
        this.num++;
    }
}
obj.increment();
console.log(obj.num); //6

Making an object immutable

It is possible to make an object actually immutable by declaring it with "const" and using Object.freeze().

const obj = {num: 5};
Object.freeze(obj);
obj.num = 7; // doesn't change
console.log(obj.num);// still 5

Note that if we use strict mode, the attempt to change the num value would actually cause a crash with the following error message:

Cannot assign to read only property 'num'

The use of Object.freeze() without "const" is already sufficient to make this object immutable. However, it doesn't make the variable name immutable.

let obj = {num: 5};
Object.freeze(obj);
obj = {num: 5}; // new object with old name
obj.num = 7; // changes successfully
console.log(obj.num);// 7

What happens in this version of the code is that obj gets reassigned. The freeze() was applied to the previous object that shared the same name, but the new object was never frozen, so it is mutable.

Sealing objects

There are times when you might want to allow values in an object to change, but you don't want to allow adding or removing properties. This can be achieved by using Object.seal().

let obj = {num: 5};
Object.seal(obj);
obj.num = 7; // changes
console.log(obj.num);// 7
obj.newValue = 42; //cannot add new property to sealed object
console.log(obj.newValue);//undefined
delete obj.num; //cannot delete property from sealed object
console.log(obj.num);// still exists and is 7

Granular control

Freezing and sealing apply to the whole object. If you want to make specific properties immutable, that can be done using defineProperty() or defineProperties(). The choice between these two depends on if you want to affect a single property or multiple properties.

const obj = {};
Object.defineProperty(obj, 'num',{
    value: 5,
    writable: false,
    configurable: false
});
obj.num = 7; // Cannot change value because writable is false
delete obj.num; // Cannot delete because configurable is false
console.log(obj.num);//Still exists and is 5

A new property is being defined in this example, but defineProperty() can also be used on an existing property. Note that if "configurable" was previously set to false, it cannot be changed to true, but if it was originally true, it can be set to false, since this change counts as a type of configuring.

Conclusion

In most cases, you won't need to guarantee that an object is immutable. When such a need arises, it's generally sufficient to freeze the object, but we have additional options for finer controls if such needs arise.