DEV Community: Sophia Enakpoya

Understanding Scope in JavaScript

Sophia Enakpoya — Fri, 22 Jul 2022 11:41:00 +0000

This article assumes you have a good understanding of variables and the different ways of declaring variables in JavaScript as those concepts won't be treated.

What is Scope?

Scope is what determines the accessibility(visibility) of variables. Scoping controls where a variable is accessible and the time the variable definition is maintained. There are three types of scope in JavaScript: Global Scope, Local Scope and Block Scope.

Global Scope

Global Scope is the default scope for all codes running in script mode. Variables declared outside of any function or block of code become global variables and are accessible from anywhere in the code. There is one copy of a global variable in the entire program.

 // global scope
var name = 'Sophia'

console.log(name);    //Sophia

function getName(){
  console.log(name)    //name is accessible here
} 

getName()           //Sophia

Variables defined outside of any function become global variables and can also be modified from any function. Take our earlier name variable:

// global scope
var name = 'Sophia'

console.log(name);    //Sophia

function getName(){
  console.log(name)    //name is accessible here
} 

function changeName(){
  name = 'Jane'
  console.log(name)    //name is accessible here
} 


getName()           //Sophia
changeName()        //Jane

Changing the value of a global variable in any function will be reflected through out the program. We can already see why it is not good practice to declare global variables unintentionally.

Local Scope

Local scope can also be referred to as function scope. A function creates a scope and variables declared within that function becomes local to that function and cannot be accessed from outside that function. Consider the following example:

//Local Scope
function getName(){
  var name = 'Sophia';
  console.log(name)   //name can only used in getName
}

getName()     //Sophia
console.log(name);  //Causes error

Local variables are only accessible inside their functions, which means variables with same name can be used in different functions and their values won't be overwritten. Local variables are created when a function starts, and deleted once the function is completed.


//Local Scope
function getName(){
  var name = 'Sophia';
  console.log(name) 
}

function getOtherName(){
  var name = 'Xavier';
  console.log(name)   
}
getName()          //Sophia
getOtherName()     //Xavier

Now take a look at this code example:

function createCounter(){
  count = 0;
}

function incrementCounter(){
  return ++count;
}

What is the scope of the count variable above and would the incrementCounter function work?
Before you answer, note that JavaScript does not require variables to be declared before they are used and undeclared variables are put in the global scope. Let me know your answer in the comment section.

Block Scope

Prior to ES6(2015), JavaScript only had Local(Function) Scope and Global Scope. With the introduction of let and const, the Block Scope was provided. Block Scope is simply the area within if, switch statements, and loops. A block is generally contained within curly brackets { }.
Variables declared inside a { } cannot be accessed from outside that block.

//Block Scope
function getName(){
  for(let count = 1; count <= 10; count +=1){
   //count is accessible here
}
  //count is not accessible here
}

The count variable comes into existence when the loop block is entered and destroyed once the loop is exited. Note that blocks only scope variables declared with let and const

In summary, scoping is what controls where variables are accessible. Global variables always exists and are accessible throughout the program. Block and Function variables are only accessible in the block/function they are declared in.
Note however that there is the concept of Closures which allow variables to be accessed outside of the local scope. Closures will be discussed in more detail in my next article.

A quick look at SSR and CSR

Sophia Enakpoya — Wed, 15 Jun 2022 15:12:30 +0000

Hello devs!

There are several methods of rendering pages on the browser. A common challenge is when to choose which method for our websites and web applications. Today we're going to take a brief look at two of such methods - SSR and CSR.

So what's the deal with these abbreviations?

SSR and CSR simply refers to the different methods used by software developers to transfer html content to the client.
SSR is short for Server-Side Rendering while CSR is for Client-Side Rendering.

*Note: There are other methods of rendering pages on the browser e.g. SSG, ISR, but our focus today is only on SSR and CSR.

Server-Side Rendering (SSR)

This is the most common method of rendering HTML onto a screen.
A user requests access to a webpage. Server sends ready to go HTML files to the client. Browser then renders the page but it's not interactive. Browser downloads and execute the JavaScript. Page is now interactive. This is all done within a few milliseconds. The heavy lifting is done on the server. This means that if there are any API calls to be made, it is all done on the server-side, then sent along with the markup to the client.

Pros

Better SEO. Search engines can crawl the site effectively.
Initial page load is faster

Cons

Frequent server requests
Full page reloads
Slow page rendering for subsequent pages

Client-Side Rendering (CSR)

This method simply means the pages are directly rendered in the browser. In this method, the heavy lifting is done on the client rather than the server. A user requests access to our webpage, server sends a response to our browser, browser downloads the JavaScript file and executes the content. Page is now visible and user can navigate and interact with the web page.

Pros

Fast website rendering after the initial load
Great for web applications
Rich interactions

Cons

Requires external libraries in some cases
Initial page load is slow
Poor SEO if not implemented correctly

Choosing the right rendering method will depend on your use case and what works for you. Web applications and websites are two different formats of web content. Web apps require more interaction since users need to perform tasks. A website, on the other hand, is simply a page that offers or provides info about a business, hence, not a lot of user interactions.

Thanks for reading. I hope this helps you understand these concepts a little better. For more deep dive, comparisons and visual representation of the different rendering methods, check out the links below.

Visual Explanation and Comparison of CSR, SSR, SSG and ISR
Rendering on the Web
Tech Talk
Rendering Options on the Web

Thanks for reading 👋

How to remove a sensitive file from your commit history on GitHub

Sophia Enakpoya — Thu, 28 Jan 2021 10:19:28 +0000

Yes! this has happened to most of us at least once in our career, especially when we are just starting. We accidentally commit sensitive data to GitHub. We forget to gitignore our config file containing database passwords or API keys or jwt secrets. And we immediately start to panic.

This happened to me a couple of days ago. I forgot to ignore my default JSON file that contained my database connection password and jwt secret. I had just gotten a feature to finally work and in the excitement, I immediately committed and pushed to GitHub. I only realized my error when I got a notification from GitGuardian that my latest commit contained secret keys.

If you find yourself in the same position, the first thing you do is change the visibility of the repo. So, if it's a public repo, make it private. This way, you're sure no one else sees the file while you're working on deleting it.

Next thing, if you aren't already in the project folder, cd into it on git bash or whatever terminal you are using. Let's assume my project folder is My-Project and I have a file named secretFile.json I want to delete.

cd My-Project

then run the following command. You have to include the path to the file and not just the file name.

git filter-branch --force --index-filter \
  "git rm --cached --ignore-unmatch config/secretFile.json" \
  --prune-empty --tag-name-filter cat -- --all

replacing config/secretFile.json with the path to the file you want to be removed. In my case, secretFile.json is inside of a folder named config.

Note: The command above deletes the file from your local repository too, so ensure you have copied the content to a notepad or whatever you use before running the command.

Then create and add your file to .gitignore so you don't accidentally push it to GitHub again. You can do that with

echo "name-of-your-file" >> .gitignore

git add .gitignore

git commit -m 'add file to .gitignore'

Once you are satisfied with your changes, you can then push them to GitHub

git push origin --force --all

And that's it! Your repo history is clean without any trace of your sensitive file.

Thanks for reading.

5 tips that will help you grow quickly as a new developer

Sophia Enakpoya — Sun, 01 Nov 2020 08:29:11 +0000

Hi there! My name is Sophia and this is my very first post. When I first started learning to code, there were lots of mistakes I made that probably set me back for a while and I thought I should write about them so that other new developers can learn from it.

So here are five things I would do differently if I had to go back and do it all over again.

PS. This is my own experience and what I would have liked to know at the time I was just starting out so feel free to take everything I've written with a grain of salt.

1. Join a community

The mistake some of us make is trying to learn in isolation. When I initially started learning, I spent almost a year going in circles. I didn't know anyone else who was into what I was trying to do. Real-life and even online. So I kept jumping from tutorial to tutorial, not really mastering anything. At some point, I completely lost interest and went almost 3 months not coding. The turning point for me was when I found a discord channel from FCC(freecodecamp). I met others who were at the same place I was and made connections. They helped keep me going and motivated when I felt helpless because, let's admit it, coding is hard and you're going to face difficulties as you go. The importance of a community can never be over-emphasized. It could be physical or virtual. For my circle and I, we went the virtual way and it has been really great. As early as you can, find a community that interests you and meet others who are on the same journey with you and also others who have gone through. A good place to find these communities is on Twitter. Get active. Interact with other developers. These connections can also help when you're ready for the job hunt.

2. Ask questions

When we are new at something, it's easy to always try figuring things on your own. But if you have been in the tech space for any amount of time, you would have probably heard someone say there are no stupid questions. It will help if you develop the habit of asking questions early on. There's no use to stay stuck on a problem for longer than necessary when there are people who can help you out. Also, build up your googling skills. Asking questions can be on google to friends or other community members.

3. Manage your expectations/ Have realistic goals

I've often heard people say everything is possible with tech. They say if you want to change your life, learn to code. While all of that is very enticing because, obviously, who doesn't want a better life? But what they don't tell you is how important it is to manage your expectations. I've read countless articles where the authors talk about how they learned to code and got six-figure salaries within 6 months. Exciting right? Now you wanna learn and get the same results in six months or possibly less. What you should know is, that isn't the case for a good percentage of devs out there. Some took 2 years or more to learn and get job-ready and then spent even more time before getting full-time jobs. So I say again, you must manage your expectations. This is because it's easy to lose interest and motivation quickly when you set out with a four-month goal and it's six months and you aren't where you planned to be. Now, don't get me wrong. I'm not saying you can't learn to code and be successful in a very short time or that you shouldn't push yourself as fast and hard as you can. No. I'm saying that things don't always go the way we plan and there's always difficulties along the way. Just learn to pick yourself up and keep going no matter what. And that would be my last point: determination.

4. Have a mentor

As good as joining a community is, having a mentor is also very important. A mentor doesn't necessarily have to be someone very advanced. Just someone who can assist when you need it. I got my first mentor almost a year after I started learning web dev. It was in the discord community and I can say he really helped me through some rough patches. Those times I wanted to give up, he was there encouraging me to just keep going. He knew exactly what I was feeling because he had gone through the same journey just a few years earlier.

5. Be determined

According to Wikipedia: 'Determination is a positive emotional feeling that involves persevering towards a difficult goal despite obstacles. Determination occurs before goal attainment and serves to motivate behavior that will help achieve one's goal.' Simply put, a determination is 'firmness of purpose'. Determination is really important in your journey. If you're not determined to see your goal through, you'll easily get discouraged by the sheer volume of what you have to learn. And it is really tempting to just give up when you first start learning concepts and you cant understand. Be determined! Keep going! It will eventually pay off.

Thanks a lot for reading. If you got this far and you liked my writing, feel free to reach out to me or say hi on Twitter @sophia_enax.