변수
- 하나의 값을 저장하기 위해 확보한 메모리 공간 자체
- 메모리 공간을 식별하기 위해 붙인 이름
변수 선언 방식
1. var
- 변수 선언 방식에 있어서 큰 단점을 가지고 있음
var name = 'yeeun'
console.log(name) // yeeun
var name = 'javascript'
console.log(name) // javascript
- 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력됨
- 코드량이 많아진다면 어디에서 어떻게 사용됐는지 파악 어려움
- 값이 바뀔 가능성 높음
2. let
let name = 'yeeun'
console.log(name) // yeeun
let name = 'javascript'
console.log(name)
// Uncaught SyntaxError: Identifier 'name' has already been declared
name = 'react'
console.log(name) //react
- name이 이미 선언되었다는 에러메세지가 뜬다 (const도 마찬가지)
- 변수 재선언 불가
- 변수 재할당 가능
3. const
const name = 'yeeun'
console.log(name) // yeeun
const name = 'javascript'
console.log(name)
// Uncaught SyntaxError: Identifier 'name' has already been declared
name = 'react'
console.log(name)
//Uncaught TypeError: Assignment to constant variable.
- 변수 재선언 불가능
- 변수 재할당 불가능
호이스팅
- var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성
- 자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅한다.
- var 로 선언된 변수와는 달리 let 로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다.
- let 로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다.
- var 로 선언된 변수와는 달리 let 로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다.
console.log(foo); // undefined
var foo;
console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
let bar;
- 변수는 선언 단계 > 초기화 단계 > 할당 단계 에 걸쳐 생성
- var 으로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.
// 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 있다.
console.log(foo); // undefined
var foo;
console.log(foo); // undefined
foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1
- let 로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.
// 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.
console.log(foo); // ReferenceError: foo is not defined
let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined
foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1
- 기본적인 변수 선언 → const 사용
- 재할당이 필요한 경우 → let 사용
- 재할당하는 경우는 생각보다 흔하지 않음.
- const를 사용하면 의도하지 않은 재할당을 방지해주기때문에 보다 안전함.
'JS' 카테고리의 다른 글
[JS] join() 메서드 (0) | 2023.01.13 |
---|---|
[JS] Math 객체 (0) | 2023.01.13 |
[JS] Number vs parseInt (0) | 2023.01.13 |
[JS]백준에서 node.js 입출력 받기 (0) | 2023.01.09 |
[JS] match()함수 (0) | 2023.01.09 |