For Beginners: What you need to know about Var, Let, Const

Chi — Fri, 08 May 2020 04:04:02 +0000

I originally wrote a tutorial about Var, Let, and Const using Observable Notebook.
In the notebook, you can edit the code, so that you understand by doing.

As a junior dev, it seems like you are told to never use var because the variable can be accessed anywhere, but what does that even mean? Keep reading and hopefully, understand the vocabulary and seeing code examples help. Of course, mess around with code as well.

REASSIGN VS REDECLARE:

When you create a variable, you declare it with the keywords let, var, const. Reassign means you are giving the variable another value. var can both be redeclared and reassigned. You will see that it is different for const and let from this table.

  var color = 'blue'; //color declared
  color = 'black' //color reassigned
  var color = 'pink' //color redeclared
  return color

SCOPE:

Var, let, and const have different types of scope. Scope is the context where variables and expressions live.

Types of Scope

Global: Variables can be accessed anywhere. A JS document is globally scoped. var is globally scoped unless it is declared in a function scope.
Local: Variables in a function scope or block scope are local.
Lexical: A child scope has access to data in its parent's scope. Think nested functions - inner functions have access to variables of the outer function.
Block: Code enclosed in curly brackets {} can't be accessed outside the block. Variables declared with let and const have block scope. You see the block scopes in if/else statements, for example. var variables are NOT block scope.
Function: The variables declared in a function is accessible in that local scope. var is used to declare in functions, though you might be told to only use let from now on.

  //Global Scope
 let milkyWay = 'I am globally scoped, so you can access me anywhere!';

  { //Block Scope 
    var earth = 'Earth'; 
    const sun = 'Sun';
    let house = 'My house';
  }

  console.log(earth) //'Earth'
  // console.log(milkyway)  //'I am globally scoped, so you can access me anywhere!'
  //console.log(house) // will return Error bc house is in block scope
  console.log(sun) //will return Error bc sun is in block scope

HOISTING

hoisting means that everytime you declare a variable, Javascript's engine will immediately hoist (or PULL) those variables up in the beginning of the scope and the variables will be declared. But will they be assigned or initialized?
With var, it will be initialized as undefined, while let and const will not. That is why you get an error

For Beginners: What is a function? My sh*tty explanation 💩

Chi — Wed, 01 Apr 2020 08:11:56 +0000

It's 12:09AM, I can't sleep. After drinking my protein shake (I was hungry) I decided, why not write an informational piece.
During a Women Who Code virtual meetup, someone needed help understanding what functions are so, here it is!

Understand the vocabulary

Use the vocab, whenever you can when you are talking about your code. For example, people get parameters and arguments mixed up when they first start. The more you use the correct language, the better you'll understand.

Vocabulary:

Function: A reusable block that allows you to perform some calculation or task. Reusable, so you don't have to repeat work!
Function Body: That's the meat of the function - the logic part.
Parameters: That's the words inside the parenthesis. Basically, empty variables names that aren't assigned to any data, until you call the function with the arguments. Speaking of arguments...
Arguments: When you call a function (aka execute your function after you have defined it), you provide the data/values to pass into that function. I dare you to code this function and run it function human(protein, veggie){ console.log( arguments);} tell me what you see! What is the data structure?
Return: Return allows you to exit out of a function when a condition is satisfied. Or, sometimes a function provides an output so you can use that output for something else.

Here is my shitty explanation:


//function name is human
//parameters are protein and vegetable
function human(protein, vegetable){
  //body
  console.log(arguments);
  console.log(`I am digesting ${protein} and ${vegetable}`);
  return '💩';
}

//calling the function with the arguments, 'protein shake' and 'spinach'
human('protein shake', 'spinach');
//output:
//[Arguments] { '0': 'protein shake', '1': 'spinach' }
//'I am digesting protein shake and spinach'
//'💩'

I am a human and one of my main functions is to take input like food and digest it. After the food is digested, what the output (aka return) is 💩. That's my shitty explanation. 😬

I will edit this later for more clarity and better examples but it is now 1:11AM and I should sleep.

Eat your vegetables!