Your Site's RSS Feed

TypeScript, why is so important?

Sun, 16 Aug 2020 00:00:00 GMT

Why do types exist in the first place?

Classic programming languages like Pascal, C, C++ and others have been well known as strong typed languages. This means that in those languages stricter typing rules had to be set at compile time.

Every time you declared a variable or a function argument you had to clearly state their type before using them. The reason behind this concept goes way back in time, with the so called type theory seeking to ensure that programs have meaning.

The hardware is unable to discern types. These could be considered more as a human abstraction that enable programmers to think at a higher level, at the time it makes code more expressive and clear.

In addition, it offers advantages from a compiler's perspective such as optimization. Type checking at compile time helps the compiler to use machine instructions in a more efficient way. Safety is another important aspect to take into account, since a strong type system help the compiler to detect errros in advance.

With the advent of new interpreted languages like Basic, JavaScript, PHP, Python where type checking was done at runtime, programmers got used to avoid compiling their code. Then, languages became smarter at detecting types based on context and data.

Back to the roots

Far from starting a new debate about strong typing vs loose typing, we must understand that every language has been created with one specific purpose in mind and no one could forsee that a scripting language like JavaScript would become so popular that it would be extensively used for developing business applications.

Therefore, adding strong typing capabilities to a loosely-typed language like JavaScript, not only helps development teams to produce cleaner and better documented code but also solves a fundamental problem: catching type errors at compile time rather than at run time.

What is TypeScript?

JavaScript is a interpreted or dynamic compiled language, so there is no need for the developer to actually compile the code before running the program. Therefore, when we describe TypeScript as a Typed Superset of Javascript, it means that it provides developers with a new set of statements that enable them to add types to a loosely-typed language like JavaScript.

For instance, when we declare a variable in JavaScript there is no need to determine what type it is. When using TypeScript you must add the type when declaring it, although you could opt-out to set the type if you assign a value to it.

let isDone: boolean
let decimal: number
let big: bigint
let color: string
let name = "John"

Unlike Javascript (.js), TypeScript files use the .ts extension. Browsers are unaware of the existence of TypeScript, therefore it is necessary to pre-process TS code to turn it into Javascript code. This conversion process is called transpilation. Let's point out this subtle distinction:

When compiling, the source code is transformed into another language
When transpiling, the source code is transformed into another language with a similar level of abstraction

Truth to be told, I had to clarify this concept because I have bumped into this term several times and purists make this distinction. However, at this post, as well as in the TypeScript official documentation, for the sake of reading clarity we may equally use either compile or transpile terms to refer to transpilation.

Installation

In order to use TypeScript we can use either npm or yarn

yarn add typescript

npm install typescript

Then, once we create our TS file, we can compile it by using the tsc command

npx tsc

Configuration

We could create TS files in our project and then compile it through the tsc command at the terminal. Let's say we create a file called: app.ts

function add(num1: number, num2: number): number {
  return num1 + num2
}

Then, from the command line we execute:

npx tsc app.ts

a new file called app.js will be generated with the following content:

function add(num1, num2) {
  return num1 + num2
}

However, there are simpler ways to go. The easiest one is to create a tsconfig.json file at the root of your JS project and let the compiler to take decisions based on this configuration.

{
  "compilerOptions": {
    "target": "es6",
    "rootDir": "./src",
    "outDir": "./dist",
    "module": "commonjs",
    "removeComments": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

This configuration file is divided by sections. As we can see this is a basic sample configuration file where we use the following options:

target: It determines the JS version it supports: ES3, ES5, ES6 ...
rootDir: It determines the root dir for your source code (.ts files)
outDir: It determines the output dir for compiled JS files
module: It sets the module system for the program: common.js, UMD, AMD, ...
removeCommments: It removes comments from the compiled code, it is considered a best practice
include: It determines the folders where the source code resides
exclude: It determines what folders or files to exclude from the compilation process

After defining a new configuration file for TypeScript, we are ready to move on and work on multiple TypeScript files located in our src folder. Then, all we need to do is run npx tsc from the command line, so files can be compiled and moved to the distribution folder.

We could also make tsc to be called from one of the tasks at the package.json and even define watch options to automatically run tsc every time our code is modified.

Depending on the technolgy you use and your type of project, there are multiple ways to set TypeScript up. We won´t show every possible configuration scenario in this post, so we encourage the reader to go ahead and read the Official TypeScript Documentation in order to explore more options.

How should we use TypeScript?

TypeScript is nothing but a tool that helps developers to use best practices in software development by adding stricter rules to define data types. But this should go hand in hand with other good practices like scoping variables appropriately by using let or const instead of var.

Basic Types

Let's review the types TS has to offer

Boolean, Number and String

These are the basic ones and should be declared as follows:

let isDone: boolean = false
let decimal: number = 6
let hex: number = 0xf00d
let binary: number = 0b1010
let octal: number = 0o744
let big: bigint = 100n
let color: string = "blue"

Arrays

Arrays types can be written in two ways:

let list: number[] = [1, 2, 3]

let list: Array<number> = [1, 2, 3]

Tuples

Let's say we need to create an array where the first element should be a string and the second one a number. For this and other scenarios we will use something called Tuple:

let x: [string, number]
x = ["hello", 10]

It is important to understand that TS imposes strict control on types and the order they are declared, so based on the previous definition, something like this would not work

x = [10, "hello"] // WRONG

Enums

Just like other languages such as C or C++, TypeScript also has the enum type for declaring multiple constants. However, unlike other languages, TS enum is way more flexible.

enum Color {
  Red,
  Green,
  Blue,
}

let c: Color = Color.Green

Enums historically started with 0, so Red = 0, Green = 1 and Blue = 2. But in TS you could alter the sequence by doing this:

enum Color {
  Red = 1,
  Green,
  Blue,
}

or assign different numbers to each constant

enum Color {
  Red = 2,
  Green = 6,
  Blue = 5,
}

or even assign string values to each constant

enum Color {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

Special types

So far we have seen how to define basic types. But adding strong typing verification to a loosely-typed language causes a huge impact at many levels.

For example, suppose we are interacting with the DOM and we would like to get the value of an HTML element. We can indicate the type of it, but we must make sure it exists before retrieving their value.

const elem = document.getElementById("elementId")! as HTMLInputElement

The exclamation sign at the end, tells TS that we take the risk of the assignment although TS cannot be certain there will be a value to retrieve from that element.

Another interesting case is when we need to indicate that a function will receive a parameter that could be string or number depending the case. In other words, the argument we are passing could be either a string or a number.

For this scenarios we can use the pipeline character (|) to concatenate all possible types it could receive:

function combine(a: number | string, b: number | string): void {
  //logic to validate types and perform operations
}

The pipeline can also be used to indicate that specific strings are supported as parameters.

function foo(color: 'yellow' | 'brown'){...}

In this example, the function accepts a string parameter that has to be either "yellow" or "brown" only.

Functions return types also present further challenges. For instance, if we want to create a function that throws errors, what data type should it return?

For cases like this, TS has another type called: never. This type of value should never occur. Therefore, it is always used in functions that throw exceptions.

function error(msg: string): never {
  throw new Error("msg")
}

On the other hand, functions that return nothing should be declared as void.

function message(msg: string): void {
  console.log("msg")
}

If we do not know what type of data it would be, we could use the unknown keyword. In this case, TypeScript does not control what it comes in it. However, its type must be verified before being assigend to any other type.

let input: unknown

//before assigning it we should check its type
if (typeof input === "string") {
  let name: string = input
}

Besides checking the type before assigning the value, we could even cast the type to a type we know. Casting in TypeScript is done as follows:

let myinput: unknown
let mylength: number = (<string>input).length

let myinput: unknown
let mylength: number = (input as string).length

There are cases where we do not want TS to check the type. For instance, when we use an external library we cannot control, or if we need to define a function that could potentially return any type. For these cases we should use any

declare function getValue(key: string): any
const str: string = getValue("test")

Interfaces

Like in many other languages, interfaces are related to defining types. This definition must be respected when creating an object of this type.

So, let's suppose we have function that receives a user object. We could create an Interface to give shape or set typing rules for this object before using it.

interface User {
  name: string
  age: number
}

function displayPersonalInfo(user: User) {
  console.log(`Name: ${user.name} - Age: ${user.age}`)
}

When creating interfaces we can also add a few modifiers like the ? sign, to indicate that an attribute could be null. Or even use the readonly keyword, to set an attribute as immutable.

interface Square {
  color?: string
  width?: number
}

interface Point {
  readonly x: number
  readonly y: number
}

let square: Square = {
  width: 14,
}

By the way, readonly is an interesting keyword that could also be applied to other types. For instance, it exists an ReadonlyArray definition that allows developers to create an array where elements could not be modified.

let a: number[] = [1, 2, 3, 4]
let ronumbers: ReadonlyArray<number> = a

ronumbers[0] = 4 //WRONG! It cannot be assigned

//But it could be used for iterating over its values for reading purposes
for (const num of ronumbers) {
  console.log(num)
}

Classes

JavaScript supports the use of classes and therefore it is possible to use TypeScript within classes.

class Rectangle {
  height: number
  width: number

  constructor(h: number, w: number) {
    this.height = h
    this.width = w
  }
}

const rectangle = new Rectangle(200, 10)

In TypeScript you can also use private, public, protected and static for the class attributes. Even when these modifiers are not supported by JavaScript yet, they are perfectly transpiled.

TypeScript also supports inheritance and abstract classes.

Generics

Last but not least, we must mention that one of the key features of most popular OOP languages, is also present in TypeScript: Generics.

Reusable components are the foundation of every modern strong typed programming language and once we have introduced strong typing control to JavaScript, we must also provide a way for programmers to define functions that keep the same logic applied to different types of data.

For those who come from languages like C++, C#, Kotlin, Java or even Rust, they must be fully acquainted with this concept.

For the rest of the developers, we should say that Generics are a way to declare an array, class or function that use a type unbeknownst to them during the declaration. This generic type is represented by a letter (usually T), enclosed by greater and less than symbols: .

Any letter or letters can be used, as long as they are enclosed in <>. These letters are later used as tokens within the implementation logic and replaced by actual types when the definition occurs.

function myMax<T>(x: T, y: T): T {
  return x > y ? x : y
}

let intMax = myMax<number>(12, 50)

console.log(intMax)

In this example we define a function that compares two values and returns the biggest one. Notice that the actual type (number) is passed later.

Conclusions

We may conclude that TypeScript, as a static type checker language, has added a new layer to improve JavaScript robustness as a frontend language. As mere observers, we could also glimpse how most languages add similar features: functional programming, lambda functions, strong typing, immutable variables, etc.

This is good because it shows maturity in the software industry. But it is also better for the new software developer and the ones to come.

Javascript Arrays And Arrow Functions

Wed, 12 Aug 2020 00:00:00 GMT

Functional programming has been around for a while now. And the use of lambda functions while processing collections and arrays have been extensively used in several popular languages like Python, Ruby, Kotlin, etc.

However, we can say that during the past few years, Javascript programmers fell in love with Arrow functions and their use with certain array methods.

The objective of this post is to encourage developers to embrace this new programming trend by showing the benefits of this new methodology, opposed to how we used to iterate and process arrays in the past.

What are lambda functions?

Also known as anonymous functions, these expressions are not bound to any identifier. Anonymous functions are often passed as arguments to higher-order functions or are used as the result of a higher-order function that requires to return a function.

Here is a classic example of how to use an anonymous function:

setTimeout(function() {
  console.log("This will be displayed in a second")
}, 1000)

As we can see, these functions do not require a name because they won't be invoked from the outside.

Another example would be assigning an anonymous function to a variable like this:

let display = function() {
  console.log("Message in a bottle")
}

display()

We are then executing the function through the variable it has been assigned to.

Arrow functions

ES6 introduced a new way to define these anonymous functions called: Arrow Functions, which is nothing more than a syntactically shorter alternative for regular function expressions.

Let's see a basic comparison between classic anonymous functions and new arrow functions:

let sum = function(a, b) {
  return a + b
}

let sum = (a, b) => {
  return a + b
}

Basically, we can see that we are omitting the function keword before the parenthesis, but what seduces developers the most, is the fact that we could also trim more keywords and make these expressions even shorter.

We could do something like this:

let sum = (a, b) => a + b

Curly brackets and return can also be omitted when there is only one statement to return.

But wait, parenthesis from parameters could also be removed when there is only one parameter.

let currency = n => `$ ${n}`

currency(80) // $80

Additionally, there are a couple of other interesting rules that apply to Arrow Functions:

Rest parameters: (p1, p2, ...rest) => { ... }
Default parameters: (p1 = defaultValue) => { ... }

Destructuring within the parameter list

let sum = ([a, b] = [3, 3]) => a + b
sum() // 6

Arrow Functions limitations

Now, the million dollars question is: can I use these type of functions to replace every function declaration in JavaScript?

The short answer is no.

Here are set of considerations before deciding to use Arrow Functions

Arrow functions do not have `this` or `arguments`

Something called lexical scoping is used to determine the value of this or arguments.

These type of functions do not have their own this, therefore its value is resolved in the lexical scope like a standard variable.

In simpler terms, this means that this or argumentswithin a an Arrow Function will refer to the values of this and arguments in the environment the arrow function has been defined.

These functions cannot be used with `new`

Since Arrow functions lack of the prototype property, they cannot be used as constructors.

Depending on how functions have been declared, they can be classified as callable or constructable.

Functions created through function declaration can be both, however Arrow Functions can only be called.

Arrays and Arrow Functions

So far we have seen how to correctly define and use Arrow Functions. Now, we are going to show how to properly use them while filtering, transforming or reducing arrays.

For this purpose, we are going to explore some interesting and extensively used methods that JavasScript Arrays have to offer:

filter() : This method creates a new array with the elements that meet the condition imposed by the passed function

In the following example, we are filtering the array by those persons who are over 30 years old.

const persons = [
{ name: "John", age: 35 },
{ name: "Anne", age: 24 },
{ name: "Tom", age: 41 },
{ name: "Andrew", age: 55 },
{ name: "Mary", age: 18 },
]

const overThirty = persons.filter(person => person.age > 30)
console.log(overThirty)
// Array[{name: "John", age: 35},{name: "Tom", age: 41},{name: "Andrew", age: 55}]

map() : This method creates a new array with the result of the passed function. This is a very useful method because it is a very fast way to perform a quick transformation of elements.

For this example, let's suppose we have an array of employees and we would like to obtain their name and age in a new object.

function getAge(birthDate) {
    const YEAR_MILLISECONDS = 1000*60*60*24*365.25;
    const today = new Date();
    const diff = today-birthDate;
    return Math.floor(diff/YEAR_MILLISECONDS);
}

const employees = [
    {name: "John", birthDate: new Date(1985,07,09)},
    {name: "Anne", birthDate: new Date(1996,05,20)},
    {name: "Tom", birthDate: new Date(1979,01,05)},
    {name: "Andrew", birthDate: new Date(1965,03,10)},
    {name: "Mary", birthDate: new Date(2002,02,15)}
]

employees.map(emp => {
    return {
        name: emp.name,
        age: getAge(emp.birthDate)
})

As we can see, Array.map() allows us to apply the tranformation with the arrow function we are passing to it. As a result we obtain a new array with new objects in a neat and simple way.

But wait, we could also use functional programming to take the output of this transformed data as the input of the Array.filter() and obtain the name of the employees who are over 30.

employees.map(emp => {
    return {
        name: emp.name,
        age: getAge(emp.birthDate)
}).filter(emp => emp.age > 30)

In a nutshell, what makes this appealing enough is how we can combine different methods and make good use of lambda functions to simplify the programming style.

Before wrapping this up, let's analyse one more interesting array method.

reduce() : This method executes the passed function (known as reducer), against each element and the resulting output is only one value.

This method is usually used to group or accumulate values. For instance, based on our past examples we could add salary as another property for the Employee and we would like to obtain the total of it.

const employees = [
  { name: "John", salary: 75000 },
  { name: "Anne", salary: 45000 },
  { name: "Tom", salary: 123000 },
  { name: "Andrew", salary: 80000 },
  { name: "Mary", salary: 65000 },
]
employees.reduce((total, emp) => (total += emp.salary), 0)

As shown in this example, we are passing a function called reducer with two parameters, the first one is the accumulator and the second one corresponds to the element.

In fact, the reducer function could receive up to 4 parameters:

Accumulator
Current value
Current index
Source array

Whatever is returned from this function is added to the accumulator, which is later returned as the only value.

Notice: The second parameter of the reduce method is the initialization value for the accumulator. If it is ommited, the first element of the array will be taken as initial value.

Summary

Programming styles change along the years and we must keep up at the latest trends. It is interesting to observe though, how most languages out there are going towards the same direction.

For example, most of them offer functional programming, lambda functions, promote the use of const variables over mutable ones and offer strong types.

Even when Javascript is not typed out of the box, we must not forget the rising popularity of Typescript.

All in all, it is good to realize that to some extent we feel we are going on the right track.

How to switch themes by using useContext

Wed, 22 Apr 2020 00:00:00 GMT

Since last year, React introduced hooks and with that a nicer way of solving common programming situations that previously required other third-party technologies and even complex props propagation scenarios.

Hooks helped developers to use functional components over classes, improve state management and avoided the complexity that high-order components pattern and props rendering brought to the framework.

Nowadays, React applications have become easier to implement and its code is more organized. One of the caveats about non opinionated frameworks is that its code might become cluttered somehow; in particular when they need of other tools to solve simple issues.

Context is a feature that allows developers to share global data along multiple React components.

In the following sample application that can be downloaded here, we will show step by step how to implement a theme switcher, by clicking an icon located at the header.

This feature is a nice to have one, now that the dark mode has become so popular.

Objective

The objective is to define a few components with children, define a Context (in a our case will be the theme) and finally determine how we are going modify this theme from within a child component.

Solution

Firstly, we are going to define a few components:

components/Header.js - It has a menu, logo, serach bar and an icon for switching themes
components/Main.js - It is the main container displaying some random data
components/Layout.js - It is a common component to include the Header and other sub components
components/ThemeSwitcher.js - It is a component that has the button with the function for switching between themes.
contexts/ThemeContext.js - It is a component where the Context is created and initialized.

Before diving into the solution, here are the extra packages I have used:

{
  "name": "theme-context",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...
    "bootstrap": "^4.4.1",
    "node-sass": "^4.13.1",
    "react-bootstrap": "^1.0.0",
    "react-helmet": "^6.0.0",
    ...
  },
  ...
}

By the way, for this solution I have used react-bootstrap and sass

Let's start by defining ThemeContext (src/context/ThemeContext.js).

import React from "react"

const ThemeContext = React.createContext({
  theme: "light",
  setTheme: () => {},
})

export default ThemeContext

The React.createContext() function is used to create the context. Then we will use ThemeContext.Provider to enclose all the components we would like to share the context with.

When creating a Context we can optionally initizalize its data. In our case we need a theme variable to hold the actual value of the current theme and since we want to be able to update this variable, we also define a function setTheme.

Now, let's see our Header component (/src/components/Header.js)

import React, { useContext } from "react"
import { Form, Navbar, Nav, FormControl, Button } from "react-bootstrap"
import ThemeContext from "../contexts/ThemeContext"
import ThemeSwitcher from "./ThemeSwitcher"

const Header = () => {
  const { theme } = useContext(ThemeContext)

  return (
    <>
      <Navbar bg={theme} variant={theme}>
        <Navbar.Brand href="#home">Logo</Navbar.Brand>
        <Nav className="mr-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#features">Features</Nav.Link>
          <Nav.Link href="#pricing">Pricing</Nav.Link>
        </Nav>
        <ThemeSwitcher />
        <Form inline>
          <FormControl type="text" placeholder="Search" className="mr-sm-2" />
          <Button variant="outline-info" className="search-button">
            Search
          </Button>
        </Form>
      </Navbar>
    </>
  )
}

export default Header

This code is self explanatory, a Header functional component is defined where a set of basic Bootstrap components are used to render a top navbar with a logo, a menu and a search box.

In addition, we make use of the Context by calling useContext() and passing the ThemeContext context we have previously defined, as parameter.

So the useContext hook has to be imported at the beginning, as well as the ThemeContext component.

We use then the hook to retrieve the theme Context and get the theme variable with the current theme information to be displayed in the header.

Additionally, we also render the ThemeSwitcher component that has the button definition along with the logic for switching between themes.

Notice however the use of another component ThemeSwitcher. This component has the button with the logic for switching themes. At this component it is only rendered.

So far so good, now we have to create a define another child component called Main for using the same Context and a Layer that will combine Header and Main

Here is the Main (src/components/Main.js) component:

import React, { useContext } from "react"
import { Container } from "react-bootstrap"
import ThemeContext from "../contexts/ThemeContext"

export const Main = () => {
  const { theme } = useContext(ThemeContext)

  return (
    <Container fluid className={theme}>
      <h1>List of books</h1>
      <ul>
        <li>Sapiens</li>
        <li>Fear and loading of the campaign trail '72</li>
        <li>Range</li>
        <li>Chasing the scream</li>
        <li>Former People</li>
      </ul>
    </Container>
  )
}

The only relevant thing to mention here is that we use the Context hook (useContext) to retrieve the theme value and use it to determine the CSS class name for the Container.

This value could be "dark" or "light" and this is the name of our CSS class (/src/styles.scss).

.dark {
  background-color: #404042;
  color: gray;
}

Now, the Layout is the component that combines Header and Main components.

import React, { useContext } from "react"
import Header from "./Header"
import { Helmet } from "react-helmet"
import ThemeContext from "../contexts/ThemeContext"

const Layout = ({ children }) => {
  const { theme } = useContext(ThemeContext)
  const bg =
    theme == "dark"
      ? "body {background-color: #404042; color: gray;}"
      : "body {background-color: #fff; color: #000;}"
  return (
    <>
      <Helmet>
        <style>{bg}</style>
      </Helmet>
      <Header />
      {children}
    </>
  )
}

export default Layout

An important consideration here is that since we also want to change the text and background color for the whole page, we need to style the body element. In order to do so, we use the react-helmet package that allows us to embed style into the head.

Now, let's see where the magic happens, at the App.js component (/src/App.js)

import React, { useState } from "react"
import Layout from "./components/Layout"
import { Main } from "./components/Main"
import ThemeContext from "./contexts/ThemeContext"

function App() {
  const [theme, setTheme] = useState("light")
  const value = { theme, setTheme }

  return (
    <div className="App">
      <ThemeContext.Provider value={value}>
        <Layout>
          <Main />
        </Layout>
      </ThemeContext.Provider>
    </div>
  )
}

export default App

Firstly, we use the useState hook to define an state object for modifiying the theme. So theme will hold the current theme value and setTheme allows us to change this theme value from the children.

In addition, let's see that we enclose the Layout component within our ThemeContext.Provider, passing the initial value as prop.

By doing so, every child component can call useContext to retrieve the ThemeContext component.

Finally, there is one more step, we must add a button at the navbar that allows us to switch between both themes.

import React, { useContext } from "react"
import { Button } from "react-bootstrap"
import ThemeContext from "../contexts/ThemeContext"
import Moon from "../images/moon.svg"
import Sun from "../images/sun.svg"

function ThemeSwitcher() {
  const { theme, setTheme } = useContext(ThemeContext)

  return (
    <Button
      onClick={() => setTheme(theme == "dark" ? "light" : "dark")}
      className="button-theme"
    >
      <img
        src={theme == "dark" ? Sun : Moon}
        className="theme-icon"
        alt="theme"
      />
    </Button>
  )
}

export default ThemeSwitcher

We use two image icons (sun and moon) to alternate between both themes. As you may recall, when we defined our objet for the ThemeContext, we also passed a setTheme function. So, from this ThemeSwitcher component, we call useContext to retrieve the theme and the function.

Upon clicking the button, this setTheme function is called to modify the theme's value and the image icon is changed accordingly.

Summary

In a nutshell, the useContext hook and Context management in React is not that difficult to use but it should not be overused.

Context could be used to share data like themes, languages or current logged user along the site.

Variables and memory management in Rust

Fri, 17 Apr 2020 00:00:00 GMT

Lately there has been a lot of fuss around the Rust programming language developed by the Mozilla team around 2010.

The reality is that this language that was created as an alternative to C++ has gained popularity once it has become more mature, due to the following key features:

Safety
Great performance
Packaging and distribution
Helpful community

The objective of this post is to learn more about how Rust handles variables and memory to catch errors at compile time rather than in runtime. This is one of the features that makes it the safe language of choice for critical applications.

Rust applies a concept called: linear types. This means that is based on a linear logic that ensures that objects are only used once and then safely removed or deallocated.

Linear type systems allow references but not aliases. In Rust variables are immutable by default, therefore the following code triggers a compile error

fn main() {
    let x = 5;
    println!("The value of x is: {}", x);
    x = 6;
    println!("The value of x is: {}", x);
}

If you really need to modify a variable once a value has been assigned to it, you must specify it this way:

fn main() {
    let mut x = 5;
    println!("The value of x is: {}", x);
    x = 6;
    println!("The value of x is: {}", x);
}

Now, you must be wondering why immutability should be a de-facto feature and how this may contribute to a produce a safer code.

Then you should understand another Rust concept in memory management: Ownership.

Understanding Ownership

Rust does not have a garbage collector like Java or other languages. Its philosophy is based on the premise that whoever declares a variable should own it until the end of the flow. But before digging into this concept, we need to refresh a few old concepts about memory: stack and heap.

Even when stack and heap are memory spaces available to be used during runtime, their structure differs. Stack works in a LIFO (last in, first out) fashion, meaning it stores values in the order it arrive and remove them in the opposite order.

The most important concept about stack is that all data stored there must have a known, fixed size. If we don´t know the size of what we are going to store, then we should use the heap.

Heap is less organized and whenever you need to put data on the heap, you request a certain amount of space, the operating system finds an empty spot that could fit and returns a pointer, which holds the address of that location in memory. This process is called allocating.

Pushing values onto the stack is not considered allocating since the reserved space for data is known before hand. Thus, using the stack is faster than allocating on the heap because the operating system does not have to search for a new place to store data. Data in the stack is always on top.

When a function is called, the values passed into the function as well as the function's local variables get pushed onto the stack. When the function is over, those values get removed from the stack.

Now, historically the main problem with languages that allow developers to allocate data in the heap (using pointers), was keeping track of what parts of code are using what data on the heap and the deallocation of unused data from the heap. This is what the Rust concept of ownership attempts to solve.

Each value in Rust has a variable that could be seen as its owner and each variable can have one owner at a time. Whenever the owner goes out of scope, the value is gone.

Let's see the following example:

let s = String::from("hello");

Here we are using a variable that points to a String structure in memory. The string structure is allocated in the heap area and s1 is a variable that has information about the address of the String structure, its length and capacity.

Now, the s variable is immutable by default, so if we wanted to modify the String data, we should do this:

let mut s = String::from("hello");

s.push_str(", world!"); // push_str() appends a literal to a String

println!("{}", s); // This

The mut keyword lets Rust know about the variable mutability.

Now, here comes the interesting part about ownership, let's take a look at the following code:

let s1 = String::from("hello");
let s2 = s1;

In this case, s1 is assigned to s2, therefore if we think of other languages like C++, both s2 and s1 would be pointing to the same structure. So, after the assignment in the same function I should be able to do this:

println!("{}, world!", s1);

However this code fails in Rust because once s1 has been assigned to s2, s1 does not belong the owner so it is not longer valid. This is what ownership is about. This way, Rust does not have to worry about keeping track of scenarios where the structure is removed from s2 and s1 may remain orfan.

At this point you may ask, is there then a way to actually deep copy structures and make s1 and s2 point to a valid structure with the a replicated data? The answer is yes by using a function called clone.

let s1 = String::from("hello");
let s2 = s1.clone();

So far so good, we know how ownership works in Rust but what about functions? In order to understand this, let's look at the following example:

fn main() {
    let s1 = String::from("hello");
    let s2 = takes_ownership(s1);

    println!("s1 '{}'.", s1); //not ok
    println!("s2 '{}'.", s2); //ok
}

fn takes_ownership(st: String) -> String {
    st
}

Here, s1 is passed as parameter to the takeownership_ function. Unlike other languages where functions naturally make a copy of parameter into an local variable, Rust keeps clinging to its rules and s1 once it is passed to takesownership_ function, so it stops existing within the main() function scope.

Now, what if we actually need to borrow ownership? Then we should pass a reference to the variable like this:

fn main() {
    let s1 = String::from("hello");

    let len = calculate_length(&s1);

    println!("The length of '{}' is {}.", s1, len);
}

fn calculate_length(s: &String) -> usize {
    s.len()
}

Here, we are passing a reference of s1, then s and s1 points to the same structure. Semantics is important here because &s1 lets us create a reference to the value of s1 but does not own it. This is a very important distinction because the actual value of s1 will only be dropped after the real owner from the main() scope, stops using it.

The &s1 syntax lets us create a reference that refers to the value of s1 but does not own it. Because it does not own it, the value it points to will not be dropped when the reference goes out of scope.

We cannot modify the String structure from within the calculatelength()_ function because we borrowed s1, we don´t own it.

Now, what if we need to modify the String owned by s1 and we want to continue to let s1 as owner of the struct in the main() function?

For this case we have something called Mutable References.

fn main() {
    let mut s = String::from("hello");

    change(&mut s);
}

fn change(some_string: &mut String) {
    some_string.push_str(", world");
}

Using mut this way does the trick but there is only one caveat, for security reasons you can only use mutable references only once in a particular scope for a particular piece of data.

Therefore, something like this will fail:

let mut s = String::from("hello");

let r1 = &mut s;
let r2 = &mut s;

println!("{}, {}", r1, r2);

Summary

Any number of immutable references or one mutable reference can exist at any time of your code. However, references must always be valid.

Notice: The objective of this post was to find another way to explain how variables are handled by Rust, therefore most of the source code examples here have been borrowed from the official Rust website documentation.

Your Site's RSS Feed

TypeScript, why is so important?

Why do types exist in the first place?

Back to the roots

What is TypeScript?

Installation

Configuration

How should we use TypeScript?

Basic Types

Boolean, Number and String

Arrays

Tuples

Enums

Special types

Interfaces

Classes

Generics

Conclusions

Javascript Arrays And Arrow Functions

What are lambda functions?

Arrow functions

Arrow Functions limitations

Arrow functions do not have this or arguments

These functions cannot be used with new

Arrays and Arrow Functions

Summary

How to switch themes by using useContext

Objective

Solution

Summary

Variables and memory management in Rust

Understanding Ownership

Summary

Arrow functions do not have `this` or `arguments`

These functions cannot be used with `new`