DEV Community: Adriana DiPietro

Introduction to RSpec

Adriana DiPietro — Mon, 20 Feb 2023 18:54:05 +0000

I've been using RSpec to test my Ruby code for about 8 months now and have learned a lot. So, in this post, I want to share some of the best practices that I've learned about using RSpec for testing. This content is targeted toward beginners who want to get familiar with RSpec, but also can totally benefit more experienced developers who need a quick refresh.

Whether you are just getting started or not, here are some things that I wish I knew back 8 months ago:

Testing is as important as writing code
RSpec is very feature-rich
Abide by formatting rules
Practice makes progress
Conclusion
Resources

Testing is as important as writing code

Testing is as important as writing code, if not more so. It is one of the aspects of software development that I both underestimated and dreaded early in my career.

Testing allows you to find bugs before your code gets released. Testing also helps with understanding complex systems and finding out where there is room for improvement. For example: what happens when someone enters the wrong data type into a field? How do different inputs affect your output? Does this piece of logic always work as intended? We can answer these questions through testing.

In my personal opinion, I think testing has made me better at coding because in order to write successful RSpec tests, you need to understand your code. There have been times where I have written tests and then realized my code could be refactored to be more efficient or more DRY.

RSpec is very feature-rich

Mocking

In a colloquial sense, to mock something is to replicate. Remember this definition as we proceed with rspec mocks.

Mocking is mirroring or replicating your Ruby code into rspec in order to test it properly. It is extremely helpful in perceiving return values or method implementations. Given an edgecase, does your expected return value stand? Given an edgecase, does your method get called? Given an edgecase, how do two objects interact? Let's look at an example.

Here we have a simple Ruby class with a class method that calls an instance method to update a user's city.

class UpdateUserInfo

  def self.update_city(user:, city:)
   new.update_city(user: user, city: city)
  end

  def update_city(user:, city:)
    user.update!(city: city)
  end
end

Now, here is our rspec file. First, I mock out what my user object should look like in reality.

let(:user) do
  {
    first_name: 'Frances',
    email: 'frances.dev@example.com',
    hobbies: [
      'writing',
      'coding',
      'reading'
    ],
    city: 'New York City'
  }
end

let(:updated_city) { 'Philadelphia' }

describe '.update_city' do
  subject { described_class.update_city(user: user, city: updated_city) } 

  it 'updates the user's city' do
    expect(user).to receive(:update!).with(city: 
    updated_city).and_return(true)
  end
end

I then mock out my call to #update! using an expectation. I include what I would normally include: the attribute name and the value I want to pass in. I also want to mock out the expected return or response. A successful call to #update! on the user object should return true. If it were to fail, #update! would raise an error. In this example, the spec will pass.

You may notice that this doesn't look to different than our Ruby code in the UpdateUserInfo class. That is the whole point: readability and mirroring. Just by solely reading this test, I know what that class should accomplish.

Mocking out both the object and the expected behavior allows for an additional perspective on their interaction. How does this object react to this method? Keep this in mind while building out your spec files — maintain the integrity of your code through replication. If your spec doesn't mirror your code, then your spec is not testing truly.

Matchers

What is a matcher? A matcher allows us to create an assertion and expectation within our spec. This is vague, I know. Let's look at a simple example:

let(:random_num) { 14 }

it { is_expected.to be < 20 }
it { is_expected.to be >  1 }

In this code snippet, I declare a variable random_num and assign it to the value of 14. Then I assert two (2) expectations. I assert that it (meaning our declared variable random_num) should pass two different cases: random_num is less than 20 and random_num is more than 1.

In this example, both tests would pass. So, if the object is the variable I declared and the expectation is the test, then what is the matcher? The matcher is .to be. This is only one of many, many matchers. Let's look at a more complex example:

let(:fruits) { ['orange', 'mango', 'strawberry'] }

expect(fruits).to include('blueberry')
expect(fruits).to include('mango', 'strawberry')
expect(fruits).to include('blueberry', 'mango', 'banana')

After taking a second to look at the above code snippet, can you point out the following?

What is the name of the declared variable?
What is the value of the declared variable?
What data type is the value of the declared variable?
What is the matcher of the expectations?
What tests pass? What tests fail?

Look at Resources to discover more types of rspec matchers.

Abide by formatting rules

Just like programming languages, it is best practice to abide by formatting rules and syntax. If there is a clear, defined standard to your specs, then you will eventually be able to understand others' tests and write yours more efficiently. And then on the flip side, this will help other people understand what your code is to achieve.

Some formatting examples include:

Test one thing per example block.
Make your shared examples, context blocks and it blocks readable and read-like-english.
Like Ruby, use snake_case.
One test suite per class.
If the class file is 'cat_controller.rb', then the spec file for that class should be 'cat_controller_spec.rb'
Keep all your RSpec files in a /spec directory.

These are just a few formatting expectations. However, they are a great jumping off point and will set a sound foundation for your test development.

Practice makes progress

Taking a look at RSpec as a whole, you may be confused at first – I sure was. You may be confused after weeks of writing with RSpec – guilty, again! Just keep practicing — this stuff is not easy! Remember: practice makes things easier for you in the future. Don't give up.

How can you practice? Write your tests first before your code. Think Test Driven Development (TDD). Offer to shadow/pair with your peers on writing their specs. Even better, review your peers' specs and see if and how they can be written better. Offer a solution!

Conclusion

Writing tests is a great way to make sure you are building the right thing – in the right way. RSpec syntax, while tricky at first, is simple and expressive. So once you get used to it, writing in RSpec will feel like second nature.

I hope this post has helped you learn a little bit more about RSpec. As I mentioned at the start, it can be a bit overwhelming at first, but don't let that stop you from working with this awesome tool.

If you have any questions about RSpec or want to share your own experiences with it, please leave a comment.

Remember: we are all learning as we go :) so be kind.

Resources

Introduction to GraphQL

Adriana DiPietro — Thu, 07 Apr 2022 19:58:22 +0000

Hi everyone!

Today we are learning about GraphQL! GraphQL is a new tool for me that I am lucky enough to learn about and use in my internship. So, I figured together we can learn what GraphQL is, why it is important and how we can use it.

Let's get started!

Learning Goals

GraphQL is a Query Language
How It Works
Differences Between GQL + REST
Elements of GraphQL
- Queries / Types
- Data Types
- Scalars
- Enums
Summary + Recap

GraphQL is a Query Language

As the title of this section suggests, GraphQL is a Query language. What does this mean? It means that GraphQL is a programming language used to get and post data.

It is important to acknowledge what GraphQL is because of its name. While many databases end with "QL", GraphQL is NOT a database! Do not get confused by this.

A "query", as you may have guessed, is a request usually for information (in programming: data!). In life, I can query how old you are by asking you "Hey, how old are you?". In return, you may answer: "25" "I am not telling!" "I am turning 30 in July."

Using GraphQL, we create queries to get data from our database. We ask our database: "How many users have brown eyes?" "How many pets does user 129i04u83 have?" "What stores are located in NYC?"

Recap: GraphQL is a QUERY language that we use to get and post data from our database.

Now, let's learn how it really works.

How It Works

The client (the frontend of an application) uses GraphQL API to communicate with the database. Think of GraphQL as the bridge between the client and the database -- it does all the talking -- it is the middleman!

How does the client use GraphQL API? Answer: through the '/graphql' endpoint. The client makes a request with a query to this endpoint (and this endpoint only) and the query determines what data is received or posted. Ultimately, the query describes to the endpoint what it wants.

The flow is as follows:

The client makes a request with a query to the GraphQL endpoint =>
The query is sent to GraphQL API =>
GraphQL parses (JSON) the query =>
GraphQL sends the desired data back to the client

Differences Between GQL + REST

In the section above, we learned that the client only has to make requests to a single endpoint: '/graphql'. Which means GraphQL throws out the idea of REST (and its many, many endpoints) in order to use the single endpoint. Why?

With GraphQL, queries determine exactly what data is to be received or posted. These queries completely diminish the need to specify endpoints. Queries also reduce the amount of overfetching and underfetching of data in an application.

Overfetching occurs when the client receives more data than is needed from a specific REST endpoint.

For example, if I am building an application that takes a user's age and outputs their expected high school graduation year, I only really need the user's age. But say within my database, in addition to the user age data, I also have their address, height and eye color. None of that data is necessary for my application. Graphql querying allows a pinpoint level of specification as to not receive unnecessary data that may slow down the application or cost a lot of money.

Underfetching is quite the opposite: it occurs when a specific REST endpoint does not provide all the data required/desired for an application.

Check out this diagram below for a visual representation:

Elements of GraphQL

Let's look into some of the elements of GraphQL to get a better understanding:

Data Types

GraphQL has five (5) data types:

ID => a unique identifier
String => a UTF-8 character sequence
Int => a signed 32-bit integer
Boolean => true or false
Float => a decimal

Queries / Types

Now that we know what a query is, we can look into how GraphQL defines them.

GraphQL describes a query using the type keyword. For example, to create a query for "cat" with fields "name", "age" "color", "breed", we would code it out like this:

type Cat {
   name: String
   age: Int
   color: String
   breed: String
}

Within each field, we declare the field name (or a key) and the data type of its value. So the name, color and breed of a Cat is a string, while the age is an integer.

While querying, we can non-nullify the values of a field using an exclamation point(!) -- meaning the value of a cat's name cannot be "null". Like this:

type Cat {
   name: String!
   age: Int!
   color: String!
   breed: String!
}

This is the basic, universal syntax for defining a query in GraphQL.

Scalars

While the above, five (5) data types are scalars in GraphQL, GraphQL also allows for custom scalars. What does this mean? It means we can create and initialize our own "data types" to be used to query.

For example, let's say we have to query for website data:

type Website {
    id: ID
    name: String
    url: Url
}

This query returns the website's id, name and url. We could possible store the value of the url field as a string, but then any ol' string could be assigned to "url". Such as "ww.google.com" or "hey hey hey". And those are not valid urls. So, instead, we could just create our own scalar called "Url".

In order to create our own scalar, we need to consider a few things:

1. How the scalar's value is represented in the backend
2. If and how the value's backend representation is JSON-compatible

So, a Url would be represented as a string in the backend, but a regexed string. Meaning, it has to fulfill some requirements, such as:

starts with "https://www."
includes ".com", ".edu", ".org"... etc
does not have any spaces

With the scalar's value represented as a regexed string in the backend, we can ensure it is JSON-compatible in order to be sent to the frontend successfully: Strings are indeed very JSON-compatible!

There are many more custom scalars to be created:

Date
Time
Email
RGB color hex

What else can you think of?

Enums

Enums are basically a "special" data type we can use to catalog all the possible values or options for a given field. In short, the specified values of an enum are the only accepted options.

For example:

enum BoxState {
    SHIPPED
    DELIVERED
    PENDING
}

When querying an object "box" and we want to know the state of the box, BoxState can only be provided the values of: SHIPPED, DELIVERED, or PENDING. The value cannot be "12", true/false, or "Awaiting truck for pickup".

Enums provide a specificity that keeps data values contained and limits bugs.

Summary + Recap

GraphQL is a QUERY language.
A query is a request for information/data.
With GraphQL, the client uses a single endpoint to make requests: '/graphql'
GraphQL removes the need for many REST endpoints because of its queries.
A "type" is a query.
An "enum" defines all possible, accepted values for a field.
Custom scalars can be defined and implemented as values for fields.
Overfetching => receiving too much data that is not necessary for the application.
Underfetching => an endpoint not providing the desired data necessary for the application.

🍵Make sure to check out GraphQL's official website here for documentation and more information.

🍵Thank you for reading along and learning with me. Please feel free to share, like and comment below. But, please remember, everyone is always learning and the "correct" way is not always the best way.

A Quick Guide To: Closures

Adriana DiPietro — Wed, 16 Mar 2022 18:45:05 +0000

Hi programmers! Today we will discussing closures in JavaScript. Every heard of them? Whether you have or haven't, I am positive you have used them.

Without giving too much away, closures are an undeniably necessary concept in order to understand your code and JavaScript as a whole.

Curious to know why? Let's get started.

Learning Goals

What is a Closure?
- Lexical Scope
- Functions as First-Class Citizens
The Benefits of using Closures
- Encapsulation
Closure Examples
- Example 1
- Example 2
Summary + Recap

What is a Closure

A closure is the combination of a function and the environment in which it was declared.

Considered one of the pillars of JavaScript, closures allow a function to access variables from an enclosing scope.

In other words, a closure gives you access to an outer function's scope from an inner function.

When I said that I was positive that you have used closures before, it is because every function in JavaScript forms a closure.

Lexical Scope

You may have noticed I used the term "enclosing" in my description of closure -- let's unravel this by learning what lexical scope is.

Simply, lexical scope is the accessibility of variables dependant on where the function is declared; NOT where the function is invoked (or called).

For example:


// declare function myFunc()
function myFunc(){
    // declare and assign variable myName
    // myName is in the scope of myFunc()
    const myName = 'Adriana'

    // declare printName()
    function printName(){
      // log the value of variable myName to the console
      console.log(myName)
    }
    return printName()
}


// invoke myFunc()
myFunc()

In the above snippet, the function printName() is lexically scoped. printName() has access to the variable "myName" because we invoke and return printName() within the myFunc()'s scope.

So, when we invoke myFunc(), the console outputs "Adriana".

JavaScript is cool in the way that we can access a variable declared outside of a function within that function. A lot of languages actually do not allow this behavior.

Functions as First-Class Citizens

Want to know what else is cool about functions in JavaScript?

Functions in JavaScript are First-Class Citizens. What does this mean? It is a fancy way to say that:

Functions can be passed as a parameter to another function.
Functions can be the return value of a function.

Ultimately, functions are flexible and extremely worth utilizing!

The Benefits of using Closures

Now that we got the idea of what a closure is and how they work -- what are the benefits?

Because of closures, the JavaScript Engine (V8) ensures that the function has access to all of the variables by keeping all the variables declared outside of the innermost function.

JavaScript is lexically and statically scoped -- so when JavaScript compiles and looks through your code the first time, the JavaScript Engine (V8) catalogs what needs to be closured even before the code is executed or ran.

So, the benefits?

Closures save memory space.
Closures allow for encapsulation.
Closures reduce bugs.

Encapsulation

Encapsulation is the hiding of information so as to not be manipulated by the "outside" world or global scope.

We use encapsulation because we do NOT want to give access to certain functions to users nor allow certain variables (such as something that stores state) to be modified.

By nesting an inner function within another function, like our example above, we make sure it is not totally accessible.

Basically, encapsulation ensures that some data is not exposed. Encapsulation promotes the idea of privilege in terms of access to data (or state) or the functions that have access to that data.

Closure Examples

Now that we have acknowledged a textbook definition of closures, let's code this out (we are programmers, aren't we?).

Example 1

First, let's declare a function "a" and within "a" declare a variable "cat" set to a string "Charlie":

function a(){
    let cat = 'Charlie'
}

Since, we are not returning anything, if we invoked a() we would get undefined. However, our "cat" variable was declared within the function's scope and thus, it is in our memory heap (thanks V8 engine!).

In order to be a closure, we must return ** and **declare a function within another function:

function a(){
    let cat = 'Charlie'
    return function b(){
        let dog = 'Zoie'
    }
}

Let's declare AND return function "b" below our cat variable declaration. Within function "b" we declare another variable "dog" and set it to the string "Zoie". Function "b"'s scope now contains access to variable "dog" while also containing access to variable "cat".

So, if we wanted to return the value of variables "cat" and "dog" within the scope of function "b", we could do this:

function a(){
    let cat = 'Charlie'
    return function b(){
        let dog = 'Zoie'
        return `${cat} - ${dog}`
    }
}

In your console or sandbox, paste the above code snipped and then invoke/call the functions in this order:

a()
b()
a()()

What did your console output?

Invoking a() returns function b().
Invoking b() returns an error "b is not defined".
Invoking a()() returns our string literal.

Example 2

Let's code out another example:


function outer(){
   let state = 0

}

Here I have declared a function "outer" and declared and assigned a variable "state" to the value of 0.

If we declare and return another function within outer(), can we access "state"?


function outer(){
   let state = 0
   return function inner() {
      return `Our state is currently at: ${state}.`
   }
}

Yes! If we paste this code snippet into our sandbox and call outer() and inner(), what is our output?

Invoking outer() returns the function inner().
Invoking inner() returns an error "inner is not defined".
Invoking outer()() returns our string literal with the value of "state."

In both examples, we are able to access the inner function by invoking the outer function. When we double-invoke the outer function, we are able to access the string literals. Why? By enclosing the inner function in the outer function's scope, we can only invoke it internally. So, we must use the outer scope as a bridge to receive the return value of the inner scope.

So, how were we able to access the variables in the return statement? JavaScript's Engine (V8) reads through the code from outer function to inner function and shoves the variables into the closure (think of a box). The variables are stored for later use and are never removed because V8 sees that the variables are referenced in another function within the outer function's scope.

Summary + Recap

From this article, let's bundle and condense some of the takeaways:

JavaScript's Engine is V8.
V8 runs and compiles our code.
Functions in JavaScript are lexically scoped.
Lexical Scope: the accessibility of variables dependant on where the function is declared; NOT where the function is invoked (or called).
Functions in JavaScript are First-Class Citizens.
Variables declared in the global context OR within an enclosing scope are stored in the memory heap.
Closures allow a function to access variables from an enclosing scope even after it leaves the scope in which the function is declared.
Because of closures, the JavaScript Engine ensures that an inner function has access to all of the variables within its enclosing scope.
Encapsulation = privacy or reduced accessibility of data.

Still not sure about closures? Here are some resources I used to help me further understand:

Thank you for reading along and coding with me :)
Have any questions, comments or suggestions? Leave them below.

Remember: always code in the way that is best for your learning.

LeetCode WalkThru: 'Reverse Integer'

Adriana DiPietro — Tue, 01 Mar 2022 17:15:50 +0000

Hi programmers! Today we will be walking through how to solve LeetCode's Reverse Integer challenge. Click here to pull up the challenge on your end.

After going over the instructions and the examples provided by LeetCode, we will go through two (2) different methods to come to a solution, including a brute force attempt and a optimized attempt.

It is important to see how a single challenge can be solved in multiple ways to understand how different methodologies achieve efficiency, speed and optimization.

Itinerary

1. Instructions + Examples
2. Brute Force Solution
3. Optimized Solution
4. Summary + Recap

Instructions + Examples

Given an integer 'x', return 'x' with 
its digits reversed. If reversing x causes 
the value to go outside the signed 32-bit 
integer range [2^31], then return 0.

In my opinion, LeetCode does not do a great job with these instructions. (Ahem, super vague!) So, in addition to returning the reversed version of the given integer, we have to consider a few more things.

Let's look at the examples to examine what else we should consider when solving this challenge:

Example 1:

Input: x = 123
Output: 321

Example 1 is pretty straight forward. We see that the output is the reversed integer of the input. Simple enough.

Example 2: 

Input: x = -123
Output: -321

Now, Example 2 introduces the possible hiccup (or edge case) of negative integers. We need to consider that the reversal of the integer results in the appropriate placing of the - sign.

Example 3:

Input: x = 120
Output: 21

In Example 3, the 0 is completely popped off from the output. While the presence of the zero does not affect the actual value of the output, semantically we do not present numbers usually with a zero at the beginning. So, we need to also consider removing the zero when necessary.

After looking at both the instructions and the examples, we get a pretty good idea of what we need to accomplish:

1. Reverse the integer and return it.
2. Maintain the positive or negative value of the integer.
3. Remove any zeroes at the beginning of the reversed integer.
4. Return 0 if the given input is larger than 2^31. (If the number is too large, just return 0!)

Let's get started.

Brute Force Attempt

Thanks to JavaScript's built-in methods, the easiest way to reverse data is to use the reverse() method. However, the reverse() method is dedicated only to arrays. So in order to use reverse() let's convert our integer 'x' to an array:

function reverseInt(x){
    // 1. Convert integer to string.
        const intToString = x.toString()

    // 2. Convert string to array.
        const stringToArray = intToString.split('')

        return stringToArray
}

reverseInt(123)

In the above snippet, I broke down the conversion of 'x' from an integer to a string to an array.

toString() converts a data value to a string.
split() converts a data value to an array.

split() takes an optional parameter called a separator. The separator sits between each array item separating the array item from both its preceding item and succeeding item. In this code challenge, we need the separator.

If we run the above code snippet in our console or sandbox, our output should look like this:

['1', '2', '3']

Now, we have a nice array with each digit of our integer as its own array item. Cool.

Let's keep moving and reverse the array using the reverse() method:

function reverseInt(x){
    // 1. Convert integer to string.
        const intToString = x.toString()

    // 2. Convert string to array.
        const stringToArray = intToString.split('')

   // 3. Reverse array using .reverse().
        const reversedArray = stringToArray.reverse()


        return reversedArray
}

reverseInt(123)
// output => ['3', '2', '1']

Our output would now be ['3', '2', '1'].

With an integer like 123, without a negative sign or any zeroes in the beginning of the array, we could now potentially convert the array back to an integer and we would have the solution.

However, we need to consider those edge cases we saw in the examples provided by LeetCode because in reality integers include negative numbers and zeroes.

First, let's consider if the integer ends with a 0. When we reverse the array the 0 would then be in the first position of the array. For example:

reverseInt(120)
// output => 021

We can use shift() to remove the first element.

function reverseInt(x){
    // 1. Convert integer to string.
        const intToString = x.toString()

    // 2. Convert string to array.
        const stringToArray = intToString.split('')

   // 3. Reverse array using .reverse().
        const reversedArray = stringToArray.reverse()

   // 4. If 0 is in the first position of the array, use shift() to remove it.
      if (reversedArray[0] === '0'){
        reversedArray.shift()
      }
      // ['0', '3', '2', '1'] => ['3', '2', '1']
      // ['0', '0', '3', '2', '1'] => ['3', '2', '1']
}

reverseInt(1230)
reverseInt(12300)

Simple enough, right? Our next edge case we have to consider is the positive or negative value of the integer we pass to our function.

We want to maintain this value, but when we reverse our array the negative sign will end up in the last position or index which semantically does not work.

According to our current code, this would be the output:

reverseInt(-123) // => 321-

But, we want this:

reverseInt(-123) // => -321

Just like reverse(), JavaScript has great built-in functionality to compensate for this edge case. Math.sign() returns either a positive or negative value based on the sign(+/-) of the number passed into it.

Here are some examples:

console.log(Math.sign(123));
// output => 1

console.log(Math.sign(-321));
// output => -1

console.log(Math.sign(0));
// output => 0

console.log(Math.sign('-321'));
// output => -1

Math.sign() will return either -1, 0 or 1. So, how can we apply this to our code to return the reversed integer? We can multiply our reversed integer by Math.sign() passing in our original integer.

First, let's convert our reversed array back to an integer:

function reverseInt(x){
    // 1. Convert integer to string.
        const intToString = x.toString()

    // 2. Convert string to array.
        const stringToArray = intToString.split('')

   // 3. Reverse array using .reverse().
        const reversedArray = stringToArray.reverse()

   // 4. If 0 is in the first position of the array, use shift() to remove it.
      if (reversedArray[0] === '0'){
        reversedArray.shift()
      }
      // ['0', '3', '2', '1'] => ['3', '2', '1']

   // 5. Convert array back into string.
       const backToString = reversedArray.join('')
       console.log(typeof backToString)

   // 6. Convert string back into integer.
       const backToInteger = parseInt(backToString)
       console.log(typeof backToInteger)
}

reverseInt(-123)
// output => 321-

** I use 'typeof' to check the data type of a given variable. It is a great tool to get in the habit of using! **

Now we can apply Math.sign():

function reverseInt(x){
    // 1. Convert integer to string.
        const intToString = x.toString()

    // 2. Convert string to array.
        const stringToArray = intToString.split('')

   // 3. Reverse array using .reverse().
        const reversedArray = stringToArray.reverse()

   // 4. If 0 is in the first position of the array, use shift() to remove it.
      if (reversedArray[0] === '0'){
        reversedArray.shift()
      }
      // ['0', '3', '2', '1'] => ['3', '2', '1']

   // 5. Convert array back into string.
       const backToString = reversedArray.join('')

   // 6. Convert string back into integer and check to see if the integer is larger than 2^31.
       const backToInteger = parseInt(backToString)
       if (backToInteger > 2**31) {
           return 0
       }

   // 7. Using Math.sign(), multiply the value of the original integer by our reversed integer.
     return backToInteger * Math.sign(x)
}

reverseInt(-123)
// output => -321

Paste all this code into your console or sandbox. Our output should be -321! Yes, it worked!

Try it with a few different integers as well:

Input: 0
Input: 1400
Input: -50000
Input: 200000000000
Input: -0

Optimized Solution

In our brute force attempt, we have a completely valid solution. However, it is messy because it is not DRY. We repeat ourselves quite a bit and overuse variable declarations. Let's optimize our code and reduce it from 15+ lines of code down to a few.

First, we can convert our original integer to a string, then to an array, reverse it, back to a string and then finally back into an integer in one line:

function optimizedReverse(x){
    const reversed = parseInt(x.toString().split('').reverse().join(''))

    return reversed
}

optimizedReverse(345)
// output => 543

That cleans up a lot of code! Down to two lines already!

Now, we can borrow some code from our brute force attempt to correctly apply the positive or negative value to our reversed integer as well as check to see if the reversed value is greater than 2^31:

function optimizedReverse(x){
    const reversed = parseInt(x.toString().split('').reverse().join(''))
   if (reverse > 2**31) {
       return 0
   }
   return reversed * Math.sign(x)
}

optimizedReverse(-345)
// output => -543

Done.

We achieved a more optimized solution. With less variable declarations, we save memory during compilation of the code because in JavaScript each variable receives its own space in memory. So, less variables means more free space in memory.

We also save time because the JavaScript engine only has to compile over a few lines of code instead of 15+. This is major in the grand scheme of things. If we can save a few lines of code in each file of a project, we ultimately save a whole lot of time and memory. We want to be efficient and optimized everywhere possible.

Summary + Recap

Thank you for coding along with me. Before you leave let's look back on what this challenge signified:

Use console.log() often in your code to check the value of things.
Use 'typeof' before a variable to figure out what data type you are working with.
Clean up your code where you can.
Too many variable declarations => slower code.
Too many variable declarations => more memory space is being used up.
JavaScript has a plethora of great built-in methods: use them!
Optimized means your code uses up less space in memory and takes less time to run.

Remember: code in the way that is best for you. If the optimized solution is confusing and not clear, then don't use it. Keep practicing coding by breaking down your code like we did in the brute force attempt. As you learn, the optimized solution will begin to make sense. Take your time.

Have any questions? Comments? Or suggestions? Leave a comment below :) Feel free to follow me + connect with me on LinkedIn.

How To: Build a Linked List in JavaScript Part 3

Adriana DiPietro — Tue, 25 Jan 2022 21:10:45 +0000

🖤 Hi Programmers! 🐱

Today we will be walking through the third installment of the series on How To: Build A Linked List. Here are the links to the first two installments: 1 and 2. Please feel free to read those if you haven't or reread to refresh your mind.

We will be focusing on how to add insertion functionality via an insert() and traverse() method to our class LinkedList.

These two methods are definitely more challenging than the previous but together we are going to make them fully comprehensible and readable.

Let's get started!

Goals

1. Mapping Out insert()
2. Checking Parameters
3. Creating a New Node
4. Build traverse()
5. Traverse the Linked List
6. Recap + Summary

Mapping Out insert()

Our insert() method is going to have 'index' and 'value' parameters. We need both parameters, because unlike append() or prepend() that produce a value at a fixed spot in the linked list, insert() will insert the value at any specified index.

Therefore, inserting a node at a specific index is a lot more complicated than just appending or prepending. Let's consider what we would need to do in order to successfully insert a new node:

1. Check the parameters for edge cases.
2. Create a new node.
3. Traverse through the existing nodes in the linked list until we get to the specific index we pass a parameter.
4. Update the 'next' property of the node that comes before the new node; set it to the new node object.
5. Update the new node's 'next' property.
8. Increase the length of the linked list.

Whoa -- this is a lot. But we can do it don't worry.

Checking Parameters

What happens if we call insert(1000, 4) -- inserting the value of 4 at the index of 1000 -- on our instance of LinkedList, but our instance only has five (5) nodes? Or what happens if we call insert(0, 999)?

Realistically, we could still follow through with insert(), but that complicates things for no reason. If our index is greater than or equal to our instance of LinkedList's length, we should just append it using the append() method we created. The same thing goes if we want to insert a value at the index of 0. Since the index of 0 always represents our first node in the linked list we can prepend the node using prepend().

Checking parameters is a great thing to think about and implement when coding. It shows that we consider edge cases and we think a little outside of the box.

Here is what the code would look like checking the index parameter:

insert(index, value) {
   if (index >= this.length){
     return this.append(value)
   }
   if (index === 0){
     return this.prepend(value)
   }

}

Creating a New Node

Now, let's create a new node using the ES6 object syntax. This is nothing new if you have been following along with the series:

insert(index, value) {
   if (index >= this.length){
     return this.append(value)
   }
   if (index === 0){
     return this.prepend(value)
   }
   const newNode = {
     value: value,
     next: null
   }

}

We declare an object 'newNode' and set its 'value' property to the value we pass into insert() and we set its 'next' property to null.

Build traverse()

What is traversal? You may not have heard of it before. Do you recognize the terms "looping" or "iterating"? They are all somewhat interchangeable. Just think of traversing through a linked list as stepping on stones on a path: you start at the first stone and continue to step onto each stone (one at a time) until you reach the last stone.

We need to traverse through the linked list because our instance of class LinkedList is unidirectional. Like reading a sentence, going left to right.

In our traverse() method, we will pass it a parameter of 'index':

traverse(index){

}

Now, we want to traverse the list until we get to the index we passed in. We can achieve this using a while loop:

traverse(index){
  let counter = 0
  let currentNode = this.head
  while (counter !== index){
   // do something here
  }
}

We declare and assign a 'counter' variable to 0.
We declare and assign a 'currentNode' variable to our linked list's head node - because we want to start at the beginning.
While the counter does NOT equal our index -- keep executing the code block in the while loop until the counter does equal our index.

So what should we do to our currentNode as long as the counter does not equal its index?

traverse(index){
  let counter = 0
  let currentNode = this.head
  while (counter !== index){
    currentNode = currentNode.next
    counter++
  }
  return currentNode
}

While the counter does NOT equal our index, reassign the value of the currentNode to the currentNode's 'next' property AND increment the counter.
By doing this, we are able to skip through from one node to the next.

We continue through the linked list, stopping at each node to check its index. When the counter finally equals the value of the index, the while loop will stop executing and we will be at the index we passed in (via returning the currentNode).

Traverse the Linked List

With our parameters checked, our new node created, and a working traverse() method, we can now do a few things like:

1. Update the 'next' property of the node that comes before the new node; set it to the new node object.
2. Update the new node's 'next' property.

How can we do this? We use traverse() to arrive at the node that comes before it.

Lexically, the node that comes before our index has an index of 'index - 1':

insert(index, value) {
   if (index >= this.length){
     return this.append(value)
   }
   if (index === 0){
     return this.prepend(value)
   }
   const newNode = {
     value: value,
     next: null
   }
   const beforeNode = this.traverse(index - 1)
}

Here, we have decided to store the index of the node that comes before our inserted node in a constant 'beforeNode' for reference and later use.

Now, we can grab the beforeNode's next property and store it also in a constant for reference and memory:

const beforeNode = this.traverse(index - 1)
const beforePointer = beforeNode.next

Then, let's update the 'next' value of beforeNode and set it to the newNode object:

const beforeNode = this.traverse(index - 1)
const beforePointer = beforeNode.next
beforeNode.next = newNode

Right now our newNode's 'next' value is 'null'. Yet, we want it to point to the node that the beforeNode used to point to... Good thing we stored its value in memory as a constant!

const beforeNode = this.traverse(index - 1)
const beforePointer = beforeNode.next
beforeNode.next = newNode
newNode.next = beforePointer

So, very quickly and very suddenly we have achieved a few things:

We inserted the newNode into the linked list at the index we passed in as a parameter.
We were able to do so because we updated the beforeNode's 'next' property and updated newNode's 'next' property.
We shifted the indices of all pre-existing nodes that came after the newNode.

Finally, we just have to increment the length because our instance of LinkedList is now longer:

class LinkedList {
    constructor(data){
        this.head = {
            data: data,
            pointer: null
        }
        this.tail = this.head
        this.length = 1
    }
    append(value){
      const newNode = {
         value: value,
         next: null
      }
      this.tail.next = newNode
      this.tail = newNode
      this.length++
    }
    prepend(value){
      const newNode = {
         value: value,
         next: this.head
      }
      this.head = newNode
      this.length++
    }
    traverse(index){
      let counter = 0
      let currentNode = this.head
      while (counter !== index){
        currentNode = currentNode.next
        counter++
      }
      return currentNode
    }
    insert(index, value) {
      if (index >= this.length){
        return this.append(value)
      }
      if (index === 0){
        return this.prepend(value)
      }
      const newNode = {
         value: value,
         next: null
      }
      const beforeNode = this.traverse(index - 1)
      const beforePointer = beforeNode.next
      beforeNode.next = newNode
      newNode.next = beforePointer
      this.length++
   }

}

Recap + Summary

That was a lot! But, we now have an even more functional Class LinkedList built in JavaScript. We are getting to a point where our code provides functionality to instances instantiated from the class. A functional linked list is great for efficient coding, an introduction to Trees, and predictable data rendering.

For the next part in the series, I want to focus on traversing linked lists in order to remove a node in a specific location on the linked list.

Stay tuned! And thank you for reading + coding along with me :)

🖤🖤🖤

How To: Build a Linked List in JavaScript Part 2

Adriana DiPietro — Sun, 16 Jan 2022 03:05:34 +0000

Hi everyone! Today we will continuing our exploration into Linked Lists by building a few methods into our Class LinkedList from this previous lesson.

Let's get started!

Goals

Here are our goals for today:

Build append()
Build prepend()
Recap + Summary

By implementing these methods, we will expand the utilization and effectiveness of our Class LinkedList and each instance instantiated thereafter.

Build append()

First off, let's figure out what 'append' means. Append means to add a new node at the end of the linked list.

Therefore, to add something to the end of the linked list, we need to do a few things:

1. Pass in a value to append() as a parameter.
2. Create a new node constant.
3. Set the new node's value property.
4. Set the new node's next property.
5. Update the tail of our instance of LinkedList.
6. Increment the length of our instance of LinkedList.

So, underneath our constructor method, let's create an append() method and pass in 'value':

append(value){


}

How do we create a new node? We can declare and assign a variable called "newNode" and establish the properties that make up a node (a "value" and a "next"):

append(value){
   const newNode = {
       value: value,
       next: null
   }
}

The "value" property is going to be set to the value we pass in as a parameter. The "next" property will be set to null.

Instead of the tail pointing to null, we are now pointing to the newNode we created.

append(value){
   const newNode = {
       value: value,
       next: null
   }
   this.tail.next = newNode
}

We also want establish that our appended newNode is now the tail itself:

append(value){
   const newNode = {
       value: value,
       next: null
   }
   this.tail.next = newNode
   this.tail = newNode
}

Finally, we want to increment (or increase) the length to accommodate for the newly created appended node:

append(value){
   const newNode = {
       value: value,
       next: null
   }
   this.tail.next = newNode
   this.tail = newNode
   this.length++
}

Remember: "this" represents the instance of Class LinkedList.

Let's test this out:

const myLinkedList = new LinkedList(10)
myLinkedList.append(5)
myLinkedList.append(7)

In our console, we should receive something like this:

Our head node is made up of a 'value' of 10 and a 'next' of the appended 5.
Our second node has a value of 5 and a 'next' of the appended 7.
Our tail node has a value of 7 and a 'next' of null (because it is the last node in the list).

Build prepend()

"Prepend", similarly to "append" adds a new node to a linked list. However, prepend adds the node to the beginning.

Having built append(), we can do something very similar for prepend():

1. Pass in a value to prepend() as a parameter.
2. Create a new node constant.
3. Set the new node's value property.
4. Set the new node's next property.
5. Update the head of our instance of LinkedList.
6. Increment the length of our instance of LinkedList.

Beneath our append() method, let's create a prepend() method and pass in "value". We are also going to declare a new constant "newNode" with its "value" property set to the value we pass in:

prepend(value){
   const newNode = {
       value: value,
       next: ___
   }

}

Since this new node is going to the beginning of the linked list, its "next" value must be the previous head node of the linked list:

prepend(value){
   const newNode = {
       value: value,
       next: this.head
   }
}

Finally, we have to set the head of our instance of LinkedList to this newly created node AND increment the length:

prepend(value){
   const newNode = {
       value: value,
       next: this.head
   }
   this.head = newNode
   this.length++
}

If we run an example, like this, in our console:

const newList = new LinkedList(10)
myLinkedList.prepend(44)

We should get returned something like this:

Our head node is made up of the prepended 'value' of 44 and a 'next' of the node with a value of 10 and a next of null.
Our tail node has a 'value' of 10 and a 'next' of null (because it is the last node in the list).

Recap + Summary

Here we now have a Class LinkedList built in JavaScript! We are getting to a point where our code provides functionality to instances instantiated from the class. A functional linked list is great for efficient coding, an introduction to Trees, and predictable data rendering.

For the next part in the series, I want to focus on traversing linked lists in order to remove and insert a node in a specific location on the linked list.

Stay tuned! And thank you for reading + coding along with me :)

How To: Build a Linked List in JavaScript

Adriana DiPietro — Mon, 03 Jan 2022 19:16:11 +0000

☁️ Hi Programmers! 🐱

Today we will be building a Linked List from scratch using JavaScript. If you are not familiar with Linked Lists, please head over to this article first and then join us after :)

Let's get started.

Goals

Classes in JavaScript
Class Syntax & the Constructor
Declaring the LinkedList Class
Building LinkedList's Constructor Method
Instantiating a New Instance of LinkedList

Classes in JavaScript

JavaScript actually does not have linked lists built in. However, JavaScript, being as powerful and flexible as it is, is capable of building linked lists using ES6 class syntax.

As you may or may not know, JavaScript classes are syntactic sugar: meaning classes are not necessarily something brand new. Classes should be thought of as a blueprint for a JavaScript object. So, when you hear the term "syntactic sugar," think Classes make the code cleaner, more accessible and more readable.

Since classes are "blueprints," classes do a lot of describing. Classes will describe what the object should do (methods) and what the object has (properties).

Classes are sweet (like syntactic sugar) because each instance of the JavaScript object created out of the class will have the same properties and methods! This is amazing. This reduces a whole lot of code needed to be written and needed to be considered.

Ok - you may have guessed by now... today we will be using Class syntax to build our Linked List!

Class Syntax & the Constructor()

One way to define a class is using a class declaration. To declare a class, you use the class keyword with the name of the class.

Here is an example:

class Post {

}

That's it! That's a class declaration. Now, there are some important AND essential aspects we need to include in our class to make it functional as a blueprint of an object:

constructor method
properties
methods

While the first one may be unrecognizable to you, both properties and methods should be familiar since JavaScript objects have both properties and methods.

The constructor method is used to create a new instance of our class. (THINK: The constructor method constructs a new instance.) While instances of a class can be instantiated with no properties or methods, that would be silly. Classes are amazing for just that! So, the constructor method holds the class's properties and methods and when a new instance is created by the constructor method, that instance has access to those properties and methods.

Let's see this in our example class "Post":

class Post {
   constructor(title, author){
      this.title = title;
      this.author = author;
      this.created_at = new Date()
   }
}

An instance of our Post class when instantiated will have a title property, an author property and a created_at property. And every instance of Post instantiated from here on out will too!

Now we are familiar with class syntax and the functionality of a constructor method, let's start this linked list build!

Declaring the LinkedList Class

Knowing what we know, let's declare a class called "LinkedList" since that is what we are building:


class LinkedList {

}

Class names will start with a capital letter and designate a new word by using another capital letter. No spaces!

Building LinkedList's Constructor Method

Onto the constructor method, we need each instance of a LinkedList to have specific things that are characteristic of a linked list:

1. Head (consisting of data, pointer)
2. Tail (consisting of data, pointer)
3. Length

Every linked list has a head representing the first node; a tail representing the last node; and a length representing how many nodes are in the linked list.

class LinkedList {
    constructor(){
        this.head = 
        this.tail =
        this.length =
    }
}

This keyword refers to the instance instantiated.

Since both the head and the tail are nodes, and we know that nodes consist of both data and a pointer to the next node, we need to show that in the constructor.

class LinkedList {
    constructor(){
        this.head = { 
            data: ___,
            pointer: ___,
        }
        this.tail = { 
            data: ___,
            pointer: ___,
        }
        this.length = ___
    }
}

By passing in "data" into the constructor, we can set a node's data to the data passed in.

constructor(data){
        this.head = {
            data: data,
            pointer: ___
        }

Regarding the pointer of the head node, its value will be null. The reason is that when we instantiate a new instance of a LinkedList, there is only one node AND the tail node always points to null!

Therefore, technically, our tail node is our head node and our length is 1.

class LinkedList {
    constructor(data){
        this.head = {
            data: data,
            pointer: null
        }
        this.tail = this.head
        this.length = 1
    }
}

Instantiating a New Instance of LinkedList

Let's see this in action.

1. In your console, paste the above code snippet from the above section and click 'enter'.

2. Then declare and assign a new instance of LinkedList to a constant called 'newLinkedList' and pass a string ('I love data structures') to LinkedList -- this string represents our data.

3. Call 'newLinkedList'.

It works! If we expand 'newLinkedList', we should see the head, the tail and the length:

Nice!

Recap + Summary

You may notice our instance of LinkedList only has one (1) node. That is true. I plan on writing another blog soon focusing on how to append, prepend and delete nodes from a linked list. So, stay tuned.

Today's linked list is a simple one. But it is a great starting point for understanding the foundation of a what a linked list is and also understanding how powerful JavaScript is.

So, let's continue to learn together and soon enough, we can teach others.

As always, please feel free to comment, ask questions or make suggestions.

Follow for more articles and befriend me on LinkedIn too :)

🤍🤍🤍
🐱🐱🐱

A Quick Guide To: jQuery

Adriana DiPietro — Wed, 29 Dec 2021 04:10:20 +0000

Hi Programmers!

Today we will be discussing and exploring jQuery! Have you ever heard of it? Whether you said yes or no, you have arrived at the right article because we will be going through the fundamentals of jQuery and deciding whether or not we should use it.

Let's get started.

Outline

We will be breaking jQuery down into a few components:

What is jQuery?
Syntax
Selectors
Attributes
Methods
Should We Use jQuery?

What is jQuery?

jQuery is a fast, small, feature-filled JavaScript library. It makes things like HTML manipulation, CSS manipulation and event handling simple and readable.

jQuery is used alongside JavaScript and can be downloaded from here OR you can include the script tag below in the head section of your application's HTML file:

<script src=”https://code.jquery.com/jquery-3.1.1.js”></script>

Notice how the source attribute has a .js extension!

Syntax

Here is the base formula for jQuery syntax:

$("selector").action()

The $ represents access to jQuery.
The selector finds a part of HTML either by class name, id or HTML element type.
The action() is the action performed on the part of the HTML. Thus, the action() is a jQuery method.

Selectors

Like I mentioned previously, the selector finds a part of the HTML based on either class name, id or HTML element type.

Let's take a look at some examples:

$("div") // => selects all div elements
$(".menu") // => selects element with class name of "menu"
$("#header") // => selects element with id of "header"
$("form.search") // => selects <form> element with class name of "search"
$("p:first") // => selects the first <p> element
$(“div p”) => selects all <p> elements that are children of a <div> element

The main purpose of the selector is to retrieve an HTML element from the HTML file to be referenced or manipulated in the JavaScript file.

If you are familiar with JavaScript, then you may realize this is not too different than using document.querySelector() or document.getElementById(). If you realized this, good job! You are making connections and that is amazing.

Attributes

Since jQuery helps to manipulate both HTML and CSS, jQuery uses various methods to access attributes of an HTML element to make these changes.

The most common attributes we may see include href, src, class, styles, id etc. And using jQuery, we can add, remove or edit these attributes.

This is how we would go about adding a href attribute to an 'a' tag:

$("a").attr("href", "www.google.com")

a represents the 'a' tag; the selector.
.attr() is the method to set an attribute; it takes in two (2) parameters:
1. the type of attribute
2. the value of the attribute
"href" is the type of attribute and "www.google.com" is the value.

Now if we were to inspect our 'a' tag we would see something like this:

         `<a href="www.google.com"></a>`

To remove an attribute, we can use removeAttr() which takes in the type of attribute as a parameter.

Let's put what we have learned so far together and try it out:

let x = `
  <input id="input"
  placeholder="search your saved items">
`
// add a class attribute
$("input").attr("class", "search")

// remove the id attribute
$("input").removeAttr("id")

Try this out in your console! What do you get? Something like this?

<input class="search" placeholder="search your saved items">

Cool! Now we know that a big part of jQuery is the ability to access attributes of a given HTML element to be able to manipulate HTML from our JavaScript file.

Methods

So far, we have seen some methods regarding the attributes of HTML elements. However, there are so many more to discover. Today let's go over a few:

The .html() method is used to retrieve OR change the content of the selected element, including the HTML markup.
The .text() method is used to retrieve OR change the text content of the selected element.
The .css() method can be used to get and set CSS properties.
- To set multiple CSS properties, the .css() method uses JSON syntax.
- Example: $(“p”).css({“color”:”red”, “font-size”:”16px”})
The .val() method allows us to get AND set the values of form fields, such as textboxes, dropdowns and inputs.
The .append() method inserts content at the end of the selected element(s).
The .prepend() method inserts content at the beginning of the selected element(s).
The .after() method inserts content with HTML markup after the selected element(s).
The .before() method inserts content before with HTML markup the selected element(s).
The .addClass() method adds a class to the element called on.
- When specifying multiple class names, separate them using spaces.
The .removeClass() method removes the class of the element called on.
The .toggleClass() method toggles between adding and removing classes from selected elements. If the specified class exists already, it is then removed. If the specified class does not exist, it is added.
The .width() and .height() methods can be used to get and set the width and height of HTML elements.

** I recommend you try a few of these on your own. Then, I recommend finding other methods used with jQuery and trying those as well. **

Should We Use jQuery?

Now, this may be a VERY simple and understated guide to jQuery, but it is important! We need to understand the base fundamentals of certain languages, libraries, packages... to best understand how to use them, why we use them AND if we should use them.

jQuery is a great library to use if you want to DRY your code and work on readability. It is also a great tool that shows the bridge between multiple files (.html, .css, .js), especially in beginner projects and applications.

However, with the introduction to and the heavy use of JavaScript frameworks such as ReactJS, Vue.js, and AngularJS, jQuery is not totally necessary anymore. Its syntax does not belong within the inner workings of these frameworks.

But let's beg the question: "Should we still use it?"

Yes, it is worth learning jQuery even in 2022: jQuery is used by many existing and efficiently-operating websites! While new web applications created this year may not utilize jQuery, jQuery was once one of the most widely used JavaScript libraries before the introduction to frameworks such as React, Angular and Vue.

Let's continue to learn, grow and teach as we continue on our personal journeys. 🤍🤍

Please feel free to leave comments, questions and suggestions below. And follow me for more content on JavaScript, ReactJS, HTML and CSS. 🤍🤍

LeetCode WalkThru: 'First Unique Character in a String'

Adriana DiPietro — Tue, 28 Dec 2021 21:34:06 +0000

Hi Programmers!

Today we will be solving LeetCode's 'First Unique Character in a String'. Click here to pull up the challenge on your end and let's get started!

Instructions

LeetCode provides these instructions:



Given a string 's', find the first non-repeating character in it and return its index. If it does not exist, return -1.

* 's' consists of only lowercase English letters.

From this simple set of instructions, we can figure out a few things about what this challenge is asking of us:

Input is a string
Output is an integer (either the index of the non-repeating character or -1)
There could be multiple non-repeating characters, but we must return the index of the first
And lastly, the non-repeating character must be an a letter a-z (no numbers, symbols)

Examples

Let's look at some of the examples LeetCode provides:



Example 1:

Input: s = "leetcode"
Output: 0

Where the input is 's' assigned to the string 'leetcode', the index of 0 is returned as the output. Why? The index 0, represents the first character of the string 'l'. The letter 'l' is the first non-repeating character in the string. As you can see, there are other non-repeating characters, such as 't', 'c', 'o' and 'd'. However, we only care about the first non-repeating character for this challenge.

Let's look at example where no letters of a string are non-repeating:



Example 3:

Input: s = "aabb"
Output: -1

Here, we are given an output of '-1'. The string s provides no non-repeating characters, so according to the instructions, we return the integer of '-1'.

Seems simple enough right? Let's try to code this out.

Approach + Solution

We will start by declaring a function called 'firstUniqCharacter()' which will take in 's' representing a string:



function firstUniqCharacter(s){

}

Now, we will build the foundation of an if-else statement because at this point we know if there are no non-repeating characters, we must return '-1':



function firstUniqCharacter(s){
    if(*/non-repeating character exists/*){
       // do something here
    } else {
      return -1
    }
}

Cool -- the foundation is laid. Now we have to consider a few important goals:

Check to see if non-repeating character exists
Retrieve the index of the non-repeating character

Given a string, that we must comb through to check for something specific, iteration is our best bet. Let's utilize a for loop.



function firstUniqCharacter(s){
   for (let i = 0; i < s.length; i++){
      if(*/non-repeating character exists/*){
         // do something here
      } else {
        return -1
      }
   }
}

A for loop basically says "while i is less than our input's length, continue to iterate and execute what is in the code block." The code block is represented by what is between the curly braces of our for loop. The 'i' represents the index of each letter of the string. So we can assume that 's[i]' equates to the value at that index. Let's see this in action:



let s = 'Cats'

console.log(s[0]) // => 'C'
console.log(s[1]) // => 'a'
console.log(s[2]) // => 't'
console.log(s[3]) // => 's'

Now that we have this in mind, we can use the index of each letter of the string to our advantage.

JavaScript has some great built-in methods regarding the indices of a string. For today's reasons, we will utilize indexOf() and lastIndexOf().

indexOf() => returns the first index at which a given element can be found in the string
lastIndexOf() => returns the last index at which a given element can be found in the string

We know that for a character to be unique, its first index must equal its last index -- because it only appears once! Let's code this out:



function firstUniqCharacter(s){
   for (let i = 0; i < s.length; i++){
      if(s.indexOf(s[i]) === s.lastIndexOf(s[i])){
         // return the index of that unique character
         return i 
      } else {
        return -1
      }
   }
}

In our if statement, our condition states "if the index of a character in the given string equals the last known index of that character, it must be unique". Then inside the code block, we return 'i' which is the index at which that unique character occurs.

Try this out in your console:



let s = 'Pigeon'
console.log(s.indexOf('P')
console.log(s.lastIndexOf('P')

Nice! This checks out.

We found a great solution that not only works, but is readable AND scalable.

Testing Our Code

Here are some examples you can try in your console:

let s = 'yyyyyyyyyyk' let s = 'ello there' let s = 'abcdefghijklmnop' let s = 'aaamyyj'

Recap + Summary

Today we discovered a bunch of really great stuff that will help with our journey to becoming coding masters:

JavaScript index begins at 0.
When you have to access every element in an array or string, iteration is your best friend.
A **for loop **is a type of iterator.
A for loop executes only while the condition is still true.
The code block represents what will be executed on each string item while the condition is still true.
Strings, like arrays in JavaScript, are indexed; each letter has its own index.
JavaScript has so many built-in methods waiting to be used -- please utilize them!!!
Keep your code readable AND scalable.
Code in a way that makes sense to you.
Write notes or comments above your lines of code explaining what the code is doing.

Thank you for coding along with me :)
Please feel free to like, follow, and share.
Likewise, feel free to ask questions & leave comments or suggestions.

What is a Linked List?

Adriana DiPietro — Tue, 21 Dec 2021 15:19:47 +0000

Hello Programmers!✨ Let's learn about Linked Lists! Today's discussion will be an introductory, informational lesson on Linked Lists, so we will be hitting a few points:

What is a Linked List?
What is a Node?
What is a Pointer?
What does a Linked List look like?
Are Linked Lists similar to Arrays?
What can Linked Lists be used for?
Summary + Recap
Additional Resources

What is a Linked List?

A Linked List is a series of nodes connected to each other in which each node references the next node in succession.

What is a Node?

A node is a segment or piece of code that has its own value, properties.. etc. In Linked Lists each node has two main components: (1) data and (2) a pointer.

What is a Pointer?

Eternally thankful for its name, the pointer always points to the next node of the linked list. If the pointer is NULL, then that tells us that it is the last node in the list.

What does a Linked List look like?

In the simplest of possible comparisons, a Linked List resembles a caterpillar with each segment on a caterpillar representing a node.

Another fun way of thinking about a linked list is its resemblance to a conga line at party. You know -- the hilarious line of people where each member holds the shoulders of the person in front of them. We can use this comparison to think of each person's arms representing the reference to the next person, also known as the pointer.

Now, let's look at a Google-search generated image of a Linked List:

In this unadorned rendering, we still manage to see the main components present: each node consisting of data and a pointer and the last node pointing to "NULL". These components are the basic foundation and thus, the main priorities to learn and fully understand as we continue to learn more about linked lists!

Are Linked Lists similar to Arrays?

Unlike arrays, nodes of a linked list are not stored in a particular memory location or index. This makes for slower, more difficult traversal, insertion, deletion and lookup functionality. With an array, we can easily access an array item by index; linked lists do not have indices.

On the other hand, like an array, linked lists are super efficient at appending or prepending nodes. Since the 'head' node and the 'tail' node have distinguishing attributes (the head having nothing pointing at it and the tail pointing to NULL) inserting an element at the front or the end is quite easy.

What can Linked Lists be used for?

Like we recently discovered, Linked Lists are recognized and used because of their efficient appending and prepending. Therefore, they are great to implement stacks, queues, etc.

However, let's think of an applicable, concrete example of a linked list in use on a website. We may see this in the form of an image viewer: the ability to click forward and backward through a series of images. We can also see this similarly in a music player. Another example we all probably use on a daily basis: the 'back' and 'forward' buttons in the browser.

Summary + Recap

A Linked List is a series of nodes.
A node is a segment containing two (2) components: data and a pointer.
A pointer references the next node in succession.
A Linked List must be traversed to access all nodes; meaning the beginning (the first node) is our point of access.
Linked Lists take up some memory because nodes contain both data AND pointers.
Linked Lists do not have indices.
The HEAD of the Linked List is the first node; nothing is pointing to the head.
The TAIL of the Linked List is the last node; the tail points to NULL.

Additional Resources

Here is a great resource to play with to understand the structure and operations of Linked Lists: VisuAlgo

And here is another solid resource to understand how Linked Lists are implemented in JavaScript: freeCodeCamp

✨ Thank YOU for reading along and learning with me. Please feel free to leave any comments, questions or suggestions below. And please remember to be kind to everyone because we are ALL learning here! ✨

LeetCode WalkThru: 'Sqrt(x)' and 'Valid Perfect Square'

Adriana DiPietro — Tue, 07 Dec 2021 19:02:36 +0000

☁️☁️☁️
Hi programmers + coders alike !

Today, we will be walking through two (2) LeetCode challenges: Sqrt(x) and Valid Perfect Square. I decided to pair these challenges together in a walkthrough because they relate to each other AND show the various ways to approach a solution.

Here are the links to the challenges: Sqrt(x) and Valid Perfect Square. Go ahead and pull the first challenge up on your end + let's get started :)

Sqrt(x)

Instructions + Examples

Let's take a look at the instructions provided by LeetCode:

Given a non-negative integer 'x', compute and return the square root of 'x'.

Since the return type is an integer, the decimal digits are truncated, and only the integer part of the result is returned.

Note: You are not allowed to use any built-in exponent function or operator, such as pow(x, 0.5) or x ** 0.5.

From the instructions, we can resolve a few things:

Input is a positive integer.
Output is a positive integer; decimal points must be truncated (taken off).
We cannot use any exponent operator.

The instructions are pretty straight-forward. However, the truncated decimal might be something new for you. (It was for me!) Growing up, in math class we always rounded decimals to the nearest whole number. For this assignment, we are going to truncate the decimal.

If we look to the example LeetCode provides, we can see exactly what this looks like:

// Example 2
  Input: x = 8
  Output: 2
  Explanation: The square root of 8 is 2.82842..., and since the decimal part is truncated, 2 is returned.

The square root of 8 is not rounded to the nearest whole number; instead, the decimals are just chopped off. To me, this is strange, but hey, I do not make the instructions here.

Approach + Solution

Since this is a math-based question, we can consider a wide slew of built in Math methods provided in JavaScript. These built-in Math methods are both life and time savers. Here is a link to a good chunk of Math methods. Bookmark or save this link!!

If we return to our goals of this challenge, we need to achieve two (2) things:

Return the square root any positive integer.
Return the output as a positive integer (no floats!)

To achieve the first goal, JavaScript provides 'Math.sqrt(x)'. According to the link above, this method 'returns the positive square root of the given input'. Wow! Exactly what we need.

So, let's build this out:


// Starting by building the foundation of a  function that takes in a parameter of 'x'

function mySqrt(x){
  // Then, declare and assign a variable to the result of Math.sqrt(x) method. 
  let squareRoot = Math.sqrt(x)
  return squareRoot
}

At this point, if we were to pass in an integer of '100', we would receive an output of '10'. Nice! That works! However, if we were to pass in an integer of '200', we would receive an output of '14.142135....' Well, yea that is correct, but remember the instructions: we need to return a truncated decimal. So, we need to return solely '14'.

If we continue to look at that trusty goldmine of built-in Math methods, we may come across 'Math.trunc(x)'. This method 'returns the integer portion of the given input, removing any fractional digits.' Actually perfect! Let's add this functionality to our code:

// Starting by building the foundation of a  function that takes in a parameter of 'x'

function mySqrt(x){
  // Then, declare and assign a variable to the result of Math.sqrt(x) method. 
  // Then, we wrap Math.trunc() around Math.sqrt(x).
  let squareRoot = Math.trunc(Math.sqrt(x)))
  return squareRoot
}

Try this out in your console with an input of x = 250.

Did you receive an output of '15'? If you did, good! Our code works.

Valid Perfect Square

Instructions + Examples

Onto our next challenge, let's look at the instructions:

Given a positive integer 'num', write a function which returns 'True' if 'num' is a perfect square. Otherwise returns 'False'.

*Follow up: Do not use any built-in library function such as sqrt

From these instructions, we can resolve a few things:

Input is a positive integer.
Output is a boolean: true or false.
We CANNOT use any built-in JavaScript methods, like we did in the previous challenge.

Let's look at the examples provided:

Example 1:

Input: num = 16
Output: true


Example 2:

Input: num = 14
Output: false

Alright -- simple enough. However, the instructions specifically stated to NOT use any built-in Math methods. This is our time to shine and revert back to seventh grade algebra! Let's get it.

Approach + Solution

What is a perfect square? It is an integer, when taken the square root of, returns a positive integer. We know a few: 4, 9, 16, 25, 100...

But how do we formulate a test (ahem, our code) to figure this out? We can start by creating a formula that outputs the square root of any given positive integer.

What is the math formula equivalent of the square root operator? It's the exponent of one-half. Try it out on a calculator.

Using the exponent operator (**), here is what we can code:

function isPerfectSquare(num) {
    let squareRoot = (num ** 0.5)
    return squareRoot

}

If we pass the number 100 into the function, we should be returned the integer 10. Ok - but what if we pass in 12? We receive 3.464101.... Yes - that is the square root of 12, but remember we want to receive an output of either true or false based on num's validity as a perfect square.

If we compare our two outputs: 10 and 3.464101, one is an integer and the other is a float (or decimal).

We can use the remainder operator (%). If our squareRoot produces a remainder when divided by 1, then we know it is NOT a perfect square.

Let's code this out:

function isPerfectSquare(num) {
    let squareRoot = (num ** 0.5)
    if (squareRoot % 1 === 0) {
       return true
    }
    return false
}

Using our ol' faithful "if" statement, we can decipher that if our squareRoot variable does NOT produce a remainder, 'num' must be a perfect square. While if it does produce a remainder, 'num' is NOT a perfect square.

Summary + Recap

Within these two (2) examples, we can see the multiple approaches to solve a Math-related JavaScript question. Given specific instructions that inhibit our use of either built-in Math methods or arithmetic operators, we can resolve to do the opposite.

Go ahead and try to solve each question again, except switch the rules this time. A solution is always available -- we may just have to dig a little first.

REMEMBER

Keep your code readable.
Code in a way that makes sense to you.
Approach code a few different ways to come to a solution.
Ask questions.
Keep coding!

☁️☁️☁️
Thank you for reading + coding along with me.
Please feel free to leave questions, suggestions or comments below.

Please be kind to everyone as we are all trying to learn.

Tech & English Lit?

Adriana DiPietro — Fri, 03 Dec 2021 17:29:52 +0000

Why I Believe My English Literature Degree is Important in the World of Tech

My Education + Background

I graduated from Siena College (Loudonville, New York) in May 2019. I graduated reluctantly with a degree I both loved and despised: English Literature. (I know what you are thinking: "English Literature degree??? Yikessss!" We'll get back to this later.) I love English literature and writing and reading and analyzing as much as the next book twerp. If I could have stayed in school and just continued to thumb through old, musty books, I would have. On the other end of the spectrum, the loathing came from a few aspects: undergraduate degrees eventually (and never fail to) come to a close and master degrees cost an arm, a leg, and a spine and are intensely competitive to be accepted into. So, sitting adjacently to your "Yikes!" I despised my English Literature degree. Utterly despised.

It is not true that you cannot get a job with a liberal arts/humanities degree -- but it is true that having that degree does not reduce the amount of paths waiting to be considered and ultimately, chosen. Therefore, I found myself stuck in a time warp: I felt as confused and hopeless as I did going into college in September of 2015. Lost and abridged.

So, now, let me reiterate: I was four years older and no closer to understanding what to do with my knowledge of Milton's "Paradise Lost", Wordsworth's "Strange fit of passion have I known", nor Shakespeare's "Richard III".

Through an also reluctantly chosen gap year, I realized I needed to get out of my comfort zone and dive into something deeply unexpected and challenging. Hence: Software Engineering. Do not ask me why I chose this. I had no previous experience or exploration into the subject. I do not even remember how I came across Flatiron School's home page. I do know that it felt dangerous and it felt like something I should do.

So I did it. Now, here I am. Having finished the program in just under a year, I am a Flatiron alum with a certificate in Software Engineering.

I realize now that I have vaguely told you why I am writing this: "Why I Believe My English Literature Degree is Important in the World of Tech". In a sharper sense, I am writing this article because I am too trying to figure out how to market my English Literature background into landing a job.

I am sure there are plenty of employees in the tech world that have English Literature degrees... but let me remind you that there are approximately 7.3 million people working in tech in America (I just googled this). So, the maybe 50,000 (?) book-twerps-turned-tech-twerps may just be a rarity. I kind of want to change that.

So, together, let's go through my reasons as to why I believe my English Degree will help me in tech.

Soft Skills That Should Not Be Deemed 'Soft'

The ability to communicate ideas + executions (of code) to non-tech people at your job (i.e the sales dept).
The ability to enact UX flow + personal(human)touches to websites/apps. Thus, creating an UX that relates to the user and makes sense.
The ability to understand the short term + long term goals (or tasks) assigned to you. Likewise, being able to execute those goals correctly + efficiently.
The ability to introduce a conversation when a problem occurs to your team and/or how the problem could be solved.
The ability to take a overtly simple concept from a client and make it a tangible, brilliant thing.
The ability to write + communicate ideas/suggestions/questions clearly through email, phone, and meetings.
The ability to comb through code (not written by you) and understand its functionality and/or purpose.
The ability to understand the difference in syntax + context.
The ability to understand the importance between prioritizing readability versus efficiency/speed.
In general, interpersonal skills (aka 'soft' skills) -- critical thinking, research, analysis, empathy, problem solving...
The ability to bring forth cultural awareness + significance to a project.

I hope this quick article has brought you some insight. If you are in the similar circumstances as me, I would love to connect and continue the conversation. Accordingly, if you were once in the similar circumstance and now are thriving, feel free to leave your own insight below in the comments.

Here is my LinkedIn.

Thank you for reading along :)