하얀 코딩

[JavaScript - 9] 스코프(Scope) 본문

JavaScript

[JavaScript - 9] 스코프(Scope)

whitecoding 2022. 11. 8. 14:20

스코프

1. 변수 접근 규칙에 따른 유효 범위

2. 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만 반대는 불가능합니다.

3. 가장 바깥의 스코프는 전역 스코프(Global scope), 나머지는 지역 스코프(Local scope)

4. 지역 변수는 전역 변수보다 더 높은 우선 순위를 가짐.

5. 바깥쪽 변수가 안쪽 변수에 의해 가려지는(shadow) 이러한 현상을 쉐도잉(variable shadowing)이라고 부릅니다.

스코프의 종류

1. 블록 스코프(block scope) : 중괄호를 기준으로 범위가 구분됩니다.

2. 함수 스코프(function scope) : function 키워드가 등장하는 함수 선언식 및 함수 표현식을 만듭니다. 

3. 화살표 함수는 블록 스코프로 취급됩니다. 함수 스코프가 아닙니다.

스코프 개념의 let / var / const

변수 선언에서 주의 할 점

1. var로 선언된 전역변수 및 전역 함수는 window 객체에 속하게 된다.

 

※ window 객체란?

window

브라우저 안의 모든 요소들이 소속된 객체로, 

최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 '전역 객체'라고도 부른다.

 

⑴ 우리가 작성하는 코드들은 대부분 window 객체의 프로퍼티가 된다. 

⑵ 특별한 경우를 제외하면 사실상 window 객체를 직접적인 사용할 일은 드물다.

⑶ 페이지 내에 있는 모든 객체를 다 포함하고 있기 때문에 window는 그냥 생략이 가능한 특징이 있다. 

 

let과 const 키워드로 선언한 변수는 블록 스코프이기 때문에 window 객체 내부의 블록에서 선언된 것으로 평가되어 전역 객체의 프로퍼티로 활용되기는 어렵다. 이 부분은 scope의 개념을 잘 이해하고 있다면 충분히 이해할 수 있는 부분이다.

let myName = 'white Coding';

console.log(window.myName); // undefined

2. 전역 변수에 너무 많은 변수를 선언하지 말 것.

(편리한 대신, 다른 함수 혹은 로직에 의해 의도되지 않는 에러 발생)

 

3. var는 블록 스코프를 무시하며 재선언을 해도 에러를 내지 않는다.

 

4. 전역 변수를 var로 선언 하는 경우 문제가 될 수 있다.

 

5. 실수 방지를 위해  'use strict'; 입력해서 Strict Mode를 사용한다.

 

6. Strict Mode('use strict')는 브라우저가 보다 엄격하게 작동하도록 만들어줍니다.

앞서 언급한 것처럼 "선언 없는 변수 할당"의 경우도 Strict Mode는 에러로 판단합니다.

 

7. 'use strict'; 참고 사이트 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode