DEV Community: Vince Campanale

Using Recursion to Loop in Elm

Vince Campanale — Tue, 10 Jul 2018 03:08:20 +0000

This post is centered on the following problem:

Find the difference between the square of the sum and the sum of the squares of the first N natural numbers.

The square of the sum of the first ten natural numbers is (1 + 2 + ... + 10)² = 55² = 3025.

The sum of the squares of the first ten natural numbers is 1² + 2² + ... + 10² = 385.

Hence the difference between the square of the sum of the first ten natural numbers and the sum of the squares of the first ten natural numbers is 3025 - 385 = 2640.

Credit for the problem goes to exercism.io.

The plan is to first solve it with a for loop in Javascript, then solve it with recursion in Javascript, and finally translate the recursive solution to Elm.

With a `for` Loop

The for loop solution, in barely-pseudocode looks like this:

-- get the square of the sum of n by:
  -- going from 1 to n
  -- and adding each number to a total
-- return the total after the loop is done

-- get the sum of the squares of n by:
  -- going from 1 to n
  -- and adding the square of each number to a total
-- return the total after the loop is done

-- subtract the latter from the former

Translated to Javascript, we get this:

function squareOfSum(number) {
  let sum = 0;
  for (let i = 1; i <= number; i++) {
    sum += i;
  }
  return Math.pow(sum, 2);
}

function sumOfSquares(number) {
  let sum = 0;
  for (let i = 1; i <= number; i++) {
    sum += Math.pow(i, 2);
  }
  return sum;
}

function difference(number) {
  return squareOfSum(number) - sumOfSquares(number);
}

console.log(difference(10) === 2640); // true

Thanks to my extensive test suite, I can confidently refactor and use recursion instead.

In Order to Understand Recursion...

The recursive equivalent of the above solution goes like this:

-- get the square of the sum of n by:
  -- getting the triangular number for n by:
    -- returning 0 if n is 0
    -- adding n to the triangular number of n - 1

-- get the sum of the squares of n by:
  -- returning 0 if n is 0
  -- adding the square of n to the sum of the squares of n - 1

-- subtract the latter from the former

So, recursion is acting as a different way of looping by defining an action for each number n down to 1 and a final action to end the loop when n gets to 0.

I googled "factorial with adding instead of multiplying" and found "triangular numbers", so the function for calculating the sum of positive integers from 1 to N is called triangulate 🤷🏻‍♂️.

Let's write that function first:

function triangulate(n) {
  if (n === 0) {
    return 0;
  } else {
    return n + triangulate(n - 1);
  }
}

// which can be simplified to:

function triangulate(n) {
  return n === 0 ? 0 : n + triangulate(n - 1);
}

Using the triangulate function, we can get the squareOfSum function:

function squareOfSum(n) {
  const sum = triangulate(n);
  return Math.pow(sum, 2);
}

The sumOfSquares function can also use recursion:

function sumOfSquares(n) {
  if (n === 0) {
    return 0;
  } else {
    return Math.pow(n, 2) + sumOfSquares(n - 1);
  }
}

// again, can be reduced to..

function sumOfSquares(n) {
  return n === 0 ? Math.pow(n, 2) + sumOfSquares(n - 1);
}

One final thought on the Javascript solution is to make triangulate a bit more generic and add a second parameter for an exponent.

const triangulate = (n, exp = 1) => 
  n === 0
  ? 0
  : Math.pow(n, exp) + triangulate(n - 1, exp);

Then sumOfSquares can be written as the following:

function sumOfSquares(n) {
  return triangulate(n, 2);
}

How about some Elm?

Elm doesn't have for loops. Whaaaaa

Yea, for real.

Luckily, we already know this problem can be solved without a for loop. So what's the Elm equivalent of the recursive solution above? Well, let's refactor sumOfSquares just one more time in Javascript, using a switch statement with only two cases this time.

function sumOfSquares(n) {
  switch (n) {
    case 0:
      return 0;
    default:
      return Math.pow(n, 2) + sumOfSquares(n - 1);
  }
}

Elm has a case statement, so a nearly equivalent function will work:

sumOfSquares : Int -> Int
sumOfSquares n =
  case n of
    0 -> 0
    _ -> (n ^ 2) + sumOfSquares (n - 1)

We can apply a similar approach to squareOfSum:

squareOfSum : Int -> Int
squareOfSum n = 
  let
    triangulate x =
      case x of
          0 -> 0
          _ -> x + triangulate (x - 1)
  in 
    (triangulate n) ^ 2

Then the final function difference is just:

difference : Int -> Int
difference n =
  (squareOfSum n) - (sumOfSquares n)

And voila, we have solved a for-loop-friendly problem in Elm, a language with no for loop.

A Better Way?

While we can use recursion to loop through the numbers between 0 and N, we can also make use of other utilities exposed in Elm Core.

For example, List.range and List.sum make this problem much easier.

import List exposing (map, range, sum)


square : Int -> Int
square n =
    n ^ 2


squareOfSum : Int -> Int
squareOfSum n =
    range 1 n |> sum |> square


sumOfSquares : Int -> Int
sumOfSquares n =
    range 1 n |> map square |> sum


difference : Int -> Int
difference n =
    squareOfSum n - sumOfSquares n

Since for loops are one of the first things we learn as programmers, it's easy to fall back on for loops in solutions to everyday problems. Using Elm has taught me that for loops aren't necessary most of the time and seeking a different solution can lead to more declarative and readable code.

Thanks for reading :)

Think Before You Test: A Guide to Writing Effective Unit Tests for Custom Events in Angular

Vince Campanale — Sat, 31 Mar 2018 14:25:43 +0000

Angular was built for testability. Powerful tools like dependency injection, the TestBed API, and out-of-the-box integration with Jasmine give us the power to test our Angular apps thoroughly and reliably. The catch is that learning these API's can take some time. Throw in a mix of Angular, Jasmine, and RxJS jargon and it can be a real uphill battle to feel comfortable testing the hairier parts of your application, which are the most important parts to test of course. In this post, I'll cover a couple different approaches you can take to testing custom events in Angular. If this is helpful or interesting to you, you can check out my twitter page, where I share similar content. Also, here's a link to the Stackblitz app I used when drafting this post. It may come in handy.

What is an `@Output` property?

An @Output property is an Angular utility used to create custom events. An @Output is an EventEmitter, meaning it has two methods: emit and subscribe. You probably won't need to subscribe to it directly, since Angular handles that with it's event binding syntax (e.g. <div (someEvent)="onSomeEvent()"></div>). The emit method allows you to notify the parent of an event and pass data up.

What should a unit test for a custom event do?

When the component you are testing is responsible for emitting the custom event (the child component), the unit test should target two things: 1) the @Output property's emit method is invoked when it should be and 2) the emit method is emitting the expected data.

When testing the component listening to the @Output (the parent / container component), the unit test should check that the emitted data is handled correctly (e.g. passed to the correct method).

The component

The example child component:

@Component({
  selector: 'counter',
  template: `
    <div>
      <button (click)="onClick()">1</button>
    </div>
  `
})
export class CounterComponent {
  @Output() change = new EventEmitter<number>();

  onClick() {
    this.change.emit(1);
  }
}

The change property is the EventEmitter to be tested.

We listen for change events in AppComponent to increment a counter by the amount emitted:

@Component({
  selector: 'my-app',
  template: `
  <counter (change)="onChange($event)"></counter>
  `
})
export class AppComponent  {
  count = 0;

  onChange(event: number): void {
    this.count += event;
  }
}

Testing the child

First, we'll do some set up:

describe('CounterComponent', () => {
  let fixture: ComponentFixture<CounterComponent>;
  let component: CounterComponent;
  let de: DebugElement;
  let button: ElementRef;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [CounterComponent]
    });
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
    de = fixture.debugElement;
    button = de.query(By.css('button'));
  });
});

I won't go into the details of how this set up works, as it's outside the scope of this post. Angular's testing tutorial is a great resource to learn more about it. What matters is that we can test everything we need to test using component and button.

Every custom @Output must get triggered by another event. Whether that event be a click in the DOM, a response from the server, a custom event on yet another nested child component, there must be a cause for the emit method to be invoked. The first step is to mock that cause and ensure the EventEmitter actually emits.

We know from the component code that a click event on the button should make the onClick() method run. The change property's emit method should be called when onClick() executes. We can get onClick() to execute in two ways: mock a click on the button, or just call component.onClick() directly.

Here is one of many ways to mock a click on the button:

button.nativeElement.click();

In order to detect when the @Output will emit, we can create a spy:

spyOn(component.change, 'emit');

Now you have everything you need to effectively test the @Output.

A unit test might look like this:

describe('change', () => {
  it('should emit when the button is clicked', () => {
    spyOn(component.change, 'emit');
    button.nativeElement.click();
    expect(component.change.emit).toHaveBeenCalled();
  });
});

And that's it. Now, let's target goal #2: ensure the @Output is emitting the expected data to the parent.

Using toHaveBeenCalledWith(), we can kill two birds with one stone:

describe('change', () => {
  it('should emit when the button is clicked', () => {
    spyOn(component.change, 'emit');
    button.nativeElement.click();
    expect(component.change.emit).toHaveBeenCalledWith(1);
  });
});

Now, in one unit test, you are ensuring that the emit method is being called when it should be and that it is emitting the correct data. There are a couple of other ways to accomplish this, which are worth mentioning.

I think it's safe to say that Angular has click events down, so we don't need to worry about that not working as expected. Because of this, it is safe to call the onClick() method directly, instead of mocking a click on the button.

describe('change', () => {
  it('should emit when the button is clicked', () => {
    spyOn(component.change, 'emit');
    component.onClick();
    expect(component.change.emit).toHaveBeenCalledWith(1);
  });
});

This is a bit easier because we don't have to worry about querying the DebugElement or mocking click events, we just call the method directly and trust Angular to handle the rest.

A final approach to testing the EventEmitter is to actually subscribe to it and trigger the event, making your assertion in the subscribe block.

describe('change', () => {
  it('should emit when the button is clicked', () => {
    component.change.subscribe(next => {
      expect(next).toEqual(1);
    });

    component.onClick(); // or button.nativeElement.click()
  });
});

I don't recommend this approach for a couple of reasons:

It's weird. Typically, a unit test makes its assertion(s) at the end. This approach breaks that pattern and will cause future developers to have to look sideways and squint to understand how the test works. Unit tests should be easy to read and understand.
Order of statements matters. If you call component.onClick() before subscribing to the change emitter, you won't get into the subscribe block and make the assertion. This is made even worse by the fact that your test will pass! A faulty, passing test is worse than no test at all.

Testing the parent

We can take three approaches to testing the behavior of the EventEmitter from the perspective of the parent (the component listening for the event):

Invoke the @Output property's emit method (since the EventEmitter is a public property)
Dig in to the counter's DebugElement and simulate a click on the button
Call the function directly (trust that Angular will work)

Here's what the set up looks like:

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;
  let de: DebugElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent, CounterComponent]
    });
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    de = fixture.debugElement;
  });
});

In order to invoke the @Output property's emit method, we had to declare the component with the @Output in the testing module.

Now, we can use the DebugElement for the AppComponent to get the counter component:

describe('onChange', () => { 
  it('should be called with whatever the counter change event emits', () => {
    spyOn(component, 'onChange');
    const counter = de.query(By.directive(CounterComponent));
    const cmp = counter.componentInstance;
    cmp.change.emit(1);
    expect(component.onChange).toHaveBeenCalledWith(1);
  });
});

In the above unit test, we spy on the onChange method (the method that should be called when change emits). Then, we query for the counter component fixture based on it's directive class and get the component itself through the componentInstance property. Now, we have access to the change property and can tell it to emit a value of 1. In order to test that we are handling the event correctly, we'll just check that the onChange spy gets called with the value that the change event emitted. This is overkill, but not nearly as overkill as the next test.

describe('onChange', () => {
  it('should be called with whatever the counter change event emits', () => {
    spyOn(component, 'onChange');
    const counter = de.query(By.directive(CounterComponent));
    const button = counter.query(By.css('button'));
    button.nativeElement.click();
    expect(component.onChange).toHaveBeenCalledWith(1); 
  });
});

Now we are querying the fixture of the child element for the actual, physical button and dispatching a click event to the button. This click event will fire off the chain reaction which should eventually lead to our AppComponent's onChange method being called with the value emitted from the change event. But wait, let's check in with what we're actually testing here. A unit test should be responsible for one unit of functionality. The test we just wrote is testing 1) that the button's click works, 2) that Angular's handling of the click event works, 3) that our onClick method in the CounterComponent gets called with the correct data and makes the appropriate call the change property's emit method, 4) that Angular's handling of the change event works, 5) that our onChange method works. That's not a unit test.

Now that you've seen all the crazy stuff you can do with this powerful set of testing tools, you will be relieved to see what you actually need to do:

describe('onChange', () => {
  it('should increment the count by the amount provided', () => {
    component.count = 2;
    component.onChange(2);
    expect(component.count).toEqual(4);
  });
});

The only thing that needs to be tested on this end is the onChange method itself. That's the only logic we wrote. Everything else is handled by Angular. Feel free to double check the EventEmitter tests if you're skeptical.

Takeaways

Tests are good. We have a lot of powerful tools at our disposal for testing in Angular so it's easy to make sure our components work as they should. Finally, it's important to understand the difference between what we can test and what actually needs to be tested.

Elm Kata 3: Using Elm Core List and String Functions to Detect Anagrams

Vince Campanale — Mon, 23 Oct 2017 17:13:46 +0000

Welcome to the third installment of Elm Kata, a series in which we learn the ins and outs of Elm by solving different exercises.

The Problem

Another day, another problem to solve. Call me Sherlock. Here's the problem statement we're working with, courtesy of exercism.io:

Given a word and a list of possible anagrams, select the correct sublist.

Given "listen" and a list of candidates like "enlists" "google" "inlets" "banana" the program should return a list containing "inlets".

Round 1

As per usual, I like to start out with a function signature so let's start there:

detect : String -> List String -> List String

We are going to create a function that takes a word and a list of words and returns a new list containing all the anagrams of the original word in the given list (if any).

My first thought upon seeing this problem was "permutations." If I could generate a list of all the combinations of letters in the given word and check that list for each of the words in the given list of possible candidates, I'd end up with a list of anagrams.

I'll show that solution now, but keep in mind there's a much better way. Kudos if you can see it already, it took me the full process of solving the problem the hard way before I saw the easy way -- I feel like Confucius would nod knowingly if he heard me say that.

Here's the first pass in all its glory:

module Anagram exposing (..)

import List.Extra exposing (permutations)


getPermutationsOf : String -> List String
getPermutationsOf word =
    word
        |> String.toList
        |> List.Extra.permutations
        |> List.map String.fromList


isPermutationOf : String -> String -> Bool
isPermutationOf word other =
    let
        uppercaseWord =
            String.toUpper word

        uppercaseOther =
            String.toUpper other
    in
        not (uppercaseWord == uppercaseOther)
            && List.member uppercaseOther (getPermutationsOf uppercaseWord)


detect : String -> List String -> List String
detect word possibleMatches =
    possibleMatches
        |> List.filter (isPermutationOf word)

Just a heads up, if you want to run this yourself you will need to run elm-package install elm-community/list-extra to get access to the fancy permutations method.

So, allow me to walk you through this solution. Let start with the final function and unravel the program step by step.

In detect, I filter the list of possibleMatches for words that are a permutation of the word for which I am seeking anagrams. In order to do this, I needed a helper function to tell me if a word is a permutation of another word, hence the second function in the program.

isPermutationOf takes two words and returns whether or not the second word is present in the permutation list of the first one. First I convert the two words to upper case (to handle edge cases and weird characters), then I make sure that the two words are not the exact same (another edge case), then I check the permutation list for the second word.

Getting the permutation list takes a bit of work as well, though. Hence, the first function in the program. getPermutationsOf is where I actually use the List.extra.permutations utility. I take the word, convert it to a list of characters, turn that into a list of lists (each list containing a possible order list of characters could be in) and then map over that list of lists, turning it back into a list of strings.

The result is a very slow, very brute force, but very correct solution.

Round 2

How did I not see it in the first place? Me-oh-my, this can be done much more cleanly.

Instead of changing the original word to make the check easy for the list, why don't we change all the words in the list to make the check easy for the word?!

How can we check that two words are the same, just with the letters all jumbled up? By sorting them and comparing their sorted forms!

First, we need a sort function that will work for strings:

sortStr = String.toList >> List.sort >> String.fromList

The >> was new for me -- it lets you compose functions together to make bigger, badder functions. It's similar to the pipe (|>) operator, except you aren't passing in any arguments, you're just mashing the functions together in anticipation of a higher purpose.

Now we need to put our sortStr function to use in a function that will take two words and see if they are anagrams!

isAnagram word possibleMatch =
  not (String.toUpper word == String.toUpper possibleMatch)
    && sortStr (String.toUpper word) 
    == sortStr (String.toUpper possibleMatch)

Let's use our helpers to make a clever detect function that makes our old detect function look like baby food.

detect : String -> List String -> List String
detect word possibleMatches =
    let
        sortStr =
            String.toList >> List.sort >> String.fromList

        isAnagram possibleMatch =
            not (String.toUpper word == String.toUpper possibleMatch)
                && sortStr (String.toUpper word)
                == sortStr (String.toUpper possibleMatch)
    in
        List.filter isAnagram possibleMatches

Boom, there ya have it.

Follow @_vincecampanale to get updates on future installments of the Elm Kata series. Also, it will make me feel good about myself.

Thanks for your time <3, hope it was worth it.

Scoring Scrabble Words with Elm

Vince Campanale — Tue, 10 Oct 2017 13:42:41 +0000

The Problem

In approximately 6th century B.C., Cleobulus of Lindos, one of the Seven Sages of Greece, presented to the world a word-based mind game¹. He called it "Scrabble". When outlining his game, he omitted an important part, perhaps on purpose -- how to compute the score of a word. A universal solution has yet to arise.

Assumptions

In order to provide a reasonable solution that will hold in this dimension, we must first make some assumptions.

1) The letters A, E, I, O, U, L, N, R, S, and T have the value 1.
2) The letters D and G have the value 2.  
3) The letters B, C, M, and P have the value 3.  
4) The letters F, H, V, W, and Y have the value 4.  
5) The letter K has the value 5.  
6) The letters J and X have the value 8.  
7) The letters Q and Z have the value 10.

A Solution

Let us begin.

Breaking the problem down and outlining a solution in pseudocode is good for simple scripting problems like this one, so let's start there.

-- given a word
-- split the word up into letters
-- get the points value for each letter
-- store / record the point values for each letter
-- add up all the point values
-- return the sum

I find it helpful to start with the type signature when constructing functions in Elm. The function we want to build will take a word and return a score. In terms the compiler can understand, it will take a String and return an Int.

scoreWord: String -> Int

Next, we can start building our function.

scoreWord: String -> Int
scoreWord word = 
   word

Okay, so splitting the word up into letters is easy:

scoreWord: String -> Int
scoreWord word = 
  String.split "" word

Now we need to get the points value for each letter. This introduces a bit of complexity into our problem -- where do the point values come from? Elm doesn't know what a letter is worth. One way to tell it is to make a record, a series of key-value pairs.

pointsCategories =
    { one = [ "A", "E", "I", "O", "U", "L", "N", "R", "S", "T" ]
    , two = [ "D", "G" ]
    , three = [ "B", "C", "M", "P" ]
    , four = [ "F", "H", "V", "W", "Y" ]
    , five = [ "K" ]
    , eight = [ "J", "X" ]
    , ten = [ "Q", "Z" ]
    }

Each key of our record is the word version of the point value. Each value is a list containing every letter that has that point value. Records in Elm cannot have number literals for keys, so this is the closest we can get.

Now, we need a function that will score a letter by looking up it's point value in the pointsCategories record and converting that to a number.

getPointsForLetter : String -> Int
getPointsForLetter letter =
    if List.member letter pointsCategories.one then
        1
    else if List.member letter pointsCategories.two then
        2
    else if List.member letter pointsCategories.three then
        3
    else if List.member letter pointsCategories.four then
        4
    else if List.member letter pointsCategories.five then
        5
    else if List.member letter pointsCategories.eight then
        8
    else if List.member letter pointsCategories.ten then
        10
    else
        0

Okay, this function is a little (very) redundant. I'm starting to get the feeling that this program is a wee bit smelly and could use some tidying up, but let's get this solution working before we refactor.

This would be a good time to note that all the letters in our pointsCategories record are uppercase, but we do not have that guarantee for a given word, unless you're playing a very loud version of Cleobulus's game.

In order to address this, we might as well make all of our letters uppercase, since that's how they appear in the pointsCategories record -- WITH ENERGY!

scoreWord : String -> Int
scoreWord word =
  List.map String.toUpper (String.split "" word)

Now we have a list of uppercase letters to work with so we can use our getPointsValue function to convert letters to points.

scoreWord : String -> Int
scoreWord word = 
  List.map getPointsForLetter (List.map String.toUpper (String.split "" word))

These parentheses are getting out of hand -- time to take advantage of the Elm's brilliant pipe operator to make our solution readable.

The pipe operator is nice because it turns

f(g(h(i(x))))

into

x 
  |> i 
  |> h 
  |> g 
  |> f

where x is some value and i, h, g, and f are functions.

Applying this nifty tool to our solution, we get:

scoreWord : String -> Int
scoreWord word =
  word 
    |> String.split ""
    |> List.map String.toUpper
    |> List.map getPointsForLetter

The astute reader will notice we are not yet returning an Int, but rather a list of Int's (or List Int using Elm syntax). Let's fix that.

scoreWord : String -> Int
scoreWord word = 
  word 
    |> String.split ""
    |> List.map String.toUpper
    |> List.map getPointsForLetter
    |> List.sum

This solution works, but I detest the repetitive chain of if else if's in the getPointsForLetter function. Unfortunately, this is the crux of the solution, so this refactor is going to be a big one!

All Aboard the Refactor Tractor

The main issue with the above solution is the fact that we can't use a number literal as the key in our pointsCategories record. This means we are separating looking up the value and converting it to an Int. We will need to reach into our toolbox and find a new data structure to use in order to solve this. I propose we use a dictionary (Dict) to tie a number to a character. We need to import Dict to use it.

import Dict exposing (..)

pointValues : Dict Char Int
pointValues =
    Dict.fromList
        [ ( 'A', 1 )
        , ( 'E', 1 )
        , ( 'I', 1 )
        , ( 'O', 1 )
        , ( 'U', 1 )
        , ( 'L', 1 )
        , ( 'N', 1 )
        , ( 'R', 1 )
        , ( 'S', 1 )
        , ( 'T', 1 )
        , ( 'D', 2 )
        , ( 'G', 2 )
        , ( 'B', 3 )
        , ( 'C', 3 )
        , ( 'M', 3 )
        , ( 'P', 3 )
        , ( 'F', 4 )
        , ( 'H', 4 )
        , ( 'V', 4 )
        , ( 'M', 4 )
        , ( 'Y', 4 )
        , ( 'K', 5 )
        , ( 'J', 8 )
        , ( 'X', 8 )
        , ( 'Q', 10 )
        , ( 'Z', 10 )
        ]

Now we can access the point value for a letter using the Dict.get method. This change of data structure is crucial because we have moved the redundancy out of our program and into the data itself. Redundancy in data is gravy, redundancy in code is gunk.

Let's write a function that takes a character and returns it's point value.

getPointValue : Char -> Int
getPointValue letter = 
    let
        letterScore =
            Dict.get letter pointValues
    in
    case letterScore of
        Just score ->
            score

        Nothing ->
            0

Dict.get is not guaranteed to return something since it can be called with a value that may not correspond to a key in the dictionary, like if we tried to get the point value of a Chinese character. In terms that Elm's compiler can understand, Dict.get returns a Maybe type, so we need to tell the program how to handle both cases of the Maybe type -- Just (we got something) and Nothing (no luck).

If we get a score back, then return that score. If not, default to 0.

Time to rewrite scoreWord so it splits our word into a list of Char's (String.toList) and uses our new getPointValue function to get the value of each character in the list.

scoreWord : String -> Int
scoreWord word =
    word
        |> String.toUpper
        |> String.toList
        |> List.map getPointValue
        |> List.sum

This works, but I still think getPointValue is a bit verbose. Let's use a couple tricks to make it easier to understand.

flip is a neat tool that lets you flip the order of arguments to a function. Maybe.withDefault is a shorthand way to do what we did in our case statement. Taking advantage of these two handy mechanisms and the pipe operator, we can write getPointValue like this:

getPointValue : Char -> Int
getPointValue letter =
  letter 
    |> flip Dict.get pointValues
    |> Maybe.withDefault 0

Ah, much better.

To cap off the post, here's the entire script:

module ScrabbleScore exposing (..)

import Dict exposing (..)


pointValues : Dict Char Int
pointValues =
    Dict.fromList
        [ ( 'A', 1 )
        , ( 'E', 1 )
        , ( 'I', 1 )
        , ( 'O', 1 )
        , ( 'U', 1 )
        , ( 'L', 1 )
        , ( 'N', 1 )
        , ( 'R', 1 )
        , ( 'S', 1 )
        , ( 'T', 1 )
        , ( 'D', 2 )
        , ( 'G', 2 )
        , ( 'B', 3 )
        , ( 'C', 3 )
        , ( 'M', 3 )
        , ( 'P', 3 )
        , ( 'F', 4 )
        , ( 'H', 4 )
        , ( 'V', 4 )
        , ( 'M', 4 )
        , ( 'Y', 4 )
        , ( 'K', 5 )
        , ( 'J', 8 )
        , ( 'X', 8 )
        , ( 'Q', 10 )
        , ( 'Z', 10 )
        ]


getPointValue : Char -> Int
getPointValue letter =
    letter
        |> flip Dict.get pointValues
        |> Maybe.withDefault 0


scoreWord : String -> Int
scoreWord word =
    word
        |> String.toUpper
        |> String.toList
        |> List.map getPointValue
        |> List.sum

While we can never know exactly how Cleobulus intended for a word to be scored, we can give our best guess and this is mine.

If you like my style, check out my blog or follow me on twitter at @_vincecampanale for occasional web development goodies in between memes and retweets :)

¹ I made this up.

Developer Halloween Costumes

Vince Campanale — Fri, 22 Sep 2017 13:04:54 +0000

I Found My People at a Programming Meetup

Vince Campanale — Mon, 11 Sep 2017 14:03:58 +0000

I recently took over Elm DC, a meetup in the D.C. Metro area centered on an interesting new functional language for the web called Elm.

At the most recent meetup, I had the idea to wire up my Macbook to the big TV and work through a coding challenge in Elm on the premise that anyone interested could join in.

The first few minutes were a bit awkward, as a room full of programmers may be, but not much time passed before people started looking up from their screens and chipping in an idea here, a comment there. Before I knew it, every single person in that room (there were about 7 of us) had rallied around the TV and was completely immersed in the challenge, some even standing up from their seats and moving closer to the screen.

In that moment, I knew I had found my people. I picked the right profession after all.

Being new to this industry, the feeling of being a "noob" is one I'm quite familiar with. But in that room, experience and knowledge didn't matter. Despite our many different backgrounds, personalities, and levels of experience, we were all on the same page -- we were programmers, problem solvers. Put a problem in front of us and we wouldn't have been able to stop our minds from going to work on that problem.

As programmers, we gravitate towards unsolved problems and stare them in the face until they become solutions, then we go look for new problems to grapple with.

As individuals, our effectiveness is determined by our unique blend of personality characteristics, mental strengths, and domain specific knowledge, but the spine of every programmer's mentality is the urge to solve problems. It doesn't matter how early or late we are in our career, what technologies and tools we happen to use in the moment, what we studied in college, whether we are trying to get a system to mimic the human brain or tracking down a TypeError -- the ability to identify problems and the drive to solve them powers everything we do and is the only reason we can do what we do (and do it well). It's a beautiful thing and I'm proud to be in the club.

In the spirit of dev.to's culture of debate and discussion, I'm curious about your take on this. Do you see this quality within yourself? Did I miss the mark, hit the nail on the head, or somewhere in between? What other defining traits make you a programmer?

Also if you like Elm, follow me on twitter at @_vincecampanale. I post about Elm and Javascript and other programming-related things there.

"Elm Has Me Leaping For Joy"

Vince Campanale — Mon, 28 Aug 2017 12:07:15 +0000

I'm very new to Elm (a couple of weeks) and am working through exercises on exercism.io. I see a lot of potential in this language and am enjoying the learning process. Writing about what I learn usually helps me understand it better. Thus, this article was born.

The exercise is simple: identify leap years with Elm. So, given a year, determine whether that year is a leap year or not. The rules are as follows:

leap years are on: 
- every year that is evenly divisible by 4
- except every year that is evenly divisible by 100
- unless the year is also evenly divisible by 400

Let's start by writing some functions for checking these divisibility rules.

divisibleBy4 year = year % 4 == 0
divisibleBy100 year = year % 100 == 0
divisibleBy400 year = year % 400 == 0

Now for the boolean expression...

(divisibleBy4 year) && (not (divisibleBy100 year) || (divisibleBy400 year))

Cool. So now we can put the pieces together and build our function.
But first, a function signature!

We want a function that takes an integer (Int) and returns a boolean (Bool):

isLeapYear : Int -> Bool

Bam.

Now, we can add a let-in expression to create a local function scope for our divisibleByX helpers.

isLeapYear year =
  let
    divisibleBy4 y = 
        y % 4 == 0

    divisibleBy100 y =
      y % 100 == 0

    divisibleBy400 y =
      y % 400 == 0
  in 
    (divisibleBy4 year) && (not (divisibleBy100 year) || (divisibleBy400 year))

This could actually be much better.

First off, we can make divisibleByX a lot more useful by having it take two arguments rather than one: the number to divide and the number to divide by.

divisibleBy n y =
 y % n == 0

Nice, but there's more. One of Elm's core libraries, "Basics" has a function called rem with the following type signature:

rem : Int -> Int -> Int

According to the docs,
it does this:

Find the remainder after dividing one number by another.

e.g. rem 11 4 == 3

Is this exactly what we need? Yes, this is exactly what we need.

divisibleBy n y = rem y n == 0

Noice. Time to refactor.

isLeapYear : Int -> Bool
isLeapYear y =
    let
        divisibleBy n y =
            rem y n == 0
    in
        (divisibleBy 4 y) && (not (divisibleBy 100 y) || (divisibleBy 400 y))

That boolean expression looks like it could be simplified. There's another interesting boolean operator in the Basics package...xor.

xor : Bool -> Bool -> Bool

The exclusive-or operator. True if exactly one input is True.

Cool beans. Let's refactor our solution.

If we read our requirements again, this problem actually lends itself quite well to xor.
We want all years divisible by 4 EXCEPT the ones divisible by 100.

xor (divisibleBy 4 year) (divisibleBy 100 year) || (divisibleBy 400 year)

This leaves us with a third iteration of:

isLeapYear : Int -> Bool
isLeapYear year =
    let
        divisibleBy n y =
            rem y n == 0
    in
        xor (divisibleBy 4 year) (divisibleBy 100 year) || (divisibleBy 400 year)

I've not even scratched the surface of this powerful language. Getting into the FRP mindset has been a challenge but I can already see the benefits of thinking in this paradigm. While the solution I've put together over the last few paragraphs gets the job done, there is surely a better way...

Follow me on Twitter at @_vincecampanale and/or Github for more Elm stuff soon to come...

Harnessing the power of Javascript's .map and .filter

Vince Campanale — Thu, 10 Aug 2017 13:18:52 +0000

Functional programming has been a hot topic as of late. JavaScript is a multi-paradigm language and one of the paradigms available to us lucky JS devs is the functional paradigm. If you think this stuff is cool, go google Elm when you're done with this article ;)

Disclaimer: I'm still learning myself, so some of the terms I use may not be precise or match the academic / proper definition. If you spot an error, please throw an exception in the comments. That being said, I'm confident about the big idea of this post so read on!

Map & filter are two crucial methods in functional programming. You don't have to know anything about functional programming to know how to use them and I guarantee you that these two little functions will improve your code.

Let's learn by example. This exercise is taken straight from a tutorial I'm currently working through called "Functional Programming in Javascript," which is intended to serve as an introduction to RxJs (Reactive Extensions). Check it out when you're done reading this article. I'm going to solve the same problem in a couple different ways to show the true beauty of .map() and .filter().

Here we have some data containing a list of newly released movies in JSON format:

//Excellent test data from http://reactivex.io/learnrx/
 var newReleases = [
     {
       "id": 70111470,
       "title": "Die Hard",
       "boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
       "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
       "rating": 4.0,
       "bookmark": []
     },
     {
       "id": 654356453,
       "title": "Bad Boys",
       "boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
       "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
       "rating": 5.0,
       "bookmark": [{ id: 432534, time: 65876586 }]
     },
     {
       "id": 65432445,
       "title": "The Chamber",
       "boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
       "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
       "rating": 4.0,
       "bookmark": []
     },
     {
       "id": 675465,
       "title": "Fracture",
       "boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
       "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
       "rating": 5.0,
       "bookmark": [{ id: 432534, time: 65876586 }]
     }
   ];

Each movie has several properties: id, title, boxart, uri, rating, and bookmark (an array of JSON objects).

In this tutorial, I'm going to solve a simple problem: Collect the IDs of movies with 5.0 ratings.

ðŸ’“ For the Love of Loops ðŸ’“

The first way I will solve this problem makes use of our oldest friend, the humble for loop.

var counter,
  otherCounter,
  favorites = [],
  favoriteIds = [];

for ( counter = 0; counter < newReleases.length; counter++ ) {
  if ( newReleases[counter].rating === 5.0 ) {
    favorites.push(newReleases[counter]);
  }
}

for ( otherCounter = 0; otherCounter < favorites.length; otherCounter++ ) {
  favoriteIds.push(favorites[otherCounter].id);
}

Lovely. This gets the job done, but I have three problems with this code:

1 There's a lot of code here to do a simple task.

2 We're making a lot of variables to track our values, which is pretty wasteful memory-wise.

3 Does it really matter that we traverse the movie list from the beginning to end? Couldn't we do it in any order? Do we really need to explicitly spell that out in our code?

Ask yourself number three and really sit and contemplate that for a moment. When we use the for loop to tell an iterator to traverse an array, we have to spell out in code the order in which the array is traversed. This is useful sometimes, but most of the time we're just going from beginning to end -- smells like an opportunity for abstraction to me.

For Each or Not For Each ðŸ“–

.forEach() abstracts the explicit logic of the for loop away. We call .forEach() on our newReleases array and trust that the computer will traverse the array. The computer can traverse the array beginning to end, end to beginning, middle out, upside-down, it really doesn't matter. The point is: we don't have to tell the computer about how the array is traversed -- we just know we're going to do something on each element of the array. That's where the iterator function comes in. The iterator function is our instruction to the computer about what should happen when the iterating mechanism (the hidden / implied for loop) encounters each element in the array. For example, let's say we want to check if a movie has a rating of 5 stars and push it to a new array called favorites if it does. Our function would look like this:

function (movie) {
  if ( movie.rating === 5.0) {
    favorites.push(movie);
  }
}

By passing this function as an iterator to .forEach(), we run it on every element in the array.

var favorites = [],
    favoriteIds = [];

newReleases.forEach(function(movie) {
  if ( movie.rating === 5.0 ) {
    favorites.push(movie);
  }
});

favorites.forEach(function(movie) {
  favoriteIds.push(movie.id);
});

Unfortunately, the problems I had with the for loop solution remain with the .forEach() solution.

1) Still a lot of code for such a simple task.

2) Still using variables to hold values as we go along.

3) We may have gotten rid of the explicit `for` loops, but I still see the word "for" in there. The extra code defining the order of traversal is gone, but we're still saying "for each element in this array, do something." I think the fact that we want to apply this function to each element should be *implied*.

Introducing the ðŸŒŸStarsðŸŒŸ of the Show

Time to use .map() and .filter() to get the job done. Now that we understand exactly what needs to be done to solve this problem, it should be easy to reverse understand what .map() and .filter() do for us.

.map() and .filter() are just unique variations on the classic .forEach(). The nice thing about them is that they handle a specific case for us so we don't have to bother telling the computer "for this element, do this". It just goes without saying that we want each element of the collection to be processed by the reducer function (the same thing as the iterator function in .forEach()).

.filter() is used when we want to *ahem* filter each element in the collection based on a certain condition.

.map() is used when we want to change each element in the array in some way. We're "mapping" each element from one value to another.

The moment we've all been waiting for:

var favorites = newReleases.filter(function(movie) {
  return movie.rating === 5.0;
});

var favoriteIds = favorites.map(function(movie) {
  return movie.id;
});

Hmmm... better...

Let's look at our original pain points and compare:

1) I still think we could do this with less code.

2) Still skeptical about the need for two variables to compute one value...

3) âœ”ï¸ No more "for"! I'd say this problem is solved.

Whew, abstracting away that for loop took some effort, but it's officially taken care of now. We're almost done, I promise.

FILTERðŸ”—MAP

Method chaining is a wonderful thing.

var favoriteIds = newReleases
  .filter(function(movie) {
    return movie.rating === 5.0;
  })
  .map(function(movie) {
    return movie.id;
  });

That takes care of number 2.

1) Still a bit verbose. I think we could sweeten this up with some syntactic sugar.*

2) âœ”ï¸ One value. One variable.

3) âœ”ï¸ No more "for"!

*Note: Despite what some may believe, arrow functions in Javascript are much more than mere syntactic sugar. Just wanted to use the 'sweeten' joke.

ARROWS â†—ï¸ â¬…ï¸ â¬†ï¸ âž¡ï¸ â†˜ï¸

Let's shorten this with some ES6 arrows.

var favoriteIds = newReleases.
  filter( movie => { return movie.rating === 5.0 }).
  map( movie => { return movie.id });

Abbreviated Variables, `const`, & Implicit Return

Proceed with caution. Someone call the fire department. ðŸš’

const favIds = newReleases.filter( m => m.rating === 5.0 ).map( m => m.id );

1) âœ”ï¸ Short & sweet.

2) âœ”ï¸ One value. One variable.

3) âœ”ï¸ No more "for"!

Aren't .map() & .filter() the best?

To Learn More:

Here's the link to the tutorial I got this problem from: http://reactivex.io/learnrx/.

"My First Two Weeks Using VIM"

Vince Campanale — Tue, 01 Aug 2017 13:42:59 +0000

I have been putting this off for a while. I have always admired people that use Vim. I view them as sort of "super devs". If they use Dvorak, I have to pull out my shades to keep from being blinded by their genius. In this article, I will document the beginning of my journey to become as bright as the sun and faster than lightning. Here goes.

Days 1 & 2

My first day was actually yesterday, but I started the journal today so let's catch up. I started out doing what any good developer would do and googled 'Learn VIM'. Lo and behold, I received millions of results in split seconds. Hail the almighty Google.

I found a course by a company called Upcase that basically said: go do vimtutor. This means going to the terminal (with Vim installed) and typing vimtutor. That's it. I started with it and spent a lot of time experimenting. I have to say, it's a little unnatural. I get a little sweaty using Vim because I'm resisting my natural tendencies. Don't judge me, I sweat a lot. That said, I can already see the benefits of having millions of combinations of commands literally at your fingertips. Here's a couple things I learned from the first day:

Tip 1

Do not use arrow keys. Ever. This is an anti-pattern in VIM. The hjkl method of moving the cursor allows you to keep your hand on the home row of the keyboard, which is crucial for efficiency.
Here's a nice little diagram from vimtutor.

 ** To move the cursor, press the h,j,k,l keys as indicated. **
             ^
             k              Hint:  The h key is at the left and moves left.
       < h       l >               The l key is at the right and moves right.
             j                     The j key looks like a down arrow.
             v

Tip 2

By the same token, avoid using DEL to delete characters as much as possible. Just navigate to the character you want to delete and press x. Using the delete key is similar to using the arrow keys. It defeats the entire purpose of Vim.

Tip 3

Enable Vim shortcuts in your favorite editor. This will allow you to keep the familiar environment with colors and icons and whatnot. I found this much more enjoyable than just looking at my naked terminal. There are plugins and stuff that can add colors and handy tools to your terminal, but the resources I've looked at so far warn against installing a shit load of plugins right off the bat, and I shall take their word for it.

Tip 4

Don't be too hard on yourself. I just pressed the delete key to delete something, right before I used CTRL + Z to undo. This is a frustrating and difficult time, the first two weeks of Vim. I'm only on Day 2 and I'm feeling the burn already. But we will prevail. If I can do this, so can you.

Day 3

Alrighty - new day, new tips. Many thanks to those of you who commented with tips and tricks that you've learned from your own experience with Vim. I actually really like how this post is evolving and would love to see some more tips in the comments if you have any, no matter how small or insignicant they may seem. I promise it will help someone (me).

I ended up writing down some of the key navigation shortcuts for Vim on some post-it notes and sticking them to my monitor -- here's a brief rundown of the shortcuts I have found to be essential (for a complete newbie). I've found it's useful to think of the keys as actions, which can be divided into different categories. The two categories I've identified this far are "edit" and "move". There may be more formal ways to refer to these categories -- post a comment if you know of a better way to refer to them.

Move commands: 

hjkl - move around (see Days 1 & 2)

w - beginning of next word
e - end of next word

b - beginning of previous word

$ - end of current line
0 - beginning of current line

Edit commands:

i (insert) - insert before the character the cursor is on
a (append) - insert after the character the cursor is on
SHIFT + A (super append) - insert after the current line

x (delete) - delete the character that the cursor is on
d (delete*) - delete ...

Tip 5

I put a * on the delete command because it's a little special. By itself it does nothing. Combine it with a move command and you can delete all the things.

Let's say I want to delete two words that are next to each other.

1) Navigate to the beginning of the first word using your move commands.
2) Type d2w.
3) Press enter.

So what's happening here? d tells Vim I want to delete something. It then patiently waits for me to tell it what to delete (so polite). I say to Vim, 2w (read: two words) and poof, they're gone. That move there shows the power of Vim. Each of these keys does something on its own and lets you run with Vim. Combine them, and you can fly.

Tip 6

Yesterday, I called it VIM. I called it that in the title too. I won't change it for the sake of preserving my growth as a Vimmer. TIL, it's supposed to be "Vim", like "Jim".
From :help pronounce:

Vim is pronounced as one word, like Jim, not vi-ai-em.  It's written with a
capital, since it's a name, again like Jim.

Now I know.

Tip 7

This tip comes from Jean Bernard - thanks Jean!
Quoting him here:

Pro-tip: I use "jj" as a shortcut to the ESC key. That way when you want to switch back to normal mode you don't have to go all the way to the ESC key.

Love it.

I want to add a "Comfort-o-meter" to this post. I'd say I've risen from a 1 to a 2. I no longer sweat when I use Vim, so that's progress. Still have a tendency to reach for comfortable shortcuts for selecting text and moving lines, copy-pasting, etc. However, the momentum is building on itself and I'm having fun.

COMFORT-O-METER: 2

After Week 1

It's been a week now since I started making an effort to learn Vim. I haven't been using it at work since I find it too distracting to really learn and practice the shortcuts while thinking about writing clean code and building a maintainable application. That being said, I think I'm nearing the point where enough basic movements and commands are automatic enough to warrant making the switch full time. I'm in no hurry.

Tip 8

The basic shortcuts will take you far. The ones I outlined earlier in the post have been basically the only ones I've used up to this point. You can accomplish most things with the d (motion) command when it comes to deleting / cutting text. Similarly y (motion) for copying lines or words. I've found it's worthwhile to start thinking of sections of text in these terms rather than thinking about the space around them for selecting.

Tip 9

Get good with :help. Vim's help system is very searchable and useful if you know what your doing.

Tip 10

This one comes from Alan Campora:
"Edit and move are modes, not actions. Actions are something different. For example, if you want to replace a word, put your cursor on it and press c(change) i(inner) w(word). That's a great level up :D"

This turned out to be a crucial tip for me. This subtle paradigm shift made me understand that d is not so much a verb to delete something, rather just a button to put me in delete mode. This is obvious in retrospect, but Alan's tip was what I needed to fully understand -- hopefully it helps someone else, too.

COMFORT-O-METER: 4
Treating the comfort-o-meter as similar to the Richter scale for Earthquakes, this is pretty sizable progress. The few basic (mode) (motion) combos make editing with Vim pretty breezy. It's growing on me and I'm glad I pushed through the first day of discomfort. That really is the worst part.

Post in progress...follow me on twitter, github, or dev.to for updates :)

Revisited: A Beginner's Solution to a Common Javascript Interview Challenge

Vince Campanale — Mon, 10 Jul 2017 12:16:15 +0000

"Confirm the Ending" is another great problem from Free Code Camp's algorithm scripting challenges. The goal is to check if a string (first argument, str) ends with the given target string (second argument, target).

As is common for coding exercises, this problem can be solved countless ways. Today, I'm going to walk through my solution from when I first started coding, improve it, and conclude with a description of the difference between .substr() and .substring().

Beginner Solution

When I had first ventured into learning to code, I took a stab at this problem and successfully solved it, however my solution is a little..."verbose"...

I used the .substr() method which takes two arguments. The first argument is the index in the string to start at and the second argument number of characters to extract from that index. So, say you want to get "lo" from "hello!"". In order to do this with .substr(), you would say "hello!".substr(3, 2). This will go to the third character in "hello"!, which is the first "l", then go for one more character before stopping at the fourth character in "hello!", which is "o". If you're thinking my counting skills need some work, you're probably right, but in Javascript, string indices are 0-based (like arrays). So the character "h" has index 0 in the string.

function confirmEnding(str, target) {
  var substr = str.substr(str.length - target.length, target.length);

  if (substr === target) return true;
  else return false;
}

Just to briefly recap what I did here: create a variable containing a string chopped off the end of the str argument that has the same length as the target string. If the string contained in that variable matches the target, return true. Otherwise, return false. Pretty simple solution to a pretty simple problem but this can be way better.

Better Solution

There's a neat trick you can use when calling .substr. If you give it a negative number as it's first and only argument, e.g. "string".substr(-3), you will get a string containing the characters starting at the given number from the end of the string. So "string".substr(-3) returns "ing". Let's employ this trick in our solution:

function confirmEnding(str, target) {
  return target === str.substr(-target.length);
}

In English, this function says: return a string with the same length as target from the end of str and compare the new string to target. If they are strictly equal, return true. Otherwise, return false. This will work with two equal signs as well, but it's typically good practice to use the triple equals.

We can now use ES6 syntax to make a very nice, compact, pure function:

const confirmEnding = (str, target) => target === str.substr(-target.length);

The Difference Between `.susbtr()` and `.substring()`

This feat can also be accomplished with .substring(), however I don't think the solution is quite as elegant. It's a good exercise though, and I'll leave it to you to try it out. These methods may appear to be aliases for one another, however they actually do different things.

From the MDN docs (aka the Javascript Bible):

.substr(): "returns the characters in a string beginning at the specified location through the specified number of characters".
.substring(): "returns a subset of a string between one index and another, or through the end of the string".

Perhaps an easier way to think about it is this:

.substr(): starting at index argument one, get argument two number of characters.
.substring(): starting at index argument one, get the characters up until argument two.

Yet another way to look at it:

.substr(from this index, for this many characters)
.substring(from this index, to this index)

Hope this was helpful! Reach out anytime with feedback, questions, tips, and especially compliments. If you want to follow along as I explore this wonderful language of the web, find me on Twitter or at my blog.

Vinny out. âœŒï¸

"Using the Vigenère Cipher to Encrypt a Message with Javascript"

Vince Campanale — Tue, 27 Jun 2017 19:20:28 +0000

This article is technically Part 3 of a three part series, but don't worry, the first two parts are not critical to understanding this part (and this is the more interesting section tbh).

Here are the links to the others if you're curious:
Using the Vigenère Cipher to Encrypt a Message (Part 1)
Using the Vigenère Cipher to Encrypt a Message (Part 2)

In Part 1, I gave a brief overview of the Vigenère cipher and discussed the two approaches to solving it (the two approaches that I could come up with - there are definitely others). In Part 2, I covered the first approach, which is essentially a Caesar cipher with a dynamic shift number. In this part, I'm going to step through the more interesting solution - the way it's really intended to be done - using the magical Vigenère table.

The Vigenère table looks like this:

By Brandon T. Fields (cdated) - Based upon Vigenere-square.png by en:User:Matt Crypto. This version created by bdesham in Inkscape, and modified by cdated to include visual guides.This vector image was created with Inkscape., Public Domain, Link

Don't worry about deciphering that behemoth right now, you'll gain a deeper understanding as I go over the code to build this thing.

The process breaks down into four primary functions: the generateAlphabet function, the generateVigenereTable function, the encodeWithTable function, and of course the vigenereCipherWithTable function. Note: this solution is rather imperative and I hope to reimplement it in a more declarative way in the future so follow me on twitter @_vincecampanale or on dev.to for humor and updates (all about JS of course).

So here's the plan:

1) Generate an alphabet starting with a given letter (a in the first column, b in the second, etc) - note: the alphabet must wrap around to the beginning when it reaches z
2) Generate a Vigenere table
  - The keys consist of the standard alphabet (a-z)
  - Each key's value is an alphabet starting with that key and wrapping back   around to a (each value is 26 letters)
3) Encode the message by looking up each letter of the original message in the   keys of the Vigenere table, then traversing the table to get the value from the   character code of the keyword letter  
4) Put it all together in the final function

Step 1: Build the `generateAlphabet` function

In this function, the parameter will be a starting index. We are going to iterate over twenty-six char codes, starting at the provided start index. Presumably, the first char code will be 97, and they will go up from there. In order to account for char codes over 122, we add some if/else logic into the String.fromCharCode method. Ternary operators allow us to keep this code succinct.

function generateAlphabet(start) {
  let alphabet = [];
  //from start index to 26 chars later
  for (let i = start; i < start + 26; i++) {
    //convert the char code into a letter and push it to the alphabet array
    alphabet.push(String.fromCharCode(
      i > 122 ? i - 26 : //if char code > 122, return code - 26, else
      i < 97  ? i + 26 : //if char code < 97, return code + 26, else
      i                  //just return the code
    ));
  }
  return alphabet; //return the alphabet array
}

Step 2: Build the `generateVigenereTable` function

Dedicating a function to generating alphabets with different starting character codes allows us to keep the Vigenère table function surprisingly simple.

All we need to do is instantiate an empty object, table. Load the keys of that object up with the standard alphabet, starting with the letter 'a' (char code 97). Then for each key in the table, we generate an alphabet that starts at the key's index. So the second key ('b') has an alphabet starting with b and wrapping back around to end with a. The third key ('c') has an alphabet starting with c and wrapping back around to end with b. And so on.

In code:

//generate an object, where each key is a letter and each value is another alphabet
function generateVigenereTable() {
  let table = {}; //instantiate a temporary object to hold the table
  table.keys = generateAlphabet(97); //set the keys of the object equal to the standard alphabet (starting at 97)
  table.keys.forEach((key, index) => { table[key] = generateAlphabet(97 + index) });  //set the value of each key as the alphabet
  return table; //return the table
}

Step 3: Encode each character using a Vigenère table

This is the most important step in the solution - the piece where we put our Vigenère table to use. See the comments for a line-by-line explanation.

function encodeWithTable( message, keywordStr ) {
  let messageArray = message.split(''); //split the message into an array
  let keywordArray = keywordStr.split(''); //split the keyword string into an array
  messageArray.forEach((letter, index) => { //for each letter and index in the message array
    let messageChar = letter; //make a temp variable to hold the letter
    let keywordChar = keywordArray[index]; //get the corresponding letter from the keyword string using the index

    let keywordCharIndex = keywordChar.charCodeAt(0) - 97; //get the index of the keyword by subtracting 97 from the charcode
    let vigenereTable = generateVigenereTable(); //create a vigenere table

    let cipherChar = vigenereTable[messageChar][keywordCharIndex]; //look up the corresponding letter in the table

    messageArray[index] = cipherChar; //replace the letter in the message with the cipher letter
  });
  return messageArray.join(''); //convert the messageArray back to a string and return it
}

Step 4: The Actual Function

Since we've taken the time to break down our problem and write thorough helper functions, the cipher function itself is nothing special. In fact, it's identical to the function in Part 2, except now we are encoding with the Vigenère table, rather than with the boring old Caesar cipher.

function vigenereCipherWithTable(message, keyword = "lemon") {
  for ( let i = 0; i < message.length; i++ ) {
    keyword += keyword; // repeat the keyword a bunch of times
  }
  let keywordStr = keyword.substr( 0, message.length ); // cut the keyword string so it's the same length as the message
  let ciphertext = encodeWithTable( message, keywordStr ); // encode the string using the vigenere table
  return ciphertext //return the cipher text!
}

And there you have it! Have fun passing secret messages back and forth with your friends...good luck decoding them though... ;)

Hope this was enjoyable and helpful. Shoot me an email or tweet at me with comments, questions, complaints, and suggestions.

Til next time ☮

What is Javascript's `new` keyword doing under the hood?

Vince Campanale — Tue, 20 Jun 2017 02:12:57 +0000

Good morning, afternoon, evening, night. I have some things to share with you about the new keyword in Javascript. Important things.

I'll start with some context and background about Constructor functions and the class keyword. Then, I will explain exactly what the new keyword is doing under the hood. Next, I will show how it does what it does by implementing it in code. Finally, I will explain why it does these things and give a couple arguments for avoiding this approach to Javascript object creation altogether in most situations. The information presented here comes from these resources and several others, processed by my brain.

Constructor functions ðŸ›

A Constructor function is a function that builds and returns a new instance of object. It looks like this:

/** Car: {
*    doors: number,
*    color: string,
*    drive: Function
*   }
*
* Car(doors: number, color: string) => Car
*/

function Car(doors=4, color='red') {
    this.doors = doors;
    this.color = color;
    this.drive = () => console.log('Vroom!');
}

The capital letter at the beginning of the Constructor name is simply a convention adopted by Javascript programmers to separate Constructor functions from regular functions.

The way Constructor functions work under the hood might make for an interesting article, but I'll leave that for another day. Today is about new.

The most important thing to take from this section is that the Constructor function, when invoked with the new keyword, will return an object with a doors property, a color property, and a drive method.

class

The class keyword was introduced to Javascript with the ES2015 specification, commonly known as ES6, soon to be known as "just Javascript."

The class keyword introduces nothing new (ha) -- it just provides some syntactic sugar for folks who like Java and semantic keywords. Nothing wrong with that.

Here's how you use it:

class Car {
    constructor(doors=4, color='red') {
        this.doors = doors;
        this.color = color;
    }

    drive() { console.log('Vroom!'); }
    // or drive = () => console.log('Vroom!');
}

Notice anything familiar?

I'll give you a hint:

console.log(typeof Car) // Function

Under the Hood ðŸš—

Whether you are using a vanilla Constructor function or a special keyword to instantiate your object constructing mechanism, you will be using new to create new instances of the defined object. (There is another not-so-secret and powerful way to generate objects in Javascript called a factory function which will have to be covered in a future post).

So what is the new keyword doing under the hood (in human words)?

Three letters, four actions. When you say var myCar = new Car(), it...

1) Creates a new (empty) object 
2) Gets the prototype of the constructor function (Car) and sets it as the empty object's prototype
3) Calls the constructor function with the new empty object as `this` 
4) Returns the new object

What does this process look like in computer words?

Note: In order to reimplement new we will have to pass in the constructor and it's arguments separately.

First, let's do it in ES5 because you only live once.

// new(constructor: Function, constructorArgs: Array<any>) => Object
function new2(constructor, constructorArgs) {

    // Step 1: Create an empty object
    var newObject = {};

    // Step 2a: Get the prototype of the constructor function
    var constructorPrototype = constructor.prototype;
    // Step 2b: Set the empty object's prototype 
    Object.setPrototypeOf(newObject, constructorPrototype);

    // Retro technique to turn arguments into an actual array 
    var argsArray = Array.prototype.slice.apply(arguments); 
    // Slice off first argument b/c that's the constructor function itself. 
    var realConstructorArgs = argsArray.slice(1);

    // Step 3: Invoke constructor with newObject as 'this'
    constructor.apply(newObject, realConstructorArgs);

    // Step 4: Return the new object :)
    return newObject;
}

Now that we have a working implementation, we can clean it up and make use of some new tools from ES6.

// new(constructor: Function, constructorArgs: Array<any>) => Object
function new2(constructor, ...constructorArgs) {
    const newObject = {};
    Object.setPrototypeOf(newObject, constructor.prototype);    
    constructor.apply(newObject, constructorArgs);
    return newObject;
}

And...

const myCar = new2(Car, 4, 'blue');
console.log(myCar) // { doors: 4, color: 'blue', drive: [Function] }
myCar.drive() // Vroom!

But wait, there is an edge case. If the constructor function itself returns a new object, like this...

function Car(doors, color) {
    this.doors = doors;
    this.color = color;
    this.drive = () => console.log('Vroom!');
    return {
      doors,
      color
    }
}

we should just return that object directly:

// new(constructor: Function, constructorArgs: Array<any>) => Object
function new2(constructor, ...constructorArgs) {
    const newObject = {};
    Object.setPrototypeOf(newObject, constructor.prototype);
    return constructor.apply(newObject, constructorArgs) || newObject;
}

And we're done.

Hope this helped!

Tweet me with feedback @_vincecampanale if it did or didn't.

Til next time ðŸ‘‹.

DEV Community: Vince Campanale

Using Recursion to Loop in Elm

With a for Loop

In Order to Understand Recursion...

How about some Elm?

A Better Way?

Think Before You Test: A Guide to Writing Effective Unit Tests for Custom Events in Angular

What is an @Output property?

What should a unit test for a custom event do?

The component

Testing the child

Testing the parent

Takeaways

Elm Kata 3: Using Elm Core List and String Functions to Detect Anagrams

The Problem

Round 1

Round 2

Scoring Scrabble Words with Elm

The Problem

Assumptions

A Solution

All Aboard the Refactor Tractor

Developer Halloween Costumes

I Found My People at a Programming Meetup

"Elm Has Me Leaping For Joy"

Harnessing the power of Javascript's .map and .filter

ðŸ’“ For the Love of Loops ðŸ’“

For Each or Not For Each ðŸ“–

Introducing the ðŸŒŸStarsðŸŒŸ of the Show

FILTERðŸ”—MAP

ARROWS â†—ï¸ â¬…ï¸ â¬†ï¸ âž¡ï¸ â†˜ï¸

Abbreviated Variables, const, & Implicit Return

"My First Two Weeks Using VIM"

Days 1 & 2

Tip 1

Tip 2

Tip 3

Tip 4

Day 3

Tip 5

Tip 6

Tip 7

After Week 1

Tip 8

Tip 9

Tip 10

Revisited: A Beginner's Solution to a Common Javascript Interview Challenge

Beginner Solution

Better Solution

The Difference Between .susbtr() and .substring()

"Using the Vigenère Cipher to Encrypt a Message with Javascript"

By Brandon T. Fields (cdated) - Based upon Vigenere-square.png by en:User:Matt Crypto. This version created by bdesham in Inkscape, and modified by cdated to include visual guides.This vector image was created with Inkscape., Public Domain, Link

Step 1: Build the generateAlphabet function

Step 2: Build the generateVigenereTable function

Step 3: Encode each character using a Vigenère table

Step 4: The Actual Function

What is Javascript's `new` keyword doing under the hood?

Constructor functions ðŸ›

class

Under the Hood ðŸš—

With a `for` Loop

What is an `@Output` property?

ARROWS â†—ï¸ â¬…ï¸ â¬†ï¸ âž¡ï¸ â†˜ï¸

Abbreviated Variables, `const`, & Implicit Return

The Difference Between `.susbtr()` and `.substring()`

Step 1: Build the `generateAlphabet` function

Step 2: Build the `generateVigenereTable` function