1. 클로저
클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.
=> 지금은 간단하게 외부 함수의 변수에 접근할 수 있는 내부 함수 정도로 생각할것
1) 클로저 함수의 특징
(1) 함수를 리턴하는 함수
2번의 경우, 1번과는 달리 함수의 호출이 두번 발생한다.
=> 즉, plus2의 리턴 값은 함수 형태이다.
클로저 함수는 함수를 리턴한다. 이것이 클로저의 형태를 만든다.
(2) 외부함수의 변수에 접근이 가능한 내부 함수
클로저는 리턴하는 함수에 의해 스코프가 구분된다.
클로저의 핵심은 스코프를 이용해 변수의 접근 범위를 닫는 것이다.
위의 예시 코드에서 a는 외부 함수이고, b는 내부함수이며 각각의 스코프는 분리되어 있다.
이미지에서 볼수있듯이 외부 함수는 내부 함수의 변수(이미지에서는 b)에 접근할 수 없지만내부 함수는 외부 함수의 변수(이미지에서는 a)에 접근할 수 있다!
2) 클로저 활용하기(1) 데이터의 보존
일반 함수는 함수 실행이 끝나면 함수 내부의 변수를 사용할 수 없다.
그러나 클로저는 외부 함수의 실행이 끝나도 외부 함수 내의 변수가 메모리 상에 저장된다.
따라서 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있다. 클로저는 특정 데이터를 스코프 안에 가두어 둔채로 계속 사용할 수 있게 해준다.
(2) 정보의 접근 제한
클로저 모듈 패턴. => 클로저를 이용해 내부함수를 객체에 담아 여러개 리턴하게 할 수 있다.
❓ makeCounter 함수를 바꾸지 않고 value에 값을 어떻게 새로 할당하는가?
외부 스코프는 내부 스코프로 접근할 수 없기 때문에 value는 직접 수정은 안된다. 하지만 리턴하는 객체가 제공하는 메서드를 통해 value를 간접적으로 조작할수 있다.
=> 정보의 접근 제한(캡술화)
❓ 스코프로 value를 감싸지 않을 경우에는?
value는 전역변수가 되어야 한다.
하지만 makeCounter가 value를 보존하고 있기 때문에 전역변수를 사용할 필요가 없다.
전역변수는 side effect를 일으켜 다른 함수 또는 로직 등에 의해 의도되지 않은 변경을 초래 할 수 있다. 그러므로 클로저를 통해 전역변수 사용을 줄임으로 스코프를 이용해 값을 보다 안전하게 다룰 수 있다.
(3) 모듈화
makeCounter에 의해 리턴된 객체는 선언되는 value값을 각각 독립적으로 갖는다. 따라서 counter1의 value와 conter2의 value는 서로에게 영향을 끼치지 않고 각자의 값을 보존할 수 있다.
=> 함수 재사용성을 극대화 하여 함수 하나를 완전히 독립적인 부품 형태로 분리하는것 : 모듈화
클로저를 통해 데이터와 메서드를 묶어서 다룰 수 있으므로 클로저는 모듈화에 유리하다.
📝 MEMO
클로저 아직 잘 이해가 안된다....
클로저의 내용은 주말 중으로 좀 더 공부해서 내용을 보완할 생각이다.
2. Javascript ES6의 주요 문법
1) spread / rest 문법
(1) spread 문법
배열을 풀어서 인자로 전달하거나 배열을 풀어서 각각의 요소로 넣을 때 사용한다.
spread 문법은 기존 배열을 변경하지 않는다.
(2) rest 문법
파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일때 유용하다.
(3) spread / rest의 활용 예시
- 배열 합치기
- 배열 복사하기
- 객체에서 사용하기
- 함수에서 나머지 파라미터 받아오기
rest문법은 파라미터를 배열의 형태로 받아오기 때문에 manyMoreArgs가 위 이미지의 내용과 같은 형태로 출력된다.
2) 구조 분해 할당(destructing)
spread 문법을 이용하여 값을 해체한 후 개별 값을 변수에 새로 할당하는 과정.
(1) 분해 후 새 변수에 할당하기
- 배열
- 객체
* 객체에서 구조 분해 할당 사용시 선언(const, let, var)와 함께 사용하지 않으면 에러가 발생할 수 있다.
🤔 객체에서 선언없이 구조분해 할당을 사용하게 된다면?
선언 없이 할당하는 경우 괄호가 필요하다.
괄호없이는 사용할 수 없다. 좌변의 {a, b}가 객체 리터럴이 아니라 블록으로 간주되기 때문이다.
위의 형태는 var ({a, b} = {a: 1, b: 2}); 와 같다.
이 형태로 표현식을 작성할때는 반드시 세미콜론이 있어야 한다.
없을 경우 이전 줄과 연결되어 코드를 실행하는데 이용될 수 있다.
(2) 함수에서 객체 분해하기
********
클로저 너무 어렵다...
진짜 아무리 봐도 이해안됨 큰일이다
이건 진짜... 주말에 저것만 해야됨
클로저 자체가 어떤건지는 이해가 조금 될랑말랑 한데 활용법으로 가버리니까 어떻게 이해해야할지 감도 안잡힌다
계속 다른 사람들이 정리한 블로그 같은거 보고는 있는데.. 그래도 잘 모르겠음 ㅠ
그냥 주말에 시간내서 따로 공부할라구
'study > TIL' 카테고리의 다른 글
| 23.01.05 - DOM, DOM으로 CRUD (0) | 2023.01.05 |
|---|---|
| 23.01.04 - 복습 및 추가 보완 (0) | 2023.01.04 |
| 23.01.02 - 원시 자료형과 참조 자료형, 스코프 (0) | 2023.01.02 |
| 22.12.30 - 객체 (0) | 2022.12.30 |
| 22.12.29 - 배열 (0) | 2022.12.29 |
