스코프, 스코프체인, 렉시컬스코핑

스코프

개념

변수가 영향력을 발휘할 수 있는 범위 그 자체를 말함

scope 자체가 전역변수와 지역변수를 구분짓는 역할

gv가 영향력을 발휘할 수 있는 범위는 모든 영역이다.

영역에 영향력을 발휘할 수 있는 범위 자체를 scope라고 하고 모든 영역에 영향력을 발휘할 수 있는 스코프를 전역스코프라고 한다.

// 전역 스코프

var gv = "전역변수";

function func() {
	console.log(gv);
}

func();

console.log(gv);

지역스코프는 함수 안에서만 영향력을 발휘할 수 있는 스코프

lv 변수가 영향력을 발휘하는 범위는 함수 내부이다.

function func() {
	var lv = "지역변수"
	console.log(lv);
}

func();

console.log(lv);

함수는 서로의 스코프에 접근할 수 없다

b라는 함수에 다른 함수 a를 호출을 하고 콘솔로그로 a에 있는 변수 apple을 전달했다

function a() {
	var apple = "사과";
}

function b() {
	a();
 	console.log(apple);
}

b();

잘못된 생각 : a라는 함수를 호출시 중갈호 안에 있는 구문이 실행되고 var apple = "사과"; 코드가 a();에 들어가게 되니까 콘솔로그로 출력시 사과가 출력되야 정상아닌가?

함수호출과는 전혀 상관없다

apple이라는 변수가 영향력을 발휘할 수 있는 범위는 함수호출과는 상관없이 그 함수 안 뿐인 것이다

추가설명

검은색집과 파란색집이 존재한다.

검은색집에 apple이라는 물건을 넣는다

함수호출과는 상관없이 함수를 만든 단계에서 파란색집과 검은색집은 별개의 집이다.

즉, 검은색집을 파란색집에 호출했다고해서 검은색집 안에 있는 물건이 파란색집 안에 들어가는 것은 아니다.

서로 독립적인 구역이기 때문에 서로에게 영향력을 발휘할 수 없다.

스코프 체인

설명

함수 안에 함수를 만들고 콘솔로그로 a+b+c 값을 출력하면 무엇이 출력될까? 60이 출력됨

이렇게 출력되는 이유가 바로 스코프체인과 관련되어있다

60이 출력되었다는 말은 a,b,c 모든 변수에 접근했다는 의미이다

var a  = 10;

function func1() {

	var b = 20;

	function func2 () {

		var c = 30;

		console.log(a + b + c);
	}

	func2();
}

func1();

먼저 func1 호출시 중갈호 구문이 실행이 된다

func2를 호출해서 이전에 만들어놓은 func2 함수의 중갈호 구문이 실행

안에서 바깥쪽으로 탐색

a 탐색 func2에 없음 -> 바깥쪽 func1에 없음 -> 전역변수에 존재하는지 따짐 -> 존재(10할당)

b 탐색 func2에 없음 -> 바깥쪽 func1에 b존재(20할당)

c 탐색 func2에 존재(30할당)

지금처럼 안쪽에서부터 외부를 탐색 하는것, 이것 자체를 스코프 체인이라고 한다

추가설명

a변수는 전역변수 - 전역스코프(모든영역[초록색]에 영향력 발휘)

func1 - 지역스코프(파란색 안에서만 영향력 발휘)

func2 - 지역스코프(빨간색 안에서만 영향력 발휘)

그림을 보면 스코프들이 각각 겹치게 됨

안쪽에서부터 바깥쪽을 탐색하는 구조 이것을 스코프체인이라고 한다

만약 바깥쪽에서 c를 탐색하게 되면 바깥쪽에서 안쪽을 탐색하겠다라는 의미가 되어서 정의되지않았다는 에러문구가 출력된다

즉, 안쪽에서 바깥쪽으로 탐색은 허락하지만 바깥쪽에서 안쪽을 탐색하는건 안된다

중첩스코프, 스코프버블 이라고도 불린다(같은개념)

var a  = 10;

function func1() {

	var b = 20;

	function func2 () {

		var c = 30;

		console.log(a + b + c);
	}

	func2();

	console.log(c);
}

func1();

렉시컬 스코핑

함수는 서로의 스코프에 접근할 수 없다를 말하는 것이다

name에 무엇이 출력될까?

var name = "Woosung";

function func1() {
	console.log(name);
}

function func2() {
	name = "Kim";
	func1();
}

func2();

함수를 호출했다고 해서 func1에 console.log(name); 이 들어가는건 아님

func2 안에 name은 var 키워드를 사용한게 아님, 결과적으로 name이라는 전역변수 안의 Woosung이라는 값은 Kim으로 변경된 것이다

a가 3.14 변경된거랑 같은행동임

var a = 100
a = 3.14

즉, func1 안에 있는 console.log(name)은 전역변수 name을 가져온것인데 이미 kim으로 바뀌어진 상태로 가져온 것

앞에다가 만약 var키워드 사용했으면 woosung이 출력됨

var키워드를 사용함으로써 func2 안에있는 name이 영향력을 발휘할수있는 범위는 func2안이 되어버린 것

전역변수 name과 지역변수 name은 이름만 같은 서로 다른 변수이다(변경된게 아니기 때문에)

var name = "Woosung";

function func1() {
	console.log(name);
}

function func2() {
	var name = "Kim";
	func1();
}

func2();