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은    블록 범위에서 변수를 선언한다. 마지막으로 등가 확인을 위해 값에 대해서는 ==를 사용하고 값과 형이 모두 같은지 확인하기 위해서는   

 ===를 사용하자. 하지만 ==와 === 연산자는 숫자, 문자열, 불리언과 같은 비객체형에만 사용할 수 있다.

 

*출처 : 자바스크립트로 하는 자료 구조와 알고리즘, 지은이 : 배세민 엔지니어

+ Recent posts