[꿀팁] "var"를 쓸지 "let"를 쓸지 고민하는 당신께!!

[당근천국]

일단 아래 코드를 돌려봅시다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

function test() {     var arr = new Array();     arr.push(0);     arr.push(1);     arr.push(2);     arr.push(3);       for (var i = 0; i < arr.length; ++i)     {         var item = arr[i];         let item2 = arr[i];           setTimeout(function ()         {             console.log("var : " + item);             console.log("let : " + item2);         }, (i * 10));     } }   test(); Colored by Color Scripter

cs

3줄 요약 : 

1. 다른 언어의 var에 더 가까운건 let다.

2. 그러니 가급적 let 사용해라

3. 이건 자바스크립트의 빡침의 빙산의 일각이다.

좀더 자세하게 설명하자면....

만약 사용의도가 각각의 아이템에 접근하려는 것이면 let를 써야 하고

변수 자체에 접근(참조 변수의 경우 변수 모니터링이 필요한 경우가 있는데 그런경우를 말합니다.) 하려면 var을 써야합니다.

(원래 이럴때는 전역변수를 선언해서 쓰는게 정석입니다만....)

다른 언어를 하다 오신 분들이 "var는 변수선언이구나!"로 퉁쳐서 이해하다보면 가끔 문제가 생기는데...

가장 쉽게 보는게 위의 예제입니다.

그건 let에 가깝습니다.(emc6 부터 사용)

var는 다른 언어를 하는 사람이 자스할때 생기는 오묘한 빡침의 이유중하나일 뿐이죠 ㅎㅎㅎ

왜 var이 이렇게 동작하느냐 하는건.......호이스팅을 포함한 몇가지 자스의 특징때문인데.....

파고들어가면 복잡하니 3줄 요약만 보시면됩니다 ㅎㅎㅎㅎ

[스칼렛카메리아]

꿀팁추

[애슬론]

무조건 const를 쓰시고 변경해야 하는 값이라면 let으로 해주시고 var는 없다고 생각해주세요~

[싼다할아버지]

타입스크립트 쓰면 됨?

[당근천국]

강추.
하지만 전 신입교육시킬 자신없어서 제이쿼리 정도나 쓰고 있지 ㅜㅡ

[나도잘할수있어]

일반적인 c++에서는 var
자바스크립트에서는 let

[카르아나]

실무에서 var쓰면 코드리뷰때 장난아니죠 ㅎㅎ
요즘 let도 거진 안쓰고 거진 const만 이용해서 재할당 자체를 안하는 식으로 많이 구성하는 것 같네요.

[당근천국]

다른 언어들도 기본으로 콘스트를 쓰고 필요에 따라 일반변수를 쓰는게 좋지 않냐는 논쟁이 오래전부터 있었습니다.
일반적인 언어에서야 변수의 범위와 생명주기가 명확해서 큰이득을 볼수 없다보니 큰이슈는 아니지만 말이죠....
근데 자스는 구조상 const를 기본으로 쓰는게 맞지 않나하는 생각을 자주하게 됩니다.
(특히 매개변수 받아서 다시 전달할때....하 2차 빡침이... )

[JSON.parse('B')]

이거 제가 재대로 이해하고 있나 한번 확인해주세요.

1. var item hoisting 되서 메모리로 들어가고
2. setTimeout 4개 이벤트 루프로 들어가고
3. for loop 4번 다 돌아서 큐스택 클리어 됬을 때 var item에 들어가 있는 숫자는 3.
4. setTimeout 콜백 큐스택으로 돌아간 뒤 실행되서 var 전부 3으로 프린트 되는게 맞나요?

hoisting 이란거 처음 들어봐서 읽어봤는데 제대로 이해했는지 잘 모르겠어요.

[_ 오잇스]

var의 경우 스코프가 함수 스코프로 잡히기 때문에 for문 안에서 선언하여도 함수 시작 부분에서 선언한 것과 같은 취급을 받습니다. 그래서 settimeout의 콜백 함수에서 ver로 선언된 변수를 참조할 시 다른 값으로 업데이트 된 값이 출력되는 것입니다.

[당근천국]

위 예제를 일반적인 언어로 설명하면
var는 참조 변수의 포인터가 전달된 것이고
let는 참조시 가지고 있던 변수의 상태가 전달된것입니다.

여기서 다른 언어와 차이가 보이는것인데...
일반적인 객체지향언어에서는 내부적으로는 포인터로 처리되는 참조 변수여도 범위에 따라 자동으로 당시 상태를 전달해줍니다.
(이것도 설명하려면 기니 넘어가죠 ㅋㅋㅋ)

호이스팅을 쉽게 이해하려면 다음코드를 돌려봅시다.
(호이스팅은 이현상의 일각일뿐이 함정 ㅋㅋㅋㅋ)

function aa()
{
var a = 0;
let b = 20;

{
var a = 1;
let b = 2;

console.log("var1 :" + a);
console.log("let1 :" + b);
}

{
var a;
let b;

console.log("var2 :" + a);
console.log("let2 :" +b);
}

console.log("var3 :" + a);
console.log("let3 :" +b);
}

aa();

스마트한 ide 를 쓰고 있다면 var a;가 이미 선언되있다고 경고가 뜰겁니다.
상식대로라면 "var2 :"는 undefined가 떠야 하지만 그딴거 없습니다.
호이스팅이 함수의 위로 끌어올려서 선언한 효과를 주기 때문에 "var1 :"과 "var2 :"는 같은놈입니다.
let는 일반적인 언어와 같은 동작을 보이죠.
(그래서 "let3 :"는 선언이 없다고 에러를 뿜는다.)

p.s. 수정기능이 없어서 계속 새로 달고 있습니다. 양해를 ㅎㅎㅎ

[JSON.parse('B')]

답변 감사합니다!

[JSON.parse('B')]

방금 돌려봤어요 ㅎ, 답변 감사합니다!

[쵸인]

뭘 고민하세요... 그냥 let/const 씁시다. var는 쓰지 마세요.

[std::cout]

헉 udemy에서 수강하는 과목은 var로 진행하던데..!