Chapter3. 클로저
1.클로저 함수의 정의와 특징에 대해서 이해할 수 있다.
2.클로저가 갖는 스코프 범위를 이해할 수 있다.
3.클로저를 이용해 유용하게 쓰이는 몇 가지 패턴을 이해할 수 있다.
Chapter4. ES6 신규 문법
4.spread/rest 문법을 사용할 수 있다.
5.구조 분해 할당을 사용할 수 있다.
1.closuee는 폐쇠라는 의미를 가지고 있는 단어로 외부에서는 접근할 수 없게 내부에 변수를 선언한 후 외부의 특정 명령어로 특정 행동만 할 수 있도록 할 수 있다. (어휘적 환경 때문에)외부 함수의 실행이 끝나더라도 변수가 메모리 값에 기록되어 캡슐화, 모듈화가 용이하다. 이를 통해 side effect를 어느정도 방지할 수 있다.
2.스코프는 중괄호(블록) 또는 함수로 나누어지며 최외곽의 스코프를 글로벌 스코프, 그 외의 다른 스코프들은 전부 지역스코프라고 부른다. 상위스코프에서 선언된 값은 그 하위 스코프에서 이용할 수 있지만 하위 스코프에서 선언된 값은 상위스코프에 적용할 수 없다. (let이 아닌 변수 재할당은 적용됨)
여기서 클로저는 전역이 아닌 지역 내부에 새로운 값을 선언해주기 때문에 외부에서는 접근할 수가 없고 그 내부 값의 변경 또한 외부에서의 접근이 아닌 내부의 함수를 이용해야만 사용할 수 있다.
클로저가 되기 위해서는 선언된 지역변수값의 내부에서 작동해 본인 외부의 지역변수값에 접근할 수 있어야한다. (함수 A 내부에서 선언된 a, A내부에 포함된 함수B일 경우 함수B는 외부의 지역변수 a에 접근할 수 있어야한다)
3.아래와 같은 토글형 클로저를 이해할 수 있다.
<!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;
// ① 클로저를 반환
return function () {
box.style.display = isShow ? 'block' : 'none';
// ③ 상태 변경
isShow = !isShow;
};
})();
// ② 이벤트 프로퍼티에 클로저를 할당
toggleBtn.onclick = toggle;
</script>
</body>
</html>
4....을 사용하면 []의 배열 겉부분이 벗겨지기 때문에 한번에 와르르 쏟아부어버리는 방식으로 사용할 수 있다! 특히 arr3 = [...arr1, ...arr2];등의 방식으로 할 경우 둘을 쉽게 합칠 수 있다.
5.이것저것 입력하기 애매한 나머지들을 덩어리로 변수에 배열로 할당하는 등 편리하게 사용할 수 있다.
오늘은 클로저와 ES6문법보다는 Koans가 더 인상적이었던 것 같다.
Koans에서도 이런저런 회고할만한 이야기들이 있지만 월요일까지 진행되는 과제이기 때문에 월요일로 미뤄본다.
스코프와 클로저에 대해서 얼핏만 알고 있었지만 실시간 세션으로 인해 조금 더 명확하게 알게 된 것 같다.
스코프에 대해서는 확실하게 아는 것 같고 클로저는 조금 헷갈린다 라고 생각했었는데
실시간 세션에서 스코프에 대해서 설명해주시는걸 자세히 듣고 있으니 스코프에 대해서 얼핏 알던 것 들을 확실하게 알게 되고
그러자 클로저의 특이한 동작들도 결국은 지역변수 여부에 따라 작동이 결정되는 것을 파악할 수 있어 함수의 작동 원리와 스코프 그리고 클로저까지 한번에 더 알 수 있는 계기가 되었다.
메타인지가 왜 중요한지에 대해서 알 수 있는 시간이었다.
메타인지로 인해 학습한건 아니지만 스코프 하나로 스코프,함수,클로저까지 세가지를 한번에 해결할 수 있다는 사실이 재미있고 신기했다.
'회고' 카테고리의 다른 글
| 복습(객체,자료형,스코프,클로저,ES6) (0) | 2022.05.15 |
|---|---|
| 복습(Linux,배열) (0) | 2022.05.14 |
| [JavaScript]원시자료형과 참조자료형/스코프 (0) | 2022.05.12 |
| [JavaScript] 객체 (3) | 2022.05.11 |
| [JavaScript] 배열 (0) | 2022.05.10 |