본 강의는 자바스크립트의 기초를 대충 안다고 가정하고 시작하는 조금 심도 깊은 포스팅이다.
완전 처음부터 배우고 싶다면 다른 블로그나 책의 글을 참조하기를 바란다.
특별한 추가 설명이 없다면 nodejs가 아닌 브라우저에서 사용하는 js를 의미한다.
참고:
저번 포스팅에서 호이스팅과 스코프에 대해서 배웠다.
하지막 아직 호이스팅과 스코프에대해서 전부다 안것은 아니다.
이게 만약 ECMAScript5라면 여러분은 다 안다고 해도 과언이 아니다.
그러나 ECMAScript6로 넘어오면서 스코프에 대 변혁이 생겼다.
이는 변수가 새로 생겨서 그렇다.
var과 let, cont에 대해서 각각 알아보도록 하자.
일단 간략하게 각각을 설명하도록 하겠다.
var - 호이스팅을 실행한다. 스코프는 함수 스코프이다. 변수 재선언이 가능하다. 변수 값 변경이 가능하다.
let - 호이스팅을 실행하지 않는다. 스코프는 블록 스코프이다. 변수 재선언이 불가능하다. 변수 값 변경이 가능하다.
const - 호이스팅을 실행하지 않는다. 스코프는 블록 스코프이다. 변수 재선언이 불가능하다. 변수 값 변경이 불가능하다.
쉽게 이야기하면 var는 전역적으로 쓰기 좋다. let은 지역 변수로, const는 상수로 사용한다고 생각하면된다.
그게 왜 그런지 알아보자.
var
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
console.log('up : ' + i);
for (var i = 0; i < 10; i++) {
console.log('for : ' + i);
}
console.log('down : ' + i);
</script>
</body>
</html>
위와 같은 변수가 있다고 가정하자.
위의 결과를 예상할 수 있겠는가?
var는 호이스팅이 되고 함수 스코프이므로 i는 undefiend가 된다.
백문이 불여일견이니 보도록 하자.
그런데 여러분들은 이게 장점보다는 단점으로 와닿을 것이다.
물론 호이스팅을 적극 사용하는게 좋을 때도 있긴 하다.
하지만 여러분이 예상하지 못한 결과를 내는 경우가 있다.
그럼 위의 코드를 바꿔보도록 하자.
let
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
console.log('up : ' + i);
for (let i = 0; i < 10; i++) {
console.log('for : ' + i);
}
console.log('down : ' + i);
</script>
</body>
</html>
위의 코드는 과연 실행이 될까?
실행해보자.
보면 알겠지만 ReferenceError가 발생한다.
var였으면 아무 일이 없었겠지만 let은 호이스팅이 안된다고 하였다.
그래서 에러가 뜬다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
try {
console.log('up : ' + i);
}catch (e) {
console.log(e);
}
for (let i = 0; i < 10; i++) {
console.log('for : ' + i);
}
console.log('down : ' + i);
</script>
</body>
</html>
예외처리하고 다시 실행해보도록 하자.
예외 처리를하고 다시 실행해보자.
그러면 for문은 정상적으로 돌아가는걸 확인할 수 있다.
그러나 아래에서 또 에러가뜬다.
이걸 보면 let이 블록스코프이며 블록을 벗어나면 더이상 사용할 수 없다.
그래서 여러분들이 블록내부에서만 사용하고 싶다면 반드시 let을 써줘야한다.
또한 호이스팅을 예방하고 싶다면 let을 사용하는 것이 좋다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var varVal = 10;
var varVal = 10;
let letVal = 10;
let letVal = 10;
</script>
</body>
</html>
또한 let은 특이한 점이 하나더 있다.
바로 재선언이 안된다는 점이다.
예를 들어 위의 코드는
var는 재선언이 되지만 let은 재선언이 안된다.
이렇게 let은 재선언 조차 안된다.
이는 장점중 하나라고 보는게 타당하다.
물론 유연성은 잃게 되지만.
const
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
try {
console.log(test);
}catch (e) {
console.log(e)
}
if(true){
const test = 10;
console.log(test);
}
console.log(test);
</script>
</body>
</html>
const로 한번 코드를 실행해보도록하자.
물론 여러분들은 이제 위의 코드를 예상할 수 있을 것이다.
이제 여러분이 예상하는대로 되는가?
let과 마찬가지로 호이스팅이 안되고 블록 스코프가 유지된다.
그러면서 const는 한가지 특징이 있다.
const라는것 자체가 바로 상수라는 뜻이다.
그러니까 두가지 특성을 지닌다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
const test;
</script>
</body>
</html>
보면 위 코드는 단순하지만 사실 에러가 있는 코드이다.
실행해보자.
바로 에러가 뜬다. const는 무조건 선언과 즉시 초기화를 시켜줘야한다.
const는 undefiend가 용납이안된다.
초기화만 시켜줘야하는게 아니라 변수를 변경할 수도 없다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
const test = 10;
test = 20;
</script>
</body>
</html>
이러한 코드는 const에서는 용납되지 않는다.
보다시피 에러가 뜬다. 뭐 사실 이는 당연한 것이다.
'Programming > JavaScript' 카테고리의 다른 글
| [JavaScript-06]this - 기본편 (0) | 2018.12.05 |
|---|---|
| [JavaScript-05]객체와 class, 그리고 상속 (0) | 2018.12.04 |
| [JavaScript-04]객체와 프로토타입 (0) | 2018.12.04 |
| [JavaScript-02]Scope와 Hoisting (2) | 2018.12.03 |
| [JavaScript-01]자바스크립트에서 함수를 만드는 4가지 방법 - 사용법편 (0) | 2018.12.02 |