DEV Community: Hannah Glazier

Common Beginner Sorting Algorithms in JavaScript

Hannah Glazier — Thu, 09 Jun 2022 19:33:50 +0000

As I continue my journey of learning Data Structures and Algorithms, my next topic is sorting algorithms! These algorithms have been a real sticking point for me in my learning process. In this blog, I will attempt to aid my learning through teaching. I will begin with some of the basic sorting algorithms and work my way up to more advanced methods in later blogs. As always, these topics are new to me so I welcome any and all feedback!

Sorting Algorithms

Sorting algorithms are a fundamental tool in coding and computer science. They are used to "rearrange a given array or list elements", often in order to aid searching. This is most frequently accomplished by making a series of comparisons. Though there are some other methods that do not involve comparison, which I will discuss in a later blog.

Bubble Sort

Bubble sort is considered one of the most basic sorting algorithms. Though it is not very efficient or commonly used, it establishes a key foundation for other sorting algorithms. It "works by repeatedly swapping the adjacent elements if they are in the wrong order." The best use case for Bubble Sort is when the data set is very small or nearly sorted. To implement:

Create a function that accepts an array
Develop logic for swapping values - use indices to make swaps
Begin looping from the END of the array toward the beginning with a variable i
Begin an inner loop with a variable j that loops from the beginning until i-1
Compare neighboring values - so check is arr[j] is greater than arr[j+1]
- If it is greater - swap values!
Return the fully sorted array The code is implemented as follows:

function bubbleSort(arr) {
  const swap = (arr, idx1, idx2) => {
    [arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]];
  };

  for (let i = arr.length; i > 0; i--) {
    for (let j = 0; j < i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        swap(arr, j, j + 1);
      }
    }
  }
  return arr;
}

The best possible time complexity for Bubble Sort is O(N). The worst and average time complexity is O(N^2). If time complexity is a concern, Bubble Sort should really only be used if the data is nearly sorted. The space complexity is O(1).

Selection Sort

Another basic sorting algorithm is Selection Sort. Selection Sort is similar to Bubble Sort, however, instead of placing large values into a sorted position - it places small values into a sorted position. It also only compares the lowest value to the entire data set vs. comparing two values at a time. To implement:

Create a function that accepts an array *with the same swapping logic used in Bubble Sort
Store the first element as the smallest value *It is considered the smallest value because it is the only value you have seen so far
Continue to compare it to the next value until you find a smaller value
Once you find a smaller value - save the index of that value as the new minimum
If the new minimum is not the value(index) that you started with then - SWAP
Repeat this process with each element until the array is fully sorted

function selectionSort(arr) {
  const swap = (arr, idx1, idx2) =>
    ([arr[idx1], arr[idx2]] = [arr[idx2], arr[idx1]]);

  for (let i = 0; i < arr.length; i++) {
    let lowest = i;
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[lowest] > arr[j]) {
        lowest = j;
      }
    }
    if (i !== lowest) swap(arr, i, lowest);
  }

  return arr;
}

Similarly to Bubble Sort, this algorithm is not very efficient. Its best, average, and worst time complexity is O(N^2). It can be useful if you are trying to minimize the number of swaps you are making. The space complexity is also O(1).

Insertion Sort

The final basic sorting algorithm I will be covering in this blog is Insertion Sort. Similar to Bubble Sort, this algorithm is efficient if your data is ALMOST sorted. This makes it so it also works well if your data needs to be continually sorted over time. Insertion Sort is unique in that instead of focusing on swapping individual elements, it continually builds up the sorted array by creating a larger portion that is already sorted. Instead of making a series of swaps, you place the data where it needs to go when you first look at the individual element. A nice comparison is that it "works the way we sort playing cards in our hands." To implement:

Create a function that accepts an array
Select the second element in the array (the first element will be considered already sorted until we look at other elements)
Compare the second element to the one before - if necessary - SWAP
Continue to the next (third) element and if it is in the incorrect order, iterate through the sorted portion (i.e. the left side of the array) until you find the correct placement
Repeat this process until the array is fully sorted The code is implemented as follows:

function insertionSort(arr){
  let currentVal;
    for(let i = 1; i < arr.length; i++){
        currentVal = arr[i];
        for(let j = i - 1; j >= 0 && arr[j] > currentVal; j--) {
            arr[j+1] = arr[j]
        }
        arr[j+1] = currentVal;
    }
    return arr;
}

Similarly to some of the other algorithms we have looked at, the best possible time complexity is O(N) - this is if the data is almost sorted. The average and worst time complexity is O(N^2). The space complexity is O(1).

Conclusion

These three sorting algorithms are often considered the basic or beginner sorting algorithms. In general, they are not very efficient. However, there are some cases where they may be more preferable to more complex methods - such as if your data set is small or nearly sorted. These algorithms also offer improved readability when compared to the more complex algorithms. It is also important to learn them as they offer a strong foundation as you move through the more efficient sorting methods. In the coming blogs, I will attempt to tackle a few more advanced sorting algorithms.

Sources

For more detailed information, checkout this Udemy course I am currently taking! JavaScript Algorithms and Data Structures Masterclass
Geeks for Geeks - Sorting Algorithms
Geeks for Geeks - When to use Sorting Algorithms

Common Searching Algorithms in JavaScript

Hannah Glazier — Thu, 09 Jun 2022 16:36:26 +0000

I am currently a few weeks post-coding bootcamp and am beginning to navigate the world of technical interviews. With that comes a necessary deep dive into data structures and algorithms. In the interest of using teaching as a learning tool, I will be documenting my learning process here.

Let's begin with Searching Algorithms!

Linear Search

Linear search is a common searching algorithm that accepts an array and a value - and returns the index at which that value exists. If that value does not exist, the function will return -1. To implement:

Begin with a for loop that starts at i and iterates through the length of the array
Check if the current array element is equal to the given value.
If found, return the index of that value
If the value does not exist, return -1 The code is as follows:

function linearSearch(arr, val){
    for(let i = 0; i < arr.length; i++){
        if(arr[i] === val) return i;
    }
    return -1;
}

The average and worst time complexity for this function is O(N) and the best case time complexity is O(1). Our next searching algorithm will improve upon this time complexity.

Binary Search

Binary search is an algorithm that can be MUCH more efficient than linear search, with the caveat that it only works on sorted arrays. To implement:

Create a function that accepts a sorted array and a value.
Create a left pointer at the start of the array and a right pointer at the end of the array.
While the left pointer is in front of the right pointer:
- Create a pointer in the middle of the array. You can find this middle value by taking the average of your start and end values and using Math.floor() to ensure a rounded number
- If you find your matching value, return the index
- If the value is too small, move the left pointer up
- If the value is too large, move the right pointer down
- Continue this process until you find the correct value
If the value is not present, return -1

The code is as follows:

function binarySearch(arr, elem) {
    let start = 0;
    let end = arr.length - 1;
    let middle = Math.floor((start + end) / 2);
    while(arr[middle] !== elem && start <= end) {
        if(elem < arr[middle]) end = middle - 1;
        else start = middle + 1;
        middle = Math.floor((start + end) / 2);
    }
    return arr[middle] === elem ? middle : -1;
}

Remember! This method only works on sorted arrays! However, if you do have a sorted array, the time complexity is improved greatly when compared to linear search. The worst and average time complexity is O(log n) and the best case is O(1).

Naive String Search

The final searching algorithm I will be covering is naive string search. This algorithm is useful for finding patterns within larger strings. For instance, you could try to find how many times "AABA" appears in the string "AABAACAADAABAABA". To implement:

Define a function that takes a larger string and then the string that contains the pattern you are looking for
Loop over the longer string
Within that loop, loop over the shorter/pattern string
Check for a match
- If you find a match, keep going
- If you find a complete match, increment your match count
If no match is found, break out of the inner loop
Return the total count at the end

The code is as follows:

function naiveSearch(long, short){
  let count = 0;
  for(let i = 0; i < long.length; i++){
    for(let j = 0; j < short.length; j++){
      if(short[j] !== long[i+j]) break;
      if(j === short.length - 1) count++;
      }
    }
 return count;
}

The best case time complexity for naive string search is O(n). The worst case is O(m*(n-m+1)). This author discusses this unique time complexity further.

This has been my quick guide to basic searching algorithms in JavaScript. I am still learning this material and welcome comments and critiques!

Sources

For more detailed information, checkout this Udemy course I am currently taking! JavaScript Algorithms and Data Structures Masterclass
The Naive String Matching Algorithm
Naive Algorithm for Pattern Searching

Rails Validators - A Quick Guide and Cheatsheet

Hannah Glazier — Tue, 12 Apr 2022 15:39:18 +0000

In the complex world of Rails, what exactly are validations and how can we use them? In this blog, I will give an overview of Rails validators and list some common and useful examples. The Rails Guides state that, "validations are used to ensure that only valid data is saved into your database." As a silly analogy, you can consider validations to be the backend's bouncer, making sure all data is dressed appropriately before entering club database. "Model-level validations are the best way to ensure that only valid data is saved into your database." Client-side validations are possible, but can be insecure or inefficient when used alone. Backend validations ensure that your database is only receiving safe and appropriate data.

What Triggers a Validation?

Validations are implemented when any type of change is made to the database. You will run into this most often when you .save or .create, but you can also manually trigger a validation with .valid? or .invalid?. There is also a built in validation method on: that allows you to determine when the validation is triggered:

class User < ApplicationRecord
  validates :age, numericality: true, on: :update
end

Common Built-in Validation Methods

Active Record has numerous built-in validation methods that can be employed for common validation needs. Every time these validations fail, they will trigger an error which you can decide to handle in your own way (more on that later). One of the most common built-in validators is presence: which checks that a certain value has been entered/exists.

class User < ApplicationRecord
  validates :username, presence: true
end

*Note that attributes can also be chained together if the same type of validation needs to be provided for each one:

class User < ApplicationRecord
  validates :username, :birthday, :full_name, presence: true
end

presence: is best used when you do not have any other validations in place. If you have another validation in place for the same attribute, presence: becomes implicit and is not required.

Another common built-in validation is length:, which checks various length constraints:

class User < ApplicationRecord
  validates :name, length: { minimum: 2 }
  validates :bio, length: { maximum: 500 }
  validates :password, length: { in: 6..20 }
  validates :drivers_license, length: { is: 9 }
end

The length: validator can be used against numerous different constraints such as maximum, minimum, an exact length, or a range.

numericality: is used to validate an attribute's numeric value.

class User < ApplicationRecord
  validates :birthday, numericality: true
  validates :phone_number, numericality: { only_integer: true }
end

There are a multitude of numericality: constraints including: :greater_than, :greater_than_or_equal_to, :equal_to, :less_than, :less_than_or_equal_to, :other_than, :in(specifies range), :odd, :even. These validators can be used for a wide range of purposes and are intuitively named for ease of use.

inclusion: is another helpful validator that can ensure that a certain value is included. This can be useful if a user is offered a list of options to choose from, and needs to be constrained to that list.

class User < ApplicationRecord
  validates :eye_color, inclusion: ["brown", "blue", "hazel", "green", "grey"]
end

Another very common validator is uniqueness:, this is important for ensure that data, such as usernames or emails are completely unique to a specific user.

class User < ApplicationRecord
  validates :username, uniqueness: true
end

Some interesting validations are :allow_blank and :allow_nil, these validations are used in a way that bypasses the built-in presence: true so that if information is entered it can be validated, but it can also be left blank or nil.

class User < ApplicationRecord
  validates :bio, length: { minimum: 250 }, allow_blank: true
end

You can also implement conditional validations that are only triggered if a certain condition is met.

class Order < ApplicationRecord
  validates :card_number, presence: true, if: :paid_with_card?

  def paid_with_card?
    payment_type == "card"
  end
end

It is also possible to contain your validations within a certain scope.

class Gate < ApplicationRecord
  validates :gate_num, uniqueness: { scope: :terminal }
end

Custom Validations

Listed above are just a few of the many built in Active Record validation methods, however, when these aren't enough we also have the ability to build our own custom validations. The syntax is as follows:

class CustomValidator < ActiveModel::Validator
  def validate(record)
    unless record.species == 'dog' 
      record.errors.add :species, "Dogs only!"
    end
  end
end

A common syntax gotcha with custom validations is that custom validations use validate rather than validates. When you combine your own custom validations with the myriad of built-in methods, your validating possibilities are nearly endless!

Error Handling

The way you want to handle the errors is a larger topic beyond the scope of this blog as Rails provides you with multiple options, however, I would like to highlight the built-in message: method as it is incorporated directly into your validations.

class User < ApplicationRecord
  validates :username, presence: { message: "must be given please" }
end

Conclusion

Rails validations are a simple and effective way to ensure you are allowing appropriate and safe data into your database. You can choose from numerous built-in validator methods for your most common validation needs or you can use your creative freedom and design custom validations for unique needs.

-Sources-

Ruby on Rails Guides

Coding and Human-Language Access

Hannah Glazier — Mon, 04 Apr 2022 23:52:14 +0000

We have all heard time and time again how accessible learning to code is. A simple google search will yield countless YouTube tutorials and free online courses. Career building knowledge has never been more easily available...that is if you speak English. The educational access barrier is coming down, you no longer need to attend a four year university to learn to code, however, the language barrier remains firmly in place. Over a third of coding languages are in English (or use English reserved words) and the use percentage/PYPL of these languages far exceeds this.

I want to start with a huge caveat that I am a native English speaker and I cannot speak as well on this topic as someone who has experienced these barriers first hand. These are just my observations and resulting research.

Multilingual Coding Languages

There are "four programming languages that are widely available in multilingual versions. Not 400. Four (4)." Of these four, two are geared toward children. This is significant and important because Scratch (one of the two languages) has done a study showing that children who learn to code in a programming language based on their native language learn faster than those who are stuck learning in another language." It is possible to learn to code in a language that is based a foreign language. You can treat key words like const, let, and break just as you would treat other symbols like <=> or //. However, this makes an already difficult task much more difficult, and this is without considering the lack of documentation in other languages.

Localized Programming Languages

Localized programming languages are an encouraging option, especially when it comes to education. These are languages that change "depending on where the user is from and their native tongue. One notable example of this is Citrine that allows user to program in their native language in an effort to try and improve software." When it comes to career access these languages can cause some difficulties with debugging or readability. However, I think they are a great option for education and learning your first coding language as subsequent languages are much easier to learn once you have the first one under your belt.

Documentation and Community

Documentation for most languages is generally exclusively provided in English. If the community decided to make the docs more widely accessible, this would be a relatively easy fix as translating existing documentation would not be an enormously difficult task. A larger shift would be building out communities for these non-English-speaking learners. Everyone knows that developers rely heavily on Google and, "You need to find useful resources when you Google your error messages." Coding may seem like a solitary activity, but in reality you rely greatly on your community for help and support. These types of communities are not built overnight and can be difficult to develop. This is compounded by the fact that existing communities are not exactly welcoming a multi-lingual experience or business model. For example, Stackoverflow's official policy is to flag or close questions and comments that are not in English. While this feels like a missed opportunity, it does seem that they are taking steps to expand and have since developed sites in Portuguese, Japanese, Russian, and Spanish. This kind of expansion of community will aid greatly in improving human language access for the coding field.

The Source

An interesting phenomenon with coding languages is that even if they are developed in non-English-speaking countries, they are generally still built around English syntax. Perhaps this has to do with the fact that the first coding languages were in English, however, the trend does not seem to be slowing down. Some of the most popular and "highly-used coding languages were developed in non-English speaking countries e.g. Switzerland (PASCAL), Denmark (PHP), Japan (Ruby), Brazil (Lua), and The Netherlands (Python)." The primary reason for this is that "even in foreign countries that have large tech industries, English is used as a lingua franca for communicating with developers across the world." This all contributes to limiting accessibility to a growing a lucrative industry.

Conclusion

While there are a number of non-English based coding languages like "Qalb (Arabic), Chinese Python, farsinet (Persian), and Hindawi Programming System (Bengali, Gujarati, and Hindi)," these languages are still primarily used for educational purposes.

        Hello World! ‫ قول "مرحبا يا عالم!" ==

Hopefully, these languages can continue to expand. Gretchen Mcculoch phrased it as such, "The first website wasn't written in HTML—it was written in English HTML. The snippet of code that appears along the bottom of Glitch's reproduction? It's not in JavaScript, it's in English JavaScript. When we name the English default, it becomes more obvious that we can question it—we can start imagining a world that also contains Russian HTML or Swahili JavaScript, where you don't have an unearned advantage in learning to code if your native language happens to be English." It's all 1s and 0s under the hood, so why does the surface need to be so exclusive? Progress comes through reducing the educational barriers and continuing to not only expand our languages, but our documentation and communities as well.

Resources:

Wired - "Coding Is for Everyone—as Long as You Speak English"
Are There Any Non-English Programming Languages?
The Language of Codes : Why English is the Lingua Franca of Programming
Qalb (programming language)

The Semantics of Semantic UI

Hannah Glazier — Wed, 16 Mar 2022 14:36:17 +0000

Introduction

As developers, I think there is one thing we can all collectively agree on, CSS is deceptively difficult. We've all played the game of chasing our components around the page or desperately trying to get our background color to apply to the right spot. It is easy to lose some of the fun of styling to the occasionally frustrating intricacies of Cascading Style Sheets. Luckily for us, there are many frameworks available to make our styling lives a bit easier. But where do you start? For me, entering the world of CSS frameworks seemed a bit intimidating and I felt overwhelmed by choice. Bootstrap? Bulma? Tailwind? In the end it came down to finding the syntax and setup that felt the most logical and applicable. Begin with what feels simple and you can build upon that later as you delve into other frameworks. Semantic UI is the framework that checked those boxes for me and here I will lay out a step by step intro guide to Semantic UI for other CSS framework beginners like myself.

Install

When it comes to installing Semantic UI, you have a few options. The quickest and easiest approach for beginners is by utilizing the Content Delivery Network (CDN) in which all you need to do is add the following link line of code to your HTML file:

<html>
  <head>
    <title>Semantic UI</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
    <!-- Add custom stylesheet here -->
  </head>
  <body>

Another approach to installation is to use your command line and npm to directly install Semantic UI. "Semantic UI uses Gulp to provide command line tools for building themed versions of the library with just the components you need." To begin you install Gulp:

npm install -g gulp

Then you install Semantic UI, cd into it and run a gulp build, like so:

npm install semantic-ui --save cd semantic/ gulp build

Finally, you will add Semantic UI to your HTML like before:

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>

The benefit to manually installing Semantic UI vs. adding it directly to your HTML is that you will be able to run updates with npm:

npm update

Application

Semnatic UI presents itself as "a development framework that helps create beautiful, responsive layouts using human-friendly HTML." In my experience with the framework I found this to be true, it is very "human-friendly" and generally easy to manipulate. Like most other frameworks, you change the class of the feature you are trying to style. Unlike some other frameworks, the names are very intuitive and make application relatively simple. The below example shows how easy it is to make ui styled buttons that have active features. Note the pluralization of the button keyword to denote multiple buttons.

Generally speaking, Semantic UI can be created by adding a class of "ui + whatever you are trying to create" i.e. class="ui button", class="ui form", class="ui card". The card styling in particular is one of my favorite features of the framework.

Accomplished like so:

<div class="ui card">
  <div class="image">
    <img src="/images/avatar2/large/kristy.png">
  </div>
  <div class="content">
    <a class="header">Kristy</a>
    <div class="meta">
      <span class="date">Joined in 2013</span>
    </div>
    <div class="description">
      Kristy is an art director living in New York.
    </div>
  </div>
  <div class="extra content">
    <a>
      <i class="user icon"></i>
      22 Friends
    </a>
  </div>
</div>

The specific elements on each card are highly editable and will all be contained within the larger ui card class container. My colleague Beth Fekadu and I recently employed this method to our recipe app project, adding a like, delete, and show detail button.

Cards can be placed inline with each other by simply pluralizing the cards and setting the number you would like in a row. Ex: ui three cards.

The possibilities of Semantic UI styling are nearly endless and expand far beyond the scope of this blog, however, I will quickly list a few of my other versatile favorites.

Menus are sleek and simple:

<div class="ui three item menu">
  <a class="active item">Editorials</a>
  <a class="item">Reviews</a>
  <a class="item">Upcoming Events</a>
</div>

Search bars are clean and easy:

<div class="ui search">
  <div class="ui icon input">
    <input class="prompt" type="text" placeholder="Common passwords...">
    <i class="search icon"></i>
  </div>
  <div class="results"></div>
</div>

Labels can be very stylized:

<a class="ui blue image label">
  <img src="/images/avatar/small/veronika.jpg">
  Veronika
  <div class="detail">Friend</div>
</a>
<a class="ui teal image label">
  <img src="/images/avatar/small/jenny.jpg">
  Veronika
  <div class="detail">Student</div>
</a>
<a class="ui yellow image label">
  <img src="/images/avatar/small/christian.jpg">
  Helen
  <div class="detail">Co-worker</div>
</a>

How to edit and overwrite

As nice as the Semantic UI formatting is, there will be times when you want to add to, edit, and manipulate your CSS further. This is generally accomplished by adding your custom css class in alongside you Semantic UI class.

.center-text {
  text-align: center;
}

<div class="ui card center-text"></div>

Additionally, you can overwrite the actual UI setting like so:

.ui.cards > .card {
  background-color: purple;
}

These are two methods to develop a working balance between your own CSS and the Semantic UI.

Integrations

A feature of Semantic UI that I haven't had the chance to utilize are the built-in integrations. "Semantic has integrations with React, Angular, Meteor, Ember and many other frameworks to help organize your UI layer alongside your application logic." I hope to utilize the React integration more in the near future, but my understanding is that the integrations come with a more prescriptive style in which component names are set and strict. It seems that this can lead to cleaner code with fewer nested components.

Themes

In addition to the default style, Semantic UI also has theming based off of popular frameworks and websites:

Conclusion

Semantic UI offers a simplified and intuitive way to style your HTML (or React components). Clean and beautiful styles can be achieved simply by naming your classes based on intuitive and "human-friendly" conventions.

Happy styling!

Sources:

Install
Semantic UI Docs

React's useState Hook

Hannah Glazier — Wed, 02 Mar 2022 14:49:46 +0000

Introduction

As you begin your journey into the world of React you will find there are many things that this framework simplifies. However, there are also some key components (no pun intended) that can be difficult to wrap your head around in the beginning. Things like syntax and JSX often solidify themselves through practice and repetition, but concepts like state and hooks can greatly hinder your learning progress if you do not have a strong foundational understanding. It is my aim to explain and simplify the concept of React state and discuss how to use the useState hook.

State

State is the special ingredient that gives React its reactiveness. It is the unique tool that enables React to re-render particular parts of a page or program, while leaving the rest unchanged. Technically speaking, state is a built in object in a React component. "The state object is where you store property values that belongs to the component.When the state object changes, the component re-renders." State makes React dynamic and hooks are what allow us to utilize (hook into) state.

`useState` Walkthrough

Hooks are built-in functions in React that allow us to manage and manipulate state. One of the most common hooks is the useState hook. "The useState() is a Hook that allows you to have state variables in functional components. " In order to access useState, we need to import it like so:

import React, { useState } from "react";

Once imported, the useState function takes the initial state as an argument and returns an array that contains the current state and a setter function that will be used to update state. Some consideration should be taken when determining your initial state. It is important to ask yourself what type of data you would like to return, is it a string, a boolean, an array? Determining this from the beginning can help to avoid running into bugs later on.

const [state, setState] = useState(initialState)

const [count, setCount] = useState(0)

It is important to note that state must be initialized at the very top of the component.

function Counter() {
  const [count, setCount] = useState(0);

  return <button>{count}</button>;
}

After we have initialized state at the top of the component, it is time to use our setter function!

  function increment() {
    setCount((count) => count + 1);
  }

An important aspect of state is the fact that it is asynchronous. Because of this, it is important to use a callback function in your setter function when your state update is dependent on the previous state (like with a counter or like button). Using a callback makes it so your state is updated based on the previous state instead of continually updating the same initial state.

Finally, in order to implement your state on the DOM you will need to add it to your returned JSX. For our counter example, this would mean adding a onClick to our button that calls on our increment function and then adding the count as the button's text content.

return <button onClick={increment}>{count}</button>

Make sure that you are encasing all javascript syntax inside of curly braces {} when you are applying them to your JSX. This can be an easy syntax step to forget!

When to use `state`

So now that we have a better understanding of how to use state, we need to learn how to determine when we should use state. The React docs give us three questions to ask ourselves when determining if something is state or not.

Is it passed in from a parent via props? If so, it probably isn’t state.

Does it remain unchanged over time? If so, it probably isn’t state.

Can you compute it based on any other state or props in your component? If so, it isn’t state.

All of these tests need to fail in order for something to be eligible for state. If it is inherited by a child from a parent component as a prop, it will be considered immutable and therefor not state. If it remains unchanged overtime it isn't state as there are no state-like changes to manage. Finally, if it can be computed in any other way, you won't want to use state.

Conclusion

React's state is a powerful feature that can give us a multitude of dynamic behaviors. State has the unique ability to re-render the specific parts of a page the need changes, and leave the rest untouched. State is managed with hooks like the useState hook and always initialized at the top of a React component. It is important to note that with the power of React state can come a lot of complexity and because of this state should be used sparingly. You should always ask yourself React's three state-determining questions before implementing a state hook.

Sources:

https://reactjs.org/docs/thinking-in-react.html
https://www.geeksforgeeks.org/what-is-usestate-in-react/
https://www.w3schools.com/react/react_state.asp

A Function With No Name

Hannah Glazier — Wed, 16 Feb 2022 21:54:50 +0000

Anonymous functions in JavaScript, how and when to use them.

As I settle into my early developer days and adjust to this new and confusing learning path, I am noticing some common confusions and sticking points amongst me and my fellow learners. Anonymous functions, in particular, have been a big roadblock for me. You are navigating the new world of function declarations and function expressions and then, BOOM, you are hit with the doozy that is anonymous functions! Whether you are in college, self-teaching, or going the bootcamp route like me, these nameless little first-class objects are bound to cause some confusion. So, let's try and unpack the how's, whys, and when's of anonymous functions.

Let's first take a few steps back and go over JavaScript functions in general. In JavaScript, functions act as our little helper tools used to manipulate, test, and analyze our data. We can create and use functions for all manner of things. At the base level, we can call on them to simply print our data to the console and aid us in checking our work, or we can go as far as to employ them to change our data entirely.

Named Functions:

function iHaveAName (){
  console.log('I have a name!')
};

iHaveAName();

function iAlsoHaveAName(name){
  return `My name is ${name}`
};

iAlsoHaveAName('name');

These functions both have names and, providing they are in the global scope, these names and functions can be called on at any time. *** It should be noted that functions can also have or not have parameters. Named functions are particularly useful for dynamic code in which you will be reusing and calling on the same function multiple times for a variety of uses.

So if we want to name functions for reusability, when do we want to employ anonymous functions? Let's start with the definition:

"An anonymous function is a function that is not tied to any identifier."

The most common use for anonymous functions is as a callback function. A callback function is a function nested inside (or called upon by) another function. Anonymous functions are generally saved for when we only want to use the function once(i.e. as a callback), in a very specific instance, so it doesn't need to be accessed in any outside scope.

Anonymous Function as a Callback:

btn.addEventListener('click', function() {
  btn.innerText = "I have been clicked!"
})

This function is adding an event listener to a button so that it will respond when clicked. The anonymous function is called as the second argument and changes the button's text to "I have been clicked!" when it is clicked. Because this response is only needed for this specific button, we are able to use the anonymous function inside of the larger function. It doesn't need a name because it will not be used anywhere else. If we wanted this response for multiple buttons, we could give the function a name like, clickResponse(), and declare it in the global scope to be called upon at any point.

Another way to accomplish this is to use a different type of anonymous function, the arrow function.

"An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations."

All arrow functions are anonymous functions and they take their anonymous nature to the next level and don't even require the function keyword!

Arrow Functions:

btn.addEventListener('click', () => btn.innerText = 'I have been clicked!')

This function performs the exact same task as the previous function, but it doesn't require the function keyword and it can be all on one line. Arrow functions are a great way to simplify and clean up your code when you only need them to accomplish a simple task.

There is one final type of anonymous function that I want to touch on (because I found it super confusing) and that is the anonymous function expression. They are written as such:

Anonymous Function Expression:

const whatsInAName = function(){
  console.log('I am anonymous!')
};
whatsInAName();

At first glance, it looks like this function is a named function because it is set to a variable. However, the function doesn't actually begin until the right of the "=" which makes it anonymous! These types of functions require the function keyword and can be called on as callbacks or in other places in your code, as long as they are within the correct scope.

The large variety of functions can be confusing in the beginning and you will often find yourself questioning which type is appropriate for your current task. A good rule of thumb is to name your functions when you want them to be reusable and dynamic. When your functions only need a limited scope (like with a callback) or you are trying to simplify your code, you should utilize anonymous functions.

DEV Community: Hannah Glazier

Common Beginner Sorting Algorithms in JavaScript

Sorting Algorithms

Bubble Sort

Selection Sort

Insertion Sort

Conclusion

Sources

Common Searching Algorithms in JavaScript

Linear Search

Binary Search

Naive String Search

Sources

Rails Validators - A Quick Guide and Cheatsheet

What Triggers a Validation?

Common Built-in Validation Methods

Custom Validations

Error Handling

Conclusion

-Sources-

Coding and Human-Language Access

Multilingual Coding Languages

Localized Programming Languages

Documentation and Community

The Source

Conclusion

Resources:

The Semantics of Semantic UI

Introduction

Install

Application

How to edit and overwrite

Integrations

Themes

Conclusion

Sources:

React's useState Hook

Introduction

State

useState Walkthrough

When to use state

Conclusion

Sources:

A Function With No Name

Anonymous functions in JavaScript, how and when to use them.

Named Functions:

Anonymous Function as a Callback:

Arrow Functions:

Anonymous Function Expression:

`useState` Walkthrough

When to use `state`