Forem: Amit Solanki

ReasonML - Advent of Code - Day 2

Amit Solanki — Mon, 02 Dec 2019 18:48:35 +0000

ReasonML lag features for today
Setup
First Problem
Second Problem

Advent of Code - Day 2. If you are new here, I would recommend you to check the Day 1 solution where I cover more basics on ReasonML.

ReasonML Language Features for today

I am only going to introduce the language features we are going to use today. Some of them are List, Switch (Pattern Matching), Arrays, rec (Recursive functions).

List is defined like so

let list_of_numbers = [0, 1, 2, 3, 4, 5];

Lists are immutable, which means we cannot update their values if we need to do random updates we should use Arrays instead. List is great for prepending items and immutability.
An array is defined like so

let inputArray = [|1, 2, 3, 4|];

Unlike List, an Array can be mutated, which means we can update any arbitrary value like array[1] = 3. Mutability can be a problem at times, we will use List for those cases, we can convert a List to an array using Array.of_list(List).
Pattern Matching is one of the most interesting features of Reasonml, it is a switch statement on steroids.

switch (data) {
| "hello" => "Hello world"
| "Bye" => "Bye world"
| _ => "Welcome"
};

We have defined a very basic form of a switch statement, it will just check if data matches any of the cases like "hello" or "Bye" and take respective actions. The _ is our default case when nothing matches. We can do more interesting things with switch, but that's for some other time.
As we have seen on Day 1, we have to use rec to mark a function as recursive. A recursive function is a function which calls itself.

Setup

Let us create a file Day2.re in our src folder and add the main function as we did on Day 1.

let main = () => {
  Js.log("Welcome to day 2");
};

Inside our index.re let's comment the Day1.main() and Day2.main().

// Day1.main();
Day2.main();

Now let's look at the first problem.

First Problem

Please check the problem statement at Advent of code Day 2 problem.

To brief, we are given a list of integers that acts like computer instructions. The pattern is fixed for it, the first number is operation/instruction type, the next two numbers are pointers to the values to use for the operation, and next to them is the pointer to where we should store the result of our operation. There are two operations, add 1 and multiply 2, and one terminal notation 99. For example [2,4,4,5,99,0], here the first character 2 states we should multiply the values pointed by the next two pointers, which is 99 for both (this is zero-indexed), and the third pointer 5 points to where we should store the result of multiplication. So 99 * 99 = 9801, the final solution would be [2,4,4,5,99, 9801]. The actual answer expected is the value at index 0.

So the plan is to go through each instruction one by one, solve it and proceed until we hit 99, where we stop and get the value at 0th index - our answer.

Let's define some test values in an array.

let test_values = [|2, 4, 4, 5, 99, 0|];

Now we define our compute function, which will take the int_code(The input) and instruction_pointer and recursively call itself until we hit 99.

let rec compute = (int_code, instruction_pointer) => {
  let op_code = int_code[instruction_pointer];
  if (op_code != 99) {
    compute(int_code, instruction_pointer + 1);
  } else {
    0;
  };
};

The above function does exactly what we want, though it is of no use till now. note that we have to write rec to say that this function is recursive. Let's call this from our main function with our test_values.

let main = () => {
  compute(test_values, 0) |> Js.log;
};

The console should log 0 at this point. Now that we know our recursion is working, lets us go through each instruction recursively and solve them.

let rec compute = (int_code, instruction_pointer) => {
  let op_code = int_code[instruction_pointer];
  if (op_code == 1) {
    let first_value_pointer = int_code[instruction_pointer + 1];
    let second_value_pointer = int_code[instruction_pointer + 2];
    let result_pointer = int_code[instruction_pointer + 3];
    int_code[result_pointer] =
      int_code[first_value_pointer] + int_code[second_value_pointer];
    compute(int_code, instruction_pointer + 4);
  } else if (op_code == 2) {
    let first_value_pointer = int_code[instruction_pointer + 1];
    let second_value_pointer = int_code[instruction_pointer + 2];
    let result_pointer = int_code[instruction_pointer + 3];
    int_code[result_pointer] =
      int_code[first_value_pointer] * int_code[second_value_pointer];
    compute(int_code, instruction_pointer + 4);
  } else {
    int_code[0];
  };
};

Here we check the op_code value and decide which operation to do add, multiply, or terminate. For both add and multiply we take the value pointers from the next 2 instructions and the result pointer from the third pointer, then we compute the value and store them at the said location. Finally, we call our compute function with instruction_pointer + 4 to move it after the current instruction set. For any case other than 1 and 2, we terminate our calls and return the result at the 0th index.

The console should log 2. You can test with other input values as well. It should just work fine.

Now let's refactor our solution a bit, using switch case.

let rec compute = (int_code, instruction_pointer) => {
  let op_code = int_code[instruction_pointer];
  switch (op_code) {
  | 1 =>
    int_code[int_code[instruction_pointer + 3]] =
      int_code[int_code[instruction_pointer + 2]]
      + int_code[int_code[instruction_pointer + 1]];
    compute(int_code, instruction_pointer + 4);
  | 2 =>
    int_code[int_code[instruction_pointer + 3]] =
      int_code[int_code[instruction_pointer + 2]]
      * int_code[int_code[instruction_pointer + 1]];
    compute(int_code, instruction_pointer + 4);
  | 99 => int_code[0]
  | _ => int_code[0]
  };
};

Here we check the op_code, and for each possible value which we want to handle we write a pattern 1 | 2 | 99 and _ is the default case.

You can pass the input you get from Advent Of code to get your solution.

Second Problem

The second problem is to find inputs required to get a specific output, the inputs are at index 1 and 2, called as noun and verb. The instruction set is the same as before, and the specific output is 19690720, for which we have to find values to pass at position 1 and 2. the values can be between 0 and 99 inclusive.

The plan here is to brute force (No elegant solution here, I might add a bonus post when I find one, or you can comment below). So we will loop through all the values of noun and verb between 0 and 99 until we get a solution.

For this let's create another recursive function that takes noun and verb as input.

let rec find_inputs = (noun, verb) =>
  if (verb >= 99 && noun < 99) {
    find_inputs(noun + 1, 0);
  } else if (verb < 99) {
    find_inputs(noun, verb + 1);
  } else {
    "End of the loop";
  };

The above function will loop through all the combinations of noun and verb from 0 till 99 and then output "End of the loop" in the console. Here we first check that have we gone from 0 till 99 for the verb, if yes then we increment the noun, else we keep on incrementing the verb until 99.

With the loop set up, we now just have to get the computed_value from our compute function, check if it is the value we want, then return noun * 100 + verb as required by the problem, else continue with the loop.

let rec find_inputs = (noun, verb) => {
  let int_code = test_values;
  int_code[1] = noun;
  int_code[2] = verb;
  let computed_value = compute(int_code, 0);
  if (computed_value == 19690720) {
    noun * 100 + verb;
  } else if (verb >= 99 && noun < 99) {
    find_inputs(noun + 1, 0);
  } else if (verb < 99) {
    find_inputs(noun, verb + 1);
  } else {
    0;
  };
};

We take the input and change the values at 1 and 2 with noun and verb respectively, then get the computed value to check if we get the correct value or not.

Let's call this from our main function.

let main = () => {
  find_inputs(0, 0) |> Js.log;
};

If you check your console, you would see 0 as the output. This is because we are using an array, which is mutable and hence it affects our solution (This was intentional). To fix this we need to use List, converting our array to list.

let test_values = [2, 4, 4, 5, 99, 0];

Notice we don't have any | here. List is immutable, which solves one of our problems of keeping the original input the same, but we cannot update its value, which is the need for the problem. So let's convert our input to Array just before using it.

let rec find_inputs = (noun, verb) => {
  let int_code = Array.of_list(test_values);
  int_code[1] = noun;
  int_code[2] = verb;
  let computed_value = compute(int_code, 0);
  if (computed_value == 19690720) {
    noun * 100 + verb;
  } else if (verb >= 99 && noun < 99) {
    find_inputs(noun + 1, 0);
  } else if (verb < 99) {
    find_inputs(noun, verb + 1);
  } else {
    0;
  };
};

Here Array.of_list converts our list into an Array, which we can mutate as we want, without affecting our original input List.

Tada, we have our solution.
We will explore more tomorrow. Message me or comment here if you have any questions or better solutions.

ReasonML - Advent of Code - Day 1

Amit Solanki — Sun, 01 Dec 2019 17:47:31 +0000

Advent Of Code
Intro to ReasonML
Setup
First Problem
Second Problem

Advent Of Code

Advent of Code, is an advent calendar to solve small programming puzzles, every day for 25 days. once you solve one puzzle the next one opens up.

Signup for Advent Of Code 2019 if you haven't already, and please try and attempt it before reading this post, especially if you are a beginner. We are going to attempt it in ReasonML

Intro to ReasonML

Reasonml is a typed language which compiles down to Javascript. To get more intro on it I would recommend you to visit the official getting started guide.

I am only going to introduce the language features which we are going to use and should be aware of.

To define a variable we use the let keyword followed by the variable name.

let counter = 0;

Types are inferred. This means that we don't have to write types for every variable we use. In the above example the variable counter is of type int.
If a variable is of type int (integer) we cannot do any operations which needs a float (Floating number). To do any operation using that variable we will have to type cast (convert) it into another type, which is float in this example.

let floatingCounter = float_of_int(counter);

Array is defined like so

let inputArray = [|1, 2, 3, 4|]

Notice we use | after [ and before ]. This is to differentiate between array (similar to Javascript arrays) and List which is just [1]. We will focus on array for now.
We define functions like so.

let myFunction = (param) => {
  // function body ...
  param
}

Last statement of a function is the return value.
If else statement is to be used for ternaries. By this I mean that the last statement in their block is the return value of the block, for example.

let initialValue = 10;
let counter =
  if (initialValue <= 10) {
    5;
  } else {
    10;
  };

We don't need to import any files here. Files are automatically scoped as modules in ReasonML.
Reasonml can be converted to Ocaml and Javascript. We use BuckleScript to convert ReasonML to Javascript, which provides us some handy utility functions from JS-land in Reason, like Map, Reduce, Filter etc. We will be using Map and Reduce from Belt which is a stdlib shipped with BuckleScript.
To log using console.log we can use Js.log

Setup

We want a bare minimum setup, in which we can create a file for each day and run it to get the solution. We will run the generated JS file in Node.

npm install -g bs-platform # to install buckle-script
bsb -init advent-of-code -theme basic-reason # initialise or project
cd advent-of-code
yarn add nodemon # nodemon helps us reload node server on file changes

We'll need a few scripts to get output on every change, add the following in you package.json.

"scripts": {
    "nodemon": "nodemon ./src/index.bs.js",
    "build": "bsb -make-world",
    "start": "bsb -make-world -w",
    "clean": "bsb -clean-world"
  }

The files generated by BuckleScript has .bs before them and are readable like normal JS (they don't uglify it), we can edit them but I wouldn't recommend at this stage.

There are two scripts of interest here. start and nodemon. start will generate .bs.js files for us whenever we make change in .re (reasonml) files. nodemon will restart the node process whenever index.bs.js file changes or any of it's imported files change.

Rename the Demo.re file in src to Day1.re and create a function main in it, like so.

let main = () => {
  Js.log("Hello World")
}

Lets create our point of entry file, that is the index.re which will generate index.bs.js. Create the file in src.
We need to call our main function in Day1.re from index.re, in reasonml there is no need to import from other files, they are scoped with their file names so to call main function in index.re we can directly call it as Day1.main(). So our index.re file should look like.

Day1.main()

Now let's look at the first problem.

First Problem

We are given a list of masses, and need to calculate the fuel needed for each one of them and report the total amount of fuel needed. Fuel needed for each item of mass m if given by mass / 3 - 2.

To solve the given problem, we will loop through each item in the list(array) calculate the fuel values, then add them to get the final result.

Let's define some test values in an array.

let test_values = [| 14, 9, 12 |]

Now we need a function to calculate the fuel for a given mass. This function will take an int divide it 3, floor the result and subtract 2 from it.

let fuel_calculator = (mass) => {
  let mass_as_float = float_of_int(mass); // we need mass in float since floor accepts only floating values
  let mass_divided_by_three = mass_as_float /. 3.0; // notice the division sign and 3 as 3.0
  let floored_value = floor(mass_divided_by_three);
  let floored_value_as_int = int_of_float(floored_value)
  let fuel_value = floored_value_as_int - 2;
  fuel_value // the return value
}

Here we first convert the integer input to float, using float_of_int function. Then we divide by 3.0, for denoting a value as float we have to add .0 at the end. Then we floor the value using floor function, this is similar to Math.floor in JS. The floored value is a float and we want int to proceed, so we convert it to int using in_of_floor. Then we just subtract the value with 2.

let's call the function to test if it works properly.

Js.log(fuel_calculator(14)) // should log '2'

let's refactor the function a bit.

let fuel_calculator = mass => {
  int_of_float(floor(float_of_int(mass) /. 3.0)) - 2;
};

We can use the |>(pipe) operator to pipe the value from one function to another. let's see how we can use it in the above function.

let fuel_calculator = mass => {
  ((mass |> float_of_int) /. 3.0 |> floor |> int_of_float) - 2;
};

You can read the above function as take mass and convert it to float, divide by 3, floor it, convert it back to int and subtract 2 from the result.

Now that we have a way to calculate the fuel, let's look into looping over the array. Just as in javascript we use Array.map to map over an array to get another array, we can use Belt.Array to loop over an array. (I am assuming that you are aware of JS Map).

We can use it like below.

let mapping_function = (array_value) => array_value
let result = Belt.Array.map(input_array, mapping_function)

Since it would be tedious to write Belt.Array every time we use it, let's alias it.

module A = Belt.Array
let mapping_function = (array_value) => array_value
let result = A.map(input_array, mapping_function)

It would also be better if we can just pipe the array into Map like we did before. |> is used to pipe the last argument, and -> is used to pipe the first argument.

module A = Belt.Array
let mapping_function = array_value => array_value;
let result = input_array->A.map(mapping_function);

Great, now we know how to map and we have the mapping function as well as the input, let's combine all of them together

module A = Belt.Array;

let fuel_calculator = mass => {
  ((mass |> float_of_int) /. 3.0 |> floor |> int_of_float) - 2;
};

let initialValue = [|14, 9, 12|];

let main = () => {
  let result = initialValue->A.map(fuel_calculator);
  result |> Js.log;
}

Console should log [2, 1, 2].
Now we have an array of fuel values for each mass, we need to add all of them to get final result.

To do so we will use Array.reduce. and an add function. The add function takes 2 values i and j adds them and returns the value. (I am asumming you know Array.reduce from JS)

module A = Belt.Array;

let fuel_calculator = mass => {
  ((mass |> float_of_int) /. 3.0 |> floor |> int_of_float) - 2;
};

let initialValue = [|14, 9, 12|];

let add = (i, j) => i + j;

let main = () => {
  let result = initialValue->A.map(fuel_calculator)->A.reduce(add);
  result |> Js.log;
}

Console should log 5. Now you can pass the input you get from Advent Of code to get your solution.

Second Problem

Now we have to calculate the mass of the fuel we are adding, and the fuel required to add that fuel, and so on and so forth. This looks like a classic recursive call problem. let's see how we can approach it in ReasonML.

we first need to calculate the fuel required to carry the said mass, then we have to calculate the fuel required to carry that Fuel, and recursively call until the mass is 0.

let rec getTotalFuel = mass => {
  if (mass <= 0) {
    0;
  } else {
    let fuelReq = getFuel(mass);
    if (fuelReq <= 0) {
      mass;
    } else {
      getTotalFuel(fuelReq) + mass;
    };
  };
};

Notice we have added rec after let, to say that this function is a recursive function. Let's refactor it a bit, we can do away with just one if-else here. Since we know that any value less than 9 will mean fuel required is 0.

let rec get_total_fuel = mass => {
  if (mass < 9) {
    mass;
  } else {
    let fuelReq = getFuel(mass);
    get_total_fuel(fuelReq) + mass;
  };
};

The above function should give us our result, now we need to run it for each mass-fuel value.

module A = Belt.Array;

let fuel_calculator = mass => {
  ((mass |> float_of_int) /. 3.0 |> floor |> int_of_float) - 2;
};

let initialValue = [|14, 9, 12|];

let add = (i, j) => i + j;

let rec get_total_fuel = mass => {
  if (mass < 9) {
    mass;
  } else {
    let fuelReq = getFuel(mass);
    get_total_fuel(fuelReq) + mass;
  };
};

let main = () => {
  let result = initialValue->A.map(fuel_calculator)->A.map(get_total_fuel)->A.reduce(add);
  result |> Js.log;
}

Et voilà, we have our solution. We can refactor the above functions, like tail call optimisation etc.
We will explore more tomorrow. Mesage me or comment here if you have any question.

Day 2 - Solution

Optional Chaining for Javascript - ES proposal

Amit Solanki — Sat, 30 Nov 2019 08:50:30 +0000

We saw nullish coalescing yesterday, today let's see optional chaining another awesome ESnext feature. It is so awesome not to talk about.

Just like nullish coalescing, optional chaining helps us handle undefined and null cases. let's consider the following example

let company = {
  name: 'Github',
  revenue: 2000,
  users: [{name: 'John', handle: '@john'}, {name: 'doe', handle: '@doe'}],
  getUserNames() {
    return users.map(user => user.name)
  }
}

to access the values of this object, if they or the object can be undefined or null we would normally do the following.

const companyName = (company !== undefined && company !== null) ? company.name : undefined;

In contrast with optional chaining we can do

const companyName = company?.name;

The Syntax

obj?.prop       // optional static property access
obj?.[expr]     // optional dynamic property access
func?.(...args) // optional function or method call

Let's see how we can handle multiple ways of accessing properties of an object.

Static
Dynamic
Function Call
Dom access

Static Properties

let company = {
  name: 'Github',
  revenue: 2000,
  users: [{name: 'John', handle: '@john'}, {name: 'doe', handle: '@doe'}],
  getUserNames() {
    return users.map(user => user.name)
  }
}

// with optional Chaining
const companyName = company?.name;

// without optional Chaining
const companyName = (company !== undefined && company !== null) ? company.name : undefined;

Dynamic Properties

let company = {
  name: 'Github',
  revenue: 2000,
  users: [{name: 'John', handle: '@john'}, {name: 'doe', handle: '@doe'}],
  getUserNames() {
    return users.map(user => user.name)
  }
}

// with optional Chaining
const companyName = company?.['name'];

// without optional Chaining
const companyName = (company !== undefined && company !== null) ? company['name'] : undefined;

Function calls

let company = {
  name: 'Github',
  revenue: 2000,
  users: [{name: 'John', handle: '@john'}, {name: 'doe', handle: '@doe'}],
  getUserNames() {
    return users.map(user => user.name)
  }
}

// with optional Chaining
company.getUserNames?.();

// without optional Chaining
const companyName = (company !== undefined && company !== null && Object.prototype.hasOwnProperty('getUserNames') && typeof company.getUserNames === 'function') ? company['name'] : undefined;

Dom access

Optional Chaining supports DOM and its methods, so we can do stuff like this


const val = document.querySelector('input#name')?.value;

Optional Chaining will always return undefined if the expression fails.

const value  = company?.name;

// 'value' will be undefined if company is undefined.

So we can pair optional chaining with nullish coalescing to handle those cases.

const value  = company?.name ?? 'default name';

// 'value' will be 'default name' if either the company or name is undefined or null.

To wrap it up with a complete example

let company = {
  name: 'Github',
  revenue: 2000,
  users: [{name: 'John', handle: '@john'}, {name: 'doe', handle: '@doe'}],
  getUserNames() {
    return users.map(user => user.name)
  }
}

// Static access with default value
const value  = company?.name ?? 'default name';

// Dynamic access with default value
const companyName = company?.['name'] ?? 'default value';

// Function call
company.getUserNames?.();

Optional chaining and nullish coalescing brings a lot of benefits, by reducing the complexity and making code readable. Give them a try and let me know your opinions in comments below.

You can use the following babel plugins to use them today.

Follow me on twitter or here at dev.to

Nullish Coalescing for JavaScript

Amit Solanki — Fri, 29 Nov 2019 11:01:06 +0000

Nullish Coalescing proposal has been moved to stage 3, i.e. soon it will be added to JS standards, let's see how it helps us.

How many times have you checked whether a variable is null or not? Not undefined, '' or false but just null, I would typically add an if condition variable === null just for that, and I've done this countless number of times.

Consider the following code

let counter;

if(response.data === null) counter = 1;
else counter = response.data;

What if we could do this easily without so much code to just check if it is null or not. Nullish coalescing just does that. Here's how it looks and works.


let counter = response.data ?? 1;

// now if data is 0 counter value is 0
// if it is null or undefined we set it to 1;

So only if the value is undefined or null then the default value will be used.

result = actualValue ?? defaultValue

Let's see what we would get when we use the logical OR operator.

let counter = response.data || 1;

// here even if the value is 0, that is the value is defined
// we still get 1, which we don't want.

To recap "Nullish coalescing" is essentially

  a ?? b
  a !== undefined && a !== null ? a : b

Current status and how to use

You can check the ECMAScript Next compatibility table to find out where the ?? operator is supported.
Babel has the plugin @babel/plugin-proposal-nullish-coalescing-operator

Forem: Amit Solanki

ReasonML - Advent of Code - Day 2

Table Of Contents

ReasonML Language Features for today

Setup

First Problem

Second Problem

ReasonML - Advent of Code - Day 1

Table Of Contents

Advent Of Code

Intro to ReasonML

Setup

First Problem

Second Problem

Optional Chaining for Javascript - ES proposal

Static Properties

Dynamic Properties

Function calls

Dom access

Nullish Coalescing for JavaScript

Current status and how to use