DEV Community: Tyler Meyer

Jest: A Delightful JavaScript Testing Framework

Tyler Meyer — Mon, 10 Feb 2025 08:41:25 +0000

What is Jest?

To quote the Jest Core Team, "Jest is a JavaScript testing framework designed to ensure correctness of any JavaScript codebase." [1] Regarding software development, testing code provides a safety net that can prevent bugs and improve the code written. Setting up team workflows using Test Driven Development and Continuous Integration requires a reliable testing framework. Throughout this article, I will go over the strengths of Jest, the downsides, tips for setting up a test suite, and how to write tests.

The Strengths of Jest

I will compare Jest to another testing framework called Mocha for these strengths. Depending on the use case, developers will find either of these testing frameworks practical, depending on their needs. While critiquing Mocha, I will also point out its strength compared to Jest.

Simplicity

Jest is easier to set up than Mocha. Mocha usually requires additional external tools to create a complete testing suite, while Jest works independently without additional libraries or tools. [2]

Snapshot Testing

Snapshot testing is a Jest tool that ensures the UI does not change unexpectedly. Snapshot testing works by rendering a UI component, taking a snapshot, and then comparing the snapshot to a reference of the expected snapshot alongside the test. [3]

React & TypeScript Integration

Meta initially developed Jest to address their internal testing needs for their chat feature in 2011, which means it was primarily designed to work with React applications. Jest also provides support for TypeScript projects that want to ensure type safety.

Community Support

Jest provides extensive documentation, and with a large community, you will find help with troubleshooting issues and best practices to follow.

The Potential Downsides of Jest

Not as Flexible

Compared to frameworks like Mocha, Jest is less flexible for customized testing scenarios. Since Mocha is designed to integrate with external tools, you can write tests for your specific needs. Creating custom test suites with Jest will require more work, which may cause slower performance.

Performance Concerns

While Jest is generally fast, extensive test suites might sometimes experience performance degradation. To counter this, you can break more extensive tests into smaller, more focused units.

Tips for Setting Up Jest Test Suites

Configure Jest

Jest provides an extensive list of options for configuring the testing framework for your needs, depending on the type of testing you're conducting. I'll provide you with some sample code for testing server endpoints.

// jest.config.js

module.exports = {
  preset: 'ts-jest',
  globalSetup: './setup.ts',
  globalTeardown: './teardown.ts',
};

I prefer to use TypeScript to provide type safety for my code. By installing ts-jest and setting up a preset for it, Jest will recognize when I'm using TypeScript and transpile my code for testing. globalSetup and globalTeardown provide a way to perform actions before and after all test suites have run. In the following two code snippets, I'll set up a test server and then close the server in the teardown.

// setup.ts

import express, { Application } from 'express';
import http from 'http';
import apiRouter from '../../server/api';  

declare global {
  var PORT: number;
  var testServer: http.Server;
}

export default async function () {
  function promiseListen(exApp: Application): Promise<http.Server> {
    return new Promise<http.Server>((resolve, reject) => {
      const server = exApp.listen(PORT, () => {
        console.log(`Server listening on port ${PORT}.`);
        resolve(server);
      });

      server.on('error', (error: Error) => {
        reject(error);
      });
    });
  }

  const PORT = 8000;

  try {
    const app = express();
    app.use(express.json());
    app.use('/api', apiRouter); // Beginning of endpoints to be tested
    let testServer: http.Server = await promiseListen(app);

    globalThis.testServer = testServer;
    globalThis.PORT = PORT;
  } catch (error: unknown) {
    console.error('Failed to start server before testing:', error);
  }
}

// teardown.ts

import http from 'http';

declare global {
  var testServer: http.Server;
};

export default async function () {
  function promiseServerClose(server: http.Server): Promise<void> {
    return new Promise<void>((resolve) => {
      server.close(() => {
        resolve();
      })
    });
  }

  try {
    await promiseServerClose(globalThis.testServer);
  } catch (error: unknown) {
    console.error('Failed to close server after testing:', error);
  }
}

These two code snippets run before and after all test suites. I use the globalThis object to pass the server created in setup.ts to teardown.ts to close the server once our tests are finished. I also pass the PORT number to globalThis to use in my test suites when they request the test server.

If you need a different configuration for another set of tests, you can move your previously created config, setup, and teardown into its own folder along with the test files. In the root directory, you can use one jest config to list the projects to be tested with the jest command as your test script.

// jest.config.js

module.exports = {
  projects: [
    './tests/server' // The new location of the previous code snippets
  ],
};

Jest will go to each project and run the tests using the correct configuration.

Writing Tests With Jest

I will briefly go over two code snippets to show you how to write a test using the Jest testing framework. The first example will be testing for a function. The second example will make use of the test server we created earlier.

// myFunc.ts

export default function myFunc(str: string): string[] {
  return str.split('');
}

// myFunc.test.ts

import myFunc from './myFunc';

describe('Testing myFunc', () => {
  test('myFunc returns something', () => {
    expect(myFunc('abc')).toBeDefined(); // Something is returned
  });

  test('myFunc returns an Array', () => {
    expect(Array.isArray(myFunc('abc'))).toBe(true); // Must be true
  });

  test('myFunc creates an array of correct length', () => {
    expect(myFunc('abc')).toHaveLength(3); // Array's length is three
  });

  test('myFunc creates the correct array', () => {
    expect(myFunc('abc')).toEqual(['a', 'b', 'c']);
    // Recursively check all items in the returned array for equality
  });
});

The outer function describe defines the current test suite. For the test suite to pass, it needs at least one test, and every test must pass. The inner functions test are titled to provide information to the developer when a test doesn't pass. There are several ways to test using expect, and it comes with many "matchers" that let you validate your code.

// tests/server/api.test.ts

import axios from 'axios';
import http from 'http';

declare global {
  var PORT: number;
  var testServer: http.Server;
}

const PORT = globalThis.PORT; // To keep the port consistent across tests

describe('Testing /api Endpoints', () => {
  test ('GET /api/users responds with 200 status code', async () => {
    const res = await axios.get(`http://localhost:${PORT}/api/users`);
    expect(res.status).toBe(200);
  });

  test ('GET /api/users responds with users data', async () => {
    const { data: users } = await axios.get(`http://localhost:${PORT}/api/user`);
    expect(users).toBeDefined(); // Something is sent back
    expect(Array.isArray(users)).toBe(true); // An array is sent back
    expect(users[0]).toBeTruthy(); // The array contains a user
    expect(users[0]).toHaveProperty('username'); // User has 'username'
    expect(users[0]).not.toHaveProperty('SUPER_SECRET_PASSWORD');
    // Does not send back their 'SUPER_SECRET_PASSWORD'
  });
});

Using async/await, we can make asynchronous calls and test the response we receive. In the second test, I used several matchers for one test, which is allowed if you want to check several aspects of one action. I also used the not key for the matchers, which works as you'd expect by negating the expectation.

Conclusion

The technology used in an application is a major consideration in software development. There isn't one perfect testing framework, but Jest is great if you're new to test-driven development and Continuous Integration. With its simplicity, large community, and relatively fast execution, you will be pleased with what you can accomplish with Jest.

Happy Coding!
Tyler Meyer

Sources

[1] https://jestjs.io/

[2] https://saucelabs.com/resources/blog/jest-vs-mocha

[3] https://jestjs.io/docs/snapshot-testing

[4] https://apidog.com/blog/jest-vs-jasmine/

[5] https://jestjs.io/docs/configuration

[6] https://jestjs.io/docs/expect

TypeScript: Learning the Basics + React

Tyler Meyer — Mon, 27 Jan 2025 08:09:50 +0000

In this article, we'll discuss why developers use TypeScript and the basics of its usage. Before we get started, I recently wrote about TypeScript in a previous article. In that article, I explained what it is and how to set up your environment to code with it. If you need a refresher, you can find that article here.

Why Use TypeScript?

When JavaScript was first written, its biggest appeal was its flexibility. The coding language included type conversion for specific operations, allowing developers to create algorithms that could take different data types as inputs and return possibly different outputs. For some, this freedom sounds great, but any experienced developer will point out that this lack of type safety may be its downside. Without type safety, codebases become harder to maintain, and applications become more challenging to scale. Let's quickly discuss a few positives of TypeScript:

Catch Bugs Before They Happen

By requiring developers to use static types for variables and functions, they can ensure that the data they work with is what they expect. When expecting certain types of data, you can create a more reliable algorithm. Once a static type is set, TypeScript can warn you about possible bugs before they even happen. Even the TypeScript compiler will prevent code from compiling if there is potentially a bug. With just a little more code, the code base becomes more reliable.

Scalability & Maintainability

As a codebase grows with additional features or functions, the question of efficiency arises. Will my code be used properly in other modules? How can I be sure that it will work properly? TypeScript. The ability to create types and interfaces helps you ensure that your code is being appropriately used outside of its module. In React applications, you'll pass props from component to component, and some components will be used in different contexts throughout the application. Setting up type safety with components means you can ensure that a component will work properly because you know the data the component should receive. We'll explore these ideas later. Simply put, you can have peace of mind that you will not have to revisit your code multiple times to ensure it works in multiple contexts.

Long Live Your Code

The goal of writing code is for it to be readable by others, not just for it to work. As time passes, other developers will work with your code to scale an application further or perhaps debug an issue. These developers will be entering an unknown codebase, and TypeScript helps them understand the intention of your code and gets them working faster. They'll know the data types you were expecting to input and output. While this may sound simple, the convenience cannot understated. A developer's workflow will improve immediately.

Explicit Typing

The strength of TypeScript is the ability to type your variables explicitly. TypeScript can figure out the type for a variable implicitly, but this leaves the door open for unexpected outcomes if a variable could implicitly have two types, but you only planned for one. Let's take a look at a few examples:

let author: string = "Tyler Meyer";
author = 32; // Type 'number' is not assignable to type 'string'.
console.log(author); // Will not run with the Type Error on line 2

Line 1: We explicitly state that author has type 'string'.
Line 2: We attempt to reassign author to 32, but we are blocked by TypeScript since 32 is a 'number'.
Line 3: This will not be logged until we address the issue on Line 2.

let studentGrades: number[] = [80, 85, 93];
studentGrades.push(88);
studentGrades.push("A"); // Error
studentGrades.push("97"); // Error

Line 1: We initialize an array with some grades for a student, and we explicitly state the array should only contain numbers.
Line 2: This adheres to the type inside the array, so it gets pushed in.
Line 3: An error is thrown because the argument "A" is a string, which is not assignable to the parameter of type "number."
Line 4: *Even though "97" is a number, the data type is a string so it gets rejected.

Aliases & Interfaces

As our codebase grows and we use more complex data types, the type (alias) and interface keywords become very helpful. Aliases can be used on primitive data types as well, but for my example, I'll be using the object data type.

type Author = {
  firstName: string,
  lastName: string,
  age: number,
  lovesCoding: boolean,
};

const coolAuthor: Author = {
  firstName: "Tyler",
  lastName: "Meyer",
  age: 32,
  lovesCoding: true,
};

Instead of using a generic object type, coolAuthor is assigned the Author type. An alias just needs to be defined before being used. Keeping your types in a "types" directory for your project will enable our team members to using these types in their modules and keep your team on the same page.

interface Book {
  title: string,  
  numberOfPages: number,
}

interface Textbook extends Book {
  subject: string,
}

const calculusBook: Textbook = {
  title: "Calculus 4 Dummies",
  numberOfPages: 58,
  subject: "Calculus",
};

Interfaces can only be used on object types. This is because of their ability to extend other interfaces, much like classes can be used to extend other classes. Since Textbook extends Book, it inherits the typing for title and numberOfPages along with the typing for subject.

React With Typescript

Assuming your project is set up to transpile .tsx files (React files using TypeScript and JSX) into readable JavaScript for the browser, let's explore how you can use TypeScript to manage the flow of data through your components.

General Functions

Before I show an example of React code, let's take a look at how TypeScript is used to help validate functions.

type Person = {
  name: string,
  age: number,
};

function greeting({ name, age }: Person) {
  return `My name is ${name}, and I am ${age} years old.`;
}

greeting({ name: 'Tyler', age: 32 }); // Will successfully run.
greeting({ name: 'Ash', profession: 'Photographer' }); // Error
greeting({ name: 'Sadie', age: '1' }); // Error

By creating an alias beforehand, we can destructure our input object parameter for the keys we want to use in the greeting function. The first function call follows the explicit types set by the alias and will run without any typing errors. The second function call doesn't use the age property and will throw a typing error. The third function call using a 'string' type instead of a 'number' type for the age property and will throw a typing error.

React Function Components

Components in React are made by declaring a function and returning JSX (HTML-like code) to render on the page. We pass props from a parent node to a child node to create dynamic content. These props from the parent component are placed into the parameters of the child component as an object with keys named after the props. Since we'll know the props, it makes sense that we'll want to destructure them in the child component. Now it's time to set up type safety with TypeScript. Make sure you use the .tsx extension on your component files.

import React from 'react'

function App() {
  return (
    <div>
      <h1>This is my child:</h1>
      <Child 
        person={{
          name: "Tyler",
          age: 32,
          profession: "Software Developer",
        }} 
      />
    </div>
  );
}

type ChildProps = {
  person: {
    name: string,
    age: number,
    profession: string,
  }
};

function Child({ person }: ChildProps) {
  return (
    <ul>
      <li>{`Name: ${person.name}`}</li>
      <li>{`Age: ${person.age}`}</li>
      <li>{`Profession: ${person.profession}`}</li>
    </ul>
  );
}

Conclusion

When transitioning from JavaScript to TypeScript, you're inheriting a new coding language that puts up guardrails to help the developer write reliable code with fewer bugs as a project scales. While you may initially be writing more code, you'll save time in the future because fewer bugs will be encountered and fewer refactors to account for the type conversion from JavaScript.

Happy Coding!
Tyler Meyer

Sources:

https://medium.com/@ZaradarTR/why-i-typescript-aa891184279b

https://www.w3schools.com/typescript/typescript_simple_types.php

https://www.w3schools.com/typescript/typescript_arrays.php

https://www.w3schools.com/typescript/typescript_aliases_and_interfaces.php

https://www.w3schools.com/typescript/typescript_functions.php

TypeScript: Getting Started With TSConfig Options

Tyler Meyer — Mon, 13 Jan 2025 05:29:41 +0000

What is TypeScript?

TypeScript is a superset of JavaScript. This means you can use JavaScript syntax in TypeScript, so learning JavaScript before jumping into TypeScript is best. With that disclaimer, let’s talk about what TypeScript is all about and how we can set up a project for TypeScript.

According to the documentation for TypeScript, “TypeScript is a strongly typed programming language that builds on JavaScript.”[1] The TypeScript language adds type syntax to help you catch errors early during development and keeps safeguards up while your development team grows as a project scales. TypeScript allows you to define the datatypes for variables and interfaces for objects. TypeScript uses these definitions to check your code for errors as it compiles and informs you when you are not following the definitions you set beforehand.

If you're thinking, "Why do I need to write more code just to use TypeScript when I can be more careful in the first place?" You're not wrong, but humans can make errors, and we often do when working for long periods. If this same thinking were applied to construction, then the additional scaffolding and safety procedures would require more work and time, and we can save time by just being careful at the work site.

See? In an effort to save time, this roofer may have wasted more time and resources. This is just one worker. Imagine a team of workers working on a project as more team members are added. This is the reality of software development; having a plan to catch these mistakes will help you and your team in the long run.

TypeScript Examples

The following examples come from the TypeScript documentation[2], but the commentary is mine.

TypeScript:

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date}!`);
}

greet("Brendan");

TypeScript will catch the error when greet is called. We defined greet to receive two arguments, person and date, and we only supplied person. TypeScript will catch this error when it compiles the code and lets you know it expected a second argument. In a way, TypeScript can be considered a linter for your code to catch these errors while you're working, but we can leverage the type syntax to help us further.

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

greet("Maddison", Date());

Now, we add a type to the two arguments, person must be a string, and date must be a Date object for the toDateString method. When greet is called without the keyword new before the second argument, Date(), TypeScript will let you know it received a string instead of a Date for the date parameter. Now, you can fix your error before developing further and having to trace back to this error when you receive an unexpected output while testing.

Now that you've seen TypeScript in action let's examine the next steps in setting up your project to use it.

Configuring TypeScript's Compiler: `tsconfig.json`

The default TypeScript compiling may not be what you are looking for, and there is a way to customize TypeScript for your needs, similar to using a linter, but it can do so much more.

The first step is to create a tsconfig.json file in your project's root directory. This file tells TypeScript which files should be included in the compilation process. In the tsconfig.json, you can specify the directories from the root that should be included if you want more specificity using your JSON file's "includes" key.

{
  "include": ["src/**/*"]
}

Now, let's talk about "compilerOptions". Trust me when I say there are a ton of options to choose from. This is a good thing but also terrifying if this is your first time using TypeScript. I'm going to break down a few of the popular choices to help you get started:

`allowJs`

{
  "compilerOptions": {
    "allowJs": true
  }
}

This option allows JavaScript files to be imported inside your project instead of only TypeScript. Typically, TypeScript assumes all imports are TypeScript and would give an error for imported JavaScript files, but this option allows us to use those imports and can be helpful when working with TypeScript and JavaScript in the same repository.

`esModuleInterop`

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

A namespace import in ES6 can only be an object, but since this is the same as using require without .default, we have allowed TypeScript to treat an object as a function. Instead of having to be careful about our imports, this option will fix this issue when TypeScript transpiles the code into JavaScript.

`target`

{
  "compilerOptions": {
    "target": "es6"
  }
}

This option changes which JS features are downgraded and which are left intact when TypeScript transpiles your code into JavaScript. es6 is a good choice since most modern browsers support ES6, but you can designate any version of ECMAScript for this option to suit your needs.

`strict`

{
  "compilerOptions": {
    "strict": true
  }
}

This flag enables many different type checking behaviors. This will result in a stronger codebase with fewer errors. If you like to exclude certain type checking behaviors, check the documentation [3] and set their options to false. If you only want a couple type checking behaviors, I would consider turn those on instead of using strict.

`outDir`

{
  "compilerOptions": {
    "outDir": "./dist"
  }
}

When TypeScript transpiles your code into usable JavaScript, this option will emit those files into this directory.

`noEmit`

{
  "compilerOptions": {
    "noEmit": true
  }
}

This option stops all transpiled JavaScript files from emitting. This may sound silly since I just told you about outDir, but TypeScript will always emit files and outDir will direct the files to the correct location. noEmit comes into play when you are already using another tool like Babel or Webpack to transpile and bundle your code. Emitting in this case would mean creating useless JavaScript files.

Conclusion

There you have it. Those are seven options to help you set up your configuration for TypeScript and how TypeScript can help you create a more stable code base. I recommend giving Matt Pocock's "The TSConfig Cheat Sheet" a read for more popular options to put in your tsconfig.json and always refer to the TypeScript documentation on the TSConfig before implementing any of these options.

Happy Coding!
Tyler Meyer

Sources:

[1] https://www.typescriptlang.org/

[2] https://www.typescriptlang.org/docs/handbook/2/basic-types.html

[3] https://www.typescriptlang.org/tsconfig/

[4] https://www.totaltypescript.com/tsconfig-cheat-sheet

Exploring the Use of C++ for Game Development

Tyler Meyer — Mon, 02 Dec 2024 07:20:20 +0000

What to Consider When Developing a Video Game

To make a video game of your own, you'll need a fun idea for a game, which is a big hurdle to overcome to start making a game. Let's assume you have an idea for a game and want to bring it to life. To do this, you'll need to write code to make everything work, art and sound design to make everything appealing, and you'll need to do anything you can to ensure your game runs smoothly and the experience is enjoyable for your user.

The last piece of the puzzle of making the game run smoothly is the priority for many game developers, and choosing the correct language to code your game typically ties back to this issue. C++ is "renowned for its speed and flexibility, and [its] ability to communicate directly with hardware." [1] Before jumping into the details of why C++ works so efficiently, let's explore a few other languages used for game development and where they may have an edge over C++.

Comparing C++ With Other Game Development Languages

Before discussing C#(Sharp) and Java, I want to highlight a few other languages used in game development for different reasons.

JavaScript, Python, and Lua

JavaScript can be found on web pages, servers, and even on Raspberry Pis, which has become a popular way to make portable game systems. A few game engines support JavaScript code, including "Impact.js, LÖVE, and Crafty.js." [2] Python and Lua can be easier to pick up when learning a new programming language, and both come with support from many open-source game engines. These three languages have been mainly used for 2D games. They can also be used with 3D games, but it is recommended to use Python for 3D over the other two since JavaScript has limited support and Lua has no support. In a future article, I plan to spend more time researching these languages in the gaming space.

C#(Sharp)

C# has support from many game engines, which include Unity and MonoGame. C# is similar to C++, and it is reported to be "less complicated and easier to set up with Visual Studio and VS Code as your Integrated Development Environment." [2] There are many differences between C++ and C# as well, and they should be considered when deciding on the language you'll use. We're going to highlight a couple differences [3]:

Memory Management

In C++, the programmer manually manages memory, while C# has an automatic garbage collector. C# is more convenient for this task, but C++ gives the programmer more control over how the memory is used, which can lead to optimizing code to run more quickly for smoother performance. Depending on the size of the project, this amount of control over memory may not be necessary if the project is small.

Pointers

Pointers are a way of referencing an address in memory, and I will go into more detail later in the article. In C++, pointers can be used anywhere in the program, while C# can only use pointers in unsafe mode. "Unsafe code can create issues with stability and security due to its inherent complex syntax and potential for memory-related errors, such as stack overflow, accessing and overwriting system memory." [4] This means that extra special care needs to used with the unsafe mode in C#, which means that pointers may need to be avoided when writing code for your project.

Java

Java is an object-oriented programming language similar to C++, and "the Java Virtual Machine (JVM) is used to run the bytecode, which makes it compatible with almost any platform." [2] The differences between Java and C++ are similar to C# and let's explore why [5]:

Memory Management

In Java, memory management is controlled by the Java Virtual Machine (JVM), while C++ is manually controlled.

Platform Dependency

Both languages work on any platform. For Java, it uses the Java Virtual Machine (JVM) to accomplish this. For C++, it needs the correct compiler to compile the code for the correct platform.

Pointers

Java can use pointers, but there is limited support for them. C++ fully embraces pointers to the point that values can also be called by reference, and Java only calls by value for the pointers.

Choosing C++ For Video Game Development

When developing a video game, resuing assets will happen naturally. Introducing obstacles for your player to overcome and returning to the same or similar obstacle later creates a sense of progression for your player to show them how they have grown throughout the experience or how they can look at an obstacle in different ways to overcome it. This structure sounds like a class in programming, a way to reuse code multiple times throughout an application. Picking an object-oriented programming language will be paramount for a smoother development period. Luckily, the languages I've mentioned all support class-based programming techniques. Let's look into why C++ is often chosen for game projects.

Regarding performance, video games designed with C++ run more quickly and smoothly than other languages when creating games that can scale well. C++ accomplishes this by giving the programmer direct control over memory management. Other languages handle these tasks automatically with garbage collectors. "Understanding pointers, memory allocation, and memory leaks can help your game run smoothly without wasting valuable resources." [1] We're going to break down these three things with a few coding examples.

Pointers

A pointer is a variable that stores the memory address as its value. Since a pointer stores an address, we can make a call-by-reference. Pointers can "create and manipulate dynamic data structures" [6] and can be used to iterate over these data structures.

To use a pointer, you need to define a pointer variable that matches the data type you will be referencing. The data type must be associated with a pointer so it "knows how many bytes the data is stored in." [6] Use the unary operator & on the variable address you want to store on the previously created pointer. To access the value stored at an address, use the unary operator * on the pointer.

#include <bits/stdc++.h>
using namespace std;

void pointers() {
    int var = 20;

    // Declare pointer variable
    // Note that the data type of ptr and var must be the same
    int* ptr;

    // Declare pointer of a pointer variable
    int** ptr2;

    // Assign the address of a variable to a pointer
    ptr = &var;

    // Assign the address of a pointer to another pointer
    ptr2 = &ptr;


    // ptr holds the address of var
    cout << "Value at ptr = " << ptr << endl;

    // var holds the value of 20
    cout << "Value at var = " << var << endl;

    // * dereferences ptr to give the value of 20 
      // located at the address assigned to ptr
    cout << "Value at *ptr = " << *ptr << endl;

    // ptr2 holds the address of ptr
    // Even pointers have addresses of their own
    cout << "Value at ptr2 = " << ptr2 << endl;

    // Dereferencing ptr2 once reveals that 
      // ptr2 references the same address as ptr
    cout << "Value at *ptr2 = " << *ptr2 << endl;

    // Dereferencing ptr2 twice reveals 20, 
      // the value you receive when dereferencing ptr once
    cout << "Value at **ptr2 = " << **ptr2 << endl;
}

int main() {
    pointers();
    /*
     * Value at ptr = 0x6caebffc54
     * Value at var = 20
     * Value at *ptr = 20
     * Value at ptr2 = 0x6caebffc48
     * Value at *ptr2 = 0x6caebffc54
     * Value at **ptr2 = 20
     */
    return 0;
}

Since we store the address to other data types, we simulate calling by reference. We can modify any data type within a function and reuse that updated data later in our code.

Dynamic Memory Allocation

If we expect a certain maximum-sized input, we could prepare our program to have enough memory set aside to match the worst-case scenario. This could pose a problem as a project continues to scale larger and larger. What if we could pick how much memory we need only once we know how much is needed? This would prevent unneeded memory usage and allow our code to run more efficiently. This is the key principle behind dynamic memory allocation: only set aside enough memory space to accomplish the task at hand and then free up the space immediately after.

Check out the following code [7] with the addition of comments to help you see how we accomplish dynamic memory allocation:

#include <iostream>
#include <new>
using namespace std;

int main() {
    // i => Used for looping
    int i;
    // n => Used for capturing the input for the first question
    int n;
    // ptr => Pointer used to reference memory that is allocated
    int* ptr;

    // n is assigned the input from the user
    cout << "How many numbers would you like to type? ";
    cin >> n;

    // new => Allocates space match the input for n
    ptr = new (nothrow) int[n];

    // Check to make sure ptr points to a valid object
    if (ptr == nullptr) {
        cout << "Memory allocation error!" << endl;
    }

    else {
        for (i=0; i<n; i++) {
            // Ask for a number n times
            cout << "Enter number: ";

            // Store the number entered in memory
            cin >> ptr[i];
        }

        // Reveal to the user the choices they made
        cout << "You have entered: ";

        for (i=0; i<n; i++) {
            // Pull each number from the allocated memory
            cout << ptr[i] << ", ";
        }

        // After we finish with the task,
            // we free up the space taken using delete[]
        delete[] ptr;
    }
    return 0;
}

Output:

The use of the delete keyword is essential when coding in C++. Since programmers need to clear out their memory manually, developing good habits to clear out memory once it's finished being used will lead to less frustration and fewer bugs, and it avoids the dreaded Memory Leak.

Memory Leak

In C++, there is no automatic garbage collection, which means that any memory that a programmer dynamically allocates throughout the lifetime of a program needs to be freed manually after its usage by the programmer once it is no longer needed. If a programmer forgets to free this memory after its usage, it will occupy the space while the program lives and will be unavailable to other processes. Often, a function may need to be called several times, and if each call allocates more memory without removing it, a lot of unused memory will take up space. This accumulation of unwanted memory usage is referred to as a memory leak. These can drastically slow down a program, but they are the avoidable price for faster running code. [8]

Final Thoughts on C++ For Game Development

Having complete control over memory usage is a huge plus, or some might call it a "plus-plus." We create pointers to store the addresses of newly created data structures. After the stored memory has been used to completion, we remove the data from memory to free up space later in the program to prevent memory leaks. The object-oriented programming language aspect of C++ also shows the usefulness of reusing code.

C++ isn't the only choice for a game development language. Java is portable and can be used across multiple platforms, but it is limited in making 3D games. C#(Sharp) is less complicated than C++, but it has little to no support for pointers unless you use unsafe mode, which is not recommended unless you take extreme care while programming in that mode.

Due to the programmer's direct control of memory in C++, fast speeds can be achieved with pointers and dynamic memory allocation. Speed is an important consideration when designing a large-scale video game because an unresponsive or slow-to-respond gaming experience can leave your user unsatisfied.

Happy Coding,
Tyler Meyer

Sources

Sources:
[1] https://www.geeksforgeeks.org/cpp-for-game-development/

[2] https://www.orientsoftware.com/blog/gaming-programming-language/

[3] https://www.geeksforgeeks.org/c-vs-c-sharp/

[4] https://www.c-sharpcorner.com/UploadFile/f0b2ed/understanding-unsafe-code-in-C-Sharp/

[5] https://www.geeksforgeeks.org/cpp-vs-java/

[6] https://www.geeksforgeeks.org/cpp-pointers/

[7] https://cplusplus.com/doc/tutorial/dynamic/

[8] https://www.geeksforgeeks.org/memory-leak-in-c-and-how-to-avoid-it/

C++: An Object-Oriented Programming Language

Tyler Meyer — Mon, 18 Nov 2024 05:39:25 +0000

What is C++?

According to a definition written on TechTarget, "C++ is an object-oriented programming language and a superset of the C language." [1]

When we call C++ a superset of the C language, this means that C++ can still run code from C and still produce the same result, but C++ comes with support for classes and objects. With the introduction of classes, C++ becomes the object-oriented programming language that is used to create large-scale applications as well as projects with constrained memory demands. A good place to start learning C++ is to learn about object-oriented programming.

Object-Oriented Programming

In a later example, I will show key features of the C++ language, but I will not be able to fully show you object-oriented programming, which I'll be shortening to OPP for the rest of this article.

As the name suggests, this implementation revolves around the concept of objects. According to Wikipedia, "computer programs are designed by making them out of objects that interact with one another in OPP." [2] This philosophy is great because objects can hold both data and methods and this information can be bundled together without having to be written with other code that it does not need to interact with. This is one of the benefits of OPP, and I am going to go over four key aspects of OPP, Inheritance, Abstraction, Encapsulation, and Polymorphism.

Inheritance

With classes, we can create objects that share certain property names and methods, but at the time of creating the object, we can pass in values that make the instance of the object different from others with the same properties and methods. Each object inherits a particular set of properties and methods.

Abstraction

Hiding information away from functions that should not be using that information is the practice of abstraction. Objects allow us to couple data and methods together in such a way that functions outside the object cannot use the data inside the object. This prevents misusing code written for a particular purpose that would lead to bugs in other parts of your program.

Encapsulation

Encapsulation is the practice I alluded to earlier where you keep data and methods bundled together. Specifically, the data held in the object is only interacted with by methods within the same object. This allows for editing code in a class without creating issues with code outside of the class. Working to remove unnecessary connections between different parts of your code is known as decoupling and it leads to high cohesion in your code.

Polymorphism

This last aspect allows your code to be more readable. When creating subclasses from a particular superclass, you may want to use a method with the same name in each subclass but want it to differ depending on which subclass the object being called is an instance of. The method takes on many forms, known as polymorphism, to produce the desired result for the object that calls the method.

Key Features of C++

We are going to cover a few features of C++. I'll explain how each line of a simple program works to show how C++ handles different aspects of writing code. While I explain this code, I'll reference JavaScript as a comparison. This explanation will be a taste of C++, and if you're looking for a deeper explanation of the language, I recommend using W3 Schools where I learned everything I am about to go over. If you're short on time, Fireship's "C++ in 100 Seconds" is about the fastest way you can see the different benefits of using C++ language in certain projects. Without further ado, let's check out some C++:

#include <iostream>
using namespace std;

int hello(string name) {
    cout << "Hello, " << name << endl;
    return 0;
}

int main()
{
    hello("Tyler");
    hello("Bob");
    return 0;
}

Here is a simple program written in C++. This is a popular coding example used to first explain C++, but I've modified it to show off a few more key features.

#include <iostream>

Let's start with the first line. This is known as a "Header File Library". In JavaScript, we would do something like this to import a library of functions, like underscore.js, to use instead of writing out the functions ourselves. If we want to use any of the objects from the standard library, we need to include them. This gives us the flexibility to only load the objects we need for the program we are writing. This particular library "iostream" contains objects that can read user inputs and output data.

using namespace std;

This is a line of convenience code. Normally to use any object from the standard library, we would have to prefix it with std::. On line 5, I make use of the cout and endl from the "iostream" standard library. Without this line of code, I would need to write std::cout and std::endl every time I use them. As your program gets larger, this means you'll be rewriting std:: many times just to use objects from the standard library, so we'll save ourselves a headache and write this one line of code.

int hello(string name) {

This is how you declare a function in C++. The function is named 'hello' and it has one parameter called 'name'. While this is similar to JavaScript, there are some noticeable differences. The only signifier that makes this a function is the parentheses after the function name and the code block that follows using braces. The other difference is the inclusion of the keywords int and string. Similar to TypeScript, these keywords indicate what values are expected from the function and the parameter. int tells C++ that the function 'hello' should always return an integer, and if it doesn't, to either truncate a decimal point off to return an integer or throw an error to indicate a different value was returned. If you're not expecting to return anything, you should put void instead. The string keyword indicates that future arguments for this function need to be string data types or else C++ will throw an error. The 'hello' function will not run until it is declared, which I will go over soon.

    cout << "Hello, " << name << endl;

Here is the first statement of the function. Whenever you conclude a statement, you must always end it with a semicolon. JavaScript gives a little bit of leeway on this, but it cannot forgotten in C++. cout is an object from the 'iostream' library used together with the insertion operator << to output the value to the right (to the terminal by default). We can chain outputs with more <<, which allows us to use the name parameter in the output and include a line break with the endl object from the 'iostream' library. When printing to the terminal, it is common practice to include endl at the end to make sure each output to the terminal appears on a different line.

    return 0;
}

By returning 0 at the end of the function, it satisfies the condition of int needing an integer to be returned from 'hello'.

int main()
{
    hello("Tyler");
    hello("Bob");
    return 0;
}

main() is a predefined function in C++ used to execute code. Any code inside its function body will be executed and there is no need to execute main() later. A few common practices I've seen in C++ code: use int and return 0 at the end of main(), and put the entire code block below the function. Inside main(), we call 'hello' twice with different arguments resulting in the following being printed to the terminal:

Hello, Tyler
Hello, Bob

Final Thoughts on C++

I first started looking into C++ because I heard it was used in game design. With the low memory usage, I can see how it is preferable when designing large games. The object-oriented nature of the language lends itself to naturally reusing more code and even including a custom library of objects for use on smaller applications for simple hardware. Finally, the requirement of including the data type for functions and variables leads to more thoughtful planning for your code as well as a safety net for errors when a data type accidentally gets changed. I look forward to exploring C++ further and I hope you check it out too!

Happy Coding,
Tyler Meyer

Sources

Sources:
[1] https://www.techtarget.com/searchdatamanagement/definition/C

[2] https://en.wikipedia.org/wiki/Object-oriented_programming

[3] https://www.w3schools.com/cpp/cpp_intro.asp

[4] https://www.youtube.com/watch?v=MNeX4EGtR5Y

Test Driven Development:

Tyler Meyer — Mon, 11 Nov 2024 04:55:35 +0000

What is TDD?

Test Driven Development (TDD) is a technique that focuses on writing a test before writing code to pass the test. More traditional techniques would put writing code for a product first and then writing the test to see if the code previously written is performing as intended.

While the efficacy of these two techniques can be debated, with both sides producing their own positives and negatives, I intend to show the structure of TDD and provide how it can create a workflow that leads to leaner code with fewer bugs at the end of a product's development cycle.

Test Driven Development follows a cycle of understanding the request, writing a test, writing code to pass the test, refactoring your code, and then repeating this until you have your product.

This figure is sourced from Grant Steinfeld's article on Test Driven Development: https://developer.ibm.com/articles/5-steps-of-test-driven-development/

With a focus on test writing, it may seem that this increases the time it takes to reach a final product. This is true, but if you consider making patches to your code after launch, studies have shown that teams using Test Driven Development techniques spend less time at this stage because there are fewer bugs and their code base is leaner. If you want to learn more about these studies, I highly recommend reading Ben Aston's article "Statistics & Studies: The Benefits Of Test Driven Development". Read here.

Understand the Request

While this part of the process is not usually referenced when looking into TDD, I appreciate Grant Steinfeld's inclusion in his article.

By taking time to digest the request before you code, TDD becomes easier to begin and implement. The fine details are not as important as being able to talk about the project and the outputs that are expected. Consider making a loose plan as well to keep workflow focused.

Let's consider a request for creating a doubly linked list data structure. This topic has been chosen for its familiarity with most developers.

Request: "I need a class that creates a doubly linked list for storing data. The class needs methods to add data to the head or tail as well as remove data from the head or the tail. There should also be a method to check if a given piece of data is contained in the list. I have attached an image of what I am expecting."

At this point, you should take time to think about the request. We have a class that needs methods to add and remove data. This data may need to be stored as an object to create the correct connections between the data. Now that we've taken time to think, we'll begin to code.

Write the Test

Before coding for the request, write a test that would make your code fail the test. This performs the two tasks of confirming your test code is functional (by failing and not automatically passing) and creating a goal to reach.

There are a couple of ways to write a test that will fail:

Write a test that references a function or property that doesn’t exist yet.
Write a test that expects a certain value to be returned (that isn’t already being returned).

Typically, you'll want to begin writing your first test before you begin to code anything for the request. You'll notice that the first two tests are about making sure we have certain properties and methods in our doubly linked list class. For this article, we'll focus on the third test and beyond.

describe('TDD Example -', function() {
  let doublyLinkedList;

  beforeEach(function() { // Perfrom this code before each test.
    doublyLinkedList = new DoublyLinkedList();
  });

  // Test #1: Properties
  it('should have a head and tail', function() { 
    expect(doublyLinkedList).to.have.property('head');
    expect(doublyLinkedList).to.have.property('tail');
  });

  // Test #2: Methods
  it('should have methods named addToTail, removeHead, contains, addToHead, & removeTail', function() {
    expect(doublyLinkedList.addToTail).to.be.a('function');
    expect(doublyLinkedList.removeHead).to.be.a('function');
    expect(doublyLinkedList.contains).to.be.a('function');
    expect(doublyLinkedList.addToHead).to.be.a('function');
    expect(doublyLinkedList.removeTail).to.be.a('function');
  });

  // Test #3: Adding data to the list at the tail.
  it('should designate a new tail when new nodes are added to tail with addToTail', function() {
    doublyLinkedList.addToTail(1); // Add data
    expect(doublyLinkedList.tail.value).to.equal(1); // Check for data
    doublyLinkedList.addToTail(2); // Add data
    expect(doublyLinkedList.tail.value).to.equal(2); // Check for data
    doublyLinkedList.addToTail(3); // Add data
    expect(doublyLinkedList.tail.value).to.equal(3); // Check for data
  });

This is a test to check that data is being added to the tail property. I have included a property called value to be sure that I'm getting the data I added to the tail when I check for it. The test fails because the tail of my list points to null instead of any meaningful data. Now it's time to code!

Make it Pass

Once you have the failing test, write code to pass the test. Keep it simple. Trying to think of every situation will distract you from the task at hand: passing the failing test. The code you write at this stage does not have to be elegant, so your goal should be to write as little code as possible.

At this stage, you want to focus on writing as little code to pass the failing test you wrote into your test suite.

class DoublyLinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  addToTail(value) {
    // Create a class to store the value of the data.
    const newDoublyNode = new DoublyNode(value);
    // Reassign the tail of the list to the new node.
    this.tail = newDoublyNode;
  }

  removeHead() {}
  contains() {}
  addToHead() {}
  removeTail() {}
}

// Create a class to remember the value of the data stored in the list.
class DoublyNode {
  constructor(value) {
    this.value = value;
  }
}

Congratulations! The test is now passing and we are one step closer to delivering a product that meets the expectations of our requester. Onto the refactoring stage.

Refactor Code

Since the goals in previous iterations of the TDD cycle were to get a test to pass, the code base may become less efficient when it comes to time complexity, less organized and readable, and perhaps the code may stop following best practices. In regards to the above example, we did not write much code so the refactor stage is not warranted, but you should still consider this stage even when you write only a little code because you may be able to improve upon what you just created or have created before the test.

Refactoring code after each test passes gives you the chance to engage with your code base, improve its implementation, and think of new ideas to improve upon the initial request without losing focus on the product you are producing. By having a wealth of tests in the test suite, every change made must adhere to the structure being developed with each cycle of TDD, which leads to fewer bugs when the project is completed as well as faster debugging when the need arises.

This figure is sourced from BEN ASTON's article "Statistics & Studies: The Benefits Of Test Driven Development: https://thectoclub.com/general/statistics-studies-benefits-test-driven-development/

The refactoring stage may be more involved because as you write new code or improve code that was written earlier, some of your older tests may fail.

After finishing this cycle of TDD for this example, you may have several ideas to improve what I wrote: When you replace the tail each time, doesn't the previous tail get garbage collected? Shouldn't each piece of data have connections to the data next to it in the list?

These are great questions and exactly what fuels Test Driven Development to be great for workflow.

Repeat

After writing a test, passing the test, and refactoring code, you begin the cycle again by writing a new failing test that either improves upon the previous code written or introduces a new feature to the project.

With every loop of Test Driven Development, the design and functionality of your code become leaner, the breadth of your test suite covers move details to catch bugs more quickly, and your understanding of the project becomes more familiar.

“This workflow is sometimes called Red-Green-Refactoring, which comes from the status of the tests within the cycle.” –Grant Steinfeld

Let's follow those questions from earlier and write a test to check that the nodes are connected in some way to avoid being garbage collected unnecessarily.

it('should return the value of the node previous of the tail', function() {
    doublyLinkedList.addToTail(1);
    doublyLinkedList.addToTail(2);
    expect(doublyLinkedList.tail.previous.value).to.equal(1);

    // Add more nodes and test again
    doublyLinkedList.addToTail(3);
    doublyLinkedList.addToTail(4);
    doublyLinkedList.addToTail(5);
    expect(doublyLinkedList.tail.previous.value).to.equal(4);
  });

When observing the tests I wrote, you'll notice I included a "previous" property on the data node. I wrote this because I intend for the data node itself to contain the connection between data nodes just like the picture shown in the request. The test fails because my data nodes have no "previous" property.

In order to wrap up this article (and to not keep you for the many iterations of the Test Driven Development cycle needed to complete this request), I will stop my example here. Feel free to use this starting point to create your own Doubly Linked List. Practicing the Test Driven Development cycle makes this approach less intimidating, and I am certain that you'll appreciate the result of the product you produce by the end.

Conclusion

Test Driven Development encourages programmers to engage with their code base more mindfully since they are expanding the test suite while they develop their code for a request. When considering this technique, do not let the idea of a longer development timeline dissuade you from trying. The reports of saving time after a product launch should be encouraging because you will have more time to work on future projects. In Ben Aston's research on Test Driven Development, he noted that "as programmers get better at TDD, they are likely to move faster."

Consider Test Driven Development on your next project!

Happy Coding!
Tyler Meyer

Sources:

5 Steps of Test-Driven Development by Grant Steinfeld:
https://developer.ibm.com/articles/5-steps-of-test-driven-development/

Statistics & Studies: The Benefits Of Test-Driven Development by Ben Aston:
https://thectoclub.com/general/statistics-studies-benefits-test-driven-development/

Flexible Uses of the Logical AND (&&) and OR (||) in JavaScript

Tyler Meyer — Wed, 25 Sep 2024 21:25:26 +0000

Introduction

Boolean values are absolute, true or false. That’s as clear cut as it gets. Other data types in JavaScript also have these inherent values of true and false, but it isn’t as obvious because they look like 32, null, 0, and ‘Hello’ instead of true and false. Knowing that all values have these inherent values means that we can perform operations on all data types that are typically used for Booleans. This provides us more creativity and flexibility while coding.

Understanding Truthy and Falsy Values

When working with control flow keywords like if and logical operators like AND (&&) and OR (||), we use Booleans to achieve certain outcomes. These Booleans can be used explicitly with true or false, but we often generate them with comparison operators such as ===, <, and >.

What happens if we don’t use a Boolean with control flow or logical operators? Well, you’re in luck! All values are inherently true or false to help with this. We can categorize all values into two categories: truthy or falsy.

When trying to figure out if a value is truthy or falsy, it is best to remember the falsy values since there are only a limited amount of them:

false (a Boolean value)
null
undefined
NaN (not a number)
0 (a number value)
"" (the empty string value)

Everything else is truthy. If you are unsure if something is truthy or falsy or you come across a unique situation that seems ambiguous, you can always create an if statement to see if the code inside the following code block runs.

if (23) { console.log(“truthy”); } // Prints “truthy”
else { console.log(“falsy”); }

if (null) { console.log(“truthy”); } 
else { console.log(“falsy”); } // Prints “falsy”

Logical AND (`&&`)

When using Booleans with the Logical AND (&&), both values need to be true in order for the logical operator to return true. Otherwise, if at least one value is false, it will return false.

console.log(false && false); // false
console.log(true && false); // false
console.log(true && true); // true

Understanding the mechanics of the logical AND (&&) operator can help you when it comes to truthy and falsy values. If the value on the left is false, return it; otherwise, return the value on the right.

console.log(0 && 1); // 0
console.log("a" && ""); // "" (an empty string)
console.log([] && [1, 2, 3]); // [1, 2, 3]

The logical AND (&&) operator wants to return a falsy value and only returns the truthy value on the right if both are truthy. You can think of the two arguments like this:

(Left Side) Only use me if I am a falsy value. && (Right Side) Otherwise, use me.

Logical OR (`||`)

When using Booleans with the Logical OR (||), both values need to be false in order for the logical operator to return false. Otherwise, if at least one value is true, it will return true.

console.log(false || false); // false
console.log(true || false); // true
console.log(true || true); // true

Here’s how the logical OR (||) operator works: if the value on the left is true, return it; otherwise, return the value on the right.

console.log(1 || 0); // 1
console.log("" || "a"); // "a"
console.log(undefined || null); // null
console.log([] || [1, 2, 3]); // []

The logical OR (||) operator wants to return a truthy value and only returns the falsy value on the right if both are falsy. You can think of the two arguments like this:

(Left Side) Only use me if I am a truthy value. || (Right Side) Otherwise, use me.

Creative Uses of AND (`&&`) and OR (`||`)

Using a Default Value When Expecting an Input

Let’s say you’re creating an object that represents a person that comes with properties that describes the person along with a function that greets others using the other properties in the object.

function Person(name) {
    // If name is undefined, this.name will 
    // default to 'a person with no name'
    this.name = name || 'a person with no name';
    this.greet = function() {
        console.log('Hello, I am ' + this.name + '.');
    };
}

// Create Person variables
var tyler = new Person('Tyler');
var mystery = new Person(); 
// Without an input, this.name defaults to the 
// second option since name is undefined.

// Call greet() from each Person object
tyler.greet(); // "Hello, I am Tyler."
mystery.greet(); // "Hello, I am a person with no name."

In the above example, we expected an input for the name parameter, so the second value in the OR (||) operation is only used if name is undefined (no argument at function call).

Requiring Multiple Inputs

If you are creating objects and want to make sure you have a set number of inputs before you make the object, you can chain together logical AND (&&) operators across each required parameter.

function Person(firstName, lastName, age) {
  if (firstName && lastName && age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName = `${this.firstName} ${this.lastName}`;
    this.age = age;
    this.greet = function() {
      console.log(`Hello, my name is ${this.fullName} and I'm ${this.age} years old.`);
    };
  } 

  // If any argument is missing, the object will only have this property.
  else {
    this.greet = function() {
      console.log(`Hello, I am not a fully formed Person.`)
    };
  }
}

var tyler = new Person('Tyler', 'Meyer', 32);
var brad = new Person('Brad', '', 38);

tyler.greet(); // "Hello, my name is Tyler Meyer and I'm 32 years old."
brad.greet(); // "Hello, I am not a fully formed Person."

The if statement is checking for an argument for each parameter before it creates the full Person object. If even one argument is a falsy value, it will create an object with the else statement instead. Therefore, we can prevent incomplete objects or create default objects for incomplete entries.

Conclusion

If you need a default value until a value is supplied, the logical OR (||) operator can be very helpful. If you need to require multiple values before proceeding, the logical AND (&&) operator can be very helpful. These are just two examples, and as you continue to explore these operators, you will find out there are many more ways to use these operators outside the usual checking for true or false Boolean values. Keep these two things in mind when looking into using the logical AND (&&) and OR (||):

OR (||) : Only use the value on the left if it is truthy.
AND (&&) : Only use the value on the left if it is falsy.

If you have any questions, please leave them in the comments. I'd be happy to discuss this topic further.

Happy coding!

DEV Community: Tyler Meyer

Jest: A Delightful JavaScript Testing Framework

What is Jest?

The Strengths of Jest

Simplicity

Snapshot Testing

React & TypeScript Integration

Community Support

The Potential Downsides of Jest

Not as Flexible

Performance Concerns

Tips for Setting Up Jest Test Suites

Configure Jest

Writing Tests With Jest

Conclusion

Sources

TypeScript: Learning the Basics + React

Why Use TypeScript?

Catch Bugs Before They Happen

Scalability & Maintainability

Long Live Your Code

Explicit Typing

Aliases & Interfaces

React With Typescript

General Functions

React Function Components

Conclusion

Sources:

TypeScript: Getting Started With TSConfig Options

What is TypeScript?

TypeScript Examples

Configuring TypeScript's Compiler: tsconfig.json

allowJs

esModuleInterop

target

strict

outDir

noEmit

Conclusion

Sources:

Exploring the Use of C++ for Game Development

What to Consider When Developing a Video Game

Comparing C++ With Other Game Development Languages

JavaScript, Python, and Lua

C#(Sharp)

Memory Management

Pointers

Java

Memory Management

Platform Dependency

Pointers

Choosing C++ For Video Game Development

Pointers

Dynamic Memory Allocation

Memory Leak

Final Thoughts on C++ For Game Development

Sources

C++: An Object-Oriented Programming Language

What is C++?

Object-Oriented Programming

Inheritance

Abstraction

Encapsulation

Polymorphism

Key Features of C++

Final Thoughts on C++

Sources

Test Driven Development:

What is TDD?

Understand the Request

Write the Test

Make it Pass

Refactor Code

Repeat

Conclusion

Sources:

Flexible Uses of the Logical AND (&&) and OR (||) in JavaScript

Introduction

Understanding Truthy and Falsy Values

Logical AND (&&)

Configuring TypeScript's Compiler: `tsconfig.json`

`allowJs`

`esModuleInterop`

`target`

`strict`

`outDir`

`noEmit`

Logical AND (`&&`)

Logical OR (`||`)

Creative Uses of AND (`&&`) and OR (`||`)