구조분해 할당과 scrollTop, scrollHeight, clientHeight

스크롤 높이에 따른 ProgressBar를 구현하는 자바스크립트 튜토리얼 영상을 보던 중이었다.

const { scrollTop, clientHeight, scrollHeight } = document.documentElement;

위 처럼 생긴 코드가 있었는데 변수를 { 중괄호 } 로 감싼 채로 선언하는 것을 본 적이 없어서 신기했다. 구조분해 할당이란다. (Destructuring Assignment)

느낀 바, 여러가지 객체를 한번에 선언하고 각각에 순서대로 하나씩 할당하는 것이었다.

ex) const { a, b, c } = { 1, 2, 3 } // a = 1, b = 2, c = 3

(더 다양한 사용법이 있다.)

즉, 위의 코드는 아래와 같이 이해할 수 있겠다.

1) scrollTop = html 최상단부터 현재 보이는 화면의 상단까지 길이 (얼마나 내려왔는가)

2) clientHeight = html 높이 중 화면에 나타난 부분의 높이 (view port height)

3) scrollHeight = 화면이 보이지 않는 부분을 포함한 전체 html의 높이

const scrolled = scrollTop / (scrollHeight - clientHeight) * 100

(if)

scrollTop = 1000, clientHeight = 1000, scrollHeight = 3000

전체 높이가 3000px, 뷰포트의 크기가 1000px인 웹사이트에서 1000px만큼 스크롤했을 때, scrolled는 (1000 / 3000 - 1000) * 100 = 50%가 된다.

(if2)

scrollTop = 2000, clientHeight = 1000, scrollHeight = 3000

스크롤을 최대로 내려도 clientHeight만큼은 남기 때문에 2000px이 최대이다.

(2000 / 3000 - 1000) * 100 = 100% (끝까지 내려왔다는 뜻)

가오리는 가올가올