[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로 선언한다


[ajax]radio.value udefined오류 


ajax를 사용할때 radio.value를 사용할경우 undefinded값이 뜬다.


예를들어 


<form name=frm>

<input type=radio name=rad value=1/>

<input type=radio name=rad value=2/>

</form>


이런식일경우 

var frm = document.frm;

$.ajax({

 type:"post",

 url: myurl ,

 async: true,

 data: {

    rad : frm.rad.value

  },

 success{

  //  dosomething

 }

});



이렇게 코드를 짜면 브라우저에 따라서 정상적으로 선택된 radio value를 넘겨주는 경우도 있지만 

undefined가 나는 경우도 생긴다.

이경우 오류잡느라 1시간 반 걸리니 주의하자.

  1. 1466246417 2016.06.18 19:40 신고

    반가와요

JavaScript] 조건부 연산자 <삼항연산자(?연산자)> 

조건에 따라 두 식 중 하나를 반환합니다.

test ? expression1 : expression2 

 

test

임의의 Boolean 식입니다.

expression1

test is true." xml:space="preserve"><sentencetext xmlns="http://www.w3.org/1999/xhtml">이면 식이 반환된 test 는 true.</sentencetext> 쉼표 식이 될 수 있습니다.

expression2

test is false." xml:space="preserve"><sentencetext xmlns="http://www.w3.org/1999/xhtml">이면 식이 반환된 test 는 false.</sentencetext> 여러 개의 식을 쉼표로 식으로 연결 될 수 있습니다.

?: operator can be used as a shortcut for an if...else statement." xml:space="preserve" style="color: rgb(42, 42, 42); font-family: 'Malgun Gothic', Gulim, 'Segoe UI', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5;"><sentencetext xmlns="http://www.w3.org/1999/xhtml">?: 연산자는 if...else 문의 단축형으로 사용할 수 있으며</sentencetext> if...else statement would be awkward." xml:space="preserve" style="color: rgb(42, 42, 42); font-family: 'Malgun Gothic', Gulim, 'Segoe UI', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5;">일반적으로 if...else 문을 사용하면 너무 복잡해지는 식에서 사용합니다. 예를 들면 다음과 같습니다.

var now = new Date();
var greeting = "Good" + ((now.getHours() > 17) ? " evening." : " day.");

현재 시각이 오후 6시 이후이면 이 예제는 "Good evening."이라는 문자열을 만듭니다.  if...else statement would look as follows:" xml:space="preserve">if...else 문을 사용하여 동일한 기능을 가진 코드를 작성하면 다음과 같습니다.

var now = new Date();
var greeting = "Good";
if (now.getHours() > 17)
   greeting += " evening.";
else    
greeting += " day."; 


+ Recent posts