[JavaScript] var/const/let의 구분 사용

며칠 전 회사 선배가 자바스크립트의 변수 선언에서 헷갈렸다고 지적했는데, 얻기 어려운 기회라 Qiita에 처음 투고했다.
구체적으로 상수에서 부족한 부분을 변수로 적으면 업무에 영향을 미칠 수 있으므로 이유를 함께 설명하겠다.

var/const/let 도대체 무엇

var 정보

JavaScript의 변수 선언은 원래 var뿐입니다.따라서 오래된 브라우저라도 오류가 발생하지 않습니다.
그러나 현재 상수의 경우const, 변수의 경우let으로 캐릭터마다 구분되어 사용되기 때문에 var을 특별히 사용할 필요가 없습니다.

상수 const 정보

상수 const의 특징은 재대입 후 오류가 발생할 수 있다는 것이다.
즉, const를 사용하는 장소에서 재대입이 필요하지 않거나 재대입을 원하지 않는다면

변수let 정보

반면 변수let의 특징은 재대입이 가능하다는 것이다.
물론 변수let을 사용하는 경우 다시 대입해야 한다.

이른바 재대입

우리는 상수const와 변수let은 재대입이 있는지 없는지에 따라 구분해서 사용할 수 있음을 발견했다.
그렇다면 도대체 재대입은 무엇일까?
여기를 모르면 구분해서 사용할 수 없기 때문에 간단한 예를 보여주면서 설명한다.

재대입 없음

다시 대입할 수 없는 예로 세금 포함 가격을 계산하는 절차를 마련했다.
JavaScript

const cost = 1000;
const tax = 1 / 10
const price = cost + (cost * tax);
const message =　`原価${cost}円の商品の税込価格は${price}円です。`

console.log(message);

보시다시피 코스트와 택스가 결정되면 다시 쓰지 않습니다.이 경우 상수const를 사용해야 합니다.

재대입

재대입의 예로 두 자릿수의 자연수를 병렬로 표시하는 프로그램을 준비했다.
JavaScript

for(let i = 0; i < 100; i++){
    console.log(i);
}

for문 순환을 실행할 때마다 i는 덮어씁니다.
이렇게 반복적으로 나타나면 값이 반복적으로 바뀔 때 변수let을 사용합니다.

예제

그렇다면 순환 중의 변수 성명은 어떻게 해야 좋을까.
간단한 예로, 우리는 3의 배수를 나란히 표시할 수 있는 프로그램을 준비했다.
JavaScript

for(let i = 0; i < 100; i++){ 
    ??? value = i * 3
    console.log(i);
}

value의 값이 변경됩니다. 언뜻 보기에는 변수let을 사용하는 것 같습니다.
재대입은 없다.value 원래 i*3의 정의는 변경되지 않았습니다.
그래서 결말 63???대답은 상수의 const.
중복된 for문이 나오더라도 변수선언 후 고친 프로그램이 아니면 상수const를 사용해야 한다는 것이다.

[번외편] 왜 const/let을 구분해서 사용합니까?

여기까지 읽은 사람 중에는 "일단 다시 대입할 수 있는 let을 다 쓰면 좋겠다"는 생각이 들 수도 있다.
확실히 한 사람이 개발하면 별 문제가 없을 거예요.
그러나 여러 사람의 개발에서 다른 사람들이 볼 때 상수가 좋은 곳을 변수로 쓰면 오해를 불러일으켜 업무 효율이 떨어진다.
선배에게 이 이야기를 들었을 때도 그랬다는 생각이 들어서 이 기사를 쓰는 계기가 됐다.

총결산

상술한 말을 한 다음은 무엇입니까? 하지만 웹 제작 분야에서 변수let이 거의 필요하다고 생각합니다.
나 자신도 웹 페이지 제작을 하고 있기 때문에 이번 보도의 내용이 어렵다고 생각하는 사람은 먼저 const를 만들어도 된다고 생각합니다.
마지막으로 정리를 해보자면요.
/기본적으로 var 사용 안 함
• 재대입 유무에 따라 const/let 구분
· 재대입이란 선언 후 개작치를 가리킨다
참고 자료: https://sbfl.net/blog/2016/07/14/javascript-var-let-const/
이 기사에 조금이나마 힘을 보탠 여러분께Twitter도 웹페이지 제작에 관한 메시지를 보내고 있으니 지켜봐 주시면 감사하겠습니다.