Forem: Tiberius Mairura

Regular Expression Denial of Service (ReDoS)

Tiberius Mairura — Fri, 23 Jun 2023 07:15:20 +0000

Semver vulnerabilities again! I do not have the energy to wrestle with the breaking changes it is introducing in my projects.

How are you dealing with the vulnerability in your applications?

What is AWS?

Tiberius Mairura — Fri, 16 Dec 2022 19:52:44 +0000

Hey there techies!

Are you tired of trying to figure out what the heck AWS stands for? Well, fear not my friends, because I am here to enlighten you with my take on Amazon Web Services (AWS).

First of all, AWS is a cloud computing platform that offers a ton of services for businesses and individuals alike. It allows you to run and store your applications, data, and other resources in the cloud. This way, you don't have to worry about setting up and maintaining your own physical servers.

But let's be real, the acronym AWS could stand for a lot of things. Maybe it's the "Awesome Web Service" or the "All-Seeing Wizard of the Skies." Or perhaps it's the "Amazing Wombat Sanctuary" or the "Amateur Wine Sommelier." The possibilities are endless.

Now, let's dive into some code snippets to give you a better understanding of what AWS can do.

Say you want to create a virtual machine in the cloud. You can use the AWS EC2 service to do just that. It's as simple as this:

import boto3

ec2 = boto3.resource('ec2')

instance = ec2.create_instances(
    ImageId='ami-0b33d91d',
    MinCount=1,
    MaxCount=1,
    InstanceType='t2.micro'
)

print(instance[0].id)

And boom! You now have a virtual machine running in the cloud. It's like magic, except it's actually just the power of AWS.

But wait, there's more! AWS also offers services for storage, database management, analytics, machine learning, and so much more. It's like a one-stop shop for all your cloud computing needs.

One of the great things about AWS is that it's constantly expanding and adding new services to its arsenal. For example, have you ever wanted to build a chatbot that can answer customer inquiries and complaints 24/7? Well, with AWS Lex, you can do just that.

import boto3

lex = boto3.client('lex-runtime')

response = lex.post_text(
    botName='CustomerServiceBot',
    botAlias='latest',
    userId='unique_user_id',
    inputText='Can you help me with my order?'
)

print(response['message'])

Imagine having a chatbot that can handle all of your customer interactions while you sleep. That's the power of AWS Lex.

Another cool service offered by AWS is Lambda, which allows you to run code without the need to worry about infrastructure. All you have to do is write your code, upload it to Lambda, and it will execute it for you. No servers, no maintenance, no hassle.

import boto3

def handler(event, context):
    return 'Hello, World!'

lambda_client = boto3.client('lambda')

response = lambda_client.invoke(
    FunctionName='hello_world',
    InvocationType='RequestResponse',
    Payload=b'{}'
)

print(response['Payload'].read())

With Lambda, you can focus on writing code and let AWS handle the rest. It's like having a team of magical elves working behind the scenes to make your life easier.

Here is a list of the most common services on AWS

Amazon Elastic Compute Cloud (EC2) - a web service that provides secure, resizable compute capacity in the cloud.
Amazon Simple Storage Service (S3) - an object storage service that offers industry-leading scalability, data availability, security, and performance.
Amazon Relational Database Service (RDS) - a managed database service that makes it easy to set up, operate, and scale a relational database in the cloud.
Amazon Elastic Container Service (ECS) - a fully managed container orchestration service that makes it easy to run and scale containerized applications.
Amazon Lambda - a serverless compute service that runs your code in response to events and automatically manages the underlying infrastructure.
Amazon DynamoDB - a fast and flexible NoSQL database service for all applications that need consistent, single-digit millisecond latency at any scale.
Amazon Elastic Container Registry (ECR) - a fully managed Docker container registry that makes it easy for developers to store, manage, and deploy Docker container images.
Amazon Elastic Kubernetes Service (EKS) - a fully managed Kubernetes service that makes it easy to deploy, manage, and scale containerized applications using Kubernetes.
Amazon CloudWatch - a monitoring service for resources and applications in AWS, providing data and actionable insights to optimize performance, reduce cost, and improve availability.
Amazon Simple Queue Service (SQS) - a fully managed message queuing service that enables you to decouple and scale microservices, distributed systems, and serverless applications.

So there you have it, just a few examples of the amazing services offered by AWS. Whether you're a business looking to scale your operations or an individual looking to run your own projects in the cloud, AWS has something for everyone. Happy cloud computing!

Strong Parameters in Rails?

Tiberius Mairura — Fri, 16 Dec 2022 19:29:56 +0000

Ah, strong parameters in Rails

The magic charm that allows developers write spell-bound code. Just kidding, they're actually a pretty useful tool for protecting your application from malicious user input. But let's be real, they can still be a pain to deal with at times.

So, what are strong parameters exactly? Essentially, they're a way to specify which parameters are allowed to be passed through to your controller actions. This helps prevent attackers from injecting harmful data into your application.

Let's say we have a form that allows users to create a new post. We want to allow them to specify the title and body of the post, but we don't want them to be able to set the published attribute. Without strong parameters, anyone could just send a POST request with a published parameter set to true and voila, they've published a post without your permission.

Here's an example of how we can use strong parameters to only allow the title and body attributes to be passed through:



def create
  params.require(:post).permit(:title, :body)
end

This will ensure that only the title and body attributes are allowed to be passed through to the create action. Any other attributes will be filtered out.

But wait, there's more! You can also specify which attributes are required by using the require method. For example:



def create
  params.require(:post).permit(:title, :body).require(:title)
end

This will ensure that the title attribute is not only permitted, but also required. If the title attribute is not present, the controller action will raise a ActionController::ParameterMissing error.

Now, I know what you're thinking. "This is all well and good, but what if I have a bunch of nested attributes that I want to permit? Do I have to write out every single attribute individually?"

Fear not, my fellow developer friend! Rails has introduced the permit! method, which allows you to permit all attributes and nested attributes. Just be careful with this one, as it can potentially open up your application to malicious input if used improperly.



def create
  params.require(:post).permit!
end

There you have it, a quick overview of strong parameters in Rails.They may seem like a nuisance at times, but trust me, they're worth the effort in the long run to keep your application secure. Happy coding!

Introduction to HTML DOM

Tiberius Mairura — Fri, 16 Dec 2022 07:12:11 +0000

Introduction to the DOM

What is the DOM?

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document as a tree of objects, with each object representing a part of the document (such as an element, an attribute, or a piece of text).

How does it represent an HTML or XML document as a tree of objects?

Each element in an HTML or XML document is represented as a node in the DOM tree. The root node of the tree represents the document itself, and the child nodes of the root node represent the elements in the document. Each element node may have further child nodes representing its attributes, child elements, and text content.

Why is it useful to be able to manipulate the DOM programmatically?

The DOM allows you to manipulate the content and structure of a document programmatically, using languages such as JavaScript. This allows you to create dynamic and interactive web pages, as you can update the page's content and layout in response to user input or other events.

Accessing Elements

How to use getElementById to access an element by its unique ID
The getElementById method returns the element with the specified ID from the DOM. It returns a single element, or null if no element with the specified ID exists.
Example:
Copy code

const element = document.getElementById('my-element');

How to use getElementsByTagName to access a group of elements by their tag name

The getElementsByTagName method returns a list of elements with the specified tag name from the DOM. It returns a live HTMLCollection, which means that it updates automatically as elements are added or removed from the DOM.
Example:

const elements = document.getElementsByTagName('p');

How to use querySelector to access an element using a CSS selector

The querySelector method returns the first element that matches the specified CSS selector from the DOM. It returns a single element, or null if no element matches the selector.
Example:

const element = document.querySelector('#my-element .my-class');

Modifying Elements

How to use innerHTML to modify the content of an element
The innerHTML property represents the HTML content of an element. You can use it to get or set the HTML content of an element.
Example:

element.innerHTML = '<p>Hello, World!</p>';

How to use setAttribute to modify an attribute of an element

The setAttribute method sets the value of an attribute on an element. It takes two arguments: the name of the attribute and the value to set.
Example:

element.setAttribute('href', 'http://example.com');

How to use style to modify the style of an element

The style property represents the inline style of an element. You can use it to get or set the style of an element using JavaScript.
Example:

element.style.color = 'red'

Traversing the DOM Tree

How to use parentNode, nextSibling, and previousSibling to navigate between elements in the DOM tree

The parentNode property returns the parent node of an element.
The nextSibling property returns the next sibling node of an element (i.e., the next node at the same level in the DOM tree).
The previousSibling property returns the previous sibling node of an element (i.e., the previous node at the same level in the DOM tree).
Example:

const parent = element.parentNode;
const next = element.nextSibling;
const previous = element.previousSibling;

How to use childNodes to access the children of an element

The childNodes property returns a list of the child nodes of an element. It returns a live NodeList, which means that it updates automatically as nodes are added or removed from the element.
Example:

const children = element.childNodes;

Adding and Deleting Elements

How to use createElement to create a new element

The createElement method creates a new element with the specified tag name.
Example:

const newElement = document.createElement('div');

How to use appendChild to add an element as a child of another element

The appendChild method adds an element as the last child of another element.
Example:

element.appendChild(newElement);

How to use removeChild to delete an element from the DOM

The removeChild method removes an element from the DOM. It removes the element from its parent node, and also from the DOM tree.
Example:

element.removeChild(newElement);

Handling Events

What are events in the context of the DOM?
Events are actions or occurrences that happen in the DOM, such as a user clicking a button or a form being submitted. The DOM allows you to attach event listeners to elements, which allows you to execute code in response to events.

How to use addEventListener to attach an event listener to an element

The addEventListener method attaches an event listener to an element. It takes three arguments: the type of event to listen for, the function to be called when the event occurs, and an optional options object.
Example:

element.addEventListener('click', () => {
  console.log('element was clicked');
});

Examples of common events, such as clicks, hover, and form submissions
Some common events that you might want to listen for include:
click: triggered when an element is clicked
mouseover and mouseout: triggered when the mouse enters or leaves an element
submit: triggered when a form is submitted
focus and
blur: triggered when an element receives or loses focus

Working with Documents

How to use document.title to access and modify the title of a document

The title property of the document object represents the title of the document. You can use it to get or set the title of the document.
Example:

document.title = 'My Page';

How to use document.body to access and modify the body of a document

The body property of the document object represents the body of the document. You can use it to access and modify the body of the document.
Example:

document.body.style.backgroundColor = 'red';

Other useful properties and methods for working with documents

Some other useful properties and methods for working with documents include:

document.head: returns the head element of the document

document.forms: returns a list of the form elements in the document

document.scripts: returns a list of the script elements in the document

document.getElementsByClassName: returns a list of elements with the specified class name

document.getElementsByName: returns a list of elements with the specified name

document.querySelectorAll: returns a list of elements that match the specified CSS selector

Working with Variables in Ruby

Tiberius Mairura — Sun, 04 Dec 2022 19:58:58 +0000

Working with Variables in Ruby

Variables are an essential part of any programming language, and Ruby is no exception. Variables are used to store data that can be used throughout a program. In Ruby, variables are declared using the assignment operator (=).

For example, if we wanted to create a variable called "name" and assign it the value "John", we would write:

name = "John"

This statement creates a variable called "name" and assigns it the value of "John". We can then use this variable throughout our program. For example, if we wanted to print out the value of the variable, we could write:

puts name

This would print out "John".

Variables in Ruby can also be used to store different types of data. For example, if we wanted to store a number in a variable, we could write:

 number = 5

This statement creates a variable called "number" and assigns it the value of 5. We can then use this variable throughout our program. For example, if we wanted to add two numbers together, we could write:

sum = number + 10

This statement creates a new variable called "sum" and assigns it the value of 15 (5 + 10).

Variables in Ruby can also be used to store objects. For example, if we wanted to create an array of strings, we could write:

names = ["John", "Jane", "Joe"]

This statement creates a variable called "names" and assigns it the value of an array containing the strings "John", "Jane", and "Joe". We can then use this variable throughout our program. For example, if we wanted to print out the first element of the array, we could write:

puts names[0]

This would print out "John".

Variables in Ruby can also be used to store the result of a method call. For example, if we wanted to get the length of a string, we could write:

length = "John".length

This statement creates a variable called "length" and assigns it the value of 4 (the length of the string "John"). We can then use this variable throughout our program. For example, if we wanted to print out the length of the string, we could write:

puts length

This would print out 4.

Variables in Ruby can also be used to store the result of a block. For example, if we wanted to get the sum of all the elements in an array, we could write:

sum = [1, 2, 3].inject(0) { |total, n| total + n }

This statement creates a variable called "sum" and assigns it the value of 6 (the sum of all the elements in the array). We can then use this variable throughout our program. For example, if we wanted to print out the sum of the elements in the array, we could write:

puts sum

This would print out 6.

Variables in Ruby can also be used to store the result of a conditional statement. For example, if we wanted to check if a number is greater than 5, we could write:

result = (number > 5) ? "Yes" : "No"

This statement creates a variable called "result" and assigns it the value of "Yes" if the number is greater than 5, or "No" if the number is not greater than 5. We can then use this variable throughout our program. For example, if we wanted to print out the result of the conditional statement, we could write:

puts result

This would print out either "Yes" or "No", depending on the value of the number.

In summary, variables in Ruby are an essential part of any program. They can be used to store different types of data, such as numbers, strings, objects, and the result of a method call or block. They can also be used to store the result of a conditional statement. By using variables, we can make our programs more efficient and easier to read.

Next, you should learn about Ruby data types

Relevant Links:

https://www.tutorialspoint.com/ruby/ruby_variables.htm
https://www.rubyguides.com/2018/10/ruby-variables/
https://www.techotopia.com/index.php/Ruby_Variables

What is VueJS

Tiberius Mairura — Wed, 30 Nov 2022 19:14:18 +0000

Vue is a progressive framework for building user interfaces. It is also one of the most popular frameworks among developers. It's simple, flexible, and has the ability to change as the project demands.

Vue provides a declarative, easy-to-learn syntax. It also provides reactive data binding and a simple API for managing the application state.

Some of the best use cases for Vue are:

Building web applications with single page applications
Creating interactive web apps
Creating mobile apps

VueJS vs ReactJS

Vuejs and Reactjs are both JavaScript libraries for building user interfaces. They are often compared to each other, as they have many similarities. They both use virtual DOM and can be used with a variety of different tools. The choice between the two is often based on personal preference, but there are some differences that should be considered.

Vuejs is more compact and easier to learn than Reactjs, which makes it a good choice for beginners. Vuejs also has an advantage in terms of size when it comes to the final bundle size, making it a better choice if you're looking for something lightweight that will not take up too much space in your project. However, Reactjs has more flexibility as it allows you to use JSX or ES6 syntax.

Vue.js is an open-source library that helps you create interactive web interfaces with a component-based approach that offers simple API and great performance out of box. It also provides data binding capabilities and routing solution to help you build apps faster with less code.

The framework has been growing rapidly in popularity over the last few years because of its simplicity and ease of use, which make it perfect for new developers as well as experienced ones who want to build something quickly without sacrificing quality or performance.

With Vue’s simplicity, it’s a great choice for those looking to develop their skills in web development or create apps faster than other frameworks may allow them to do so.

React is a JavaScript library for creating user interfaces and applications with a minimal amount of code. React is more suitable for rendering single-page applications (SPA) whereas Vue excels in the creation of simple websites or web apps that use multiple pages.

React has been around longer than Vue and it has more backing from the community. It also has better documentation and tools but at the cost of being more complex than Vue which can be appealing to developers who are new to this field.

Testing in Ruby

Tiberius Mairura — Wed, 30 Nov 2022 17:03:22 +0000

Testing your Ruby code with Unit and Integration testing libraries 🤩

Writing test cases is one way to ensure that your code behaves as expected, but it can be very time consuming.
That's why I'm excited to share the latest libraries I'm using to make testing my Ruby code easier and faster.
Unit testing libraries like Minitest and RSpec allow developers to precisely test small pieces of their code (e.g. a single method) and integration testing libraries like Capybara help you run tests on entire web applications by simulating user actions.
These tools are incredibly useful for finding bugs in your code that might not be obvious at first glance!

Rspec

Have you ever been amazed by the power of RSpec unit tests written in Ruby code? Try it out and you'll be hooked!
When we write RSpec tests, we specify a set of expectations that define the expected behavior of our application. We can also use them to test for edge cases such as unexpected inputs and other scenarios that may cause our app to crash or respond strangely.
RSpec uses a DSL (domain specific language) to describe each test. This allows us to write expressive tests that are readable by non-technical people as well.
With RSpec, we can ensure that our application behaves correctly in all scenarios, so we can focus on developing features knowing that our code is reliable.
Give it a try and see how powerful and fun writing unit tests can be!

Capybara

If you're an aspiring Ruby developer, you never want to miss the opportunity for integration testing with Capybara. Not only is it autonomous and easy to use, but it also makes testing more efficient and successful. This forward-thinking tool supports cross-browser functionality, accurately simulates user interaction on your website, and even has its own DSL. With Capybara, you can be rest assured that your code is running exactly as it should - and that's something every Ruby developer should be excited about!

It's the perfect way to make sure your applications are working as expected, from logging in to filling out forms to clicking buttons - it covers it all.
Integration testing with Capybara is fast, effective and provides you with a comprehensive overview of how the application is going to work once released. It also ensures that everything from the front end design down to the backend functionality is working as expected - and that's what makes it so great.
Start taking advantage of Capybara for your integration testing today! 💻

What you need to know before using Ruby on Rails

Tiberius Mairura — Wed, 30 Nov 2022 13:18:31 +0000

Ruby on Rails

Dive into backend development with Ruby on Rails and experience a world of possibilities! 🤩

Ruby on Rails is a powerful open-source web application framework written in Ruby. It follows the Model View Controller (MVC) architecture, allowing developers to quickly build robust applications that can handle complex tasks.

With Ruby on Rails, you can create dynamic websites and applications that are faster to launch, easier to maintain and secure. You’ll also benefit from an expansive library of gems to help you extend the functionality of your apps or even get started with development quicker.

So, if you’re looking to get into backend development, why not give Ruby on Rails a try? With its amazing features and flexibility it can offer, there’s no telling what you could develop!

Key Features of Ruby on Rails

Ready for the ultimate developer power-up?

Ruby on Rails is here with an unprecedented set of features that will turbocharge your productivity and help you develop amazing applications!

Here's why:

Robust MVC architecture: create simple, maintainable codebases with a clear separation between models, views and controllers.
Secure out-of-the box: Rails comes with built-in security features such as automatic CSRF protection and XSS prevention.
Simple testing processes: write tests quickly and cleanly by leveraging test helpers and built-in assertions.
Powerful ORM capabilities: connect to databases easily with ActiveRecord; manage records, perform complex queries and much more.

With Ruby on Rails, you can blaze through complex projects at lightning speed - get ready for your development journey to hit warp speed!

Ah, Ruby on Rails...

It's the framework we can all love to hate.

Sure, it can help you to quickly build a web application and get prototypes off the ground faster than ever before.

But don't be fooled, there are downsides.

For one, the language is often seen as too 'opinionated' which means that it can be difficult to customize the code.

Also, since it's so popular, many potential security issues have been overlooked.

And of course, with all that flexibility comes complexity - particularly when dealing with larger applications or multiple databases.

So if you're looking for a versatile and reliable platform for your next project, you might want to do a bit of research before going all-in on Ruby on Rails!

Array Methods in JavaScript

Tiberius Mairura — Wed, 05 Oct 2022 08:25:26 +0000

In JavaScript, an array is an Object and not a primitive data type that allows one to store collections of items in one variable.

Core Characteristics of Arrays

Arrays are zero-indexed. This means the first element of an array will be at index 0 and the last element will be at the length of the array minus 1.
Arrays in JavaScript are flexible. This means they can grow or shrink in size as opposed to being rigid to the initially declared size.
Arrays in JavaScript are not associative, i.e, they do not appear in key-value format and thus can only be accessed by their indices.
Copy operations on JavaScript arrays will only create shallow copies and not deep copies.

The Array Constructor

Array objects are created in JavaScript by invoking Array() which is the array constructor.

The constructor can take zero or more arguments. If only one integer argument is passed, the constructor creates an array with empty slots equal to the integer provided as argument.

Have a look here:

let nums = Array(10);

console.log(nums);
// => [ <10 empty slots> ]

Note that they are empty slots and not undefined values.

If the constructor is given comma separated arguments, it creates an array array containing the arguments given.

Here is an example of how to use the constructor:

let nums = Array(1, 2, 3);

console.log(nums);
// => [1, 2, 3]

However, the common way to create array objects is by using the array leteral. Here is an example:

let nums = [1, 2, 3];

console.log(nums);
// => [1, 2, 3]

Array Instance Properties

Array.prototype.length

Every array instance has the length property which when invoked returns a number equal to the length of the array which is equivalent to the total number of elements in the array.

Let us see the property in action:

// Declare the array and assign 3 elements
let myArray = ["John", "Lucy", "Anjette"];

// Get the array length and save
let arrayLength = myArray.length;

console.log(arrayLength);
// => 3

Array Methods

JavaScript arrays has several methods. Let us get to know them!

Static Methods

These are methods that belong to Array class.

Array.from()

This method creates a shallow copy of an Array instance from an array-like or an iterable object like a string.

Here's an example:

let array_of_letters = Array.from("letters");
console.log(array_of_letters);
// => [ "l", "e", "t", "t", "e", "r", "s" ]

Array.of()

This method creates a new a array instance containing the number of arguments given to it.

Here is an example:

let nums = Array.of(10);
console.log(nums);
// => [ <10 empty slots> ]

Notice that unlike the Array constructor, the Array.prototype.of() method created an array with only one element, 10. The constructor, on the other hand could have created a new array with 10 empty slots.

Here is an example:

let num = Array.of(5);
console.log(num.length);
// => 1;

let nums = Array(10);
console.log(nums.length);
// => 10

Array.isArray()

This method takes in one argument and returns true if the value of the argument evaluates to an array.

Here is how it works:

// Declare the array and assign elements
let myNumbers = [1, 2, 3, 4, 5];

// Get the new array
let isArray = myNumbers.isArray(myNumber);

console.log(isArray);
// => true;

It returns false if the value of the arguments evaluates to a non-array object.

// Declare the array and assign elements
let myNumbers = "Not an Array!";

// Get the new array
let isArray = myNumbers.isArray(myNumber);

console.log(isArray);
// => false;

Array Instance Methods

The are methods that can be invoked on array instances.

Array.prototype.entries()

When invoked on an array object, this method returns a new array iterator consisting key/value pairs for all elements in the array. The key will be the index and the value is the actual element at that index.

Here is the method in action:

// Declare the array and assign 3 elements
let myArray = ["John", "Lucy", "Anjette"];

// Get the entries
let arrayEntries = myArray.entries();

for (const entry of arrayEntries) {
  console.log(entry);
}
// => [0, "John]
// => [1, "Lucy"]
// => [2, "Anjette"]

You can use the next() method to access the entries:

let nextElement = arrayEntries.next().value;
console.log(nextElement);
// => Array [ 1, "Lucy" ]

Array.prototype.keys()

When invoke on an array, the keys() method returns an Array iterator consisting of the keys correcsponding to each of the indices of the elements in the array.

Here is an example:

let nums = [1, 2, 3, 4, 5];
let num_keys = nums.keys();
for (const key of num_keys) {
  console.log(key);
}
// => 0
// => 1
// => 2
// => 3
// => 4

Array.prototype.values()

This method is similar to Array.prototype.keys, except that instead of returning the indices, it returns an array iterator containing the -values of each element of the array.

Here is an example:

let nums = [1, 2, 3, 4];

let num_values = nums.values();
for (const key of num_values) {
  console.log(value);
}
// => 1
// => 2
// => 3
// => 4

Array.prototype.every()

The every() method returns a Boolean value, true, when all elements in the array on which the method was invoked fulfills the testing condition.

Here is how it works:

// Declare the array and assign 4 elements
let myNumbers = [-1, -3, -7, -2];

// Define a testing condition
const numberIsNegative = (number) => number < 0;

// Get the entries
let result = myNumbers.every(numberIsNegative);

console.log(result);

The method returns false if the condition fails.

Array.prototype.some()

This method tests if any member of an array it is invoked on passes a given condition. It takes in a callback function which executes on each iteration and returns true if any of the elements passes the condition or false if none of the elements passes condition.

Here is an example:

let nums = [1, 2, 3, 4, 5];
let odd_nums = nums.some((num) => num % 2 !== 0);
console.log(odd_nums);
// => true

let nums = [1, 2, 3, 4, 5];
let num_greater_than_5 = nums.some((num) => num > 5);
console.log(num_greater_than_5);
// => false

Array.prototype.includes()

This method takes one argument, an element, and then returns true if the element given exists in the array object on which it is called.

// Declare the array and assign elements
let myNumbers = [1, 3, 3, 7, 2, 4, 96, 57];

// Get the new array
let elemIsMember = myNumbers.includes(4);

console.log(elemIsMember);
// => true;

If the element is not a member of the array, it returns false.

// Declare the array and assign elements
let myNumbers = [1, 3, 3, 7, 2, 4, 96, 57];

// Get the new array
let elemIsMember = myNumbers.includes(-4);

console.log(elemIsMember);
// => false;

Array.prototype.fill()

This method will populate an array object from the first to the last index with a static value.

Here is how it works:

// Declare the array and assign 4 elements
let mySuperHero = ["Wat", "Man", "Wonder", "Woman"];

// Fill with 'WatMan' from index 1 to index 4
let populatedSuperHero = mySuperHero.fill("WatMan", 1, 4);

console.log(populatedSuperHero);
// => ['Wat', 'WatMan', 'WatMan', 'WatMan'];

Array.prototype.forEach()

This method executes a callback fuction once for each iteration.

// Declare the array and assign elements
let myNumbers = [1, 3, 3, 7];

//Print each number to the console
myNumbers.forEach((number) => console.log(number));
// => 1
// => 3
// => 3
// => 7

You can also access the index of the current element by passing the second argument to the callback function:

myNumbers.forEach((number, index) => console.log(`${index}: ${number}`));

Array.prototype.map()

The map method returns a new and transformed array consisting of all the elements of the array it was called on. The method takes in as the first argument a callback function that is called once for each iteration in order. The callback function is never invoked for indices whose elements have been deleted or not yet set.

Since the map method creates a new array, avoid using this method in case you are not going to use the generated array. Instead, consider using more generic functions like Array.prototype.forEach() or for...of.

The best use case for Array.prototype.map() is when you want to iterate over all the element of an array and make modifications without altering the original array.

Here is an example:

let nums = [1, 2, 3, 4, 5];
let nums_doubled = nums.map((num) => num * 2);
console.log(nums);
// => [1, 2, 3, 4, 5];
console.log(nums_doubled);
// => [2, 4, 6, 8, 10];

Array.prototype.filter()

This methods returns a modified array consisting of all elements that pass a testing condition i.e the "filter".

Here is how it works:

// Declare the array and assign elements
let myNumbers = [1, 8, 3, 7, 2, 4, 96, 57];

// Fill out out only even numbers
let evenNumbersOnly = myNumbers.filter((number) => number % 2 == 0);

console.log(evenNumbersOnly);
// => [8, 2, 4, 96];

Array.prototype.reduce()

The methods executes a callback function for each iteration in order and returns a single value that summarizes the entire array on which it as called on.

The callback function takes two arguments: the previous value and the current value. If the initial value is not provided, the element at index 0 of the array is used as the initial value.

While the reduce function can be used on any array object, the simplest way to use the method is by summing up an array of numbers.

Here is an example:

let nums = [1, 2, 3, 4, 5];
let sum_of_nums = nums.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  0
);
console.log(sum_of_nums);
// =>  15

In cases where you need to use Array.prototype.filter() and Array.prototype.map() i.e Array.filter.map, it is advised to use Array.prototype.reduce() to achieve your desired functionality. This is more efficient since Array.filter.map iterates over the array twice which can be too expensive.

Overall, if your use case neither fits in Array.prototype.prototype.map() nor Array.prototype.filter(), consider using Array.prototype.reduce().

Array.prototype.reduceRight()

This method walks through each element of the array from right to left reducing it to a single value. It takes a callback function as the first argument which takes in two arguments: accumulator and currentValue.

Here is an example:

let nums = [
  [1, 2],
  [3, 4],
];
let nums_right_left = nums.reduceRight((accumulator, currentValue) =>
  accumulator.concat(currentValue)
);
console.log(nums_right_left);
// =>   [ 3, 4, 1, 2 ]

Array.prototype.flat()

This method, when invoked on an array object, it returns a new array object with all nested arrays concatenated into the the parent array up to the depth specified.

Here is how it works:

// Declare the array and assign elements
// We have [3, 7, 2, 4] and [57] as nested arrays
let myNumbers = [1, 3, [3, 7, 2, 4], 96, [57]];

// Flatten the array
let flattenedArray = myNumbers.flat();

console.log(flattenedArray);
// => [1, 3, 3, 7, 2, 4, 96, 57];

Let us try with a more deeper nested array

// Declare the array and assign elements
// We have [3, 7, 2, 4] and [57] as nested arrays
let myNumbers = [1, 3, [[[3, 7, 2, 4]]], 96, [57]];

// Flatten the array
let flattenedArray = myNumbers.flat(3);

console.log(flattenedArray);
// => [1, 3, 3, 7, 2, 4, 96, 57];

Array.prototype.flatMap()

This method returns a new array object after applying a callback function to each of the element in the array. The result is then flattened down by one level.

// Declare the array and assign elements
let myNumbers = [1, 3, 3, 7, 2, 4];

// Get the new array
let newArray = myNumbers.flatMap((number) => [number, number * 2]);

console.log(newArray);
//=> [1, 2, 3, 6, 3, 6, 7, 14, 2, 4, 4, 8];

This method is identical to map() followed by flat() of depth 1.

Array.prototype.at()

This method takes in one argument, a number, which should correspond to the position of an element in the array. When called on an array object, it returns an array element at the given index. It can take in negative numbers to indicate that you are counting from back of the array.

Let us have a look at how it works:

// Declare the array and assign 3 elements
let myArray = ["John", "Lucy", "Anjette"];

// Get the array element at index 1
let elementAtIndexOne = myArray.at(1);

console.log(elementAtIndexOne);
// => Lucy

Let us try to pass a negative index:

// Declare the array and assign 3 elements
let myArray = ["John", "Lucy", "Anjette"];

// Get the array element at index -1
let elementAtIndexOne = myArray.at(-1);

console.log(elementAtIndexOne);
// => Anjette

Array.prototype.findIndex()

When called on an array object, this method returns the first element that fulfills the testing condition. It returns -1 if there is no element in the array that satisfies the condition.

Here is how it works:

// Declare the array and assign elements
let myNumbers = [1, 3, 3, 7, 2, 4, 96, 57];

// Find index of number === 3
let index = myNumbers.findIndex((number) => number === 3);

console.log(index);
// => 1;

Array.prototype.indexOf()

This method returns the index of the first element that fulfills matches the passed in element.

Here is how it works:

// Declare the array and assign elements
let myNumbers = [1, 3, 4, 3, 7, 2, 4, 96];

// Get the new array
let indexOf = myNumbers.indexOf(4);

console.log(indexOf);
// => 2;

You can also pass in the index at which to such from as the second argument:

// Declare the array and assign elements
let myNumbers = [1, 3, 4, 3, 7, 2, 4, 96];

// Get the new array
let indexOf = myNumbers.indexOf(4, 3);

console.log(indexOf);
// => 6;

It return -1 if the element is not a member of the array:

// Declare the array and assign elements
let myNumbers = [1, 3, 4, 3, 7, 2, 4, 96];

// Get the new array
let indexOf = myNumbers.indexOf(-4);

console.log(indexOf);
// => -1;

NOTE:

The index to search from is optional
If the index given is greater than the length of the array, the method will return -1 indicating the array cannot be searched
If a negative index is passed, the array will still be searched from front to back
If no index is provided, the default index, 0, is used and thus the entire array is searched from index 0 to array.length - 1
The indexOf() uses the strict comparison (===) to compare the elements to be searched and the target element.

Array.prototype.lastIndexOf()

This method returns the last index at which a given element can be found. If the array does not contain the given element, it returns -1.

Note that this methods iterates over the elements in the array from the last index backwards.

let nums = [4, 1, 2, 3, 4, 5];
let last_index_of_4 = nums.lastIndexOf(4);
console.log(last_index_of_4);
// => 4

In the above snippet, the target element is at index 1 as well as index 4. However, the Array.prototype.lastIndexOf() method returns the last index, 4, of the element since it counts from the back of the array.

Array.prototype.unshift()

This method add one or more elements at the start of an array-like object. The method takes at least one argument and returns the new length of the modified array.

Here is an example:

let nums = [1, 2, 3, 4];

let modified_nums = nums.unshift(-1, 0);

console.log(modified_nums);

// => [-1, 0, 1, 2, 3, 4]

Array.prototype.push()

This method destructively adds one or more elements to the end of the array thus changing the length of the array. The method returns the new length of the array on which it was invoked.

let nums = [1, 2, 3, 4, 5];
let new_nums_len = nums.push(6);
console.log(new_nums_len);
// =>  6
console.log(nums);
// => [1, 2, 3, 4, 5, 6]

Array.prototype.pop()

This method destructively removes an element from the end of the array thus changing the length of the array. The method returns the removed element or undefined if the array is empty.

let nums = [1, 2, 3, 4, 5];
let removed_element = nums.pop();
console.log(removed_element);
// => 5
console.log(nums);
// => [1, 2, 3, 4]

Array.prototype.reverse()

The method destructively reverses the order of array elements it is invoked on in place.

In computer science, an in place algorithm refers to a procedure that transforms an input by the help of auxiliary data structures. Typically, the inputs is overwritten by the output as the procedure is executing.

Here is an example:

let nums = [1, 2, 3, 4];
let reversed_nums = nums.reverse();

console.log(reversed_nums);
// =>   [ 4, 3, 2, 1]

Array.prototype.shift()

This method destructively removes an element from the beginning of the array thus changing the length of the array. The method returns the removed element or undefined if the array is empty.

let nums = [1, 2, 3, 4, 5];
let removed_element = nums.shift();
console.log(removed_element);
// => [2, 3, 4, 5]

Array.prototype.slice()

This method non-destructively creates a shallow copy of an array containing elements from the original array starting from the start index to the end index, end index excluded.

let nums = [1, 2, 3, 4, 5];
let sliced_nums = nums.slice(0, 2);
console.log(sliced_nums);
// => [1, 2]

// The original array won't be modified
console.log(nums);
// => [1, 2, 3, 4, 5]

If only one argument is provided, the slice will copy all the elements from the index provided up to end of the array.

let nums = [1, 2, 3, 4, 5];
let sliced_nums = nums.slice(2);
console.log(sliced_nums);
// => [3, 4, 5]

If no argument is provided, the slice method simply copies everything over to a new array.

let nums = [1, 2, 3, 4, 5];
let sliced_nums = nums.slice();
console.log(sliced_nums);
// => [1, 2, 3, 4, 5]

Note that providing a negative index will have an effect of sliceing from the back of the array.

let nums = [1, 2, 3, 4, 5];
let sliced_nums = nums.slice(-2);
console.log(sliced_nums);
// => [ 4, 5 ]

Whereas providing a non-existing index will return an empty array:

let nums = [1, 2, 3, 4, 5];
let sliced_nums = nums.slice(6);
console.log(sliced_nums);
// => []

Array.prototype.splice()

The method destructively modifies the contents of an array it is called on. The method either removes, adds and or modifies elements of an array in place.

Here is an example:

let nums = [1, 2, 3, 4];

// insert 0 at the start of the array i.e index 0
// splice(position_to_insert, num_of_element_to_remove, element_to_insert)
let modified_nums = nums.splice(0, 0, 0);

console.log(modified_nums);
// =>   [] the array is empty since we did not delete any elements
console.log(nums);
// => [0, 1, 2, 3, 4]

Array.prototype.sort()

The method destructively sorts the order of array elements it is invoked on in place. The method will sort the elements in ascending order by default.

Here is an example:

let nums = [2, 1, 4, 3];
let sortd_nums = nums.sort();

console.log(sortd_nums);
// =>   [ 1, 2, 3, 4]

Array.prototype.concat()

This method takes in at least one argument, array(s) and or value(s), and returns a new array which is the result of the combination of the array the method was called on and the passed in array(s) and or value(s).

Here is the concat at work:

// Declare the array and assign 3 elements
let myArray = ["John", "Lucy", "Anjette"];
let smallArray = ["Mariam"];

// merge arrays
let newArray = myArray.concat(smallArray);

console.log(newArray);
// => ['John', 'Lucy', 'Anjette', 'Mariam']

Array.prototype.join()

This method returns takes in one optional argument, a separator/delimiter, and returns concatenated values consisting of the array elements it was called upon separated with the the provided separator.

Here is how it works:

// Declare the array and assign elements
let words = ["I", "want", "to", "learn", "JavaScript."];

// concatenate the array, separating each element with a space (" ")
let sentence = words.join(" ");

console.log(sentence);
// => I want to learn JavaScript.;

If no separator is provided, the output is separated by a comma, ","

// Declare the array and assign elements
let words = ["I", "want", "to", "learn", "JavaScript."];

// concatenate the array
let sentence = words.join();

console.log(sentence);
// => I,want,to,learn,JavaScript.;

Array.prototype.toLocaleString()

This method returns a string form of the elements of the array it has been called on. The elements, in this case, are converted to their String representations and separated by a locale-specific delimiter String like a comma.

The method takes two optional arguments: locales as the first argument and options as the second argument. The method returns a string representation of the array element[s].

The default delimiter depends on the host's current locale as opposed to the locales parameter.

Here is an example without locales and options:

let nums = [50, 75, 80, 450];

let nums_to_string = nums.toLocaleString();

console.log(nums_to_string);

// => "50,75,80,450"

Here's an example with locales and options:

let prices = [50, 75, 80, 450];

let currencies = prices.toLocaleString("en", {
  style: "currency",
  currency: "USD",
});

console.log(currencies);

// => $50.00, $75.00, $80.00, $450.00

Array.prototype.toString()

This method returns a string form of the elements of the array it has been called on. This method internally calls and overrides the join() method of Objects.

Here is an example:

let nums = [50, 75, 80, 450];

let nums_to_string = nums.toString();

console.log(nums_to_string);

// => "50,75,80,450"

Key Takeaways

In this article, we have discussed array methods in JavaScript. The article has covered most of the methods giving an example on how you can use each in your code.

However, the article may not be completely comprehensive. For further readings, refer to the following resources.

References

MDN
W3S

Create your custom hook

Tiberius Mairura — Tue, 04 Oct 2022 04:11:14 +0000

Hooks are one of the most significant features that make React such an awesome library to work with. Hooks have not been always in React but are a feature that came with react 16.8 to allow function-based components to access state and other useful react features that are otherwise only available in class components.

In a layman's language, a react hook is a javascript function. However, they are a special kind of functions because they impose a few rules on top i.e

They can only be called at the top level
They cannot be called inside loops, conditions, or nested functions

There is quite a number of hooks as of now which can accomplish most of the tasks you will need to accomplish in your UI.

However, we all know well enough that there will always be those special use cases that do not have a ready-made solution and we could like to implement ours.

Imagine a situation where your react UI consumes data from an API. In such a case, you will have an implementation similar to this:

import React from "react";

function Test() {
  const [data, setData] = useState(null);
  useEffect(() => {
    async function getData() {
      try {
        const response = await fetch(url);
        const data = response.json();
        setData(data);
      } catch (error) {
        console.log(error);
      }
    }
    getData();
  }, []);

  return (
    <div>
      <ul>{data && data.map((d) => <li key={d.id}>{d}</li>)}</ul>
    </div>
  );
}

export default Test;

The snippet above uses react's useEffect hook to invoke a function that makes a network request that fetches data when the component mounts for the first time.

If we want to fetch data again in a different component, we will re-write similar code as above. Assume you have 10 components that make such calls. This means that you will have 10 duplicates of that code, outrightly violating the beloved DRY principle.

Being generous enough, react offers us a way to craft our hooks to satisfy our unique needs. Thus we can build a custom hook that we can reuse across all our components and revive our DRY principle.

Let us create one!

import React from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    async function getData() {
      try {
        const response = await fetch(url);
        const data = await response.json();
        setData(data);
      } catch (error) {
        console.log(error);
      }
    }
    getData();
  }, []);

  return data;
}

export default useFetch;

Great!

Now, all we need to do is import our custom hook and use it whenever we want.

import React from 'react'

import useFetch from './useFetch'
function Test() {
const data = useFetch(URL)
return (
    <div>
      <ul>{data && data.map((d) => <li key={d.id}>{d}</li>)}</ul>
    </div>
  );
}

export default Test

One thing to note is that custom hooks will obey the same rules (see above) as the inbuilt hooks only if you follow certain rules when creating them.

Well, the good news is, it is not difficult to follow them. The most important one is that the name of the custom hook must start with use and follow the cameCaseStyle.

Key Takeaways

React hooks are simply JavaScript functions
Hooks allow functional components to access state and other react features
We can build our custom hooks and reuse them whenever we want
For custom hooks to follow the same rules as the in-built ones, we have to name them properly by starting the name with use and use cameCase

Valid? & Invalid? in Ruby

Tiberius Mairura — Thu, 29 Sep 2022 18:11:38 +0000

Validation

Have you ever wondered how come your favourite application knew your password is weak or worse, your username is already taken?!

If you have seen those annoying notifications saying you need such and such for your password to qualify, then you have been a victim of validation.

Definition: Validation

To establish the soundness, accuracy, or legitimacy of something.

Record validation in ruby is a mechanism for checking the accuracy of data in your ruby API or application.

Validation is a necessary and extremely significant step to integrate into any meaningful application.

The repercussions of invalid data are far-reaching with devastating blow-ups in business processes, survival, continuity, etc...

Building any thorough validation system is cumbersome and requires one to think out of the box if not at least playing "user" of their application and emulate how extremely a user might tinker with it.

The good news is, in the world of Ruby and Ruby on Rails, validations can be achieved without breaking much of a sweat.

In this article we are going to look at how you can use valid? and invalid? to perform validations in your RoR application.

In Rails, whenever create, create!, save, save!, update, or update! is invoked, validations are triggered. These methods will only save data to the database if the data provided is valid.

It is important to note that validations by default run before the database commands associated with the methods mentioned are sent to the database.

For instance, create which corresponds to SQL's INSERT command will invoke validations on an entity before performing the actual INSERT operation.

In the following steps, I am assuming you have set up your ruby environment and installed the necessary gems for a rails application.

In your terminal run:



rails new validation --api --minimal

The command above will create a new rails project. On successful completion:

Move to the project directory:



cd validations

Open the directory in vs-code:



code .

If everything worked out well, you should have a folder structure similar to this:

Let us build a Person resource and use it to demonstrate how validations work in rails.

Still on the terminal in the same project folder run:



rails g resource Person name email phone

This command will generate:

Person model
Person controller
routes
Run migrations
Other files are not necessary for this tutorial

Go to ```

app/models/person.rb


```ruby


    # app/models/person.rb
    class Person < ApplicationRecord

    end

As you can see, our model does not have any code yet.

On the terminal, let us run: rails c to start an interactive rails console

Let us create a Person p by running the following command



p = Person.create

On the terminal, you should see this:

This command ran successfully and we have created one Person!

Let us have a look at the person by running p

But wait... why is it that the person does not have not any data i.e everything except the id is nil?

Well, running the Person.create triggered an INSERT command which initiated the insert process on our database.

Since we did not have any checks in place to validate our data, the "useless" record was deemed valid and thus accepted and saved without raising any errors or exceptions.

I will leave it to your imagination what will happen if you pull this data and try to display it on your front-end app.

Now let us add some code to our models to constrain the data we receive and permit:



# app/models/person.rb
class Person < ApplicationRecord
  validates :username, presence: true # no blank
  validates :email, presence: true, uniqueness: true # no blank, no duplicates
  validates :phone, length: {is: 10} # must be EXACTLY 10 characters long
end

In the above snippet, we are adding validation to ensure:

The entity data must contain a username, not blank
It must have an email and the email must be unique
The phone number must be exactly 10 digits no more no less

Reload the terminal by running reload!

Try running the same command i.e Person.create again:

As you can see, this process did not run to completion successfully. This can easily be confirmed by that read error that says rollback transaction which means the entity was not persisted to the database.

Why?

Well, our guards and the validations ensured that we do not allow useless data in our application.

This is what went down:

Run the Peron.create method
Validations are invoked
Check if name is valid => false
Check if email is valid => false
Check if phone is valid => false
Verdict: Invalid object. Do not save!

This means the INSERT command was never invoked.

How did rails know this?

Well, under the hood, every entity has an errors object associated with it.

If the object has any errors, the implication is that that entity is invalid. Otherwise, it is valid.

Let us check out this errors object.

Still, on the terminal, let us run p.errors

We get the shape of the object but it is not quite readable

Run:



p.errors.full_messages

In the screenshot above, we can see the errors that depict validations the entity has violated.

We can argue that since the errors object not empty, the entity is invalid and thus cannot be permited to persist to the database.

valid? and invalid?

As we have learned, validation will be triggered automatically whenever any of the following methods are invoked:

create
create!
save
save!
update
update!

However, we sometimes wish to manually run the validations.

To achieve this, valid? and invalid? are our go-to methods.

valid?

This method returns true if an entity is valid and false otherwise.

invalid?

This method returns false if an entity is valid and false otherwise.

Both of these methods perform a check on the errors object associated with the entity it was invoked on. If the object has any errors, the valid? return true.

The valid? method returns false to indicate that the entity is invalid and thus cannot be saved to the database. The opposite is true.

How to use `valid?` and `invalid?`

Going back to our Person controller, we can add corresponding logic as follows:



class PeopleController < ApplicationController
  def create
     # create person
     person = Person.create(username: params[:username], email: params[:email], phone: params[:phone])

    if person.valid? # if no errors in errors object
      # return user created to the client
      render json: person, status: :created
    else
      # otherwise let them know what went wrong
      render json: {errors: person.errors.full_messages}, status: :unprocessable_entity
    end
  end
end

Let us give it a test drive using Postman

Start by running rails s or rails server on the terminal

Copy the link http://127.0.0.1:3000 and paste it on Postman address and a /persons and ensure that your Postman interface looks as shown below:

Here is the sample data I am using:



{
    "username": "hermitex",
    "email": "hermitex@gmail.com",
    "phone": "0765568854"
}

Click on Send

Here is the response:

Let us try to POST an invalid person



{
    "username": "",
    "email": "hermitex@gmail.com",
    "phone": "0765568854"
}

Notice that we have intentionally sent "" value for username and
repeated the email

By definition, this entity is invalid since our validation logic does not allow duplicate emails and the username must not be blank. Remember?

Let us see what we get.

There we go!

We have not only successfully prevented an invalid INSERT operation but also responded with appropriate messages and statuses to let the user know what might have gone wrong with their request.

Summary

Validation is a way of ensuring data accuracy and integrity
In rails validation can be performed using helper methods like validates
The following active records methods trigger validations:
- create
- create!
- save
- save!
- update
- update!
To trigger validations manually, we can use
- valid? or
- invalid?
Rails knows whether an entity is valid or not by checking the errors object associated with each entity
Presence of an error in the errors object signifies that the object is invalid and valid otherwise

Well, validations can be customized to become complex depending on the use case[s]

Learn more about how this can be done here

Hoisting in JavaScript

Tiberius Mairura — Sun, 17 Jul 2022 10:38:24 +0000

JavaScript is treacherous in many confusing ways and hoisting is just one of those things that tripped me a lot when I started learning and writing JavaScript.

In JavaScript, hoisting is a phenomenon where the JavaScript interpreter behaves as if it lifts the declarations of variables, functions and classes to the top of their scope before their execution. If you think about it, it means that JavaScript makes these declarations available for use before their existence.

Variable Hoisting

Variables are hoisted but they are initialized with a value of undefined by default instead of the actual value you have assigned them.

This is, however, only possible with the var keyword. Trying to access variables declared with let or const before they exist will result in JS throwing a ReferenceError.

Let us have a look at these behaviours:

console.log(name); //=> undefined
var name = "Anjette";

In the snippet above, we are trying to access a variable name declared with the var keyword.

Although the variable has been assigned the value of Anjette, we get undefined instead. Why?

This is because the variable is being hoisted but its initialization is not. Instead, JS assigns it a default value, undefined.

The code above is equivalent to the following example:

var name; // default value is `undefined
console.log(name); //=> undefined
name = "Anjette";
console.log(name); //=> Anjette

Hoisting with the let or const syntax shows different behaviour. Let's look at the example below:

console.log(name); //=> ReferenceError: Cannot access 'name' before initialization
let name = "Anjette";

In the above example, we have the variable declared with the let keyword. When we try to access it before the declaration, we get a ReferenceError.

Although the variable is hoisted, unlike the variable declared with the var keyword, it is not assigned the default value of undefined.

And that is why we get the ReferenceError instead of the default value of undefined.

For the same reason, the variables declared with the const keyword will behave the same as those with let.

Hoisting in Functions

When it comes to functions, hoisting makes it possible to access and safely use functions before they are declared or "exist".

//=> Access function before declaration
sayHello(); //=> Hello

//=> Function after declaration
function sayHello() {
  console.log("Hello");
}

Note that the code above does not cause any errors. Instead, it executes successfully giving us the expected result.

This is because the function declaration has been moved to the top of its declaration i.e hoisted.

However, function expressions do not have the privilege of using this hoisting effect. Let us see how the function expression behaves.

Function expression with `let`

Trying to access a function expression before it exists will cause JS to throw a ReferenceError.

//=> Access function before declaration
sayHello(); //=> ReferenceError: Cannot access 'sayHello' before initialization

console.log(sayHello); //=> ReferenceError: Cannot access 'sayHello' before initialization

//=> Function after declaration
let sayHello = function () {
  console.log("Hello");
};

In the snippet above, sayHello() cannot be accessed. The reason for the ReferenceError is because of the way hoisting behaves with the let or const keyword as discussed above.

Function expression with `var`

//=> Access function before declaration
sayHello(); //=> TypeError: sayHello is not a function
console.log(sayHello); //=> undefined
//=> Function after declaration
var sayHello = function () {
  console.log("Hello");
};

With the var keyword, the variable name sayHello is hoisted, but its initialization is not. SayHello has a value of undefined before its initialization which is set by JS. That is why we see a TypeError when trying to invoke the function.

// => Access the variable name
console.log(sayHello); //=> undefined

//=> Function after declaration
var sayHello = function () {
  console.log("Hello");
};

What about classes?

Just like their cousins, functions, classes are also hoisted and thus their references can be accessed before their declaration.

However, similar to variables declared with let or const, they are not initialized and thus trying to use the hoisted class causes JS to throw a ReferenceError.

class expressions i.e when a class is assigned to a variable, the variable will be hoisted but its initialization will not be hoisted.

Because hoisting can lead to unpredictable behaviours, avoid depending on or using it in practice.

Key Takeaways

Hoisting is the behaviour where the JavaScript interpreter lifts declarations to the top of the program
A variable declared with the var keyword is hoisted but initialized with a default value of undefined.
Variables declared with the let or const keyword are hoisted but are not initialized with a default value of undefined. Thus access them before initialization throws a ReferenceError.
Hoist makes functions, variables and classes available before their declaration
Functions declared with the function keyword are hoisted and can be safely used before their declarations.
Function expressions are not hoisted. However, the variables assigned to them are hoisted.
Classes are also hoisted but they are not initialized.