JavaScript Rundown: Scope & Hoisting

This week on the JS Rundown, we’ll be talking about scope and hoisting! Both these terms can be confusing when learning JavaScript, but they are important to understand to ensure your code works as intended. 


Scope tells us when and where variables are accessible within a JavaScript program. Variables that are declared using the var keyword are said to be function-level-scoped, aka a variable declared within a function can only be accessed within that function. Using if-statements and loops will not affect the variable’s scope. This means that if a variable is defined with a function, it cannot be accessed outside of that function and we will get an error that the variable has not been defined:

function functionLevelScope() {
   var coolScope = "I am declared within a function!";
   if (true) {

// I am declared within a function!

// Uncaught ReferenceError: coolScope is not defined

That being said, it is also important to note that a variable created in a parent function can also be accessed by a child function (a function within a function). One example of this would be a variable defined outside of a function altogether, making it global. A global variable has global scope, meaning all scripts and functions have access to it:

var worldTraveler = "I'm global!";

function travelingSalesman() {

// "I'm global!"

As you can see above, our global variable can be accessed when we call our function. The global variable is located within the “window” object, which is the parent of the function that we declared. Therefore, calling travelingSalesman() does not produce an error.

Block Scope

ES6 (ECMAScript 2015) introduced two new keywords with block-level scoping in JavaScript: let and const. These were created to help solve issues involving hoisting (see next section below). Before ES6, block scope didn’t even exist, so these new variables serve to enforce this scope behavior. Let’s – no pun intended! – get into how these new variables work:

  • The main difference between the two is that let can be reassigned, whereas const cannot.
  • Once declared, these variables cannot be accessed outside of block scope. If they are between two mustaches {} then they aren’t going anywhere. Curly bracket prison for life. Declaring a variable with const or let within a function means its scope stays within that function.

Below is an example of what happens if we try reassigning our two variables:

const stayTheSame = "I wish I could change...";
let alwaysChanging = "If only I could sit still for once...";

function midlifeCrisis() {
   stayTheSame = "I sold my house and am moving to Bali!";

function wearyWanderer() {
   alwaysChanging = "I finally bought a house in the suburbs!";

// Uncaught typeError: Assignment to constant variable

// I finally bought a house in the suburbs!

Here we can see that our const variable cannot be reassigned and we get an error, whereas our let variable can, allowing our weary wanderer to finally settle down like they always dreamed of doing.


Hoisting is the process in which JavaScript rearranges variable declarations during the compilation phase by moving them to the top of their functional scope.

MDN states “The variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.” JavaScript only hoists variable declarations, not variable assignments. This can produce some major issues because a variable can exist before it is actually used.

*Note: I will just be using var in my examples for hoisting. Let and const are also hoisted, but they cannot be accessed before their actual declaration is evaluated at runtime. So for the examples below, if we use let or const instead, we will get an error that the variable has not been defined yet.

And we’re back to business. So for example, if I declare my variable after console logging it:

function hoistMeUp() {
   var hoistedVariable = "I'm afraid of heights";

// undefined

we get a return value of undefined. What happened to the variable we declared within our function? The reason that we got undefined is because JavaScript did the following before running our code:

function hoistMeUp() {
   var hoistedVariable;
   hoistedVariable = "I'm afraid of heights!";


Despite its fear of heights, our variable was hoisted up and is sitting at the top of our function without a value. A variable that is declared but not assigned anything has an initial value of undefined when created, which is why we get this return value in our example above. This can create bugs when we start creating more complex applications.

For now, it’s safe to stick to the golden rule since ES6: use const and let to keep your life simple and to avoid any hoisting issues.


Tips & Tricks for the Rails/JS Project

– Remove turbolinks
– Only need has many (not through)
– Doesn’t need to be a perfect replica of the Rails project (functionality doesn’t have to work)
– Just do the bare minimum and move on
– Some small tweaks to the JS files in config

The 7 Sins of my Sinatra Project

I am finally done with my second project for the course. I made a website that allows a user to signup and add workouts with movements, including reps, weights, rounds, and time. I’ve started working out again regularly and figured this would be an interesting project topic for me since I like to keep track of my workouts.

Man, did I think this project was gonna be a breeze! *There aren’t many moving parts, I’ll need 3-4 days tops!* It’s been almost 3 weeks so clearly my timing estimate was a little off. I guess this means I am most definitely still in learning mode. I know this will never end, but my delays on this project were quite disappointing as it was happening. Part of the delay also had to do with work and family time getting in the way so I shouldn’t feel too guilty.

Looking back, here are seven things I could have done better and hope to implement for my upcoming projects to save time and frustration:

1. I thought I had properly planned.

– Apparently I didn’t. I can’t wait to get started on something like this and think I’m ready, but I should have taken it a little slower and made sure I had all by bases covered. I had to keep going and back and forth between the code for my database and the controllers and it just got ridic. CHECK it before you WRECK it!

2. I didn’t join a project prep study group or watch a quick video lecture before diving in.

– I’m sure this would have made me much more aware of some small things I overlooked as I was going through my own project. Why not watch other people make/point out mistakes instead of making them yourself? Isn’t that how Bill Gates basically started Microsoft?

3. FINISH FIRST, then worry about pretty.

– I get so excited about the pretty part. Now that I’m finally there I am really just going to keep it simple for now and might come back to it later. I believe it had become a bit of a distraction at times when I should have been making sure my program was properly running. REMEMBER: THE CODE MUST WORK BEFORE IT LOOKS PRETTY.

4. User authentication is important.

– I almost turned in a project that allowed other people to potentially edit your workouts. Come on now.

5. But I’m scared of commitment.

– You sure do learn to add, commit and push. I’m sure I could have done it even more regularly and concisely. It was good practice, especially making sure that the commit messages are accurate. Now that I’ve moved on to using the terminal I’m really seeing it come in handy.

6. Focus on one thing!

– It’s not so easy writing commit messages if I’m jumping around and have I’ve worked on 5 different things. On the plus side, this shows me I can get sucked into a project like this and generally really enjoyed working on it. Could be a sign I didn’t make a terrible choice signing up for this course.

7. Don’t get bored.

– Because of the delay and a specific coding issue I was having, by the end I bored and wanted it to be over. New motto: just do the darn thing, meet the requirements, and move on. Easier said than done because of my perfectionist nature, but I shall try.

Here’s my project if you want to check it out:

My First Project!

I finished my first project with the online program and it sure was daunting at first. I recently took almost 3 months off the course and once I came back – BAM! – summarize everything I’ve learned so far in a project. Taking a break during the final stretch of the Object Oriented Ruby section was probably not the best timing, but that last code-free week in Costa Rica was totally worth it.

The goal of this project was to create a very basic CLI interface that pulls (scrapes) information from a website. I used the DC Improv website for my application, and you could interact with it to find out the shows for the upcoming month and find out more information about a particular show. Click here to watch a quick demo of my CLI app. The link to my standup performance at the DC Improv is available upon request. *modest plug*

Here are some things I learned when it comes to tackling larger labs like this:

1. I definitely did not need to spend 2 weeks on this.

2. Stop procrastinating and stop being a perfectionist. I’m still a total n00b, so why does my CLI app need to be perfect?

3. Do some test scrapes first! Make sure what you want to do will actually work. I basically ended up almost having 2 different projects because I had to start again from scratch. This was because I didn’t test my first website,, to see if individual restaurant pages could be scraped. They couldn’t be, at least without using complicated code that wasn’t necessary and too time consuming for this project.

4. Review and really understand the code you are trying to write, especially if you have examples to work off of. A lot of time was wasted going back and forth and making mistakes because I didn’t take a second to comprehend what exactly certain lines of code were meant to do. Ask what does this method achieve and what other classes does it interact with?

[Now for some more positive learning experiences…]

5. Scraping is fun! And so is creating your own project. I really ended up having fun with this once I got going. It was so satisfying to have your code work, and even seeing errors weren’t terrible because I usually knew what was wrong and how to fix them. So they weren’t a big, glaring red bummer, more like an encouraging “You’re almost there!”

6. I actually kind of know how to code. I just, like, created something that, like… works.

Until the next project! Hopefully I’ve learned my lessons.

To Respond or Not to Respond

Old school isn’t cool anymore

Back when I was 12 and making killer webpages (by killer I mean mediocre), it was so simple. The bar was set pretty low. Scrolling marquees were cool. So were sparkly homemade gifs. Should we unnecessarily put an iframe on this page? Definitely. If you were good with photoshop, your website was probably going to look “super kewl.”

I have been out of the web design game for a while now but always knew that responsive web design (RWD) was becoming crucial, especially since almost everyone now has a smartphone or an iPad. Plus about 5 years ago I was at this party in Cologne and was bored from stuffing my face with Mettwurst – literally raw meat – sandwiches because I didn’t feel like being social, and I ended up sitting in a corner reading a book about the importance of design responsiveness. I found the little book to be quite fascinating. I also learned that eating over five raw meat sandwiches is an impressive and disgusting feat.

Fast forward to today: responsive websites everywhere. And those who haven’t upgraded (let’s pick up the slack government agencies…) can stick out like a sore thumb. An outdated, awkward thumb that I’ve opened in Google Chrome on my phone and I have to zoom in to properly read the content. Our big awkward thumbs aren’t meant to click around on website links made for a laptop cursor! They have better and bigger things to do, like double-tapping on friend’s wedding photos on Instagram.

What exactly is RWD and why should we care?

RWD is a way of approaching web design so that all code and images can respond to screen devices of any size. That way your website can look fantastic on a 20-inch display or smartphone. This is achievable using CSS grid layouts and styling, flexbox, bootstrap, and media queries to name a few tricks.

It’s important because technology and design are constantly changing, and having a responsive website lets you change along with it, but with minimal effort. Plus, can you imagine have several different versions of your website for different devices? Instead of having one website to maintain, you now have at least three. That’s not only time-consuming but also extremely difficult to maintain. And let’s not even get into all the quirks between different web browsers and how you need your website to look good on all of them. It might seem totally overwhelming (I’m hyperventilating as I type), but I am learning it is possible and there are resources out there to help.

Teach me your ways

I don’t plan on summarizing everything here, but I want to compile a list of great resources that even I can come back to once I start creating my own website. Resources for the technical and design side of things. Get excited, is coming soon!

CSS Grid examples

Test a website on different device sizes across breakpoints

Beautiful blog designs for inspiration

Play around with bootstrap by growing a carrot garden

Tips for approaching RWD

What Am I Doing With My Life?

Every day I wake up and wonder if I’m “doing enough” with my life right now. Depending on how you phrase it, I am either a low-life who lives at home and doesn’t have a real job. Or, if we choose to look at the glass half-full, one could say I’m making a career change by taking some time to study programming so that I can finally love what I do. The latter sounds way better when introducing myself at parties. But the former isn’t entirely untrue either – ideally sans “low-life”.

I am the Bergermeister, and I am studying Full Stack Web Development with React through Flatiron’s online program. In this post I’ll give a little background as to how I got to this point and discuss why I am in the program in the first place.

The Bergermeister Leaves Germany

I studied Finance and German at the College of William & Mary in Williamsburg, Virginia. My senior year I got lucky and was awarded a Fulbright Teaching Assistant award and a CBYX for Young Professionals scholarship, both for Germany. Very blessed. Basically, I have studied German my whole life but had never been to the country, so I rubbed my cat’s belly and said “pleez can I has money 2 go 4 free?” And my dreams came true. I also worked pretty hard on my applications. I went with CBYX because we were required to find an internship at the end of the program, which I felt would be most beneficial for setting me up for a career after the program.

Long story short, I ended up staying in Germany for almost 5 years and was working mostly within the financial services industry as an account manager in a sales department. It wasn’t a bad gig, but I started to not like it. Then things improved. And then I really didn’t like. It goes downhill from there. As a last minute effort to find happiness, which always seemed to elude me no matter how many potato pancakes with applesauce I stuffed in my mouth at my favorite farmer’s market, I decided to quit my job and move back home. Back to good ol’ Springfield, Virginia. Because when I make a change in my life I make sure I move up. I’ve been back for almost a year now.

Hi! Will You Please Hire Me for This Job I Don’t Want?

I arrived home mid-July 2016. I was supposed to have a full-time job by October. Maybe November. Okay maybe I’ll find one by January. No but I really need to have one by May, at the latest.

It’s mid-July again and I clearly still don’t have one. It’s not that I didn’t try, because I did. Half-heartedly. The issue was that I just honestly wasn’t very excited about any of the jobs I was applying for. These were jobs that seemed to fit my profile because of my experience in sales. My lack of enthusiasm was probably apparent in my interviews. I wouldn’t be surprised if I sabotaged a few potential offers. But don’t fret! Living at home rent-free has allowed me to keep freelancing (proof-reading German to English translated documents) and take some other side jobs to make enough money to pay for my student loans (damn you!) and other expenses. So life hasn’t been too bad.

I was even making enough money to save a little, so in April I signed up for a week-long Improv 101 intensive with UCB in New York City. Off I went to loud and dirty Manhattan, ready to be disillusioned by the insanely competitive comedy scene and angered by how my $15 bowl of “the best ramen in town” wasn’t that great.  But not all hope was lost. That trip was actually the catalyst that brought me to this program in the first place. I crashed at a friend’s place since he was going to be gone for a few days (a real bed?!). So of course I did some rummaging through his book shelve. He had tons of programming books. Turns out he taught himself to code and made a career change a little while back. We had chatted about it briefly before he left for his work trip. He seemed to like his new job, he made the switch sound easy. Like anyone could do it.

I remember sitting on his bed one day after improv class, and suddenly I thought: Duh! This is what I need to be doing, I need to study web development and programming. It just made sense. I have the time, I have the funds (kind of), and I’ll probably regret it in 5 years if I don’t. Ta-da! The epiphany moment I had been waiting for. Thank you universe for telling me what to do with my life because I sure haven’t been able to figure it out.

Computer Nerd

I like to think I’m a bit of a computer nerd. At least I’ve always wanted to be one. When I was around 12 I taught myself how to make webpages with HTML and CSS. I had to make my Neopets guild and accompanying website look super kewl so we’d get more members. Obvi. I LOVED making webpages. There are few things in my life that I have been that passionate about, that can make me so happy. Bhangra, comedy, Crossfit, and food are some of the others… I’m weird.

I loved the mix of coding and graphic design, and I would literally wake up in the morning excited to get back to my computer to update a layout. “Because the one I made yesterday just isn’t good enough anymore!” I remember getting frustrated when my code wouldn’t work and I had to spend forever trying to find the error. Did code validation websites exist back then? That would have been helpful.

As I researched how to best get into programming, I first considered teaching myself. But I gave up web design over 10 years ago so I doubt I would be motivated enough. I looked into bootcamps and saw there were a lot of great ones, but I wasn’t interested in going into more debt. Nor could I afford expensive housing costs in NYC or San Francisco even if I got a deferred payment option. That’s when I found Flatiron’s online program, which was a perfect fit for me. I could take my time and continue to work on the side, all while living at home. They have great reviews and are also publicly audited. Plus I was awarded a scholarship for women to get 50% off my tuition! Isn’t she lucky, this Spr-ing-field girl? I’m all about maximizing that cash to savings ratio. I studied finance or something, so you should listen to me when I whip out that lingo. ETFs. DCFs. WTF. Why didn’t I buy Chipotle stock back in college? Because then this blog post wouldn’t even exist right now.

I am not entirely sure if I want to be purely front-end or back-end, or do a bit of both, so I really like how this program gives me a great overview. It hasn’t been easy so far. Everyone says programming is hard, and it is. Ugh. Part of me thinks there is no way I’ll make it through Rack, Sinatra, and Rails. Sounds like the name of a hip old-timey bar in DC. And I won’t lie, I’m a bit worried about where I’ll be in 6-12 months. Will I have a job? Or will I be a programming failure? But I’m actually fine with a little bit of uncertainty. I’m much happier now not knowing exactly what I’m doing with my life, compared to where I was before. If I don’t figure it out on my own eventually, I’m sure the universe will hand me another epiphany moment when I need it the most.