일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- flex-direction
- flex
- for in
- 조건문
- justify-content
- 타입
- javascript
- boolean
- for
- Methods
- 비교연산자
- if else
- align-content
- 논리연산자
- flex-wrap
- 기초
- properties
- for of
- 프론트엔드
- 함수표현식
- 함수선언식
- 속성
- typeof
- 함수
- 문자열
- frontend
- 변수
- 화살표함수
- ELSE
- 반복문
- Today
- Total
하얀 코딩
[JavaScript - 9] 스코프(Scope) 본문
스코프
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
'JavaScript' 카테고리의 다른 글
[JavaScript - 11] 호이스팅(hoisting) (0) | 2022.11.11 |
---|---|
[JavaScript - 10] 클로저(Closure) (0) | 2022.11.08 |
[JavaScript - 8] 원시 / 참조 자료형 (0) | 2022.11.08 |
[JavaScript - 7] 객체 (0) | 2022.11.08 |
[JavaScript - 6] Array 객체 메서드 (0) | 2022.11.06 |