DEV Community: codethepotato

Understanding Scope Chain

codethepotato — Tue, 08 Aug 2023 14:33:04 +0000

Today we are going to discuss Scope Chain. This was something I struggled to understand. The stress of trying to keep up in class while figuring out what this meant was too much to handle.
Scope, in JavaScript, determines the accessibility of variables and functions at various parts in one's code/program. When inside a scope of a variable, function, or method data can be accessed.
There are three types of scopes available:

Global Scope
Function Scope
Block Scope

Global Scope

When a variable is declared outside of a function it becomes Global. Meaning all variables can be accessed from anywhere in a program.

let petName = 'Keebs';
//code here can use petName

function newFunction() {
//code here can also use petName 
}

Function Scope

Variables defined inside of a function are not accessible from outside the function. Quite similar as using let, var and/or const inside of the function.

function petFunction() {
let petName = 'Keebs';  //example of Function Scope
}

Back in 2015, JavaScript only had Global Scope and Function Scope. Then when ES6 was introduced they provided the very important keywords: let and const. Only these two keywords provide Block Scope!

Block Scope

Variables declared inside curly brackets {} can NOT be accessed from outside the block.

{
  let x = 10;
}
// x can NOT be accessed here!

When declaring variables with var, they do NOT have block scope! Even declared inside of a {} block, they can be accessed from outside the block.

{
var x = 10
}
// x CAN be accessed here!

It is so important to watch where you are declaring your variables, compared to where they are going to be needed. Knowing the Scope Chain will help immeasurably as your coding starts to come more naturally. This will allow you get to farther with less errors.

I hope that this blog has helped you understand Scope Chain a little more and pushes you along this knowledge path we are both adventuring!

Good luck and don't give up!! :)

Imperative vs Declarative Programming

codethepotato — Tue, 25 Jul 2023 14:03:07 +0000

There isn't much of a difference between Imperative and Declarative programming, except for where we would use them. Today we are going to explain the key difference that separates these two.

Imperative Programming

Imperative programming can be the easiest for beginnings since it relies more on a step-by-step process for executing code. This style of coding allows the programmer to tell the program what to do, how to do it, and when to do it. This process is called the control flow!

# Calculate the Result in the list
result = 0
theList = [2, 4, 6, 8, 10]

# Creating a for loop to add numbers in the list to the Result
for x in theList:
    result += x
print(result)

Languages that are examples of Imperative Programming:

Java
C
Pascal
Python
Ruby
Fortran
PHP

Declarative Programming

Declarative Programming in contrast to Imperative defines the results we want to accomplish without describing its control flow. This process allows the us to place emphasis on the results of the overall goal instead of the execution process. It can lead to more descriptive and specific code. Declarative structure is precise with less code, reducing complexity and making it easier to read/understand.

theList = [2, 4, 6, 8, 10]

# Setting the result to the sum of numbers in theList
result = sum(theList)
print(result)

Languages that are examples of Declarative Programming:

SQL
Miranda
Prolog
Lisp
Many markup languages (ex. HTML)

Both of these structures are useful in certain places. The key differences are that Imperative Programming is easier, step-by-step, and allows the programmer to have complete control allowing them to customize the structure to their needs with control flow. Whereas, Declarative Programming makes it easier to limit the complexity of the code making it shorter and more concise, customization is more complicated since it has reduced code, and it also allows us to easily optimize code, with adding extensions and making upgrades.

Languages that have been updated to support both paradigms include:

Python
JavaScript
C++
C#

educative
Epicodus
DifferenceBetween.com

Debugging in Console

codethepotato — Wed, 05 Jul 2023 15:11:44 +0000

Something programmers use all the time is debugging. The best thing about this process is that we don't have to wait until an error is thrown to use this tool. There are many different ways that can end this tool to refine our check. We are going to talk about a few of them here today.

console.log()

It is the most basic and best tool in JavaScript for debugging.

While writing our code we can add in console.log() with the parameter or message that we are checking. This is called, Tracing!
This will provide feedback about 'what the machine is thinking', and showing us what is being passed. From here we know if we need to go back and see why we aren't getting the response in console, or if there's some reshaping to the code that is required.

console.log('Is this our info?')

Here are some that are not as popular as the console.log.

console.error()

const pets = {smallCat: 'Flurry', bigCat: 'Keebs'}
console.error(pets)

This is for printing out an error to the console. This form allows it to take on multiple arguments.

console.warn()

const pets = {smallCat: 'Flurry', bigCat: 'Keebs'}
console.warn(pets)

This form is a middle step between the usual .log() and the more dire .error() messages.

The final one that we are going to talk about today is:

console.table().

This is going to print out a table of all the entries. Just like the last two examples, they are not as common. Primarily console.log() is going to be a new best friend!

It is good practice to always console.log() any message, variable, and even finish functions with that to be sure that everything is still working so far. When passing or receiving elements to the DOM it's so crucial to be checking that those elements; Be sure we are moving what we want, where we want.

There are many many uses to this debugging. It allows us to pick apart our code to see what is causing the issues and where they are. Error codes will show what folder, code line and line space that broke the code. The most common error types are Syntax, Type, Range, and Scope errors.

Here are some great links that are helpful to understanding these tools more in depth.
MDN Web Docs
GeeksforGeeks
FreeCodeCamp

Thanks for reading! Have a great day!

Removing Elements From An Array

codethepotato — Sun, 25 Jun 2023 19:43:10 +0000

There are multiple ways an element can be removed from an array. We're going to discuss how to destructively and non destructively remove elements. It is crucial to think of how the code should run.

Destructively

There are two ways that elements can be added to an array with a destructive method. The reason they are called Destructive is because when used in a function they will change the original array with the passed in information.

.shift() removes the first element in an array

.pop() removes the last element in an array

The two methods are similar in these ways:

They do not take any arguments
They remove a single element
They return the element that is removed

Nondestructively

This method works similar as the spread operator(...) if we don't add any arguments it will return a copy of the original array with all elements intact. Then removes an element without mutating the original array.

.slice()

We are able to add one-two arguments:

First, is the index where the slice should begin
Second, is the index where the slice should end

const snacks = ['Chips', 'Pretzels', 'M&Ms', 'Fruit', 'Veggies'];
const healthy = snacks.slice(3, 4);

In the example above we are creating a new variable and assigning pieces of the original array without mutating the original array.

Some great resources are linked below.

W3Schools
Mozilla
React

Building an Online Profile

codethepotato — Sun, 25 Jun 2023 18:47:37 +0000

Having an online presence is among the top 10 priorities of thriving in the ever booming Tech world. The last 15 years alone have shown over a 2 billion people rise in social media usage. Being a 1997 baby myself, I've experienced great advances with many more to follow.

Not only is it crucial to know the lines of code that we write to create entire systems; We also have to construct a virtual platform of ourselves to create our futures. Schools, big companies and even small businesses are using many different hiring websites to look for ideal candidates.
People of all ages are learning to use technology. Joining the Software Engineering profession in schools or from the comfort of their home. Even more incredible, there are people with little to no knowledge joining. Creating a community!

There are many tools out there that can help you to practice and modify code. One of the biggest tools is GitHub and Visual Studio Code (VS Code). GitHub has many repositories to fork and clone, and allows groups to work together. GitHub is a public resource for everyone. Teachers and employers are able to access your profile to see what work that has been started and projects finished. Making it immensely useful and important to have updated. Vs Code is a platform that can be used to create, edit, or practice coding. VS Code provides an organized space to write and integrate changes necessary for functions. These two systems are able to ingrate together. Pushing your work from VS Code allows progress commits and also checkpoints for groups with:

git add .
git commit -m "creates myfile.md"
git push

That leaves it open for group members to git pull from their systems, allowing smooth exchange.

There are hundreds of extensions available for install that can improve technique, color organize, and also add a little fun into coding. An example would be VS Pets. A small virtual animal at the bottom left of the screen for reminders of how important it is to take breaks and refresh.

Some websites that are good to have in the tool belt are LinkedIn and Indeed. Here you can upload resumes that hold all previous experiences and jobs. Indeed provides small quizzes to take about certain knowledge fields to show a level of comprehension. Where as LinkedIn has classes available to gain more knowledge, and it shows an understanding that we never truly stop learning. These sites can help you build up a profile with examples and templates to input personal information.
We use them to help us create these profiles, but ultimately what we came here for is a job! LinkedIn and Indeed are first and foremost job search engines!

Join some social media groups of your own! There are many more sites and apps available that have coding forums of their own. Such as Reddit, Quora, Medium, and Discord. Joining a virtual community can help in more ways than just helping build a portfolio. An open forum for questions, help or just sharing can improve personal and social skills. It may not seem like a software engineer has to be social, but that is a myth! Team work and communicating syntax or asking questions is a major part of the foundation.

Employers are going to be looking at two things specifically. They want to know what technical ability, and what kind of team fit that person is going to make. These are so important to keep in mind when creating a portfolio. They'll want to get a good idea of the person that would be filling their position.

This project will be changing all the time. Keep updated and stay informed. Always remember to Ctrl + S ;)