DEV Community: Dani Schuhman

JavaScript Error: Parcel Won't Stop Rebuilding in Dev Mode

Dani Schuhman — Mon, 03 Jan 2022 18:51:16 +0000

While working on a little project for a course I'm doing, I was introduced to Parcel, instead of using Webpack as a bundler for front end applications. The bonus of using Parcel, is that it requires zero configuration setup. Once installed properly following the straightforward instructions on their website, you're instantly up and running without a lot of the headaches that Webpack can cause.

But when working on this project in development mode, I kept running into a strange error. Parcel should only rebuild and reload a page whenever a file is saved.

Instead, Parcel continued to rebuild over and over again. Looking in the terminal, I watched as it kept rebuilding multiple times a second, to the point that it lagged the process and eventually crashed.

Looking around the internet for a solution, I don't really understand why precisely this happens. Some of the discussion as to why the rebuild gets caught in an infinite loop mentioned this happening when running it inside Dropbox, something that I wasn't doing.

What did work to fix this error, was to delete the .parcel_cache folder and to restart parcel again. Which seems to work fine, until another build error occurs and throws the rebuild back into an infinite loop. I'm not sure what's causing the error in the cache, but for the time being, this seems to be a moderate workaround so at least getting back to coding is possible.

github issue 3481

JavaScript Internal Property`[[]]`

Dani Schuhman — Fri, 29 Oct 2021 17:20:57 +0000

Photo by Dayne Topkin on Unsplash

Maybe one day you were playing in the dev browser in Chrome, and one day come across something that seemed a bit different.

You've printed things out to the console, and something odd appears.

function foo() { 
    console.log("Hello")
}

foo.prototype
{constructor: ƒ}

Clicking on the arrow for the constructor, will return an object.

{constructor: ƒ}
constructor: ƒ foo()
arguments: null
caller: null
length: 0
name: "foo"
prototype: {constructor: ƒ}
[[FunctionLocation]]: VM572:1
[[Prototype]]: ƒ ()
[[Scopes]]: Scopes[2]
[[Prototype]]: Object

What on earth are those double brackets [[]]?

It's the internal property. In JavaScript, objects have an internal property known as Prototype. You can also see that there is a Scopes inside of these double brackets as well once clicking inside an object.

Whenever there are [[]] that appear, it's an internal property that can't be accessed by our code. Both Scopes and Prototype are internal properties of the foo object.

What's pretty cool, and also very helpful when clicking on the Scopes internal property, is that when working with some concepts, say, a closure, clicking on the scopes property will show the closure itself.

let f;

const g = function() {
    const a = 23;
    f = function() {
        console.log(a * 2);
    };
};

g();
f();

console.dir(f)

// Returns
ƒ f()
arguments: null
caller: null
length: 0
name: "f"
prototype: {constructor: ƒ}
[[FunctionLocation]]: VM495:3
[[Prototype]]: ƒ ()
[[Scopes]]: Scopes[3]

Clicking on the Scopes internal property, we can see where the closure lives.

[[Scopes]]: Scopes[3]
0: Closure (g) {a: 23}
1: Script {f: ƒ, g: ƒ}
2: Global {0: Window, window: Window, self: Window, docum...

It's pretty cool, isn't it?

JavaScript: Passing by Value vs Pass by Reference

Dani Schuhman — Fri, 22 Oct 2021 17:00:30 +0000

Photo by Erol Ahmed on Unsplash

What's the big difference between passing Arguments by Reference vs Passing Arguments by Value?

Primitive Values

In JavaScript, as with many other languages, at some point, you'll come across this concept. Going back to the call stack and the heap, and where data is stored, Primitives (Number, String, Boolean, Undefined, Null, Symbol, BigInt) are stored in the call stack. Objects (Object Literal, Arrays, Functions, more...), are stored in the heap.

When we create a primitive value, JavaScript creates a unique identifier with the value name. It then allocates the memory to an address, with a value. The identifier points to the address, but not the value itself. Primitive values, are immutable. Meaning, even if we might reassign a value, or alter it somewhere else, it does not change everywhere else that the value exists.

let season = "Fall";
let nextSeason = season;
season = "Winter";
console.log(season);
console.log(nextSeason);
//// Returns
// Winter 
// Fall

Even though season was reassigned to a value of Winter, when we mutate it, it does not change the fact that nextSeason was initially set to Fall. It remains unchanged.

Reference Values

When we create a new object, it's stored in the heap, as the memory address, and then the value itself. When we declare a variable as an object, the identifier created for it, points to a piece of memory in the stack, which in turn points to a piece of memory in the heap where the object is stored.

Because of this, if multiple copies are created of an object, every time that happens, a new object is not created in memory. It just points to the same identifier for the original object. And so mutating one object has the effect that it changes all objects that point to that same memory address.

const dog = {
    name: "Beau",
    age: 15
};
const puppy = dog; 
puppy.age = "10 months";

console.log('Puppy:', puppy)
// Returns
// Puppy: {name: 'Beau', age: '10 months'}

console.log('Dog:', dog)
// Returns 
// Dog: {name: 'Beau', age: '10 months'}

It's important to understand the difference between Primitives vs Objects, because otherwise it can lead to some pretty nasty surprises, and bugs in our code. Also, so that when moving into functions, it's possible to understand the difference between Passing by Reference vs. Passing by Value.

Passing By Value

Moving into Functions, if we pass a primitive value into a function as an argument, even if a function manipulates that value inside of the context of the function, outside of the function itself, the value will remain as it was.

Ex:

let x = 1;
function alter(arg) {
    arg = 100;
    return arg;
};

change(x)
// Returns 100 
console.log(x)
// returns 1

Passing by Reference

When we pass a reference type to the function, what's copied is the reference object to the memory heap. Both point to the same object in memory. When an object is manipulated in a function, it's the same as manipulating the object itself, as both references point to the same object. Change in one place, and everywhere else, the object has been altered.

const dog = {
    name: "Beau",
    age: 15
};

const happyBirthday = function(arg){
     arg.age = arg.age + 1;
} 

happyBirthday(dog)
console.log(dog)
// Returns 
dog {name: 'Beau', age: 16}

Conclusion

To sum it, when a primitive type is passed into a function, it creates a copy. When we pass an object into a function, it's the same as passing the object itself. Which is something that we should be careful with, as it can again, lead to large issues.

What are JavaScript Sets?

Dani Schuhman — Fri, 15 Oct 2021 16:00:46 +0000

Photo by Ricardo Gomez Angel on Unsplash

JavaScript sets

JavaScript sets were introduced in ES6.

Set objects are collections of values. There can never be any duplicates inside of them, which can make them pretty useful depending on the situation.

In order to create a Set, we use the Set.() constructor, which will create a new Set object.

const colors = new Set([ 'Red', 'Green', 'Blue', 'Purple', 'Purple', 'Red', 'Red', 'Blue', 'Magenta']);

console.log(colors)
// Returns 
Set(5) {'Red', 'Green', 'Blue', 'Purple', 'Magenta'}

A Set can hold mixed data types, just like an array. It is also iterable, like an array. However, there are two big differences between a Set and an array.

A Sets elements are unique.
The order of elements in a Set is irrelevant.

When creating a Set, if we pass in a string as the value, it is an iterable. Whatever is passed in, will become a set of unique characters, with the duplicates removed. Using the string Hello, if we pass it into a new Set constructor, the second l will be removed, and we'll be returned a set that consists of only {'H', 'e', 'l', 'o'}.

console.log(new Set('Hello'))
// Returns 
Set(4) {'H', 'e', 'l', 'o'}

Working with Sets

There are several methods, and properties that can be used with Sets in order to manipulate the data.

The .add() method can add a new element onto our Set. But just as all values are unique in a set, if you try to add a value twice, the second one will be ignored.

colors.add('Yellow')
Set(6) {'Red', 'Green', 'Blue', 'Purple', 'Magenta', …}

The .has() method can check to see if a set contains a specific element. It's similar to the .includes() method in arrays.

colors.has('Yellow')
// Returns 
true

Unlike arrays, as the order doesn't matter in Set's, we can't pass in an index. Doing so will return undefined.

console.log(colors[0])
// Returns
undefined

The .size property is similar to the .length property in arrays, and will return the size of our Set object.

colors.size
// Returns 
6

We can delete elements from a set using the .delete() method.

colors.delete('Yellow')
// Returns
true 
colors
Set(5) {'Red', 'Green', 'Blue', 'Purple', 'Magenta'}

Another method that can be used on a Set is the .clear() method, which will delete all of the elements of the set.

colors.clear()
colors 
// Returns
Set(0) {size: 0}

We can also iterate over the items in a set, using both the .forEach() method, or a for/of loop.

for (let item of colors) console.log(item)
// Returns 
Red
Green
Blue
Purple
Magenta

Converting between a `Set` and an `Array`.

If we wanted to convert an array into a Set, it's very simple. We can use the regular Set constructor on an array, and it will transform it.

let arr = ['Hello', 'how', 'are', 'you?']

let newSet = new Set(arr)
console.log(newSet)
// Returns 
Set(4) {'Hello', 'how', 'are', 'you?'}

If we wanted to convert a Set into an Array, we can use the spread operator.

console.log([...newSet])
// Returns 
(4) ['Hello', 'how', 'are', 'you?']

Sets also have the keys and values methods. keys is an alias for values, so both methods do the same thing pretty much. Using either of them will return a new iterator object, that yields the values for each element in the Set in the order they appear.

let iceCreamFlavors = new Set();
iceCreamFlavors.add('vanilla'); // vanilla
iceCreamFlavors.add('chocolate'); // chocolate
iceCreamFlavors.add('mint chocolate chip'); // mint chocolate chip

let setItr = iceCreamFlavors.values();

console.log(setItr.next().value);
console.log(setItr.next().value);
console.log(setItr.next().value);

Conclusion

Sets are very easy to interact with thanks to how straightforward their methods are, and because of that can be a very useful tool. I hope that this introduction to them has helped explain just how helpful they can be.

JavaScript Short Circuiting

Dani Schuhman — Fri, 08 Oct 2021 16:34:48 +0000

What is Short Circuiting in JavaScript?

The `||` Operator

When working with logical operators such as AND && and OR ||, they are typically used with Boolean values (truthy and falsy), and return true or false. When using the && Operator, both sides of a conditional must evaluate to true for it to return true. If one side evaluates to false, then it returns false. When working with the || Operator, only one side needs to evaluate to true for it to return true.

true || true 
// returns true 

true || false 
// returns true 

false || false 
// returns false

But, logical operators can be used with any kind of datatype. If for example, a number and a string were used in a logical operator, rather than return true or false, it would return the value itself.

100 || 'North'

Returns 100 rather than true or false.

Why does this happen? What does Short Circuiting even mean?

In the above example, short circuiting means essentially that the expression is not evaluated. If the first value is truthy, then it will just return the true value, and stop evaluating.

If the first value was false however, it continues to evaluate, and then returns the value again with the second expression.

null || 'Hello'
// returns 'Hello'

Short Circuiting with the `&&` Operator

Short circuiting works in the complete opposite manner when it comes to the AND operator.

true && true 
// returns true 

true && false 
// returns false 

false && false 
// returns false

With the AND operator, it short circuits when the first operand is Falsy.

O && 'Fall'
// returns 0

A longer example chaining together multiple && evaluations works the same.

console.log('Goodbye' && 100 && undefined && 'halloween')

Will short circuit on undefined and automatically return undefined.

Using a practical example, it's possible to take advantage of short circuiting, and to shorten an if statement.

Rather than writing:

function a() { 
   console.log('a'); 
   return false; 
}

if (a()) { 
   console.log('Foobar') 
}
// returns a

We can write it as:

a() && console.log('Foobar')
// returns a

As a() evaluates to false, it will short circuit, cease executing, and return only a, not continuing on to the other side of the Operator.

However, it's not necessarily always a good idea to use short circuiting in the place of the longer code of an if statement, because someone else coming in to read the code, might not understand what's going on. Sometimes it's better to keep things readable, rather than short. Brevity isn't always the answer.

What is Test-Driven Development?

Dani Schuhman — Fri, 01 Oct 2021 16:09:46 +0000

Test-Driven Development, or TDD for short, is a software development process that focuses on writing test cases before you write actual code.

The idea is that you write a test, the tests fail for obvious reasons, and then you write the simplest code that will then make the code pass, then refactor that code, using the tests to make sure everything is preserved. Then you repeat the process all over again, building more tests and making things more complex. Sounds straightforward enough.

So why is it so important?

There are a lot of reasons why TDD is important. A 2005 study showed that programmers who used TDD were more productive. It's also thought to lead to less errors as you are testing as you create. It can lead to more modulated, flexible code, and more optimized code. It can drive the design process of a program. The list goes on and on.

As a student in the Flatiron School, TDD was used for almost all of the work that we did. I found, personally, that when learning to code, it's much easier to help break down a problem into little pieces and work on things one by one. It's much easier to tackle a task that's made up of twenty-five parts, by chipping away at it bit by bit, rather than trying to handle it all at once. Plus, there is something very satisfying of running tests and watching them change from red to green.

All of that is very well enough, but how do you go about using TDD if you haven't before?

There are a lot of wonderful resources on the web, that can talk you through how to set up the frameworks that are used to help drive TDD. What framework you use, depends on what language you use as well. At the moment, I am only familiar with a couple, and can't talk more about how the other ones work and how to specifically write tests for everything mentioned here. But I hope to be able to one day.

Here are some popular ones that are commonly used:

RSpec - Behavior driven development for Ruby.
Pytest - An open source tool used in Python.
Junit 5 - A programmer-friendly testing framework for Java and the JVM.
Mocha - A feature-rich JavaScript testing framework running on Node.js and in the browser.
Jest - A JavaScript testing framework that works with projects using Babel, TypeScript, Node, React, Angular, Vue and more.
csUnit - An open source testing tool for the .NET framework.

But what does TDD look like when implemented if you've never seen a test before?

With a language like RSpec, a test could look like the following, for a User model:

require 'rails_helper'

RSpec.describe User, :type => :model do 
    let(:user) {
        User.create(
        :email => "me@mail.com",
        :user_name => "SomeGuy",
        :password => "123ABC",
        :id => 4
        )
    }

    it "is valid with a username, password, and email" do 
        expect(user).to be_valid
    end 

    it "is not valid without a password" do 
        expect(User.new(user_name: "Name")).not_to be_valid
    end 

    it "is not valid without a email" do 
        expect(User.new(password: "Password")).not_to be_valid
    end 

    it "is not valid without a username" do 
        expect(User.new(email: "Boo@mail.com")).not_to be_valid
    end 
end

For a language like pytest, it can look like the following:

# content of test_sample.py
def inc(x):
    return x + 1


def test_answer():
    assert inc(3) == 5

Junit:

import static org.junit.jupiter.api.Assertions.assertEquals;

import example.util.Calculator;

import org.junit.jupiter.api.Test;

class MyFirstJUnitJupiterTests {

    private final Calculator calculator = new Calculator();

    @Test
    void addition() {
        assertEquals(2, calculator.add(1, 1));
    }

}

Mocha:

var assert = require('assert');
describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal([1, 2, 3].indexOf(4), -1);
    });
  });
});

Jest:

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

csUnit:

using System;

using System.Collections.Generic;

using System.Text;



using csUnit;



namespace Go48.Core {

   [TestFixture]

   public class CalculatorTests {

      [Test]

      public void AddTwoNumbers() {

         // Step 1: Set up some objects

         Calculator calculator = new Calculator();



         // Step 2: Manipulate the objects

         calculator.Enter(3);

         calculator.Enter(5);

         calculator.Add();



         // Step 3: Assert outcome is correct

         Assert.Equals(8, calculator.Top);

      }

   }

}

Conclusion

The common thread through all of these tests is that as a programmer, you want something to exist. Maybe it's a function that returns an array, maybe it's a function that performs some kind of mathematic operation, maybe it's creating a User model so that people can log in and out of an application, etc.

The point is that we want the code to do something, so tests are written first. Then the code is crafted to pass those tests. And then code is refactored, more tests are written, and what started out as a simple operation starts to expand into something more, until something is a full fledged application and hopefully, doesn't have nine-zillion bugs that need to be fixed before it can be used.

If you've never encountered TDD before, I hope that this brief introduction to the practice explains things enough, that maybe you'll click on the links of the language of your choice, follow a tutorial, and try writing your first test today!

Introduction to JavaScript Destructuring

Dani Schuhman — Fri, 24 Sep 2021 18:05:39 +0000

What is JavaScript Destructuring?

The destructuring assignment syntax is an ES6 feature, that allows you to unpack values from an array or an object into separate variables..

Destructuring Arrays

Before destructuring was introduced, if we wanted to extract elements from an array, it would be done as follows:

const seasons = ['Winter', 'Spring', 'Summer', 'Fall'] 

const one = seasons[0];
const two = seasons[1];
const three = seasons[2];
const four = seasons[3];

console.log(one, two, three, four)
// returns
Winter Spring Summer Fall

But using destructuring, we can do it in a much simpler, and streamlined fashion.

To use it, start with the const keyword, followed by brackets []. Within the brackets is the destructuring assignment, or the elements we want to abstract out, then set equal to the original array.

Following that process, in order to destructure the elements of our seasons array, would be done as follows:

const [one, two, three, four] = seasons
console.log(one, two, three, four)
// returns 
Winter Spring Summer Fall

The original array is not mutated, and remains untouched.

If for whatever reason, we only wanted to pull out certain variables within an array and not all, say only Summer and Fall, to do that within an array, leave an empty space, or a hole.

const [,, third, fourth] = ['Winter', 'Spring', 'Summer', 'Fall'] 
console.log(third, fourth)
// returns 
Summer Fall

We can also set default values for variables when extracting them, so that if that element is not part of the array, something will be returned.

const [a, b, c, d, e = "February"] = seasons 
console.log(a, b, c, d, e)
// returns 
Winter Spring Summer Fall February

It is possible to destructure nested arrays.

const nestedArr = ['Winter', 'Spring', ['Jan', 'Feb', 'March']]

const [x, , [t, u, v]] = nestedArr;
console.log(x, t, u, v);
// returns 
Winter Jan Feb March

It's also possible to switch the position of variables using destructuring.

Take the array of flavors, and to test out this example, make sure it is declared with let and not const, as using const will through an error.

let flavors = ["Vanilla", "Chocolate"];
const [vanilla, chocolate] = flavors; 
console.log(vanilla, chocolate);
// returns 
Vanilla Chocolate

If we wanted to switch the flavors in the destructuring assignment, it's possible to do so in one simple line of code, rather than going through the process of reassigning one of the variables to a temporary variable, before reassigning altogether:

const [vanilla, chocolate] = [chocolate, vanilla];
console.log(vanilla, chocolate);
// returns 
Chocolate Vanilla

Destructuring Objects

To use destructuring with objects, the philosophy is pretty much the same, but there are a few differences. The first is that instead of using brackets, curly braces are used instead {}.

const dog = {
    name: "Jack",
    breed: "Heinz 57", 
    age: 10.5,
    likes: [ "Long walks", "Belly rubs", "Chasing Squirrels"]}

Unlike with an array, within an object, the order of elements doesn't matter. All we need is the property name to proceed.

const { name, breed, age, likes } = dog;
console.log(name, breed, age, likes);
// returns 
Jack Heinz 57 10.5 
(3) ['Long walks', 'Belly rubs', 'Chasing Squirrels']
0: "Long walks"
1: "Belly rubs"
2: "Chasing Squirrels"

If we wanted the variable names to be different from the property names, we still need to reference the property names as before, but followed by a colon, and the new property name.

const { name: nickName, breed: type, age: years, likes: interests } = dog;
console.log(nickName, type, years, interests);
// returns 
Jack Heinz 57 10.5 
(3) ['Long walks', 'Belly rubs', 'Chasing Squirrels']
0: "Long walks"
1: "Belly rubs"
2: "Chasing Squirrels"

Just as with an array, we can also assign a default value within an object. It's done in the same manner.

const {
  name: nickName,
  breed: type,
  age: years,
  likes: interests,
  favoriteWalk = 'On the street',
} = dog;
console.log(nickName, type, years, interests, favoriteWalk);
// returns 
Jack Heinz 57 10.5 (3) ['Long walks', 'Belly rubs', 'Chasing Squirrels'] On the street

Just as it's possible to destructure nested arrays, it's possible to destructure nested objects.

Again, the curly braces are needed to access an object within an object.

const dog2 = {
  name: 'Maya',
  age: 1,
  breed: 'Samoyed',
  address: {
    city: 'Berlin',
    country: 'Germany',
  },
};

const {
  address: { city },
} = dog2;

console.log(city);
// returns 
Berlin

Destructuring is an incredibly powerful, and useful tool for developers. This is just an introduction to some of its capabilities, but there is a lot more that it's possible to do using destructuring assignment in ES6.

Rails 6: Webpacker::Manifest::MissingEntryError

Dani Schuhman — Sat, 18 Sep 2021 17:44:53 +0000

Error handling can either be something that's incredibly aggravating, or satisfying as a developer. Errors inevitably happen, but sometimes even after falling down a google rabbit hole that leads to questions on Stackoverflow, to github threads, can often lead to even more aggravation and not an actual solution. Especially when there is no forward momentum in the errors. At least when an error changes to something new, you know you've done something right. Maybe.

I'm going to try and walk through a solution to the Rails 6 Webpacker::Manifest::MissingEntryError, in the hope that one person stumbles across this in the future and it helps.

After setting up a new project in Rails, when attempting to fire up the development server, I was automatically hit with this error:

Webpacker can't find application.js in /Users/danischuhman/Development/code/photo_app/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:

What the error means is that Webpacker can't find the application, and is failing at square one to compile. None of the files that are needed in order for Webpacker to run properly, are being generated. I don't know precisely why this happens, or where there is a failure to cause this issue, just that it happens. And it's annoying.

Some of the github threads talked about aliasing a css file, and altering the <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> tag within application.html.erb file. Other workarounds talked about removing the tag entirely. Removing the tag allows everything to run properly, except, it doesn't solve the issue and leads to further errors down the road, which really isn't the best way to handle debugging. Others had solutions that worked for some people, but did not for me.

The solution, which I only came to after discussing it with a good friend, and much more experienced engineer, is pretty straightforward.

First thing, is to run rails webpacker:install and overwrite the existing webpacker.yml file.

Next is to delete the node_modules folder in your repo, and if it exists, the public/packs folder. In my case, my public/packs folder wasn't even being generated, so there was nothing to delete there.

Then run yarn install, bundle, and then rails webpacker:install, overwriting any files it suggests you to overwrite.

Hopefully, if everything has then been installed properly, when you fire up rails s your application should open to the main page, and there should no longer be an error. Which, I hope if you've found this blog post, is precisely what's happened for you.

In the future, when building my next Rails App, I will follow this order of operations, just to make sure everything is generated properly and to hopefully avoid the error:

bundle install
rails db:migrate
rails webpacker:install
yarn install
rails server

For the time being, I'm glad to have found a solution that works, and hopefully know in the future how to work around it, should the problem arise again.

Here are some links to discussion of this particular issue, to see just some of the solutions offered up by other engineers.

The JavaScript Call Stack

Dani Schuhman — Fri, 10 Sep 2021 16:52:52 +0000

Photo by Annie Spratt on Unsplash

What is the JavaScript Call Stack?

According to MDN: A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.

At its most basic level, the call stack is where our code is executed, using execution context.

The JavaScript engine, a program that runs JavaScript code, contains both a call stack and a heap. For now, just know that the heap is a large, unstructured memory pool.

Why is the Call Stack Important?

JavaScript is single threaded, or synchronous. It can only do one thing at a time. We can give it 100 tasks to perform, but it can't perform all 100 tasks simultaneously. It has to go through the process of completing one task before moving onto the next. It's incredibly orderly.

Within the call stack, say for example, these 100 tasks are all functions. The call stack will stack each function's execution context on top of each other, in the order that they were called, like a pile of books, or boxes, or lego pieces, etc. At the top of the pile, is the current execution context we are within. Once that execution context is finished running, it'll be removed from the top of the pile. The book will be popped off, and it can move down the one directly below. And this will continue happening until the entire stack has been emptied, and the call stack returns to the global execution context, until something new is called.

But what happens when there is a task within a task, or a second function within another function when in that call stack? In that case, if a second function has been called within a function, a new execution context is created, and pushed onto the top of the stack. The execution of that first function is paused, the second function is run through, and once that is completed, it is popped off the the call stack, and we return to the execution context of the first function, which then continues until it's finished, and we return to the Global Execution Context.

While it might seem a little silly, here is an example of how switching execution contexts, and moving through the call stack works.

function first(){
    console.log("Inside First.")
    function second(){
        console.log("First execution context paused, now inside Second.")
        function third(){
            console.log("Second execution context paused, now inside Third.")
        }
      third();
      console.log("Return to second's execution context."); 
    } 
  second();
  console.log("Return to first's execution context.");
}

first()

When first is called, it will print out to the console:

Inside First.
First execution context paused, now inside Second.
Second execution context paused, now inside Third.
Return into second's execution context.
Return to first's execution context.

Every time a new function was called, the call stack worked its way through the execution context until completed, before moving back to the previous function, until eventually, all execution contexts were finished, and we returned to the Global Execution Context.

The Global execution context will only pop off of the call stack when our program finishes, either by closing a browser window, or closing the terminal.

JavaScript Scope

Dani Schuhman — Fri, 03 Sep 2021 17:42:35 +0000

What is Scope?

In short, Scope is context. It's where something is available. In JavaScript, it has to do with where declared variables are accessible, how they are organized and accessed by the JavaScript Engine.

The Three Different Types of Scope in JavaScript

Global Scope

This is the top of the food chain, so to speak. These are variables that are declared outside of any functions, or block. Variables declared in global scope are accessible everywhere.

const favoriteColor = "Blue";
let meal = "Dinner";
var year = 2021;

Function Scope or Local Scope

Variables are accessible only inside of a function. They are not available outside of the function. When you try to call a variable that has been defined inside of a function, outside, you'll get a ReferenceError. This is referred to either as function scope, or local scope.

function pets(){
   const animal = "Kitten";
   const name = "Fluffy";
   console.log(`This is my ${animal}, their name is ${name}`);
}

Block Scope (ES6)

Starting in ES6, variables are only accessible inside of the block, and block scoped. However, this only applies to variables declared with const and let. It does not apply to those declared with var. Functions are also block scoped, but only when using strict mode in your code.

A block of code, is usually anything created between the curly braces {}. Typically they are if/else statements, loops, and switch statements. If a variable is created using var within a block, it's accessible outside of that block, scoped to the current function, or to the global scope.

This also means that any functions defined with a block of code, are only accessible in that block.

if (true) {
   const month = "September";
   let day = "Friday";
   const year = 2021;

   console.log(month, day, year)
}

Lexical Scope

Lexical Scope means that any children have access to variables defined in the parent scope. The way variables are organized and accessed is controlled by the placements of functions and blocks within the code. It is lexically bound to the execution context of its parents scope.

However, it is incredibly important to note, that the way that lexical scope works, is only up. A child can access variables available in its parents scope, but a parent cannot access downwards. Whatever is defined within its children, is not accessible within the parents context. This is called the scope chain, and it is a one-way street essentially, anything on the outside does not have access to what is on the inside.

For example:

function food(){
   const fruit1 = "banana";
   console.log(fruit1);
   function food2() {
     const fruit2 = "apple";
     console.log(fruit1, fruit2);
      function food3() {
         const fruit3 = "orange";
         console.log(fruit1, fruit2, fruit3);
      }
     food3();
   }
  food2();
}

When we call food() in the console, it will print out:

banana
banana apple 
banana apple orange

But if we tried to call food2() and food3() directly in the console, we get Uncaught ReferenceError, neither function is defined. They are not available within the parents scope.

This happens because of variable lookup in the scope chain. If one scope needs to find a certain variable, such as fruit1, or fruit2, within the scope of the food3() function, it will lookup to the parents scope to find it. In the case of the variable fruit2, looking up one scope to the food2() function, fruit2 is found, and then used. But as fruit1 has not been found, it looks up another scope, to that of the food() function, where it is found, and then used. It will continue to lookup the chain all the way to the global scope, and if during that variable lookup, no variable is found, an error will be presented.

JavaScript Functions

Dani Schuhman — Thu, 26 Aug 2021 19:05:30 +0000

Functions

What are JavaScript functions? They are one of the most fundamental building blocks of JavaScript. At its most basic level, functions are objects. An object that contains some code that we would like to call, or execute multiple times.

The purpose of functions, is to put reusable code inside of a function block, that we can then use at different points, rather than having to write everything out over and over, and violating the principle of Don't Repeat Yourself.

Functions Syntax

Functions are made up of several key parts.

We define a function using the keyword function, and then a function name, followed by parentheses and then curly braces {}.

Within the curly braces, is the function body, or the code that will execute when we run the function.

function foo(){
    console.log("I was called!");
}

Once the function has been written, we can use it as many times as we want. We call, invoke, or run the function, by writing the function name, followed by parentheses.

foo();

And we can call a function as many times as we wish.

foo();
foo();
foo();
foo();

Which would then output to the console:

I was called!
I was called!
I was called!
I was called!

Typically, passed in between the parentheses will be parameters, or arguments, separated by a comma. And if we want to return some kind of data from the function, we can do so using the return keyword.

function add(argument1, argument2){
   return argument1 + argument2; 
}

If parameters are used, they act like placeholders, placeholders for the actual data we wish to pass in, and be executed. So that our add function can be called like so:

add(1, 100);

Which will then return 101 to the console.

But if we wrote the function incorrectly, and did not use the return keyword, instead writing it like this:

function add(argument1, argument2){
   argument1 + argument2;
}

Calling our function with arguments, add(1, 100) would result in an undefined.

Where it starts to get a little tricky, or perhaps confusing, is that functions aren't always so straightforward. Not all functions have to have arguments. Not all functions return something.

There are also different ways of writing functions as well.

Function Declarations vs Function Expressions

The type of function we have learned about thus far, is called a function declaration. A function declaration is a function created using the function keyword.

Function Declarations

A function expression, is a function written without a name, but stored within a variable. We can also call these nameless functions, anonymous functions. They work the same way that function declarations work, as functions are essentially just values in JavaScript.

If we wanted to rewrite our add function as a function expression, we could do so like this:

const add = function(arg1, arg1) { 
   return arg1 + arg2
}

The function can be called the same way, although we are calling the variable name add rather than the function name, and supplying it with two arguments.

add(100, 1)

Which will return 101

The biggest difference between a function declaration, and a function expression, is that if you call a function declaration before it's been defined, you'll still get the same result. If you call a function expression before it's been defined, you'll get an error as a function expression cannot be called before it's been initialized. This is all do to a concept called hoisting, which I'm not going to go into today.

Arrow Functions

Arrow functions, or an arrow function expression, is a shorter syntax for writing function expressions essentially, although it can't be used in all situations. They are always anonymous, as they are not created using a function name.

Arrow functions appear very much like function expressions:

const add = (arg1, arg2) => arg1 + arg2

One difference is that you can omit the return keyword. Because of how an arrow function is written, it implicitly returns the result of our last expression immediately.

Another is that if there is only one argument being passed in, we can omit the parentheses altogether.

const squared = x => x * 2

Just as function expressions do not have to have a parameter, so too can arrow functions not have one.

Conclusion

I hope that this has helped clarify some of the different types of functions that can be used when working in JavaScript. I haven't covered all types of functions at this point in time.

There is another type of function in JavaScript, called an Immediately Invoked Function Expression, or an IFFE, understanding IFFE's relies upon a deeper understanding of Scope in JavaScript as well as hoisting.

There are also generator functions as well, you can read more about them here

JavaScript Events

Dani Schuhman — Fri, 20 Aug 2021 17:27:09 +0000

What is a JavaScript Event?

JavaScript has the ability to listen and react to what is happening in the browser. Events are essentially "things" that happen on the page.. Things that JavaScript then reacts to. When you say, click the button to like this post, use your cursor to scroll down in order to see more text, write a comment, log into a page, all of these things happen because code has been written to "listen" to such a thing happen, so that the browser then responds appropriately.

There are all sorts of types of events that you can write code to listen for. Going over to the MDN documentation, there is a complete list.

Common Types of User Events

Mouse Events

These are things that happen when you interact with the DOM with a mouse or trackpad. This can happen with what are called click events, when you click, double-click, right-click, left-click, etc on a page. There is also mouseup, mousedown, mouseover, mouseout, etc.

Keypress

These are things that happen when you press down on the keyboard, we can listen for keyup, keydown, and keypress.

Form Events

Often you'll see form events consist of submitting a form in HTML. Say, when you sign up for a website and need to fill in information to register as a new user, the browser has been configured to listen to that submit event (the submit button typically), and then sends the information you've just filled in, to a server and does something with it. Other form events include change and input.

All of this is pretty interesting, but, what do we do with this information? How do you "listen" for all sorts of events to happen.

Enter event handlers.

Event Handlers

An event handler is a way to add an event listener onto the page. It's a function, that we pass in arguments to listen to our code.

In order to tell our code how to respond, we use a function called addEventListener(). This allows us to associate a specific event with a specific response.

addEventListener() takes two arguments. The 'event' we are listening to, say, a click, and then a callback function that will then execute that event.

A simple example with pseudocode would be:

element.addEventListener('click', function(/* do some stuff here when we click on the page */)

Trying out the example in real life, say we wanted to create an event when clicking on the header image of this article. The first piece of information we need to do that, is the class of that particular element. Right clicking inspect upon the image element, will reveal the information in the DOM.

The image has a class of "#main-title > div.crayons-article__cover > img")

Dropping into the dev tools JavaScript console, we need to first set the element we are adding an event to, to a variable.

const element = document.querySelector("#main-title > div.crayons-article__cover > img")

Then we need to add an event listener onto that particular element following the pseudocode example.

element.addEventListener('click', function(){
   alert("I was clicked!")
})

Trying that out in the console, when you click on the main image, you should see an alert window pop up, showing our message.

Congratulations, you've just created your first JavaScript event.

Additional Reading

Eloquent JavaScript has a very thorough and in depth explanation of this topic. You can read more here.

If you're at all confused about the difference between an event handler or listener, StackExchange has a good breakdown of what precisely happens on the page.

MDN, also has a very good breakdown, walking you through JavaScript events in much more detail. MDN

DEV Community: Dani Schuhman

JavaScript Error: Parcel Won't Stop Rebuilding in Dev Mode

JavaScript Internal Property`[[]]`

Further Reading

JavaScript: Passing by Value vs Pass by Reference

Primitive Values

Reference Values

Passing By Value

Passing by Reference

Conclusion

Further Reading

What are JavaScript Sets?

JavaScript sets

Working with Sets

Converting between a Set and an Array.

Conclusion

JavaScript Short Circuiting

What is Short Circuiting in JavaScript?

The || Operator

Why does this happen? What does Short Circuiting even mean?

Short Circuiting with the && Operator

Further Reading

What is Test-Driven Development?

So why is it so important?

Here are some popular ones that are commonly used:

But what does TDD look like when implemented if you've never seen a test before?

Conclusion

Introduction to JavaScript Destructuring

What is JavaScript Destructuring?

Destructuring Arrays

Destructuring Objects

Further Reading

Rails 6: Webpacker::Manifest::MissingEntryError

The JavaScript Call Stack

What is the JavaScript Call Stack?

Why is the Call Stack Important?

Further Reading:

JavaScript Scope

What is Scope?

The Three Different Types of Scope in JavaScript

Global Scope

Function Scope or Local Scope

Block Scope (ES6)

Lexical Scope

JavaScript Functions

Functions

Functions Syntax

Function Declarations vs Function Expressions

Arrow Functions

Conclusion

Further Reading

JavaScript Events

Common Types of User Events

Mouse Events

Keypress

Form Events

Event Handlers

Additional Reading

Converting between a `Set` and an `Array`.

The `||` Operator

Short Circuiting with the `&&` Operator