✔ 오늘 학습한 내용
22/05/13 오늘 자바스크립트 스코프와 클로저를 배웠고, 페어프로그래밍은 하지않았다. 오늘 하루는 영상도 없엇고 온전히 혼자 공부한 날이었다. 페어프로그래밍도 좋지만 혼자서 진행하는것도 나쁘지않다. 디스코드에서 동기들이 열심히 하는 모습에 나도 더 열심히 하게된다. 잠을 더 줄이고 더많이 공부하고싶다.클로저는 언제 쓰는걸까❓❓
스코프는 이해가 되고 정리해서 블로그에 오렸지만 클로저는 이걸 대체 왜쓸까? 부터해서 이해가 잘 가지 않는다. 블로그에 어떻게 정리를 해야할지도 모르겠다.. (아는게 있어야 정리를 하지ㅠ) 여러 레퍼런스와 유튜브를 봐도 머리속에 잘안들어온다. 함수안에 리턴함수, 렉시컬 스코프 를 기억한다.... 현재 상태를 기억하고 변경된 최신 상태를 유지하는 것✔ 해결방안과 누군가에게 질문한다면
계속 복습하며 이해하려고 하는중이다.
함수에서 클로저를 사용하기에 적절한 상황은 어떤게 있을까요?
――――――――――――――――――――――――――――――――――――――――――
✅ 예제
오늘 풀었던 문제인데 잘모르겠다.
다음은 클로저가 유용하게 사용되는 상황인 버튼을 클릭하면 나타나고 사라지는 토글을 구현한 예제 코드입니다. 클로저 개념을 활용해서 isShow 변수의 Javascript 를 작성해 보세요.
<!DOCTYPE html>
<html>
<body>
<button class="toggle">toggle</button>
<div class="box" style="width: 100px; height: 100px; background: red;"></div>
<script>
var box = document.querySelector('.box');
var toggleBtn = document.querySelector('.toggle');
var toggle = (function () {
var isShow = false;
// TODO: ① 클로저를 반환하는 함수를 작성하세요.
return function () {
// TODO: ③ isShow 변수의 상태를 변경하는 코드를 작성하세요.
};
})();
// ② 이벤트 프로퍼티에 클로저를 할당
toggleBtn.onclick = toggle;
</script>
</body>
</html>정답
// ① 클로저를 반환
return function () {
box.style.display = isShow ? 'block' : 'none';
// ③ 변수 상태 변경
isShow = !isShow;
};
Run Start 🔥