반응형
ECMAScript6부터는 사용할 수 있는 let 변수 선언문과 기존 var 선문의 차이점을 알아보도록 하겠습니다.
일단, 거두절미하고 예제부터 보겠습니다.
<html>
<head>
<title>테스트</title>
<script>
function run() {
var foo = "Foo";
let bar = "Bar";
console.log(foo, bar); // Foo Bar
{
var moo = "Mooo"
let baz = "Bazz";
console.log(moo, baz); // Mooo Bazz
}
console.log(moo); // Mooo
console.log(baz); // ReferenceError
}
run();
</script>
</head>
</body>
</html>크롬 브라우저에서의 결과)
제일 큰 차이점은 "범위 지정 규칙"입니다.
즉, { }라는 블록안에 선언된 변수는 그 안에서만 사용할 수 있다라는겁니다.
Java로 예로 들자면 메소드 안에서 선언한 지역변수를 메소드 밖에서 사용할 수 없다라는 것과 동일하다고 생각하시면 됩니다.
예제에서는 baz라는 변수를 { } 안에 선언했는데 밖에서 호출했으므로 브라우저에서는 없는 참조 변수라고 에러를 출력하게 된것입니다.
어떻게 보면 Java의 객체지향과 전역/지역 객체 참조에 대한 기본 규칙이 ES6부터는 동일하게 적용해나간다고 할 수 있는데요.
과거의 브라우저 버전을 사용하고 있는 사용자들 입장에서는 let라는 기본 예약어를 읽지 못하고 에러가 발생하므로 바벨과 같은 과거 브라우저에서도 문제 없이 읽을 수 있도록 스크립트를 컴파일해주는 모듈을 사용해야 합니다.
차이점들이 여러개 있지만 다른 대표적인 차이점 하나는 변수를 중복해서 선언할 수 없다라는 점입니다.
<html>
<head>
<title>테스트</title>
<script>
var foo = "foo1";
var foo = "foo2"; // 문제 없음 foo를 재사용
let bar = "bar1";
let bar = "bar2"; // Uncaught SyntaxError: Identifier 'bar' has already been declared
</script>
</head>
</body>
</html>크롬 브라우저 결과)
반응형
'IT이야기' 카테고리의 다른 글
| Javascript로 이메일주소 정합성 체크하기 (이메일주소 검증, 정규식) (0) | 2021.02.22 |
|---|---|
| INNER JOIN, LEFT OUTER JOIN, RIGHT OUTER JOIN, FULL JOIN의 차이점 (0) | 2021.02.18 |
| 오라클 테이블 구조 및 데이터 복사하기 CREATE TABLE AS (0) | 2021.02.17 |
| 파이썬에서 리눅스 명령어, 프로그램 호출하는 방법 (0) | 2021.02.17 |
| Javascript json 객체 복사 (0) | 2021.02.17 |