1. Global/Local Scope
Scope는 어떤 변수가 적용되는 범위를 나타낸다.
Global scope, local scope로 구분된다.
>> 안쪽 scope에서는 바깥 변수/함수에 접근 가능하지만, 바깥쪽 scope에서는 안쪽 변수/함수에 접근할 수 없다.
1
2
3
4
5
6
7
8
9
|
let wish = 'I want';
function foods(){
let food = 'cheese burger';
return wish + ' ' + food;
}
foods(); // 결과 : 'I want cheese burger'
food; // 결과 : ReferenceError
|
2. Block, function scope
2-1. Block Scope
block은 중괄호'{ }' 안의 영역을 이르는 말이다.
if 문, for문 등에서 사용하는 block에서 정의된 변수는 해당 block에서만 사용될 수 있다.
1
2
3
4
5
|
for(let i = 0; i < 10; i++) {
return i
}
console.log(i) // 결과 : Reference Error
|
2-2. Function Scope
function scope는 중괄호{}로 구분은 되지만, 반드시 function(){}의 중괄호 안에만 있는 scope를 의미한다.
var 키워드와 let 키워드의 차이
var 키워드는 함수 단위로만 scope를 갖게 되고, let 키워드는 block 단위( '{ }' )로 scope를 갖게된다.
함수 외 다른 block 단위에서도 scope를 명확히 지정하기 위해서, 보통 var 보다는 let을 사용한다.
또한, var와 let 키워드는 재선언(재할당)이 가능하지만, const 키워드는 재선언이 불가능하다.
1
2
3
4
5
6
7
8
9
|
for(var i = 0; i < 10; i++) {
return i
}
console.log(i) // 결과 : 5
// var 키워드를 사용하여 변수 i가 function scope를 갖게되었고,
// 코드상에 function이 따로 없으므로 1~5번줄까지가 모두 function scope로 처리되어
// 콘솔 출력 결과가 5가 나오게 되었다.
|
const 키워드
const 키워드도 let 키워드와 동일하게 block scope를 갖는다.
다만, const 키워드는 상수(constant)를 정의하는 것이므로, 재할당이 불가능하다.
>> const는 재할당이 금지된다.
1 2 3 4 |
const a = 0; a = 10;
console.log(a) // 결과 : TypeError : Assignment to constant variable. |
>>> console 창에서 const 값을 지정하고, 해당 값을 변경하는 코드를 작성하여 다시 console을 출력할려고 하면, 실행이 되지 않는다. Browser에서 새로운 tab을 열고, 다시 console을 실행하여 변수 값을 지정해주어야 한다.
1 2 3 4 |
const a = 10; console.log(a) // 결과 : a = 10
const a = 10; // 결과 : Uncaught SyntaxError: Unexpected identifier |
>> 배열이나 객체를 const로 선언해도, 값의 추가, 삭제, 접근이 가능하다.
Window 객체
Window 객체는 global scope를 대표하는 객체로서, global scope에서 선언된 함수와 var 키워드를 이용하여 선언된 변수를 담게 된다.
Strict 모드
문법적으로 실수가 일어날 수 있는 부분을 체크해준다.
코드의 최상단에 'use strict'; 라고 작성해주면 된다.
선언 키워드 없이 변수를 선언하면 전역변수가 되는데, (함수 내부에서 선언하더라도)
Strict 모드를 사용하게 되면 변수를 선언하는 것도 잡아주게 되므로, 불필요한 전역변수가 지정되는 것을 방지해준다.
'Programming-[Frontend] > Javascript' 카테고리의 다른 글
Javascript / Array / filter, map, reduce (0) | 2020.08.05 |
---|---|
Javascript / 기초 / 객체지향 (Object-oriented) (0) | 2020.08.05 |
Javascript / Closure Function (Currying, Closure module pattern) (0) | 2020.08.04 |
JavaScript / Rest Parameter, Spread Operator (0) | 2020.08.04 |
Javascript / 기초 / 알고리즘, Code 작성 팁 (0) | 2020.07.31 |