스코프 예제로 이해하기

hyo·2021년 10월 29일
0

[Javascript] 기초 학습

목록 보기
15/62

예제로 스코프의 개념이해

1.


get(20)에서, 여기서 전달인자 20은 사용되지않는 값이다. 20을 인자로 받아 함수에 전달해 주었지만 get함수 내부의 어떤 변수에도 할당되지 않는다.

2.

get 함수에 매개변수 x가 선언되어 있다. 즉 get함수가 반환하는 x는 전역 스코프의 x가 아니라, get함수 스코프에 선언된 별도의 매개변수 x이다. 따라서 result의 값은 전역변수 x에 할당된 30이 아닌 get함수의 전달인자 20이다.

3.

get함수는 전역에 선언된 x를 반환하고, set함수는 value라는 매개변수를 통해 받은 값을 변수 x에 할당한다. 하지만 get함수의 x와 set함수의 x는 다르다.
get의 x는 전역에 있는 변수 x를 가리키지만, set의 x는 let 키워드를 통해 set 함수 스코프 내에서 별도로 선언된 변수이다.

때문에 set(10)을 실행해도 전역의 x값은 여전히 30이고, set 함수 스코프 내의 x값만 10으로 변경될 뿐이다.

4.

set 함수는 매개변수 value를 통해 전달받은 값을 전역 변수 x에 할당한다.
즉 set(10)이 실행되면 전역의 x에 할당된 값이 30에서 10으로 변경된다. get(20)의 인자 20은 get함수 내부에서 사용되지 않아, result의 값에 아무런 영향 없음!

5.

get함수는 매개변수 x를 통해 전달된 값을 반환하므로, get(20)은 20을 반환한다.
그러므로 result값은 20이다. set(10)이 실행되면 전역변수 x의 값은 10으로 변경된다.

6.

함수 add2는 매개변수 x를 통해 전달받은 값을 다시 add함수에 전달하는 구조로 이루어져있다. add함수는 매개변수 y를 통해 받은 값을 전역에 선언된 x와 더하여 반환한다.

add2(5)를 실행하면 add(5) + add(5)가 반환되고, add(5)는 15를 돌려준다. 결과적으로 result 값은 30이 된다.

7.

outer함수 스코프에는 20을 값으로 하는 변수 x와 함수 inner가 선언되어 있다. outer는 inner함수를 실행시킨 값을 반환한다.
inner함수는 x를 반환함. 하지만 inner함수 스코프 내에 x라는 변수가 없기 때문에, 이 때 x는 바로 한 단계 위인 outer함수 스코프의 x가 된다. 따라서 result는 20 이다.

위 코드처럼 스코프가 위계적으로 겹칠 경우 안쪽 스코프부터 바깥 스코프로, 순차적인 스코프 체이닝이 일어남.!!!!

8. 중요!!!

outer함수를 실행하면, outer 함수 스코프 내에서 inner 함수가 호출된다.
inner는 변수 x의 값에 10을 더하는 함수이다. 이 때, inner에 의해 값이 변경되는 x는 inner의 바로 한 단계 위 스코프인 outer에 속한 x 이다.
즉 inner가 실행되면서, outer함수 스코프의 변수 x 값이 30으로 바뀐다.
하지만 변수 result에 할당된 값은 전역 스코프의 x 이므로, outer함수가 호출되어도 아무런 영향을 받지않는다.!!!!

9.

outer 함수는 전역 변수 x 에 20을 재할당한다. 따라서 result의 값은 20이 된다.
outer 내부에서 inner함수가 호출되고 있긴 하지만, inner함수는 바깥 스코프에 아무런 영향을 미치지 않는다.

10.

outer, inner 함수 모두 전역에 선언된 x 값을 변경하는 함수이다.
outer가 실행되며 전역의 x 가 20이 되고, 이어서 outer 내부에서 inner가 호출되면서 전역의 x 값에 또 다시 20이 더해진다.

profile
개발 재밌다

0개의 댓글