인프런 커뮤니티 질문&답변
작성한 질문수
수업질문
작성
·
91
·
수정됨
0
안녕하세요,
수업 중 이해가 되지 않는 부분이 있어 질문 드립니다.
훈훈한 JS>섹션7>함수,변수의 호이스팅 강의에서 17:43에서 newLi에 complete 클래스를 추가해주는 기능을 설명에 이해가 되지 않습니다.
위에 content는 부분에서는 전체 todoInput.value를 가져와서 덮어씌우는 것으로 이해했는데,
아래 클래스를 추가하는 부분에 정의된 newLi는 엔터로 인해 함수 실행될 때마다 새로운 createElment("li") 값을 가진 변수인데, 여기에 어떻게 이전의 데이터를 가진 특정 배열에만 complete를 넣어줄 수 있는걸까요?
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
질문하신 내용에 대한 답변을 드리겠습니다. 자바스크립트에서의 호이스팅은 변수나 함수의 선언을 코드 상단으로 끌어올리는 현상을 말합니다. 하지만 여기서 주목해야 할 것은 호이스팅은 선언만을 끌어올리며, 할당은 끌어올리지 않는다는 점입니다.
newLi에 complete 클래스를 추가하는 기능은 newLi가 생성된 후에 일어나는 이벤트를 기반으로 합니다. 즉, newLi는 createElement("li")를 통해 새 element로 생성되며, 해당 element는 이후에 발생하는 사용자의 행동(예: 클릭)에 따라 complete 클래스가 추가되는 구조입니다.
질문하신 “어떻게 이전의 데이터를 가진 특정 배열에만 complete를 넣어줄 수 있는가”에 대한 답변으로는, 이는 storageData의 상태에 따라 처리됩니다. 만악 storageData에 저장된 각 항목이 complete상태를 가지고 있다면 해당 상태에 따라 동적으로 newLi에 complete 클래스를 추가하여 시각적으로 구분할 수 있습니다. 이 과정은 일반적으로 이벤트 리스너 내부 또는 특정 함수 실행 시 검사하여 처리됩니다.
클래스를 추가하는 과정에서는 newLi의 생성과 독립적으로 storageData 내부 데이터를 검증하여 조건에 맞는 newLi에만 complete 클래스를 추가할 수 있습니다. 이는 newLi가 생성될 때마다 storageData를 검사하고, 해당 데이터가 complete 상태인지 아닌지에 따라 클래스를 추가하거나 하지 않는 로직을 구현함으로써 이루어질 수 있습니다.
즉, newLi가 새로 생성될 때마다 storageData의 상태를 확인하고, 조건에 맞는 항목에만 특정 작업(클래스 추가 등)을 수행하는 것입니다. 이로 인해 사용자는 어떤 항목이 완료되었는지 시각적으로 쉽게 구분할 수 있게 됩니다.