1. Block Scope

블록 스코프 라는 것은?
함수 스코프 라는 게 존재했음
스코프란 단어는 뭘까?
유효공간 할 수 있는 공간이라 생각하면됨 허용범위 정도?
함수 스코프란?
함수의 허용범위? 라기에는 애매하지 함수에 의해서 생기는 범위//
변수의 유효 범위가 ES5에서는 함수에 의해서만 나타났음
블락스코프: Block Scope
{} 에 의해서 생기는 유효범위
{} 에 의해서 변수의 범위가 결정된다.

1-1. 소개

{
  //이런걸 블록 스코프라 함
  let a = 10
  {
    let a = 20
    console.log(a)
  }
  console.log(a)
}
console.log(a)
레퍼런스 오류뜸
이유가 뭐냐?
호이스팅이 되지 않기 때문에 변수가 a자체가 없음
그러니까 이걸 어케부름? 이 나옴

블록 스코프란
if문, for문, while 문 등등 문단
식 expression 값이 될 수 있는 경우
값
값,식,문
'문단' 같은 경우 '결과'를 리턴하지 않음

문단 자체가 하나의 block-scope가 되는거다!

function hasValue (p) {
  console.log(v)
  언디파인드
  if (p) {
    상수는 트루시한거
    var v = 'blue'
    console.log(v)
    블루
  } else {
    var v = 'red'
    console.log(v)
  }
  console.log(v)
  블루
}
hasValue(10)

function hasValue (p) {
  console.log(v)
  if (p) {
    let v = 'blue'
    console.log(v)
  } else {
    let v = 'red'
    console.log(v)
  }
  console.log(v)
}
hasValue(10)

1-2. 상세

1) let, const에 대해서만.

console.log(a)
if (true) {
  var a = 10
  if (true) {
    var a = 20
    console.log(a)
  }
  console.log(a)
}
console.log(a)

console.log(a)
if (true) {
  let a = 10
  if (true) {
    const a = 20
    console.log(a)
  }
  console.log(a)
}
console.log(a)

2) Hoisting ?

기존 var : 변수명만 위로 끌어올리고 / undefined를 할당한다(값이 없으니까 undefined)
let : reference error가 나옴! a의 변수명을 끌어올리고 / undeefined를 할당하지 않는다.

if (true) {
  let a = 10
  if (true) {
    console.log(a)
    레퍼런스 에러
    const a = 20
  }
  console.log(a)
  10
}
console.log(a)
레퍼런스 에러

=> TDZ(임시 사각지대 이 안에서의 내역은 이 안에서만 작동한다.)
es6 같은 경우 암묵적인 규칙이나 이런거를 없애려고 한다.
그래도 기존 소스는 안고 가야한다.
왜냐? 함수 선언문이나 이런거는 이미 만들어졌기 때문에 이런거를 고치기 너무 어렵다.

3) this ?

var value = 0;
변수 벨류의 0
var obj = {
  value: 1,
  setValue: function () {
    this.value = 2;
    // this obj가 됨!
    2가되지
    (function () {
      this.value = 3
      여기 this? 윈도우가 되버림!
      이거는 그냥 함수를 바로 실행해 버리는 거 즉 윈도우 를 가리킨다.
    })();
  }
}
obj.setValue()
console.log(value) 
3이 나오고
console.log(obj.value)
2가 나온다!

왜 다르게 나올까?

var value = 0
var obj = {
  value: 1,
  setValue: function () {
    var self = this
    self.value = 2;
    (function () {
      self.value = 3
    })()
  }
}
obj.setValue()
console.log(value)
console.log(obj.value)

let value = 0
let obj = {
  value : 1,
  setValue : function () {
    this.value = 2
    {
      this.value = 3
    }
  }
}
obj.setValue()
console.log(value)
console.log(obj.value)

4) 모든 문 형태에 적용.

var sum = 0
for (let i = 1 ; i <= 10 ; i++) {
  sum += i
  for문 에서 i 같은 경우 인덱스를 체크하기 위한 거지 이거를 바깥으로 뺄 필요성이 없음!
  하지만 이게 var라면 바깥으로 빠져나가서 이미 선언한 변수로 중복 선언이됨
}
console.log(sum)
console.log(i)

{
  let a = 2
  if (a > 1) {
    let b = a * 3
    console.log(b)
    6
  } else {
    let b = a / 3
    console.log(b)
  }
  console.log(b)
  레퍼런스 에러
}
console.log(a)
레퍼런스 에러

if (Math.random() < 0.5) {
  let j = 0
  console.log(j)
} else {
  let j = 1
  console.log(j)
}
console.log(j)

let a = Math.ceil(Math.random() * 3)
switch (a) {
  case 1: {
    let b = 10
    console.log(a + b)
    break
  }
  case 2: {
    let b = 20
    console.log(a + b)
    break
  }
  case 3: {
    let b = 30
    console.log(a + b)
    break
  }
}
console.log(a, b)