반응형

[JavaScritpt] var, let, const란


들어가며....

  • 소스를 봤는데 스크립트부분에 뜬금없이 let이란게 튀어나오길래 이게 뭔가 싶어서 알아보기 시작했다.

선요약 : ES6(es6 , 에크마 스크립트?) 에서 새로 생긴 녀석임 변수를 선언하는 방법임 /  var보다는 let / const를 사용하자

 

특징 var vs let / const

 
var
let/cont
비고
변수 선언 전 접근가능(undefined가 리턴됨)불가능
console.log(foo); // 에러
//---------------------------
console.log(foo); //undefined
var foo;      // 선언보다 사용을 먼저하려고해도 코드는 작동한다. 
              //이현상이 궁금하면 호이스팅(Hoisting)을 알아보도록하자
  
//---------------------------
console.log(foo)     //에러
let foo;       
변수 중복선언가능불가능
var foo = 'aa';
var foo = 'bb';       //가능
let foo = 'qwe';
let foo = 'asd';    //에러
스코핑유효범위가 블록{}을 넘어선다유효범위가 블록{}안이다
var foo = 'aa'
console.log(foo)    // aa
if(true) {
  var foo = "bb"
  console.log(foo) // bb
}
console.log(foo) //bb
let foo = "aa"
console.log(foo)    //aa
if(true){
  let foo = "bb"
  console.log(foo)   //bb
}
console.log(foo)    // aa 
  

 

let과 const의 차이

  • const는 이름만 봐서는 상수라고 보인다.
  • 실제로 원시형(Primitives type : string, number , boolean, null, undefined)에서는 상수로 동ㅈ가한다. 
  • 그래서 초기값을 설정하지않거나, 재할당하려고하면 에러가난다. 
  • const foo ;    //에러
    ----------------------
    const foo = 0 ;
    foo = 1 ;   //에러
      
  • 참조형( Complex type: array, object, function)의 경우는 const로 선언해도 멤버값 조작이 가능하다.
  • const foo = [0, 1];
    const bar = foo;
      
    foo.push(2);
    bar[0] = 10;
      
    console.log( foo, bar)      //[10, 1, 2] , [10, 1, 2]
  • 위에서처럼 bar는 foo를 참조한다. 참조가아니고 copy하고싶으면  array는 ...연산자를 사용하고, object는 assign() 함수를 사용한다.
  • const arg = [0, 1];
    const obj = {foo: 'bar'};
      
    const newArg = [...arg];
    const newObj = Ojbect.assign({}, obj);
      
    newArg[0] = 10;
    newObj.foo = 'rab';
      
    console.log(arg, obj);
    // [0, 1], {foo: 'bar'}
      
    console.log(newArg, newObj);
    // [10, 1], {foo: 'rab'}

결론적으로 

  • ES6 에서는 var는 지양하고 가급적 let과 const를 사용하자
  •  원시형에서 변수는 let, 상수는 const로 선언한다
  • 참조형은 const로 선언한다


반응형

+ Recent posts