TIL no.19 - Scope가 무엇인가요?

wecode에서 자바스크립트에 대한 레플릿이 끝나고

westagram이라고 instagram을 html, css, javascript를 이용해 사이트 클론하는 과제를 했는데요 !

이 과제를 하면서 내 javascript 실력에 더 텅 빈 공허함을 느껴서,, javascript를 더 공부 해야겠다고 느꼇습니다.

하나하나 이해해야 할 파트별로 정리하면서 이해해보고자 합니다...

 

뼈,,,,저리게,,,,,,,,,,,🌟

 

---

 

SCOPE

: 스코프란 정의된 각 상수나 변수 등의 요소들이 허용된 영역, 범위를 스코프라고 합니다.

 

 

보통 처음에 자바스크립트를 공부하면서 배울 때, 별로 중요한 이론이라고 생각하지 않았었는데..

javascript 코드를 짜면서 자꾸 * is not defined 라며 정의되지 않은 변수라고 뜨는 겁니다...

이 이유가 바로 scope 때문이라는 것을 알게 되고 scope를 이해하는 것이 중요하다고 생각했습니다!

 

 

스코프가 결정되는 변수에는 전역변수와 지역변수가 있습니다.

 

전역변수는 한번 정의되면 어떤 함수 안에서도 그 변수를 사용할 수 있는 변수입니다.

지역변수는 지정된 범위 안에서만 사용가능하고 A함수 안에 정의된 변수를 바깥에서 사용할 수 없습니다.

 

 

그렇다면 다 전역변수로 사용하면 편리하지 않을까 ? 하고 생각하실 수도 있을 것 같습니다.

전역변수는 한번 정의되면 프로세스가 종료될 때까지 수거되지 않습니다.

이에 반해 지역변수는 그 함수가 사용될 때만 정의되었다가 완료되면 수거되는 변수입니다.

프로세스가 종료될 때까지 수거되지 않는 다는 것은 고로 이 변수가 메모리에 계속 용량을 차지하고 있다고 볼 수 있습니다.

일부적으로 필요한 모든 변수들을 다 전역변수로 정의한다면 어떠한 문제가 생길지 아시겠죠 ?

또한 모든 경우에 전역 변수를 사용하면 의도치 않게 변수 이름이 겹치는 경우가 발생할 일이 생기기 때문에 꼭 필요한 경우에 사용하는 것이 좋습니다.

 

 

---

 

 

전역 스코프인 맨 위의 a,b는 이 코드 내에 어디든 사용될 수 있는 전역변수입니다.

하지만 function wecode 안에 똑같은 이름으로 변수 a,b가 정의되어 있는 이 상태에서는

함수 안에 있는 a, b 를 먼저 읽기 때문에 '선', '릉' 이 console에 출력될 것입니다.

변수나 상수, 함수를 탐색하는 방향이 안에서 바깥이기 때문에

안에 있는 a, b를 먼저 읽게 되는 것입니다 .

 

 

 

const : 선언할 때 값을 넣어주어야 하고 한번 넣은 값은 바꿀 수 없다. 블록레벨 스코프이다.

let : 선언과 값 정의를 따로 할 수 있고 넣은 값은 이후 얼마든 바꿀 수 있다. 대신 선언을 다시 할 수는 없다. 블록 레벨 스코프이다.

var : 값 변경가능 또 다시 선언하는 것까지 가능합니다. 자바스크립트가 이처럼 발전하기 전에 주로 사용. 유연하지만 그만큼 많은 오류를 발생시키는 변수. 함수 스코프를 갖는다. 선언부가 함수 안이기만하면 블록에 선언되었어도 해당 함수에서 다 사용가능합니다.