[JavaScript] Scope

var greeting = 'Hello';
function greetSomeone() {
    var firstName = 'Josh'
    return greeting + ' ' + firstName;
}
 
greetSomeone();  // => 'Hello Josh'
firstName;  // ReferenceError

function greetSomeone() 범위는 => Local Scope

var greeting부터 firstName까지 => Global Scope

안쪽(Local Scope)에서는 바깥(Global Scope) 값을 가져올 수 있는데

바깥쪽에서는 안쪽 값을 가져올 수 없다

(6:40)

What is a scope?

변수는 어떠한 환경 내에서만 사용 가능하며, 프로그래밍 언어는 각각의 변수 접근 규칙을 갖고 있다

· 변수와 그 값이 어디서부터 어디까지가 유효한지를 판단하는 범위

· 즉, Scope는 변수 접근 규칙에 따른 유효 범위를 의미

· JavaScript에서는 함수가 선언되는(Lexical) 동시에 자신만의 Scope를 가짐

Lexical(static) scope vs. Dynamic scope

· Lexical(static) Scope: 유효범위가 코드를 작성될 때 결정됨

· Dynamic Scope: 유효범위가 실행 순서에 의해 결정됨

(8:30)

Rule 1: Local Scope vs. Global Scope

· Scope는 중첩이 가능

· 하위 Scope가 상위 Scope의 변수 접근 가능

· Global Scope는 어디에서도 접근 가능

· 지역변수는 함수 내에서 전역변수보다 높은 우선순위

var global = '전역변수'
 
function foo() {
    var local = '지역변수'
}

var hero = 'spiderman'
 
function foo() {
    var hero = 'ironman';
    console.log(hero);
}
 
foo(); // => ironman (안쪽 변수가 바깥쪽보다 우선순위를 가진다)

(6:30)

Rule 2: block level vs. function level

· JavaScript는 기본적으로, function level의 scoping 규칙을 따름

var name = "Richard";
 
function showName() {
  var name = "Jack"; // 지역 변수
  // showName 함수 안에서만 접근 가능
  console.log(name); // 'Jack'
}
 
console.log(name); // 'Richard'
showName(); // 'Jack'
console.log(name); // 'Richard'

var name = "Richard";
// 아래의 if문은 name변수에 대한
// local scope를 생성하지 않는다. ★
if (name) {
  name = "Jack";
  console.log(name); // 'Jack'
}
// if문에서 변경된 name은 여전히 전역 변수!!
console.log(name); // 'Jack'

for(var i=0; i<5; i++) {
  console.log(i); // 다섯번 iteration
}
console.log('final i:', i); // i = 5

function level을 따르지 않는 변수 선언

· let, const keyword (ES6 기능)

for(let i=0; i<5; i++) {
  console.log(i); // 다섯번 iteration
}
console.log('final i:', i); // ReferenceError

· let과 const keyword는 block을 벗어나면, 접근 불가능

· let과 const는 var로 정의된 변수를 재정의할 수 없음

· const는 불변(immutable)한 값으로, 다시 값을 할당할 수 없음

Rule 3: 전역 변수와 window 객체

· 함수의 외부에서 선언된 모든 변수는 전역 범위

· 전역 범위를 대표하는 객체: window

· 모든 전역 변수는 window객체와 연결

var name = "Paul";
console.log(window.name); // Paul

Rule 4: 선언 없이 초기화된 변수는 전역 변수! (주의)

function showAge() {
  // age는 전역 변수.
  age = 90;
  console.log(age);
}
showAge(); // 90
console.log(age); // 90 (age가 전역변수로 되버렸기 때문에 바깥에서 출력가능)
 

warning!

· 버그를 줄이기 위해 선언 없이 변수를 초기화 하지마세요

· 가급적 전역 범위에 변수를 생성하지 마세요

Rule 5: Hoisting

· 변수 선언은 범위에 따라 선언과 할당으로 분리됨

· JavaScript 엔진이 내부적으로 변수 선언을 scope의 상단으로 끌어올림(hoist)

Quiz

a = 2;
var a;
console.log(a); // ??

답 :

실제 코드

a = 2;
var a;
console.log(a); // 2

JavaScript 엔진

var a; // (hoising되어 끌어올려짐)
a = 2;
console.log(a); // 2

Hoisting: 선언과 할당의 분리

실제 코드

var a = 2;

JavaScript 엔진

var a;
a = 2;

Quiz

console.log(a); // ??
var a = 2;

실제 코드

console.log(a); // undefined
var a = 2;

JavaScript 엔진

var a;
console.log(a); // undefined
a = 2;

Hoisting: Scope의 상단으로 끌어올림

실제 코드

function showName() {
  console.log("First name : " + name);
  var name = "Ford";
}

JavaScript 엔진

function showName() {
  var name;
  console.log("First name : " + name);
  name = "Ford";
}

Hosting: 함수

· 함수 선언식은 항상 상단으로

· 함수 표현식은 할당된 변수만 상단으로 Hosting

함수 선언식

show(); // 이 경우에는 잘 작동함 함수선언식이라 함수가 통째로 호이스팅되었기 때문
 
function show() {
  console.log('displayed!');
}

함수 표현식

show(); // TypeError: show is not a function
// 지금 show는 var show;의 상태 변수만 선언한 상태이다.
var show = function() {
  console.log('displayed!');
}

ReferenceError: 보통 undefined된 변수에 접근할 때 발생

TypeError: 보통 함수가 아닌 것을 실행하려 할 때 발생

실제 코드

show(); // ?
 
var show = function() {
  console.log('displayed!');
}

JavaScript 엔진

var show;
show(); // TypeError (undefined 값 호출)
 
show = function() {
  console.log('displayed!');
}