[인프런x코드캠프] 훈훈한 Javascript_12日

저번 시간에 이어서 이번 시간에는 객체 형태의 데이터를 로컬스토리지에 저장하는 기능을 구현했다.

그 과정에서 호이스팅에 대한 개념도 익힐 수 있었다.

 

먼저, localstorage에는 string 형태의 값만 저장할 수 있기 때문에 JSON으로 받아온 객체를 스트링 형태로 줘야 한다.

saveItems.length === 0 
? localStorage.removeItem("saved-items")
: localStorage.setItem("saved-items", JSON.stringify(saveItems));

saveItems라는 배열이 길이가 0이라면 localStorage에서 "saved-items" 라는 키를 가진 값을 지운다.

0이 아니라면, "saved-items"라는 키로 저장하는데 JSON객체를 .stringify를 통해 string으로 변환한 후에 저장해야 한다.

참고로 string으로 저장한 값을 JSON 형태로 다시 가져올 수 있다 => JSON.parse(localStorage.getItem("saved-items")

 

코드를 작성하다 보니 오류가 발생했다.

createTodo라는 함수가 초기화되지 않았다는 오류다.

 

이 오류를 해결하는 과정에서 호이스팅(hoisting)이라는 개념에 대해서 익혔다.

호이스팅은 변수를 선언할 때, 최상단으로 올려진 것과 같은 현상을 말한다.

 

변수의 선언 단계에는 크게 3가지로 나눌 수 있다.

1. 선언 단계 : 선언한 변수를 식별자가 담기는 객체에 할당하는 단계
2. 초기화 단계 : 변수에 할당할 메모리 공간을 부여하는 단계
3. 할당 단계 : 정의된 변수에 데이터가 할당되는 단계

여기서 1단계와 2단계 사이에 TDZ(Temporal Dead Zone)이 있는데 변수에 할당할 메모리가 부여되기 전 단계이다.

console.log(test);

var test = "hooisting test";

위 식의 결과물은 undefined가 나온다. 그 이유는 var는 호이스팅을 통해서

var test;
console.log(test);
var test = "hoisting test";

위와 같은 내용으로 인식하게 된다.

 

그러면 const와 let은 어떻게 될까?

 

const와 let은 에러를 내보낸다. 그 이유는 const와 let도 호이스팅을 통해서 위로 올라가지만, TDZ단계로 올라가기 때문에 에러를 발생한다.

 

이렇게 const와 let은 쉽게 사용자의 오류를 잡아낼 수 있지만, var는 에러를 내보내지 않기 때문에 에러를 잡아내기 어렵다.

 

이제 localStorage에 값을 저장해서 브라우저를 끄거나, 새로고침을 하여도 TodoList가 그대로 유지되는 기능을 구현했다.

다음 수업에서는 사용자 지역의 날씨를 가져와서 나타내주는 기능을 구현할 계획이다.

 

[인프런x코드캠프] 훈훈한 Javascript - 인프런 | 강의

주말에 아주 알차게 보내고 와서 뿌듯하다. 이제 다시 공부를 열심히 해야겠다~~