[ES6] 변수 선언const·let·var의 요약

이거 뭐야?

ES6 메모로 작성할 수 있는 기회가 증가했습니다const,let,var의 차이점을 잘 모르기 때문에 어떤 차이점이 있는지 요약해 보았습니다.

결론

기본적으로 사용const.
for 순환 처리 등처럼 재대입이 필요한 경우에만 사용let.var 행동을 파악하기 어려워 버그의 온상이 될 수 있어 사용하지 않는다.

용어

각 특징을 이해할 때 총결해 낸 용어

재대입 = 한 번 발표된 변수 업데이트

재성명 = 동일한 변수 명칭으로 한 번 더 성명

각 블록이 둘러싸인 범위

함수 범위 = 각 함수 블록 {}에 대한 범위

각각의 특징

const

다시 대입할 수 없다

더 이상 성명할 수 없다

코코넛 젤리를 들고 있어요.
Blockcop 외부에서 액세스를 제한합니다.Blockcop 이외의 곳에서는 참고할 수 없다는 것이다.

함수 역할 영역 있음
함수 범위 이외의 접근을 제한합니다.함수 범위 밖에서 참조할 수 없다는 것이다.

let

재대입 가능

더 이상 성명할 수 없다

코코넛 젤리를 들고 있어요.
Blockcop 외부에서 액세스를 제한합니다.Blockcop 이외의 곳에서는 참고할 수 없다는 것이다.

함수 역할 영역 있음
함수 범위 이외의 접근을 제한합니다.함수 범위 밖에서 참조할 수 없다는 것이다.

var

재대입 가능

재선언 가능

목도리
블록 코드 이외의 곳에 접근할 수 있습니다.즉, Blockcop 이외의 곳에서 참조할 수 있다.

함수 역할 영역 있음
함수 범위 이외의 접근을 제한합니다.함수 범위 밖에서 참조할 수 없다는 것이다.

다시 나타나다

재대입

재대입

const constValue = 'Hello!!';
let letValue = 'Hello!!';
var varValue = 'Hello!!';

// 再代入
constValue = 'Goodby!!';
letValue = 'Goodby!!';
varValue = 'Goodby!!';

console.log(constValue);
console.log(letValue);
console.log(varValue);

// エラー内容
Uncaught TypeError: Assignment to constant variable.
Goodby!!
Goodby!!

const만 하면 오류가 발생합니다.

다시 성명한다

const constValue = 'Hello!!';
let letValue = 'Hello!!';
var varValue = 'Hello!!';

// 再宣言
const constValue = 'Goodby!!';
let letValue = 'Goodby!!';
var varValue = 'Goodby!!';

console.log(constValue);
console.log(letValue);
console.log(varValue);

// エラー内容
Uncaught SyntaxError: Identifier 'constValue' has already been declared
Uncaught SyntaxError: Identifier 'letValue' has already been declared"
Goodby!!

const와 let 재성명을 시도하면 오류가 발생합니다.

코코넛 젤리

const isTest = true;

if(isTest) {
  const constValue = 'Hello!!';
  let letValue = 'Hello!!';
  var varValue = 'Hello!!';
}

console.log(constValue);
console.log(letValue);
console.log(varValue);

// 出力
Uncaught ReferenceError: constValue is not defined
Uncaught ReferenceError: letValue is not defined
"Hello!!"

const와 let는if문장 등 블록 코드 이외에 참조할 수 없습니다

함수 작용역

const setValuables = (text) => {
  const constValue = text;
  let letValue = text;
  var varValue = text;
}

setValuables('Hello!!');

console.log(constValue);
console.log(letValue);
console.log(varValue);

// 出力
Uncaught ReferenceError: constValue is not defined
Uncaught ReferenceError: letValue is not defined
Uncaught ReferenceError: varValue is not defined

const,let와var는 함수 블록 이외에서 참조할 수 없습니다

const, let 우수

var 선언의 블록 이외에도 영향을 받기 때문에 의도하지 않은 곳에서 값이 달라진다.const, 선언된let 블록 내에 대한 영향이 수렴되기 때문에 무의식중에 값의 변화를 방지할 수 있다.

const는 상수처럼 보이지만 상수가 아니다

const 재대입은 안되지만 변경オブジェクト型（Array, Objectなど）할 수 있는 내용입니다.
예를 들어, 수조에 수조를 다시 지정할 때 오류가 발생하지만, 수조 내용의 일부분을 변경할 때 오류 없이 수정할 수 있다.
따라서 const는 상수로 보이지만 상수가 아니라고 할 수 있다.

총결산

요약 후 느낀 것은 사용 제한이 적은var이 아니라 제한이 많은const,let사용하는 것이 좋습니다.
또한 기본적으로 변수는const로 정의하고 for문 등 처리에서 변수를 세려면 let로 구분해서 사용하는 것이 좋다.