자바스크립트 변수 선언과 초기화

자바스크립트 변수 선언과 초기화

글. 수알치 오상문

 

1)  변수 초기화 타입 예제

 

변수 선언 시 'var'를 생략해도 동작하지만 의미는 다르다. 'var' 대신에 'let'(변수), 'const'(상수)를 지정할 수 있지만 의미가 다르다. 'let'와 'const'는 ES6부터 지원하므로 오래된 브라우저에서 에러가 발생할 수 있다.

    var a;  
    console.log('a: ' + a);    
    var b = undefined;
    console.log('b: ' + b);
    var c = true;
    console.log('c: ' + c);
    var d = "string1";
    console.log('d: ' + d);    
    var e = 'string2';
    console.log('e: ' + e);    
    var f = 1004;
    console.log('f: ' + f);    
    var g = 1004.1004;
    console.log('g: ' + g);    
    var h = [0, 1, 2, 3, "넷", '다섯'];
    console.log('h[0]: ' +  h[0]);    
    console.log('h[5]: ' +  h[5]);     
    var i = {name:'홍길순', age:250}; 
    console.log('i.name: ' + i.name);   
    console.log('i.age: ' + i.age);

 

[실행 화면]

"a: undefined"

"b: undefined"

"c: true"

"d: string1"

"e: string2"

"f: 1004"

"g: 1004.1004"

"h[0]: 0"

"h[5]: 다섯"

"i.name: 홍길순"

"i.age: 250"

 

참고로 자바스크립트 예제에서 세미콜론은 생략할 수 있다.

 

이제 변수 이름만으로 선언한 경우 및 var, let, const를 사용한 경우에 어떤 차이가 있는지 알아보자.

 

2) 변수 초기화에 var가 있는 경우와 없는 경우 비교   

 

함수 안에서 var를 사용하면 함수 지역변수로 처리된다.

함수 밖에 var 변수로 선언한 경우에는 전역변수로 처리된다.

 

전역변수는 선언 위치와 상관 없이, 자바스크립트 전체 영역에서 접근할 수 있다.

함수 또는 블록 영역 변수로 만들어지면 그 영역을 벗어날 때 사라진다.

 

우선순위는 (1) 블록 지역변수 > (2) 함수 지역변수 > (3)전역변수이다. 

 

a = 100;   // 또는 var a = 100 

 

function func1( ) {

  a = 200;  // 전역변수 a가 존재하므로 전역변수 a를 변경 

  b = 200;  // 전역변수 b가 없으므로 전역변수 b를 생성 

  var a = 200;  // 지역변수 a를 생성 (함수를 벗어나면 사라짐)

  var c = 200;  // 지역변수 c를 생성 (함수를 벗어나면 사라짐)

}

 

console.log(a);  // 100

func1( );

console.log(a);  // 200

console.log(b);  // 200

console.log(c);  // 에러!  접근 가능한 변수 c가 없다. 

 

3) var 보다는 let, const 권장 

 

- var 변수는 함수에 사용하면 함수 지역변수로 동작한다. 그리고 이미 선언된 같은 var 변수가 있더라도 새로 var 변수를 만들어 사용할 수 있다.

 

- let 변수는 블록 영역 지역변수이다. 물론 선언 위치에 따라서는 전역 범위나 함수 범위에서 동작할 수 있다. 다만 블록 안에 let 변수를 만든 경우에는 해당 블록에서만 사용할 수 있다. 그리고 let 변수는 중복 생성이 불가능하다. 이미 만들어진 let 변수를 다시 만들려고 하면 에러가 발생한다(var보다 안전). 또한 let 변수는 ES6 이상을 지원하는 브라우저에서 동작한다.

 

- const는 초기화되면 변경이 불가능한 상수가 된다. const 변수는  ES6 이상을 지원하는 브라우저에서 동작한다.

 

const MAX = 100;

MAX = 200;   // 변경 불가! 에러 발생함.  

 

4) 자바스크립 변수에 var, let, const 중에서 무엇을 사용???

 

- var, let, const 없이 변수를 만들지 말자. (버그 발생 원인)

  max = 100;   // var 없이 변수를 만들지 말자!

- 중복 선언이 안되도록, var 대신에 안전한 let 변수를 사용하자.     

  let max = 100;

- 초기화 이후에 변경해서는 안되면 const 상수를 사용하자.

  const MAX = 100;

 

5) 변수 호이스팅 

 

var 변수가 만들어지면 해당 영역의 가장 위로 선언부가 이동한 것처럼 처리된다. 그래서 변수가 중간에 선언된 경우에도 선언 이전에 해당 변수에 접근하는 것이 가능하다. 그런데, 주의할 점은 초기화 자체가 이동하는 것은 아니라는 것이다.

 

다음 예제 결과를 보면 var, let 변수에 따라서 결과가 완전히 다르다.

 

// 예제 1

console.log(a)  // 에러 발생! a 접근불가

let a = 100;     // const도 마찬가지 

console.log(a)

 

// 예제 2

console.log(a)  // undefined : 즉, 선언은 되어있음(호이스팅).

var a = 100;

console.log(a)  // 100 

 

// 예제 3

console.log(a)  // 에러 발생! a 접근불가

a = 100;

console.log(a)

 

 

6) 함수에 선언한 변수 접근 예제 

 

  function yourName1(name) {
    who1 = name;    // 전역변수 취급 
  } 

  yourName1('홍길동');     
  console.log(who1)  // "홍길동" 

 

  //--------------------------------------------

  function yourName2(name) {
    var who2 = name;    // 지역변수 취급 
  } 

  yourName2('홍길동');     
  console.log(who2)  // 에러!  who2 is not defined

 

  // --------------------------------------------

  function yourName3(name) {
    let who3 = name;    // 지역변수 취급 
  } 

  yournameis2('홍길동');     
  console.log(who3)  // 에러!  who2 is not defined

 

7) null 에러를 방지하는 초기화 방법 

 

var name = "홍길순";
var name2 = null;     // null 값으로 초기화

 

var who1 = name || "이용자";
console.log(who1 + "님 환영합니다.");  // 홍길순님 환영합니다.

var who2 = name2 || "이용자";  // name2가 null 값이면 "이용자"로 초기화
console.log(who2 + "님 환영합니다.");  // 이용자님 환영합니다.

 

<이상>