자바스크립트 변수를 선언하는 방법에는 let, const, var 3가지 방법이 있다. 이 세 가지에 대해 알아보자.
const
const 는 상수이다. 상수란 값이 변하지 않고 고정된 값이다. 즉, 변하고 싶지 않은 값들을 만들 때 쓴다.
const title = "제목";
title = "제목2";
>> TypeError: Assignment to constant variable.
title 에 "제목2" 라고 다른 값을 할당하는 시도를 했을 때 TypeError 가 발생한다.
var
var 은 예전부터 쓰이던 자바스크립트 변수 선언 방식이다. 그러다 보니 문제점도 많다..?
재선언 가능
var title = "제목1";
var title = "제목2";
변수를 선언했는데 뒤에서 같은 변수명으로 또 선언이 가능하다. 이러한 특징은 협업할 때 문제가 생기기 십상이다. 누군가가 중요한 데이터를 넣을 변수를 선언했는데 다른 누군가가 같은 이름으로 변수를 선언하고 앞선 데이터와는 다른 데이터를 넣었다고 생각해 보자. 더 나중에 선언된 변수명에 데이터가 들어가고 있는 상황이라 심각한 일이 벌어질 수도.. 있다.
후선언 가능
console.log(title);
var title = "제목";
>> undefined
선언을 나중에 했는데 오류가 안난다.
title = "제목";
var title;
var 로 선언하지도 않았는데 오류가 안난다.
이는 호이스팅 때문인데 호이스팅이란 자바스크립트 엔진이 코드 실행 전에 선언해 둔 변수들을 조사한 다음에 메모리에 기억을 해둔다. 이렇게 조사한 변수들은 해당 코드가 존재하는 파일의 최 상단으로 끌어올리는 것을 호이스팅이라한다.
위의 예시에서 title 선언이 되지 않았는데 오류가 발생하지 않고 undefined 로 출력된 이유도 이와 같은 이유이다. title 을 출력하는 코드 이후에 선언된 title 을 자바스크립트 엔진이 미리 조사를 하고 기록했기때문에 선언 전에 출력을 시도해도 변수가 있다고 인식하고 오류가 안나는 것이다.
→ 이런저런 이유로 var 사용을 지양하는 것으로 알고 있다. var 사용하지 말자! let 을 사용하자!
let
let 은 2015년도 ES6 가 나올 때 나온 선언 방식이다. let 은 위에서 보여준 var 의 문제점을 모두 해결한 선언 방식이다. 그러면 let 은 var 와 달리 호이스팅 하는 대상이 아닌 걸까? 그건아니다! let 도 호이스팅이 된다!
다만 let 은 TDZ(Temporal Death Zone)을 적용해서 선언문이 나오기 전까지는 접근할 수 없도록 해서 문제를 해결했다.
'Javascript' 카테고리의 다른 글
Promise (0) | 2024.07.24 |
---|---|
스크롤 이벤트 발생 시 스크롤 진척도 표시 (0) | 2024.07.19 |
스크롤 특정 영역 감지 (0) | 2024.07.17 |
버튼 클릭시 스크롤 맨 위로 이동 (0) | 2024.07.16 |
[Javascript] 변수 선언 시 메모리 할당 과정 (0) | 2024.04.27 |