DEV Community: James Sinkler

JS-Set

James Sinkler — Tue, 24 Aug 2021 21:46:49 +0000

Javascript objects are great! But a little primitive.

The javascript object is a force to be reckoned with. It's very versatile, and is a great place to store simple key value pairs.
Got some characters to keep track of? Use an object. Have some numbers to keep track of? Use an object. Have some nodes to keep track of? Well...

Javascript Set

Again an {} is great for simple key value pairs. The keys are always going to be real simple. String's or if they are a number, they will be converted into a string. This is normally fine, and the values you store can still be complex, like a function or another object.

It's only an issue if you want your key to be more complex.

I was solving a little coding algorithm where I was looking to see if two linked lists had a shared intersection in common.

/*
  Intersecting
  2 - 3 - 7 \ 
            4 - 5 - 3
    9 - 10 /

  Not intersecting
  2 - 3 - 7

  9 - 3
*/

One thing I thought, is I could just iterate through one, and store all the references to them, since I've used this pattern in many problems involving strings, or numbers, as keys.

The issue is that a linkedList is made up of nodes, so it's a complex value. If I was just comparing the data property it would be fine, but I wanted to know if it was the exact same node not just one with the same data value.

// Ex Node:
node = {
  data:4,
  next: nextNode
}

Set

A quick heads up. This is not the most efficient way to solve this problem. Lookup in a set can be O(n), but it will allow us to store the complex data structure. Overall the solution I'm talking about was O(n^2) time complexity because you store one list, then loop through the other and do lookups in the set. I actually did a better solution at the time, but I wanted to actually implement it with a set because it may be useful down the road.

function inefficientIntersectingLists(ll1, ll2) {
  let firstNode = ll1
  let secondNode = ll2
  const setOfNodes = new Set()

  // insert into our set
  while (firstNode !== null) {
    setOfNodes.add(firstNode)
    firstNode = firstNode.next
  }
  // loop through second linkedList check for overlap
  while (secondNode !== null) {
    if (setOfNodes.has(secondNode)) {
      return secondNode
    }
    secondNode = secondNode.next
  }
  return 'No overlap'
}

Implementation

Easy to set it up. 😁.

  const setOfNodes = new Set()

You can add this to your repertoire

  setOfNodes.add(firstNode)

If your keys need to be complex the Set has what you need

  setOfNodes.has(secondNode)

Takeaways

Use a set when you have some complex values you want to store as keys. If you are just dealing with primitive values such as strings and numbers use an object since that has constant lookup time O(1). Here's some more information on set methods over at MDN.

If you don't care about sets at all, but now want to see the more optimal solution to the linked list overlap problem, check it out here.

Thanks for reading, maybe you will find a use case for this somewhere soon.

Happy Coding,

James

TS-Function-Returns

James Sinkler — Fri, 11 Jun 2021 18:18:33 +0000

Is it one drink or two?

Photo by Nathan Dumlao on Unsplash

Return two different types w/ typescript function

The beauty of typescript is supposed to be safety. But safety is hard to achieve and at some point typescript may not let you do something that you can tell will work.

This is good. It will make you write a bit more code to explain yourself to typescript.

Task:

Let's say you want to write a function that can take 2 arguments, and return an array between those two values.

EX:

range(3, 5) // returns [3, 4, 5]

So far this is not too dificult with typescript. Let's make a little for loop to do it.

function range(start: number, end: number): number[] {
  let newArr: number[] = [start]
  for (let i=start+1; i<= newEnd; i++) {
    newArr.push(i)
  }
  return newArr
}

To break it down this is a function which has takes two arguments, and we are using typescript to assert these are both of the type number.

The next piece, ): number[] { is asserting out return value will be an array of numbers. So nothing too crazy yet.

Harder part

The next part is to implement this function when we only pass in 1 argument. We want it to start the process, but instead return a function that will then take in an argument as the ending number, and return the completed array.

Our returned callback function signature for when we pass in 1 argument

type CallBackFunction = (end: number) => number[]

So let's modify range

type CallBackFunction = (end: number) => number[]

function range(start: number, end?: number): number[] | CallBackFunction  {
  let newArr: number[] = [start]
  function callback (endingNum:number): number[] {
    for (let i=start+1; i<= endingNum; i++) {
      newArr.push(i)
    }
    return newArr
  }
  // if end is undefined we need to return the callback
  if ( end === undefined) {
    return callback
  }
  return callback(end) // this returns a full array [start, start+1, ..., end]
}

const fromThreeToFive = range(3, 5)
console.log(fromThreeToFive)
const startAtFour = range(4)

We made the end parameter optional. So we changed the start of our function to be range(start: number, end?:number) {.

Our function still works for a range with two arguments, but if we try startAtFour = range(4) it doesn't give us an error or warning, but if we hover over it we can see it doesn't know what it is.

const startAtFour: number[] | CallBackFunction

This immediately becomes problematic when we try to call this function with an ending argument.

const startAtFour = range(4)
const endedAt9 = startAtFour(9) // should return [4, 5, 6, 7, 8, 9]

What do you want typescript?

Not all constituents of type 'CallBackFunction | number[]' are callable.

In other words you can't invoke an array of numbers like this [4](9).

Quick Solution with `as`

Since we are smart, we know when we write this code, we are expecting a callback function if we only pass in one argument. Thus the quick and easy fix is to tell it what startAtFour is.

// using the as, we can assert this is going to have a certain type
const startAtFour = range(4) as CallBackFunction

We can now use it as we wish, and it will expect startAtFour to have the type CallBackFunction moving forward. This was my initial fix before I read a good article from Nathaniel. Which led to this other, arguably better solution.

Solution 2 Function overload

type callBackFunc = (end: number) => number[]
function range2 (start: number, end: number) : number[];
function range2 (start: number): callBackFunc;

function range2(start:number, end?:number) {
  let newArr = [start]

  function endFunction(newEnd: number) {
    for (let i=start+1; i<= newEnd; i++) {
      newArr.push(i)
    }
    return newArr
  }
  if (end === undefined) {
    return endFunction  // endFunction with newArr = [start]
  } else {
    return endFunction(end) // ex: [1, 2, 3]
  }
}

const startAtFour = range2(4)
const endedAtNine = startAtFour(9)
console.log(endedAtNine)

When we define range2 after our Typescript definitions, it goes and looks at what we wrote about range2 earlier.

function range2 (start: number, end: number) : number[]

Now it will know that when it gets in two arguments that are both numbers, it is going to return an array of numbers.

function range2 (start: number): callBackFunc;

Now it will know that when it does not get another argument it is going to return a function.

Quick note -- end?= --

It is key that we allow the second argument to still be optional when we define the function, to allow it to match the above type signature. Otherwise it will error out, but end?= number allows it to be number or undefined when we don't pass it in.

A link to the TS Playground with the two solutions.

Thanks for reading, maybe you will find a usecase for this somewhere soon. (Side Note) If you are interested in how we have access to that array with the starting number in our callback function, check out my other post on closure

Happy Coding,

James

Closure

James Sinkler — Fri, 04 Jun 2021 19:58:38 +0000

Very adorable cat in a box

Photo by Luku Muffin on Unsplash

Javascript Closure

Ok so what's with the cat in the box?

Well in my mind the cat represents the variables you get access to each time you use a function that was returned by another function. In general you are grabbing the box (the function) to use as a box. But you get access to a cat (variable tied to the scope) each time as well, even though it's not really a part of the box. Hopefully by the end of this that will make sense.

We will look at how this would work in a little function to update the score in a game.

You might think, ok, I could have a global variable called score, and then inside of it just update that score each time a player gets a point.

let score = 0;

const playerScores = ()=> {
  score++
  return score
}

This would work fine, and I've definitely written functions that mutate something not directly defined inside of it. Functional programming people would take issue with this function on the following basis. Not that we care about following strictly functional programming right now.

It returns a different value every time you call it
It accesses variables defined outside it
It updates a value and mutates it to be another value

Mutated Apple

Photo by Diana Polekhina on Unsplash

We aren't really going to write this in the functional paradigm but we will address one of these points. The main bullet from above that we are going to deal with is:

It accesses variables defined outside it

Ok. Back to the cat in the box. score is the cat in this case. We want to make it a part of the function. It will help us keep track of this variable since it is tied to this function.


const playerScores = ()=> {
  let score = 0;
  score++
  return score
}

How about this? Problem solved right?

we call playerScores()
score is initialized at 0
score is updated by 1
score returns 1

(The issue of course is when we call it again the same thing happens and it always returns 1)

I'm imagining maybe I have multiple levels to this game, and when we get to a new level, the score goes back to 0. So there is some value in that let score = 0 declaration. But at the same time, it won't be a fun game if we can only get to score 1.

Enter the closure. This will give us a way to track score and update it for different levels. If we go ahead and declare score like we did, but then return a new function that updates score we get access to it.


const playerScores = ()=> {
  let score = 0;
  return updateScore() {
    score++
    return score
  }
}

Now when we call playerScores() we don't update the score, we get the inner function updateScore returned, but it has access to that score initialized in the parent. It get's access to the cat in the box.

// save the returned function to a variable
const roundOnePlayerScoresAPoint = playerScores()

// call that returned function
roundOnePlayerScoresAPoint()

// call it again
roundOnePlayerScoresAPoint()

// call it three times
let thirdReturn = roundOnePlayerScoresAPoint()
console.log(thirdReturn) // what's the score?

It was the same cat in the box each time you called it. It was the same score that was originally initialized when we created roundOnePlayerScoresAPoint. Our returned function had it in it's closure. It looks back at the function that defined it, and when it is asked to update score, score++, it says hmm there's no score defined in myself, was there one back in that box? Yes! So it goes ahead and updates the one defined above it in the parent scope.

What I find nice about this, is now if we want our player to go to level2 and restart the score, I can just call a new instance of playerScores.

const roundTwoPlayerScoresAPoint = playerScores()

roundTwoPlayerScoresAPoint() // this will only update the new score that was just initialized

// score = 1 in round two now,
// score = 3 in round one still,

So when you call that parent function again for a new instance of the returned function. You get a new score initialized. It's like getting a whole new box, with a different kitten inside.

Hope you found that enjoyable, maybe you will find a usecase for this somewhere soon.

Happy Coding,

James

Bind methods

James Sinkler — Thu, 03 Jun 2021 20:59:03 +0000

Photo by Manuel Sardo on Unsplash

Given this little object, what should game.play() return to us?

const game = {
  lives: 10,
  isPlaying: false,
  gameOver: function() {
    return 'GAME OVER'
  },
  play: function(){ 
    this.isPlaying = true
    return `It's on! You have ${this.lives} lives.`
  }
}

We look inside the game method and see that this sets our game.lives property to true, and then returns a string, that also lets us know how many lives we have.

So game.play() will run fine.

But what if we want to export just this one method to some other file to run somewhere else. Maybe we have a pause.js file and we want to be able to access this method within it, to start back up after our play after a pause.

If we do something like this we are not going to get what we want

export const playGame = game.play

The problem is that on the above line, we get access to playGame the method we want, but only the inner function. Our variable playGame has no idea what this is anymore.

Sometimes this is fine. Take for instance the other method we have in our game object. If we needed to export our gameOver function it will work just fine as is.

export const gameOver = game.gameOver

But this is because there is no reference to this in this method. The method gameOver doesn't need to know anything else about the object it came from.

As an aside there's nothing particularly important about exporting like I have in my examples. It just seems this is when it comes up, because you lose sight of the object the method came from.

So if we go ahead and try these both out

const game = {
  lives: 10,
  isPlaying: false,
  gameOver: function() {
    return 'GAME OVER'
  },
  play: function(){ 
    this.isPlaying = true
    return `It's on! You have ${this.lives} lives.`
  }
}

const gameOver = game.gameOver
console.log(gameOver()) // All good here

const playGame = game.play // WE WILL CHANGE THIS
console.log(playGame()) // Not so good
// we need to tell it which object it should look at for the keyword this

So we see that we get the incorrect response on our second call. The gameOver function works fine, with no this referenced. But our second method returns the string It's on! You have undefined lives.

So we change our declaration to include a bind when we make the assignment.

// bind it  to the game object when saving to the variable
const playGame = game.play.bind(game) // CHANGED
// now it prints nicely
console.log(playGame())

That's what you need to know to use the bind method. Remember if you are trying to utilize a method from an object in this way, if it has the keyword this than this is what you can do to bind it properly.

Happy coding,

James

SQL Join

James Sinkler — Wed, 23 Sep 2020 14:49:30 +0000

Basic SQL JOIN

So you have some tables in SQL with a relationship between them, and you want to return something from one table, but based on a condition in another. Great! JOIN

As always, I think it is best to talk about this by looking at an example. We are going to borrow a problem close to one I found on hackerRank the other day. Basically you had a city, and a country table.

The city table does have a col countryCode, which matches up with the code col in the country table. This is a referred to as a Foreign Key when it is in the City table, and a Primary Key when it is in it's own table country.

Task : Write a query to get all cities w/ continent of 'AFR'

Step 1: SELECT statement

So given these two tables, if you've never done a join before, I want you to think about just the first part of this question.

Write a query to get all cities

Well, this first part is the same as it would be if we only had one table. So don't worry about the other table yet, lets just write the first part

SELECT city.name FROM city

Step 2. JOIN statement

We need to reference the other table Country even though we are not returning anything from it. Since our WHERE will be dependent on a col within it, we need to JOIN it to get access.

JOIN country

Done.

Step 3. ON
Ok not really done... SQL is pretty great, but you still need to explain how you are joining these, so we need to explain the two keys that match up between these tables.

Write a equality statement for the two cols that match up

ON city.countryCode = country.code

Step 4. WHERE

Now that we have JOINED the country table we can use WHERE like we normally would. At this point I generally imagine that I've created a super table.

We haven't really, but we do have access to all the cols in each table. It would be really inefficient to have each city entry with all this extra country data unless we really needed it. But using a JOIN we can act like we do now. We make our selection based only on those countries within the continent Africa.

Cities have no direct connection to continents which could be it's own table here as well, but since they have a direct connection to the country, we can query WHERE our contry.continent is equal to 'Afr'.

WHERE country.continent = 'AFR'

Thats the last piece of the puzzle! So our total block of SQL query would look something like this.

SELECT city.name FROM city
JOIN country
ON city.countryCode = country.code
WHERE country.continent = 'AFR'

Alright, thats a solid basic JOIN between two different tables with a One-to-Many relationship. Go find a couple basic SQL JOIN challenges and try out your new knowledge. If you feel like you're getting the hang no problem, look for some problems with many-to-many relationships where you need to use a JOIN TABLE. You got this!

Happy coding,

James

DEV Community: James Sinkler

JS-Set

Javascript objects are great! But a little primitive.

Javascript Set

Set

Implementation

Takeaways

TS-Function-Returns

Return two different types w/ typescript function

Task:

EX:

Harder part

What do you want typescript?

Quick Solution with as

Solution 2 Function overload

Quick note -- end?= --

Closure

Javascript Closure

Bind methods

SQL Join

Basic SQL JOIN

Task : Write a query to get all cities w/ continent of 'AFR'

Step 1: SELECT statement

Write a query to get all cities

Step 2. JOIN statement

Write a equality statement for the two cols that match up

Step 4. WHERE

Quick Solution with `as`