일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- django widget
- 장고
- js
- MAC
- 백준
- AWS
- Git
- django rest framework
- 알고리즘 문제
- HTML
- react
- CSS
- 파이썬
- java
- 알고리즘 연습
- Baekjoon
- 알고리즘 풀이
- 파이썬 알고리즘
- c++
- es6
- django ORM
- PYTHON
- Django
- API
- 알고리즘
- web
- Algorithm
- DRF
- javascript
- form
- Today
- Total
수학과의 좌충우돌 프로그래밍
[ES6] let, const 그리고 var 본문
Let and Const
let
과 const
에 대해서 알아보도록 하겠습니다.
이 둘은 변수를 선언할 때 사용하게 되는데 이전에는 var
를 사용하였습니다.
var
로 변수를 선언하게 된다면 다음과 같이 변수의 overwrite 가 가능해집니다.
var name = "minsung";
name = "sungbin";
이렇게 var
를 사용하게 되면 큰 어플리케이션을 만들거나 협업을 할 경우 문제가 생길 수 있습니다.
다른 개발자가 다른 파일에서 또는 같은 파일인데 다른 위치에서 작업을 할 경우 name 이라는 변수명을 또 사용할 수 있게 되고 의도치않게 name 은 sungbin
으로 덮어쓰게 됩니다.
따라서 변수가 변하는 걸 막기 위한 매커니즘이 필요했고 const
가 등장하였습니다.
const
는 아래와 같이 변수가 바뀌는 것을 막아줍니다.
const name = "minsung";
name = "sungbin"; (X)
하지만 const
라고 해서 무조건 바뀌는 걸 막아주는 것은 아닙니다.
object 의 경우 바뀌는 걸 허용하게 됩니다.
아래에서 person을 직접 바꾸는 것은 허용되지 않지만, person 안의 name 을 바꾸는건 허용됩니다.
const person = {
name : "minsung"
}
person = "sungbin"; (X)
person.name = "sungbin"; (O)
let
은 이전의 var
와 같은 것으로서 overwrite 를 허용합니다.
let name = "minsung";
name = "sungbin";
따라서 일반적으로 const
를 사용하는 것을 추천합니다.
값을 overwrite 해야하는 경우에만 let
을 사용하고 var
는 더 이상 사용하지 않습니다.
Dead Zone
temporal dead zone
은 let
이랑 같이 소개되는 개념입니다.
temporal dead zone
이 없을 때는 어떻게 했었을까요?
자바스크립트는 위에서 부터 아래로 코드를 실행하기 때문에 이는 정의되지 않았다는 결과를 출력하게 됩니다.
console.log(name);
var name = "minsung";
// undefined
하지만 이는 에러를 출력합니다.
console.log(name);
// Uncaught ReferneceError
둘의 출력 결과가 다른 이유는 자바스크립트가 hoisting
을 해주기 때문입니다.
hoisting
은 변수 선언을 상단부로 이동시키는 것을 말합니다.
즉 우리가 작성한 코드대로 위에서부터 아래로 진행되는 것은 아닙니다.
내부적으로는 코드가 다음과 같이 변경되게 됩니다.
var name;
console.log(name);
name = "minsung";
사실 위와 같이 작성한 코드도 에러를 발생해야 맞는데 undefined
로 끝나기 때문에 별로 적합하지 않습니다. 과한 친절이 개발자의 의도와는 다르게 흘러가는 것이죠.
여기 var
대신 let
을 사용하면 어떻게 될까요?
의도한대로 에러가 출력 됩니다.
console.log(name);
let name = "minsung";
// Uncaught ReferneceError
이는 let
이 hoisting
을 못하도록 막아준다는 것이죠.
이것이 바로 let
의 temporal dead zone
입니다.
Block Scope
let
과 const
의 다른 장점은 바로 block scope
가 있다는 점입니다.
우선 var
부터 살펴보도록 하죠.
이 경우 변수가 block scope 안에서 선언되었음에도 불구하고 scope 밖에서도 접근할 수 있습니다.
if (true){
var num = 10;
}
console.log(num);
// 10
var
는 block scope 가 아닌 function scope 를 따릅니다.
따라서 이 경우에는 에러가 출력됩니다.
function myFunc(){
var num = 10;
}
console.log(num);
// Uncaught ReferneceError
그에 비해 const
과 let
은 block scope 를 따르게 됩니다.
if (true){
const num = 10;
}
console.log(num);
//Uncaught ReferneceError
'웹프로그래밍 > ES6' 카테고리의 다른 글
[ES6] Destructuring (0) | 2019.12.31 |
---|---|
[ES6] Array Method (0) | 2019.12.31 |
[ES6] Template Literal 과 String Method (0) | 2019.12.31 |
[ES6] Arrow Function 과 Default Value (0) | 2019.12.31 |
[ES6] ES는 무엇인가, 왜 ES6인가 (0) | 2019.12.30 |