CodeNewbie Community 🌱

Cover image for Commit3 //JavaScript Fundamentals [Let & Const]
Janet Webster
Janet Webster

Posted on • Updated on

Commit3 //JavaScript Fundamentals [Let & Const]

Picture of me jam reffing from a roller derby game in early 2023.


I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above.
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!


Let & Const Intro Video

SCOPE - the context that decides which variables are visible to different parts of your code
CONTEXT - the place your code evaluates and executes, like inside an if statement or function

  1. Global Scope - variables are available for the whole program
  2. Function Scope - function is within the curly brace and variables defined within the function are scoped to that function only
  3. Block Scope - like function scope, the curly braces define the block scope, like an if statement or loops

Basically, we are doing away with using the VAR keyword, but we will still use "variables" they will just be called LET and CONST now.
LET - keyword used to define variables with block scope
CONST - keyword used to define a variable with block scope

This will help us reducing errors as our code expands.

Scope, Input, & Creating Elements

How do we determine when do use LET versus CONST?

  • CONST will be used basically 95% of the time
  • LET will be used inside code blocks like loops, if/else if statements
  • LET will be used when you may want to reassign the value of the variable

GitHub Repo for Let & Const

GATHER INPUT & CREATE ELEMENTS
This is the part I'm excited for because in my mind all along I've wanted to be able to make the data more malleable or user-input friendly. Having previously worked with databases this is what makes sense to me.

TOOLS: value, createElement(), append(), querySelectorAll()

This one was a lot of fun!

GitHub Repo for Input & Creating Elements

Practice Quiz: Scope

The question I struggled with was the final one where I had to fill in the blank.

addPetButton.addEventListener("click", function () {
  const pet = petInput.
value
;
  if (pet !== "") {
    addToList(pet);

updatePetCount
//I'm not sure how I would have known this answer
();
  }
});

const addToList = function (pet) {
  const listItem = document.
createElement
("li");
  listItem.innerText = pet;
  petList.
append
(listItem);
};

const updatePetCount = function () {

const
//this one I just wasn't paying attn and typed in let instead  
 pets = document.
querySelectorAll
(".pet-list li");
  petCount.innerText = pets.length;
};
Enter fullscreen mode Exit fullscreen mode

If you have any insight on the updatePetCount please let me know!

Assemble a Potluck Guest List

There were several points where I got stuck on this and needed to refer to the solution code, but I felt good about the portions that I was able to write on my own without reference. The last aspect was the instruction of saying to add the "hide" class and I guess the classList is just not something I'm fully knowledgeable on. Another reason I want to go back and redo the first half of my JavaScript classes.

I have a headache during this lesson and my brain feels kind of like a sloppy joe at the moment, so to some extent I'm happy I was able to do anything in this state.

GitHub Repo for Assemble Potluck Guest List

Assign A Potluck Dish

Persevering through swamp brain into the next lesson. I got most of it done on my own. I did refer to the solution code a couple times, but really it ended up being some misplaced {} braces. Fixed those, but the assignments still aren't going out properly. I've submitted my code to a TA to see if they can point out my flaw.

So I was just missing the "li" in this line of code:

  const allGuests = document.querySelectorAll(".guest-list li");
Enter fullscreen mode Exit fullscreen mode

This made it so it was assigning a dish to the entire guest list instead of each individual person.

GitHub Repo for Assign a Potluck Dish

Image description
Obligatory "Nice." tweet for my GitHub contributions number.

Practice Exercises: Scope

Exercise #1
I'm having a hard time understand the instructions of what to accomplish. So I am definitely referring to the solution code a lot. I think there's a gap for me between the complete hand-holding of a code building process to instructions being more of a normal request. Or maybe I'm not quite grasping the concepts still.

GitHub Repo for Scope Practice Exercises 1

Exercise #2
This exercise comes with a code along video, so I'm going to take advantage of that since my brain doesn't seem to be fully picking up on these instructions this week.

GitHub Repo for Scope Practice Exercises 2

Exercise #3
Another code along video! This is nice. Time to wrap up this module. Oh actually, it looks like it's practice at debugging, so I'm going to try to see if I can diagnose the issues without the video first. I'm definitely not focused or tuned in today. Most of this was formatting and typos. Normally something I'm good at identifying.

GitHub Repo for Scope Practice Exercises 3

Well that's it for Let, Const, and Scope! I feel like I've learned a lot, but it was a really hard week.

Next week I'm returning to working out a few times a week, so I hope I can keep up the work of doing this several hours a day along with continuing my job search.

Thanks for checking out my work! If you have any thoughts or advice I'd love to hear it.

<3

Top comments (7)

Collapse
 
kelsiepaige profile image
Kelsie Brown

Hi, I’m a Skillcrusher too! I really like that you are posting about what you’re learning while you’re learning it. I think that it’s smart approach to learning in this bootcamp. I’m currently finishing up the Guess the Word game and while I’m getting through it, I’m still very confused and don’t feel confident about what we’ve learned. Taking this approach might help with that

Collapse
 
twixmixy profile image
Janet Webster

Hi Kelsie! I definitely think it's helping at times. I think a lot of this will just be doing more coding once I wrap the course. Do you have ideas of projects you want to build?

Collapse
 
kelsiepaige profile image
Kelsie Brown

I have so many ideas, more specifically though I want to create a plant tracker app. There’s a lot I need to learn until I can start developing but I’m working on the design now. Have you checked out frontendmentor.io? If you’re looking for projects, this is a great source. They give you the design, you code it, push it to GitHub, and create a live demo of it and then submit for feedback. You can also use the projects on your portfolio.

Thread Thread
 
twixmixy profile image
Janet Webster

I'm on the slack for frontendmentor, but I haven't gone deep into the website or anything. Hoping to get the broad strokes down with Skillcrush and then go back in with projects for practice.

Thread Thread
 
kelsiepaige profile image
Kelsie Brown

That makes sense. I’m mainly testing my HTML and CSS knowledge with it. Realized I don’t know CSS as well as I thought but through their resources I’m getting a lot better.

Collapse
 
hubertbanks profile image
HubertBanks • Edited

The article provides a brief and clear introduction to the concepts of scope and context in JavaScript programming. It explains how to use the LET and CONST keywords to define block-scoped variables, reducing errors as the code expands. The author also discusses when to use LET versus CONST and how to collect input and create elements using JavaScript tools like value, createElement(), append(), and querySelectorAll(). Overall, the article is a great resource for beginners looking to improve their JavaScript skills. If you want to improve your skills or the games are coded without error, you can visit techzapk to find yourself a suitable game or tool.

Collapse
 
twixmixy profile image
Janet Webster

Thanks for your feedback @hubertbanks !