Scope & Variables

Wilson Espina

What did we do last lesson?

Learning Objectives

At the end of this class, you will be able to:

• Understand the homework submission process
• Connect to Github with SSH
• Understand how scope works
• Determine the scope of local and global variables
• Describe what hoisting does

Agenda

• Submitting Homework
• Using SSH
• Variable scope
• The var, let, and const keywords
• Hoisting

Exit Ticket Questions

Homework

Homework Repo Recap

Homework Repo Recap

Push Code to Remote

Create a Pull Request

Submitting Homework

Submit Homework: Step 1

These are the steps you'll do to submit every Homework assignment:

In Finder:

• Navigate to firstname folder (example: wilson-espina)
• Copy your completed Homework-1 folder from last Wednesday into your firstname folder.

Submit Homework: Step 1 Illustration

Submit Homework: Step 2

In Finder:

• Navigate to jsd-9-homework folder
• git add .
• git commit -m "submitting Homework 1"
• git push origin master

Submit Homework: Step 2 Illustration

Submit Homework: Step 3

In Browser:

• Go to your fork of jsd-9-homework on git.generalassemb.ly
• Click Pull Request
• Click Create new pull request
• Click Create pull request

Create a Pull Request

Homework Review

Setting up SSH

What is SSH?

• Secure Shell or Secure Socket Shell is a network protocol that gives users a secure way to access a computer over an unsecured network.
• SSH keys are a way to identify trusted computers, without involving passwords.

SSH Keys

• SSH Client stores a Private key
• SSH server stores a Public key
• There is a negotiation starting from the Client to the Server and back again to prove identities.

SSH vs HTTPS on Github

• SSH lets us pull and push code from Github without having to enter credentials each time! 🥳 🎉
• Github recommend using HTTPS as you are less likely to encounter problems with firewalls or proxies: https://help.github.com/en/github/using-git/which-remote-url-should-i-use

Switching from HTTPS to SSH

Open Terminal:

• Navigate tojsd-9-resources folder
• Head to your repo on Github and click 'Clone or Download'
• Click on 'Use SSH' and copy to the clipboard
• Type git remote set-url origin and paste the copied text

  
  git remote set-url origin git@hostname:USERNAME/jsd-9-resources.git
  								

• Verify that the remote URL has changed

  
  git remote -v
  # Verify new remote URL
  origin  git@hostname:USERNAME/jsd-9-resources.git.git (fetch)
  origin  git@hostname:USERNAME/jsd-9-resources.git.git (push)
  								

Classroom Resources

Scope

Global Scope

When you start writing JavaScript in a document, you are already in the Global scope:

let flavour = 'Strawberry'; // global variable

function pick() {
  console.log(flavour); // Strawberry
}
console.log(flavour); // Strawberry
							

• A variable declared outside of a function is accessible everywhere, even within functions. Such a variable is said to have global scope.

Local Scope - Function Scope

Variables defined inside a function are in the local scope.

let flavour = 'Strawberry';

function pick() {
  let newFlavour = 'Chocolate'; // function scope
}

pick();
console.log(newFlavour); // Throws an error

							

• A variable declared within a function is not accessible outside of that function. Such a variable is said to have function scope.

Local Scope - Block Scope

A variable created with let or const creates local scope within any block, including blocks that are part of loops and conditionals:

let flavour = 'Strawberry';
let name = 'Sarah';

if (flavour === 'Strawberry') {
  let message = 'You chose the right flavour';
  console.log(message + ' ' + name); // You chose the right flavour Sarah
}

console.log(message + ' ' + name); // 'message' is undefined
							

• This is known as block scope.

Let, Const, Var and Scope

Javascript Specification

ECMAScript provides the rules, details, and guidelines that a scripting language must observe to be considered ECMAScript compliant

• JavaScript is a language that conforms to the ECMAScript specification

let

• Keyword in ECMAScript6 (ES6)
• Local scope within functions and within any block (including loops and conditionals)

let broadcasters = ['BBC', 'ITV', 'SKY'];
							

const

• Part of ES6
• Local scope within functions and within any block (including loops and conditionals)
• Used to declare constants

const tax = 0.2;
							

var

• Original JS keyword for creating variables
• Only type of local scope it can create is function scope
• Generally, var can be avoided outside of working on legacy code

var broadcasters = ['BBC', 'ITV', 'SKY'];
							

let/const vs var

let x = 1;
if (true) {
  let x = 2;
  console.log(x); // 2
}
console.log(x); // 1
								

var x = 1;
if (true) {
  var x = 2;
  console.log(x); // 2
}
console.log(x); // 2
								

let, const and var

Hoisting

Hoisting

• When JavaScript compiles all of your code, all variable declarations using var are lifted to the top of their function/local scope.
• Hoisting doesn't happen in the code, rather the Compiler.
• Google Chrome uses V8 Compiler / Interpreter.

Hoisting

function celebrate() {

  console.log("Wahoo!");
  var x = 1;
}
								

function celebrate() {
  var x; // top of function scope
  console.log("Wahoo!");
  x = 1;
}
								

• Variable names declared with var are hoisted, but not their values.

Hoisting

function celebrate() {
  console.log("Wahoo!");
  let x = 1;
}
								

function celebrate() {
  console.log("Wahoo!");
  let x = 1;
}
								

• Variable names declared with let or const are not hoisted.

Hoisting - Function Declarations

foo()

function foo() {
  console.log("Hi!");
}
								

function foo() {
  console.log("Hi!");
}

foo();
								

• Function declarations are hoisted.
• Your code can call a hoisted function before it has been declared.

Hoisting - Function Expressions

foo()


var foo = function() {
  console.log("Hi!");
}
								

var foo;

foo(); // error foo is not a function
foo = function() {
  console.log("Hi!");
}
								

• Function expressions are treated like other variables

Hoisting - Function Expressions

foo()

let foo = function() {
  console.log("Hi!");
}
								

foo(); // foo is not defined

let foo = function() {
  console.log("Hi!");
}
								

• Function expressions are treated like other variables

let, const and var

Learning Objectives - Review

• Understand the homework submission process
• Connect to Github with SSH
• Understand how scope works
• Determine the scope of local and global variables
• Describe what hoisting does

Lookahead to Next Lesson

Objects & JSON

• Introduction to objects and methods
• Real World objects
• Understand what is JSON
• Work with JSON-formatted data