TIL no.8 - JS var, let, const
var, let, const
이 3개의 단어는 모두 변수를 선언할 때 사용합니다.
3개 모두 자료형의 구분 없이 모든 형식을 넣을 수 있습니다.
scope
변수(식별자)에 대한 유효범위
function-scope
함수 내에서 선언된 변수로 함수 내에서만 유효한 스코프입니다. 함수 외부에서는 참조 할 수 없습니다.
함수 내부에서 선언된 변수는 지역 변수
함수 외부에서 선언된 변수는 전역 변수
ex_1)
var el = 123; // 전역 변수
console.log(el); // 123
{
var el = 123; // 전역 변수
}
console.log(el); // 123
ex_2)
var i = 10; // 전역변수
(function () {
var j = 20; // 지역변수
})();
console.log(i); // 10
console.log(j); // "j" in not defined
block-scope
블록 {...} 내에서 유효한 스코프를 의미합니다. 접근 할수 있다는 뜻입니다. 블록 외부에서는 참조 할 수 없습니다.
ex)
let el = 123; // 전역 변수
{
let el = 456; // 지역변수
let foo = 456; // 지역변수
}
console.log(el); // 123
console.log(foo); // 참조에러발생
var
function-scope
변수 재선언 가능
var el = '첫번째 변수';
console.log(el); // 첫번째 변수
var el = '두번째 변수';
conosle.log(el); // 두번째 변수
변수 선언을 여러 번 해도 문제없이 각각 다른 값이 출력됩니다.
필요할 때 마다 변수를 사용할 수 있는 장점이 될 수 있지만 코드가 길어질 경우 해당 변수가 어디에서 어떻게 사용 되는지 파악하기 힘들며 의도치 않게 값이 바뀔 우려가 있습니다.
이 단점을 보완하기 위해 ES6 부터 let, const가 추가되었습니다.
let
block-scope
변수 재선언 불가능 , 변수 재할당 가능
let el = '첫번째 변수';
console.log(el); // 첫번째 변수
el = '두번째 변수'
conosle.log(el);
// Uncaught SyntaxError: Identifier 'el' has already been declared
let el = '새로운 변수';
console.log(el) // 새로운 변수
const
block-scope
변수 재선언 불가능, 변수 재할당 불가능
const el = '첫번째 변수';
console.log(el); // 첫번째 변수
el = '두번째 변수';
console.log(el); // 에러발생
const el = '새로운 변수";
console.log(el); // 에러발생
var , let , const의 차이점
- var 변수는 선언 전에 사용해도 에러가 없지만 let, const는 에러가 발생함
- var, let 변수는 선언시 초기 값을 주지 않아도 되지만 const는 반드시 값을 할당해야함
결론
재할당이 필요없다면 const , 재할당이 필요하다면 let
이렇게 사용하는 것이 가장 좋습니다.
Author And Source
이 문제에 관하여(TIL no.8 - JS var, let, const), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@playck/TIL-no.7-JS-var-let-const저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)