1. 자바스크립트 범위 : 범위(scope)는 자바스크립트 변수에 대한 접근 권한을 정의하는 것이다. 자바스크립트에서 변수는 전역 범위 또는 지역 범위에 속할 수 있다. 전역변수는 전역 범위에 속하는 변수이고 프로그램의 어디에서나 해당 변수에 접근할 수 있다.
1 - 1) var를 사용해 선언하기 : 함수 범위
자바스크립트에서 var는 변수를 선언하는 데 사용하는 키워드다. 변수를 어디에서 선언하든 변수 선언이 함수의 맨 앞으로 이동한다.
이를 변수 호이스팅(variable hoisting)이라고도 한다. 즉 변수가 스크립트의 가장 마지막에 선언됐다고 하더라도 해당 선언 코드가
가장 마지막에 실행되는 것이 아니다. 예시를 살펴보자.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
function scope1() {
var top = "top";
bottom = "bottom";
console.log(bottom);
var bottom;
}
function scope1() {
var top = "top";
var bottom;
bottom = "bottom";
console.log(bottom);
}
//위의 코드는 아래의 코드와 완벽히 동일하다.
//즉 위의 함수에서 bottom이라는 변수 선언이
//호이스팅에 의해서 맨 앞으로 이동하는 것이다.
|
cs |
var 키워드에 관해 주목해야 할 핵심적인 사항은 해당 변수의 범위가 가장 가까운 함수 범위라는 것이다.
이것이 무엇을 의미할까? 다음 코드에서 scope2 함수는 insideIf 변수와 가장 가까운 함수 범위다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function scope2(print) {
if(print) {
var insideIf = '12';
}
console.log(insideIf);
}
scope(true); // 12를 출력하며 오류가 발생하지 않는다.
//위의 함수는 아래의 함수와 동일하다.
//자바에서는 위의 함수는 오류를 일으킬 것이다.
//insideIf 변수가 if문 블록 내에서만 사용 가능하기 때문이다.
function scope2(print) {
var insideIf;
if(print) {
insideIf = '12';
}
console.log(insideIf);
}
|
cs |
1 - 2) let를 활용한 선언 : 블록 범위
변수를 선언할 때 사용할 수 있는 또 다른 키워드로는 let이 있다. let을 사용해 선언된 변수는 가장 가까운 블록 범위를 갖는다.
즉 변수가 선언된 {} 내에서 유효하다! 마찬가지로 예시를 살펴보자.
1
2
3
4
5
6
7
8
9
10
11
|
function scope3(print) {
if(print) {
var insideIf = '12';
}
console.log(insideIf);
}
scope(true); // ''를 출력한다.
//위의 예제에서 콘솔에 아무것도 출력되지 않는다.
//insideIf 변수가 if문 블록 내에서만 사용가능 하기 때문이다.
|
cs |
2. 등가와 형 : 자바스크립트에는 자바와 같은 전통적인 언어와 다른 자료형이 있다.
2 - 1) 변수형
자바스크립트에는 boolean, number, string, undefined, object, function, symbol과 같은 일곱개의 자료형이 있다. 여기서 특이한 점은 선언만되고 값이 할당되지 않은 변수에는 undefined가 할당된다는 것이다. typeof는 변수의 형을 반환하는 데 쓰이는 기본 연산자이다.
2 - 2) 참/거짓 확인
if문 내에서 참/거짓 확인이 사용된다. 많은 언어들의 경우 if() 함수 내의 매개변수는 boolean형이어야 한다. 하지만 자바스크립트(또는 다 른 동적언어들)는 좀 더 유연하다. 만약 매개변수로 false, 0, 빈 문자열, NaN, undefined, null 값이 온다면 false로 판단되어 {} 내의 구문 을 실행하지 않는다. 그렇지 않고 나머지의 경우는 true로 평가되어 {} 내의 구문을 실행한다.
2 - 3) === 대 ==
자바스크립트는 스크립트 언어이고 변수 선언 시 변수에 형이 할당되지 않는다. 대신에 코드가 실행될 때 해당 변수의 형이 해석된다. 따라 서 ===는 ==보다 등가를 좀 더 엄격히 확인한다. ==는 값만을 확인하는 대신 ===는 형과 값 모두를 확인한다.
1
2
|
console.log("5" == 5) // true
console.log("5" === 5) // false
|
cs |
3. 요약
자바스크립트에는 대부분의 언어들이 사용하지 않는 다른 방식의 변수 선언 방식 존재한다. var는 함수 범위 내에서 변수를 선언하고 let은 블록 범위에서 변수를 선언한다. 마지막으로 등가 확인을 위해 값에 대해서는 ==를 사용하고 값과 형이 모두 같은지 확인하기 위해서는
===를 사용하자. 하지만 ==와 === 연산자는 숫자, 문자열, 불리언과 같은 비객체형에만 사용할 수 있다.
*출처 : 자바스크립트로 하는 자료 구조와 알고리즘, 지은이 : 배세민 엔지니어
'Computer Science > 자료구조와 알고리즘' 카테고리의 다른 글
제 6장 - 자바스크립트 객체 (0) | 2020.10.27 |
---|---|
제 5장 - 자바스크립트 배열 (0) | 2020.10.26 |
제 4장 - 자바스크립트 문자열 (0) | 2020.10.20 |
제 3장 - 자바스크립트 숫자 (0) | 2020.10.15 |
제 1장 - 빅오 표기법 (0) | 2020.10.13 |