[JavaScritpt] var, let, const란
들어가며....
- 소스를 봤는데 스크립트부분에 뜬금없이 let이란게 튀어나오길래 이게 뭔가 싶어서 알아보기 시작했다.
선요약 : ES6(es6 , 에크마 스크립트?) 에서 새로 생긴 녀석임 변수를 선언하는 방법임 / var보다는 let / const를 사용하자
특징 var vs let / const
| 변수 선언 전 접근 | 가능(undefined가 리턴됨) | 불가능 | console.log(foo);
console.log(foo);
var foo;
console.log(foo)
let foo;
|
|
| 변수 중복선언 | 가능 | 불가능 | var foo = 'aa';
var foo = 'bb';
let foo = 'qwe';
let foo = 'asd';
|
|
| 스코핑 | 유효범위가 블록{}을 넘어선다 | 유효범위가 블록{}안이다 | var foo = 'aa'
console.log(foo)
if(true) {
var foo = "bb"
console.log(foo)
}
console.log(foo)
|
let foo = "aa"
console.log(foo)
if(true){
let foo = "bb"
console.log(foo)
}
console.log(foo)
|
|
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)
|
- 위에서처럼 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);
console.log(newArg, newObj);
|
결론적으로
- 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시간 반 걸리니 주의하자.
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.";
