[JS] 헷갈렸던 스코프 개념 콘솔에 찍어보기

헷갈렸던 개념들 콘솔로 정리!!!!

콘솔을 들여다보자. (나만 들여다볼듯..)

---

첫번째 함수 

1. 내부 함수에서 x 값 선언 후 값 할당 -> 내부 함수에서 console 찍어보면 새로운 x 값이 찍힌다.
                                                              내부 함수에서 재선언한 x의 값은 외부함수나 전역의 x 값에 영향을 주지 않는다.

* 2번(중간) 콘솔 : 내부함수에서 x의 값인 NaN을 Return 하지만 outer()의 값에 찍히지 않는다.

* 3번(오른쪽) 콘솔 : 외부함수에서 x를 재선언 후 값을 할당 안 했지만 전역의 x 값은 변하지 않는다.

 

 

* 1번(왼쪽) 콘솔 : 외부함수 x 값을 NaN으로 재할당했다. -> 전역의 x의 값이 NaN이 됐다. 

* 2번(중간) 콘솔 : 외부함수 x 값을 undefined로 재할당 했다. 외부함수 inner() 호출 후, x 값에 x + 5를 재할당 후 x 값을 콘솔로 찍었다. -> 여전히 x 값은 외부함수 스코프 안에 있다. (undefined + 5 = NaN)

* 2번(중간) 콘솔 : 내부함수 x 값은 선언만 해주니 결과는 NaN이 나온다.

* 3번(왼쪽) 콘솔 : 내부함수 x 값을 선언 후 값 할당을 해줬다. 내부함수 콘솔이 21로 잘 찍혀 나온다.

 

* 1번 콘솔(왼쪽) : x의 값의 변화 추이를 살펴볼 수 있다.

* 2(중간)~3번(오른쪽) 콘솔 : 내부함수의 x 의 값을 return 하고 싶다면 내부에서도 return, 외부에서도 inner 함수를 return 해야 한다.

* 2번(오른쪽) 콘솔 : 외부함수에서 inner를 return을 하지 않으면 함수만 언급될(호출X) 뿐, 값은 나오지 않는다.

* 1번(왼쪽) 콘솔 : 함수가 언급된다.

* 2번(중간) 콘솔 : 함수가 호출되지만 나온 값이 외부함수에서 return 되지 않으므로 의미가 없다.

* 2번(오른쪽) 콘솔 : 함수가 호출되고 return 대신 console로 inner() 값이 바깥세상(전역!) 에 나올 수 있게 된다.

---

두번째 함수 

* 1~2번(왼쪽~중간) 콘솔 : 같은 내용임 / 역시 inner()을 return 하고 있지 않기 때문에 값이 나오지 않는다. 전역 x의 값은 변화가 없다.

* 3번(오른쪽) 콘솔 : 여기서는 외부함수에서 inner()을 return 해준다. 따라서 outer()의 값이 내부함수 x의 값으로 나온다.

* 3번(오른쪽) 콘솔 : x의 추이는 다음과 같다. 

(1) outer()을 호출하는 순간, let x = 20으로 x 값이 새롭게 선언 및 할당이 된다.

(2) 함수는 건너뛰고, 'before outer x 값은 외부함수에서 재선언된 x인 20이 도출이 된다. -> 'before outer 20'

(3) 그 다음 inner()로 내부 함수를 호출한다. 내부함수에 들어가면 x 값이 재할당이 된다. (기존 값 20에 + 10 이므로 30)

(4) 내부함수에서 해당 x 값을 콘솔로 찍는다. -> ' inner 30'

(5) 내부함수에서 빠져나온 후, 마지막 외부함수의 줄에 있는 'later outer x' 에서 x의 값은 내부함수로 인해 변화된 값 30이 도출된다.