DEV Community: ericeinerson

C# Dictionary

ericeinerson — Tue, 10 Jan 2023 17:30:11 +0000

Introduction

As I have progressed in my quest to improve my skills in both programming and coding over the past year (I started with virtually no programming experience approximately 1 year ago in January 2022 at a coding bootcamp), I have tried to learn whatever I can about different facets of programming languages. Recently, I switched to C#, and this is my second summary of a topic related to this language. I hope it provides some useful information to some. Here is a short description of the C# dictionary.

What is a dictionary?

A C# dictionary is a generic collection of key/value pairs. The syntax for a dictionary is as follows:

Dictionary<TKey,TValue>

TKey refers to the key of the object; TValue refers to the value, which the key is mapped to. Between the two, only the value can be null if it is a reference type. The key must also be unique as duplicate keys will throw an exception.

As stated above, this object is generic and defined within the System.Collections.Generic namespace. It is also dynamic, so it is able to grow, depending on the needs of the user, unlike a C# array, which is fixed in size.

One difference between this object and the C# hashtable is that the hashtable is non-generic and is defined under the System.Collections namespace. See the references section for more on the C# hashtable.

Why is a dictionary important?

The dictionary is a useful way to minimize runtime complexity, as this object will usually run near O(1) constant time for retrieval (ContainsKey() method), insertion (Add() method), and deletion (Remove() method) of a value.

When I say "near" (i.e. near O(1)) I mean that the complexity is not exactly, but is close enough to that value (O(1)) that it may safely be referred to that value (O(1)). On a graph showing input on the x-axis and runtime on the y-axis, a value near O(1) runtime would be much closer to the O(1) slope than it would be to the slopes of the next most common values (i.e. O(log n) or O(n)).

Exceptions:

If the Count property of the dictionary exceeds the dictionary's capacity when using the Add() method, the capacity must be reset, causing the key/value pairs within the dictionary to be reallocated. This causes an O(n) runtime for Add() in this scenario.
If you need to retrieve a specific value within the dictionary (ContainsValue() method), this performs a linear search and has an O(n) time complexity.

Figure One: A graph displaying general trends of the Big O time complexities of the following: constant time (O(1)), logarithmic time (O(log n)), linear time (O(n)), and quadratic time (O(n^2)).

When to use a dictionary

Aside from above, here are a couple uses of a dictionary:

When needing to utilize key/value mappings to store data, dictionaries allow for this advantage over arrays and lists, which use indices.

If you would like to iterate over an object, use of the foreach() method to look at each key/value pair is possible with dictionaries as well as lists/arrays.

Example of dictionary use

Below is an example of an implemented dictionary:



Dictionary<string,string> definitions = new Dictionary<string,string>();

definitions.Add("hue", "a color or shade");
definitions.Add("HTML", "hypertext markup language");
definitions.Add("chilly", "too cold to be comfortable");
definitions.Add("barrier", "an obstacle that prevents movement or access")

The above code implements a dictionary that begins as an empty object. After each subsequent Dictionary.Add() method, a key with a word is added with a mapped value of its definition (i.e. "hue" mapping to "a color or shade").

Dictionary hierarchy

The following are the interface implementations of the dictionary:

IReadOnlyDictionary<TKey,TValue>
IDictionary<TKey,TValue>
IReadOnlyCollection<KeyValuePair<TKey,TValue>>
IDictionary

Summary/Conclusions

I hope this short review of C# dictionaries provided some value to you. I will be covering dictionaries more in depth in the future, but I wanted to start with this superficial summary. Thank you for reading.

Below is a list of what I covered:

Dictionaries are generic collections used to store key/value pairs.
Dictionaries can be added to, removed from, counted, etc, with minimal runtime complexity.
Dictionaries have many advantages over lists/arrays, though each of these objects has its own optimal uses.
Dictionaries are similar to but not identical to hashtables in C#.

References and Further Reading

Dictionary Class: Microsoft

C# Dictionary With Examples: GeeksForGeeks

C# Hashtable With Examples: Geeksforgeeks

What is the Complexity of These Dictionary Methods: Stack Overflow

Big O Time Complexity Graph Reference(figure 1)

Dictionary Add Method With Examples: Microsoft

Dictionary Count Method: Microsoft

Dictionary ContainsKey Method: Microsoft

Dictionary ContainsValue Method: Microsoft

Dictionary Remove Method: GeeksForGeeks

Dictionary Remove Method: Microsoft

KeyValuePair Struct: Microsoft

Different Ways to Add to a Dictionary: Stack Overflow

Overview of NuGet

ericeinerson — Mon, 24 Oct 2022 00:47:12 +0000

Introduction

When I began learning about C# and the .NET framework, I ended up using some different external packages to bring in some extra functionality. For one specific project, I required use of the DocumentFormat.OpenXml package to create some word-processing elements. As I searched how to get the package (I was and still am a new software developer), I found out that I needed to use the NuGet Package Manager to install the OpenXml package. I realized that I did not know much about working with external libraries (i.e. through NuGet), so this post is about a superficial understanding of NuGet, including what it is, how to use it, why it is useful, when to use it, some examples of its use, and some additional helpful resources for further learning.

What is NuGet?

NuGet is a package manager for the .NET framework (ecosystem).

NuGet is the "Microsoft-supported mechanism" for sharing .NET code. A NuGet package is a ZIP file with the .nupkg or .nupack extension that contains compiled code, related files, and information on the package.

The packages are created by users who develop reusable code that they share with a host. Users of the third party code obtain it from the host and NuGet serves a an intermediate to transfer the code from host to user.

A package is a "compiled library packed together with descriptive metadata into a sharable unit".

The NuGet client app (nuget.exe) is also free and open source, so you have the ability to help improve this application.

When is NuGet useful?

NuGet is useful for anyone wanting to bring additional functionality from custom libraries into a project, specifically for projects using the .NET framework. NuGet is supported by the following in its latest version (recommended latest is 6.3.0 at the time of this post): C#, Visual Basic, F#, WiX, and C++.

NuGet is also useful for those who want to create their own custom functionality that other .NET users can utilize (see below for how to create and publish a NuGet package).

Why learn about NuGet

Learning about external libraries and custom functionality will allow you to avoid the hassle of creating the functionality yourself, saving memory and time. People create NuGet packages to help others' code by making what they create reusable. This will also make you a more versatile programmer and coder since being familiar with external functionality shows that you understand and can apply others' code.

How to find and evaluate NuGet packages for your project

Below, I have laid out an example of using a NuGet package for a project; however, see this link for a more detailed visualization and description of how to find and use NuGet packages for your projects:

Microsoft docs: how to find and evaluate NuGet packages for your project

Example of NuGet in use

An example of a NuGet package I have used with a project is the DocumentFormat.OpenXml package. I used this to help format word-processing functionality and generate Microsoft Word documents in C#.

Here are some steps to download the DocumentFormat.OpenXml NuGet package in Visual Studio:

1) Either by using the Tools tab or right clicking on your solution, go to Manage NuGet packages.

2) Under the Browse tab, search for DocumentFormat.OpenXml, check it, and click "Add Package".

3) Now you should be able to use the DocumentFormat.OpenXml NuGet package! Now all you have to do is type "using" at the top of your project to specify the namespace (in this case the namespace is the package). For this project, I used DocumentFormat.OpenXml.Wordprocessing to allow myself to create a Paragraph object.

Installation and use of the NuGet CLI

Since Visual Studio Code does not have an integrated NuGet package manager that can install packages, this section explains how you can get around that with the CLI, which is also useful to know without Visual Studio Code. This way, your use and acquisition of NuGet packages can be done in more ways than just the Visual Studio NuGet Package Manager

Here are the steps to install and use the NuGet Command Line Interface, nuget.exe (Microsoft NuGet CLI Reference):

Windows:
1) Visit https://nuget.org/downloads and select version 3.3 or higher to be compatible with Mono.

2) Save the nuget.exe file to a folder of your choice.

3) Add the folder with the nuget.exe file to your PATH environment variable

macOS/Linux:
1) Install Mono version 4.4.2 or higher

2) Execute the following command:

# Download the latest stable `nuget.exe` to `/usr/local/bin`
sudo curl -o /usr/local/bin/nuget.exe https://dist.nuget.org/win-x86-commandline/latest/nuget.exe

3) Create an alias, using the following script and add it to an appropriate file.

# Create as alias for nuget
alias nuget="mono /usr/local/bin/nuget.exe"

4) Reload the shell and test the installation by entering the nuget keyword

See the reference link (NuGet CLI Reference) for more details on availability, commands, and applicability of the NuGet CLI.

How to create and publish a custom NuGet package

Here is a short recap of a tutorial video on creating and publishing your own NuGet package via the .NET CLI in VS Code:

Create a new class library via the CLI:

$ dotnet new classlib
Insert the code that you want to use for your library into the Class1.cs file (or whatever you renamed this file). The video writes simple functionality to log text to the console, and that's it. Your code is not required to be complex to be published.
Modify the package metadata in the AppLogger.csproj file (or whatever you renamed it). Here are some considerations and tips for this step:

a. Create a uniquely-named PackageId element within the parent TargetFramework element (company.product.feature is a popular convention for this). Put the name between the PackageId element tags.

b. Create an author element that specifies whomever is responsible for publishing this library (i.e. yourself, your company, etc.)

c. Include a description element.

d. Include a PackageLicenseExpression so others are able to use the library in their project(s) without restrictions.

e. Create package tags to allow the user to search for your library with keywords.

f. Include a repository URL if you have your source code saved in one.
Save the project and generate the NuGet package in the CLI using the following syntax:

$ dotnet pack
Publish the NuGet package. One way to do this is by copying the path (ending in .nupkg) generated to the right of "Successfully created package" in the terminal, go to nuget.org, sign in, go to Upload, hit Browse, paste the path into the File name input, hit Open, verify your metadata in the found package, then hit Submit. Before it can be found on nuget.org, validation and indexing must be done, so the published library will take some time to be found on nuget.org.

Use the link below to follow the descriptive video that came up with these steps.

Microsoft docs: how to create and publish a NuGet package with the .NET CLI

Since your NuGet package has now been successfully uploaded to nuget.org, you can not see where to find what custom NuGet packages contain, their stability, and whether they would be useful for your project. The listing page should contain all of this information. Also, see the package's Info page to navigate to its website to acquire even more useful information.

Conclusion

To drive home the main points from above:

1) NuGet is the preferred .NET package manager for installing external functionality into projects.

2) Any .NET language can use NuGet (C#, F#, Visual Basic, Wix, and C++ all support NuGet's latest version).

3) You can install and use a NuGet package in Visual Studio by navigating to your Tools tab or right clicking your solution (shown above).

4) Creating a NuGet package is relatively simple and can be done in a few steps (shown above).

5) This post heavily referenced the Microsoft docs, so if you would like to learn more, I would highly recommend checking them out. A lot of the links referenced below will lead you to plenty of other documentation.

A few other bits of NuGet information/use

1) NuGet can build create packages in Mono, and nuget.exe "builds and runs under Mono 3.2+" (Microsoft NuGet FAQ's)

2) To check on the version of the NuGet Tools you have in Visual Studio, go to Help > About Microsoft Visual Studio and see the version next to NuGet Package Manager. Also, you can use the Package Manager Console (Tools > NuGet Package Manager > NuGet Package Manager Console) and enter host to see th details of your version of NuGet.

3) You can add your own commands to nuget.exe

References and resources to learn more about NuGet

install NuGet client tools

NuGet documentation: Microsoft docs

NuGet FAQs

What is NuGet and what does it do? Microsoft docs

Microsoft docs: how to create and publish a NuGet package with the .NET CLI

Microsoft docs: how to find and evaluate NuGet packages for your project

Microsoft docs: NuGet CLI Reference

Transitioning from an Anatomy Student to a Software Engineer

ericeinerson — Thu, 21 Apr 2022 19:22:17 +0000

Overview

This week I just finished my time as a student in Flatiron School's Software Engineering program. This was a path I had not considered until about fall of last year. I have always loved the idea of coding, and I have wanted to integrate it into my career for a really long time; however, I never thought that I would make software engineering my actual career. Here is some of my background on my journey to diving into the tech industry:

High School

Back in high school, I had a major interest in math; I loved problem solving, and math came more easily to me than most other subjects. I took a couple of courses (Visual Basic and C++) in high school, and really enjoyed what I learned. At the time, I was just interested in being a biochemist or meteorologist, so coding seemed more like a fun hobby rather than a career.

College before Flatiron

As an undergraduate who attended six universities, I had a fair amount of career path changes. I went from biochemistry, to athletic training, to pre-physical therapy, to exercise physiology (first bachelor's), to pre-med, to biochemistry (second bachelor's), to being an EMT, to anatomy with teaching certificate (master's), to anatomy education, finally to software engineering (bootcamp certificate).

Software engineering was not part of my career outlook until thirteen years into my education, but I am glad I finally made it! Like I said, I have always thought it would be fantastic to include integrated coding in my career, but having gone through an intensive bootcamp, I feel excited to finally passionately work in an exponentially growing field.

The Transition from PhD Student to a Bootcamp Student

During my time as a PhD student, the final stage before transitioning into software engineering, I loved what I was learning; specifically, I loved teaching and anatomy. The only problem was that the working environment that I operated in did not mesh well with me.

It was as though everything that I had been working towards suddenly seemed wrong. I decided based on how I felt to transition paths majorly into a path that I already had a little familiarity with, that would allow me to problem solve and apply math like I loved to do in high school, that would be flexible, and that would allow room for growth. This is what led me to choosing a bootcamp, specifically Flatiron School due to its great community and eagerness to get me into my new career path!

My Time in the Bootcamp

Flatiron started out with an immense amount of pre-work that I had to complete before the program started. At first I was a little shocked at just how many hours I had to put into this work just to start orientation; now, after reflecting on my time in the bootcamp, I am thankful for the pre-work because not only did it prep me for the intense curriculum ahead, but I got that much more time to learn and take advantage of resources offered to me by the program.

Shortly into the program, I was overwhelmed with the amount of content I was expected to absorb within a short period of time. On top of that, I was traveling, which made the absorption of material even more challenging; however, I was shocked by my first proud moment in the program, passing my first code challenge even though I absolutely thought I failed it.

Into phase two, I developed more confidence in my coding abilities, but I was still pretty behind in lecture and keeping up with everything. I did feel like I was more prepared to take the second code challenge; however, I got stumped on one aspect of it, and I almost failed. This allowed me to self-reflect and try to change my learning style in order to prevent this from happening again.

Into phase three, the content was overwhelming. I did my best to keep up, but there were several labs and readings that took me probably double the time to complete compared to either of the first two phases. It was great to get into the backend though, and I did develop more confidence in passing the next challenge. Unfortunately, I was not able to pass the third code challenge, but I passed the retake and kept trucking on. At this point, only one code challenge remained!

Into phase four, I got to learn how to apply Ruby to Rails, and this made things a lot easier. Active Record and Ruby fundamentals in the previous phase were pretty overwhelming, and this phase had much fewer modules. Still, I fell into the trap of developing overconfidence and failed the last code challenge on the first try; however, I passed the retake without too much difficulty, and finally I was past all of the assessments! This was my greatest triumph because I only now needed to finish a couple projects in order to graduate!

I feel like the fifth phase of Flatiron was actually the easiest. I was finally able to correctly apply my confidence, build out a project with features I had no clue about in the previous four phases, and take pride in the work I put into my new career. The best part: I never felt like the stress and exhaustion wore on me (unlike the PhD program); I love the busy work of coding, and I would never have thought that a program like Flatiron would give me a perspective that could compare something like my PhD program that I personally just did not mesh well with to an equally busy, yet rewarding entry point into my new career.

Authorization and Authentication in Ruby on Rails

ericeinerson — Tue, 05 Apr 2022 21:59:49 +0000

Overview

Authorization and authentication are two valuable areas of coding to understand. In this summary, I will be going over what authentication and authorization are and how to make a simple login form, including a username input that will be used to determine who the user is and whether they are authorized to view a post.

By the way, when I use the word "auth" I am referring to both authorization and authentication as a whole, not one or the other and not something else entirely.

Authentication versus authorization

Authorization refers to what a user has access to; authentication refers to the verification of who a user is. Both of these are important for user security because validation of a user can prevent unwanted actions, such as admin access, from affecting the program/user in a negative way.

Cookies

Cookies are data that are stored in a browser while a website is being used by a client. Cookies are generally client-side, not server-side. Their purpose is to remember information about the user, and they can be created as plain-text name-value pairs, such as user_name=eric.

cookies[:user_name] = "eric"

Cookies can also be set as hashes and have attributes, such as expiration dates/times.

cookies[:login] = { :value => "Eric", :expires => Time.now + 1.hour}

This cookie, stored as the symbol :login, has a value set as "Eric" and it expires and is deleted 1 hour from the current time.

One issue with cookies is that since they are generally plain-text, their information can be accessed by anyone, causing security concerns. Below is a special type of cookie, called a session, that helps resolve this security issue.

Sessions

Sessions are data that are stored on the server side. They are a specialized cookie that adds a signature to the cookie, encrypting it and preventing clients from tampering with its data. The following is a way to set up a session:

session[:user_id] = user.id
// stores the user's ID into an encrypted session 
ID that is several characters long

In the code above, the session method will create a signature specifically for the value of the [:user_id] key and assign the value of the user's ID to that signed value. This way, it is difficult for a malicious user to access the user_id.

Code for allowing your program to use sessions and cookies

Here is some starter code for allowing cookies and sessions to be used in your program:

class Application < Rails::Application
   config.middleware.use ActionDispatch::Cookies
   // allows one to use cookies in their program
   config.middleware.use ActionDispatch::Session:CookieStore
   // allows one to use sessions in their program
   config.action_dispatch.cookies_same_site_protection = 
   :strict
   // makes sure that cookies are only accepted 
   within applications on the same domain as the 
   program, rather than different domains, for 
   security of our program
end

class ApplicationController < ActionController::API
   include ActionController::Cookies
end
// This allows our application controller, 
which other controllers would generally 
inherit from, to use cookies

Creating a login form with a username

Authentication could be done in Ruby with a create action using POST:

post "/login" to sessions#create

In the above code, post refers to the POST restful action that allows one to persist a new instance of a login to the database; sessions refers to the controller that will be performing the create action via a create method.

class SessionsController < ApplicationsController
   def create
      user = User.find_by(username:params[:username])
      session[:user_id] = user.id
      render json: user
   end
end

Below is how React could save the username in state. After making a POST request via a submit button on a React form, the default empty string of username (from useState("") is replaced with the username retrieved from the Ruby backend. The username is converted into a JavaScript object in the body of the request and then passed into the login callback function as a parameter called user.

function Login({ handleLogin }) {
  const [username, setUsername] = useState("");

  function handleSubmit(e) {
    e.preventDefault();
    fetch("/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ username }),
    })
      .then((r) => r.json())
      .then((user) => handleLogin(user));
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type="submit">Login</button>
    </form>
  );
}

Adding authorization to the login

The code above shows how one could take a user, save the user.id into the session[:user_id] and save the username in state, which shows on both the front end and back end that the user is authenticated. At the moment, all that is needed is the username, not the password.

To take this a step further, an authorize method could be added that allows certain actions by the user to be restricted unless they have logged in with a username. Below is code that could be used to do this for a program that renders posts:

class PostsController < ApplicationController
   before_action :authorize

   def show
      post = Post.find_by(id:params[:id])
      render json: post
   end

   private

   def authorize
      return render json: { error: "Unauthorized" }, status: 
      :unauthorized unless session.include? :user_id
   end
end

This code prevents a user without a user_id stored in the session to access the post. Basically, before the show method is run, the authorize method runs (before_action ensures that :authorize will run before any method within the PostsController), returning an error unless a user_id is stored in the session as a truthy value.

Summary

Here are some important takeaways from this blog:
1) Authentication and authorization are not the same.
2) POST is a useful RESTful action that can be applied to logging a user in.
3) Cookies are usually client-side, plain text, and not secure; sessions are server-side, signed cookies that are more secure than other unsigned cookies.
4) before_action allows one to use a method before any other methods within a class; the method, authorize, was the example used in this blog that determined whether or not a user could make a post.
5) Certain middleware needs to be set up in order to use cookies in a Rails application; :strict is an example of how to prevent different domains from making requests for cookies.

References

https://api.rubyonrails.org/classes/ActiveModel/SecurePassword/ClassMethods.html#method-i-has_secure_password

https://www.w3schools.com/js/js_cookies.asp

https://www.tutorialspoint.com/ruby-on-rails/rails-session-cookies.htm

https://www.youtube.com/watch?v=IzbQAj_tcfI

https://learning.flatironschool.com/

Event.stopPropagation() with regard to event bubbling.

ericeinerson — Thu, 24 Mar 2022 23:00:36 +0000

Overview

An event in JavaScript is a way to affect an element, whether that is clicking, keying down, or loading DOM content causing some sort of change. Sometimes multiple elements that are closely related contain multiple event listeners, for example having multiple click events on a child/parent pair of elements. This could lead to issues because in JavaScript these events propagate to related elements, which could trigger events in either the parent and/or child. The following are some ways propagation could affect element events.

Event Capturing (phase one)

This happens first in event propagation. When an event fires, the event propagates, starting with the highest parent, down each child until it reaches the target element.

Targeting

This occurs when the event reaches its target.

Event Bubbling (phase two)

Bubbling happens after the targeting phase occurs. Event bubbling refers to a propagation of events from the target element (innermost element) all the way up to the highest parent (outermost element). This is usually the phase that causes events to fire in JavaScript as it is generally the default event setting. Therefore, the event capturing and targeting phases do not generally cause propagation issues in JavaScript unless the settings are different than default.

For example, if a button were created within a form and both had an attached click event listener, the button would fire first when clicked, then the form. stopPropagation within the button would prevent the form from firing after the button is clicked.

Event.stopPropagation

Event.stopPropagation is a method that allows one to stop the propagation of events. This would affect any event capturing and and event bubbling.

Event.preventDefault

This method prevents the default action of the element from firing upon completion of the event. This usually causes the page to refresh, as this is usually the default for JavaScript.

Example of where stop propagation would be useful

Below I have some screenshots of some nested elements, which give a visual for Event.stopProgagation:

Webpage without any events

This represents a few divs, a form, and a button (labeled 1-5). 1 is a parent of 2, 2 is a parent of 3, etc. Below is the code using stopPropagation and preventDefault:

HTML/CSS Code

As you can see, the elements are all nested within each other. This means that they could all propagate events onto one another, whether that is from 1-5 via event capturing or 5-1 via event bubbling. Since JavaScript defaults to event bubbling, the events would all fire from 5-1 without stopPropagation.

JavaScript Code

Alerts during each event firing show that they happen separately:

This shows that after each event firing is individual and separate. After each event, an alert pops up with the associated element.

Event.stopPropagation stops the event firing after the second event

Due to the conditional statement within JavaScript, the stopPropagation method fires when the for loop hits i=3, therefore preventing further propagation after the second event is triggered.

Above second loop (i===3), stopPropagation does not stop the event from propagating all the way to the outermost element.

Event.preventDefault

Since preventDefault is written within the loop, this will prevent the boxes from changing from black to their default color. If preventDefault were removed, the boxes would not remain black after clicking.

Event.stopImmediatePropagation

This method is similar to Event.stopPropagation; however, instead of only stopping the event propagation chain (whether that is within the out-to-in event capturing or the in-to-out bubbling), this method additionally stops all events from firing within the same element. This is different from Event.stopPropagation because Event.stopPropagation will allow other event handlers within the same event to fire, just not the propagation of events to a subsequent element.

Summary

Here are the main takeaway points:

Events propagate between elements both outside-to-inside (capturing) and inside-to-outside (bubbling).
There are a few methods that are related to event firing, and each has their own function:

stopPropagation: prevents further propagating between
elements
preventDefault: prevents the default action of the
element from happening once the event fires (i.e.
refreshing the screen).
stopImmediatePropagation: prevents the other event
handlers on the same element from firing, in addition to
stopping event propagation between elements.

Events happen independently of each other in a certain order (via capturing and bubbling), not all at once.

References

stopPropagation vs preventDefault tutorial by EDUDREAMS

stopPropagation vs preventDefault tutorial by dcode

Spongebob photo

Event propagation image

Simplified explanation of stopPropagation in JavaScript

Event bubbling and catching beginner's guide

What is event capturing?

Event.stopPropagation MDN

Looking At Big O Notation With A Few Examples

ericeinerson — Tue, 15 Mar 2022 23:32:23 +0000

Introduction (what is Big O)

Big O notation is a way to describe the time complexity of a function. The larger an input is, the longer it will take for the function to run, and this runtime is expressed by Big O. This is different from directly measuring the exact time it takes each function to run; instead of measuring in terms of seconds, Big O gives us an approximation based on the function's input (n).

Main points

O(n) is abstract.
Directly measuring run time is concrete.
The larger the input n is, the larger Big O becomes.
time complexity = how the run time of a function increases as the input increases
Big O often looks at the "worst case" scenario (i.e. the most iterations possible).
Big O and O(n) are synonymous for the purposes of this post.

What can O(n) look like?

I will be going through the following examples of O(n):

O(n)
O(1)
O(n^2)
O(log(n))

Example of O(n) using array iteration

exampleArry = [1, 3, 6, 9, 24]

function findNumber() {
exampleArry.find(element => element > 8)
}

findNumber()
// 9
// This will create an O(n) of n = 4 iterations 
// since find() begins at the left and ends 
// at the right

anotherArry = [1, 5, 7, 9, 20, 130, 260, 340, 400]

function findNumber() {
anotherArry.find(element => element > 350)
}

findNumber()
// 400
// This function uses an O(n) of n = 9 
// iterations, which means the function will 
// theoretically take longer to run

These examples describe Big O by using the function findNumber() to iterate through each element in the exampleArry. The number of iterations is a way to assign a value to n. Therefore, if find() needed to make 3 iterations to find a number (i.e. finding an index of 2), n would equal 3, making O(n) = 3.

If you need a refresher on the find() method, check out a blog I posted comparing different JavaScript iteration methods:

https://dev.to/ericeinerson/comparing-methods-of-array-iteration-in-javascript-1h03

Visual of an O(n) based on exampleArry and anotherArry

This image shows a linear time complexity, which means n is increasing in a linear manner compared to the input. In this example, n = 1, which means O(n) and the input increase at a 1:1 ratio. If the ratio were 2:1 or 1:2, this would still be a linear relationship. These would also still be generalized as O(n), not O(2n) or O(n/2).

Why is Big O important

Big O is a useful tool because figuring out how long a function will take to run may not be that easy. Different languages, running other programs at the same time, one's computer's processing speed, and other factors could make this difficult. Big O is convenient for producing a theoretical model for how long the function should take to run, based on how one's function is written.

Here is how quickly Big O would grow, based on some examples:

O(1)

Sometimes, a function will run at the same speed no matter what the size of the input is. This is called a constant time complexity with regards to Big O. No matter how large the input is, Big O is still going to remain the same value with O(1).

Example of O(1)

exampleArry = [1, 3, 6, 9, 24]

function printNumber(i) {
return exampleArry[i]
}

findNumber(2)
// 6
// This function identifies a single index in exampleArry and returns it. The time needed in order to return the index is just a single step, no matter which index is chosen, hence O(1).

Graph showing O(1) line

O(n^2)

Big O(n^2) describes a time complexity whose run time increases quadratically compared to its input. Therefore, large inputs are going to have extremely large Big O's. This input/time relationship is likely the most important for those working with large inputs because a sizable input could create a slow-running function.

Example of O(n^2)

exampleArry = [1, 4, 5, 1, 6, 4]
function findMatch() {
    for (let i = 0; i < exampleArry.length; i++) {
        for (let j = 0; j < exampleArry.length; j++) {
            if ((exampleArry[i] === exampleArry[j]) && (i !== j) {
                return exampleArry[i]
            }
        }
    }
}

findMatch()
// 1
// This function's worst case involves 36 iterations
// because exampleArry contains 6 indices (6 iterations
// for i each with 6 iterations for j => 36 possible iterations)

Graph showing O(n^2) curve

O(log(n))

This describes a logarithmic increase in time compared to the input and acts in the opposite way as O(n^2). The larger the input for O(log(n)), the less time is added per iteration. Big O(log(n)) would be ideal for larger inputs.

Example of O(log(n))

function findLog(n) {
    count = 0;
    for (let i = 1; i < n; i = i * 2) {

        count++;
    }
    return count
}

findLog(5)
// 2
findLog(10000)
// 13
// This function finds the log of n (not taking into account // decimals). The solution is going to be how many times i
// can be doubled (hence log base 2) until it reaches a value // greater than n.

Graph showing Log (base 2) of n

References

https://medium.com/karuna-sehgal/a-simplified-explanation-of-the-big-o-notation-82523585e835

https://en.wikipedia.org/wiki/Big_O_notation

https://developer.mozilla.org/en-US/docs/Glossary/Algorithm

https://www.w3schools.in/data-structures-tutorial/big-o-notation-and-algorithm-analysis/

https://www.youtube.com/watch?v=D6xkbGLQesk

https://web.mit.edu/16.070/www/lecture/big_o.pdf

https://learning.flatironschool.com/courses/4985/pages/big-o-notation?module_item_id=352002

https://learning.flatironschool.com/courses/4985/pages/big-o-examples?module_item_id=352003

https://socratic.org/questions/how-do-you-complete-a-table-for-the-rule-y-3x-2-then-plot-and-connect-the-points

https://www.freemathhelp.com/slope-line/

https://stackoverflow.com/questions/17122807/big-o-ologn-code-example

https://en.wikipedia.org/wiki/Binary_logarithm

Comparing Methods of Array Iteration in JavaScript

ericeinerson — Thu, 17 Feb 2022 21:53:19 +0000

Introduction

An array is an object that behaves like a list. Arrays are useful because they are an organized sequence of elements that can be used together to perform powerful tasks with a collection of data.

Array iteration is a skill that uses many methods, some similar and others much different. It involves sifting through the array's indices and either acting on one or more elements/indices or outputting something based on what is already within the array.

The following are four methods of array iteration that I think would be useful to compare and contrast:

map()

takes in a callback function as an argument
returns a new array with each element being the return value of the callback function

Here is a simple algebraic example of how to use map()

const exampleArry = [1, 3, 6]

const newArry = exampleArry.map( (number) => number * 3)

console.log(newArry)
// [3, 9, 18]

Each element in exampleArry was passed into the callback function that map took as a parameter, which was called "number". That callback function returned each "number" multiplied by 3, then returned an array with each result of the callback function.

Here is a way to use map on a string

const exampleArry = ["orange", "apple", "strawberry"]

const notTheSameArry = exampleArry.map( (fruit) => fruit + " juice")

const anotherArry = exampleArry.map( (fruit) => "organic " + fruit)

console.log(exampleArry)
// ["orange", "apple", "strawberry"]

console.log(notTheSameArry)
// ["orange juice", "apple juice", "strawberry juice"]

console.log(anotherArry)
// ["organic orange", "organic apple", "organic strawberry"]

find()

takes in a callback function as an argument
returns the first element of the array that satisfies the callback function

Here is a way to use find()

const exampleArry = [1, 3, 5, 7]

const notTheSameArry = exampleArry.find( (number) => number > 6)

const anotherArry = exampleArry.find( (number) => number > 4)

console.log(exampleArry)
// [1, 3, 5, 7]

console.log(notTheSameArry)
// 7

console.log(anotherArry)
// 5

filter()

takes in a callback function as an argument
returns a new array with each element of the original array that satisfies the callback function

Here is a way to use filter()

const exampleArry = [1, 3, 5, 7]

const notTheSameArry = exampleArry.find( (number) => number > 3)

const anotherArry = exampleArry.find( (number) => number > 1)

console.log(exampleArry)
// [1, 3, 5, 7]

console.log(notTheSameArry)
// [5, 7]

console.log(anotherArry)
// [3, 5, 7]

forEach()

takes in a callback function as an argument
returns undefined
logs the result of each affected element in the original array

Here is a way to use forEach()

const exampleArry = [1, 3, 5, 7]

const notTheSameArry = exampleArry.find( (number) => number * 4)

const anotherArry = exampleArry.find( (number) => number * 2)

console.log(exampleArry)
// [1, 3, 5, 7]
// return value would be [1, 3, 5, 7]

console.log(notTheSameArry)
// [4, 12, 20, 28]
// return value would be undefined

console.log(anotherArry)
// [2, 6, 10, 14]
// return value would be undefined

Comparing and contrasting these four iteration methods

map(), filter(), and find() all return a value; forEach() returns undefined.
map() and filter() both return a new array; find() returns an element.
map() and forEach() both act on every iterable element in an array; filter() and find() check on iterable element(s) in an array rather than acting on each element.
map(), filter(), and find() can normally easily be used on top of one another on the same variable; forEach() is not as easy to use on top of map(), filter(), and find().
All of these methods use a callback function as an argument.

Example of how you could or could not use these iteration methods together:

const exampleArry = [1, 3, 5, 7]

const notTheSameArry = exampleArry.map( (number) => number + 1).filter( (number) => number > 2).find( (number) => number > 4)

const anotherArry = exampleArry.forEach( (number) => number + 1).filter( (number) => number > 2).find( (number) => number > 4)

console.log(exampleArry)
// [1, 3, 5, 7]

console.log(notTheSameArry)
// This will return 6

console.log(anotherArry)
// This will return an error

Explanation (notTheSameArry)

This variable first mapped over the exampleArry array, adding 1 to each element in this array. This map() method returned a new array of [2, 4, 6, 8] before being going through filter().
The next method, filter(), iterated through the newly mapped array and returned another array based on each element being greater than 2. This lead to a new returned array of [4, 6, 8] before find() was implemented.
The final method used, find(), iterated through the newly filtered array and returned the element that first satisfied its callback function. Since the callback function called for a an argument that was greater than 4, the element 6 was returned.

Explanation (anotherArry)

This variable assignment would return an error. It acts almost the same as the const notTheSameArry, except for one detail: forEach() returns an undefined. Therefore, the next method used, filter(), would throw an error due to the undefined not being iterable. Furthermore, find() would not even be able to attempt to iterate because the syntax of this variable assignment broke when filter() tried to iterate over the undefined return value of anotherArry.

The following are other iteration methods with one-sentence descriptions that you could check out if you are interested:

entries()

This method returns an object with the keys and key values of an array.

every()

This method returns a boolean based on every element in the array satisfying a testing function.

findIndex()

This method returns the index of the first element that satisfies the testing function

for...in

This method iterates over enumerable properties of an object

for...of

This method iterates over iterable properties of an object

from()

This method creates a new array by iterating through an object and assigning each iterable element an index

includes()

This method returns a boolean value depending on whether or not the method's argument is within the array.

indexOf()

This method finds an array element and returns its index.

keys()

This method returns the keys of an array in a new object.

lastIndexOf()

This method is the same is indexOf(), but it returns the last occurrence of the element in its array.

reduce()

This method calls a function on each element in an array, which will return a value that consolidates the values of each index into one element.

reduceRight()

This method is the same as reduce(), but it iterates through the array from right to left instead of left to right.

some()

This method returns a boolean based on whether some of the elements of an array satisfy a testing function.

References

Here are some resources I used to familiarize myself with arrays and array iteration, which helped me construct this post:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://www.digitalocean.com/community/tutorials/how-to-use-array-methods-in-javascript-iteration-methods

https://levelup.gitconnected.com/the-array-iterators-cheatsheet-javascript-9d0cfa03f4

https://www.w3schools.com/js/js_array_iteration.asp

https://www.tabnine.com/academy/javascript/how-to-use-the-forof-statement-in-javascript/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of

https://www.digitalocean.com/community/tutorials/js-array-find-method

https://www.freecodecamp.org/news/4-main-differences-between-foreach-and-map/

https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.kirupa.com%2Fjavascript%2Flooping_through_array.htm&psig=AOvVaw0IcpiQhcHANUUAl2P_uFsa&ust=1645220133858000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCNjuzOPYh_YCFQAAAAAdAAAAABAD

https://javascript.plainenglish.io/understanding-and-applying-array-methods-in-javascript-df7873ad611