var가 어쩌구..let이 저쩌구..

😅Intro

사건의 시작은 바야흐로 5일전...
수업이 끝나고, 몰래 멋사 스터디들 안의 강의를 도강하려 어슬렁어슬렁 거리다 본의 아니게 var 와 let 의 차이를 설명하게 되는데...

let snack = '허니버터칩';

function getFood(food) {
  if (food) {
      let snack = '스윙칩';
      return snack;
  }
  return snack;
} 

나: 여기서 콘솔로 getFood(false)를 찍으면 뭐가나올까용?
K씨: 허뉘..버..터칩?!! (•_•)

var snack = '허니버터칩';

function getFood(food) {
    if (food) {
        var snack = '스윙칩';
        return snack;
    }
    return snack;
}

나: 이건..그럼요?
K씨: 허...뉘..버터칩?? (⊙_⊙;)

❓Why?

왜 var로 선언했을 때 허니버터칩이라고했는지 물어보니까,
getFood의 안에 false일때의 조건은 스낵이고, 호이스팅이 일어나서 맨위의 허니버터칩을 찾아간다고 했다.

⭕Answer

K씨의 이해에 도움을 주기 위해서는, 함수레벨스코프와 블록레벨스코프에 대한 설명이 필요하다고 생각했다.

함수 레벨 스코프 (Function-level scope)
: 함수 내에서 선언된 변수는 함수 내에만 유효하다.
블록 레벨 스코프 (Block-level scope)
:모든 코드 블록 내에 선언된 변수는 코드 블록 내에서만 유효하다.

+로, var = 함수 레벨 스코프이며, 선언이 될 때, 실행 컨텍스트 내에 undefined를 할당한다.
그리고, let = 블록 레벨 스코프라는 설명을 더하며 이어갔다.

나: 그러면...let일 때는 함수컨텍스트에서 할당된 값이 없으니까 스낵을 찾으러 스코프체이닝이 일어나겠죠? 그래서 getFood(false)는 허니버터칩이 출력 되고,
var일 때는 함수컨텍스트에서 undefined가 할당 되있으니까 getFood(false)는 허니버터칩이 아니라 undefined인거구...
K씨: .....?!

회고

1. 머리 속에 있는 생각들을 말로 꺼내보려니까 쉬운게 아님을 진짜진짜진짜진짜진짜 많이 깨닫게 된 사건이였다.

2. 알려주면서 '나도 잘못 이해하고 있었구나..!'라는 포인트들이 많았고, 톡톡 튀는 듯이 깨닫는 점들이 많았었다.

3. 부끄럼이 조끔 많은 사람이라.. 멋쟁이사자처럼 4기에 멋진분들이랑 친해질 계기가 많이 없었는데, 아는분들이 점점 더 늘어나는 게 기분이 좋았다.

4. K씨는 정말 이해했을까..? (T_T)