[TIL] Javascirpt Scope

javascript logo

1. scope 란

◎ javascirpt에서 scope란, 변수가 어디까지 쓰일 수 있는지의 범위를 의미합니다.

변수를 선언하여도 ***is not defined라는 에러 메시지를 보는 것도 scope와 관련된다.

어떤 변수는 여기저기 쓸 수 있는 반면에, 어떤 변수는 특정 함수 내에서만 쓸 수 있습니다.

이런 개념이 scope이다.

2. Block Scope(블록 스코프)

◎ scope의 개념을 알기 전에 알아야 할 개념은 block입니다.

block이란 중괄호({ })로 감싸진 것을 의미합니다.

코드를 보면서 block scope가 어떤 의미인지 알아보자.

 

• function의 내부는 하나의 block이다.

function block

• for문도 하나의 block이다.

for문 block

• if문의 {}도 하나의 block이다.

if문 block

블록 내부에서 변수가 정의되면 변수는 {} 내부에서만 사용할 수 있습니다.

블록 내부에서 정의된 변수는 local variable(지역변수)라고 부른다.

3. Global Scope(전역 스코프)

◎ scope는 변수가 선언되고 사용할 수 있는 공간입니다.

block밖인 global scope에서 만든 변수를 global variable(전역 변수)라고 부른다.

코드를 직접 보면서 확인해보자.

 

global scope

returnConcept 함수 내에서, returnConcept 함수 밖에 있는 concept 변수를 return 해주었다.

concept라는 변수는 global 변수이기 때문에 returnConcept함수의 block에서도 접근이 가능해서 'global scope'를 반환한 것입니다.

4. Scope의 오염

◎ global 변수를 사용하면 여기저기서 접근하기 쉬워서 좋다고 생각할 수 있지만, 너무 남용하면 프로그램에 문제를 일으킨다.

global 변수는 프로그램이 종료될 때까지 계속 존재한다.

이 말은 local 변수는 {} 이 끝나면 더 이상 변수가 살아있지 않고 쓸 수 없지만, global 변수는 계속 존재하기 때문에 이 변수는 어디에서 왜 필요한지 알려면 어디에서 let, const로 선언을 했는지 코드를 찾아야 한다.

scope이 오염된 코드를 봐보자.

• position이라는 global 변수가 있습니다.

• playerInfo 함수에서 새로운 변수를 선언하고 싶었는데 let 키워드를 작성하지 않았다.

• playerInfo를 호출하면 position 변수에 "골키퍼"가 할당된다.

• global 변수였던 position에 영향이 간다.

• 다른 함수에서 global 변수인 position을 사용하고 싶은데 값이 수정된 "골키퍼"라 사용하게 됩니다.

global 변수를 사용하면 위의 화면 같은 문제가 발생하므로 global 변수는 쓰지 않도록 노력해야 한다.

최대한 {} 내에서 let, const을 사용하여 변수를 새로 만들어서 사용하는 습관을 갖자.

 

※ let과 const는 블록 스코프에 해당한다.

 

https://jindev-t.tistory.com/20?category=839557

[TIL] Javascript 변수와 상수