JavaScript TIL 08

2021년 7월 1일에 작성된 문서입니다.
javascript 배운 내용을 정리했습니다.

---

클로저

함수를 리턴하는 함수 - 클로저 함수

함수를 리턴하는 함수가 클로저의 형태를 만듦

const adder = x => y => x + y;
adder(5)(7); // 12

typeof adder(5); // 'function'
// adder(5) 의 리턴값이 곧 함수의 형태

adder(5); // y => x + y;

• 함수의 호출(invocation) 이 두 번 발생
  • adder는 함수를 리턴하는 함수

• 클로저 기본 형태:
  

---

외부 함수와 내부 함수

• 클로저는 리턴하는 함수에 의해 스코프(변수의 접근 범위)가 구분.
• 클로저의 핵심은 스코프를 이용해서, 변수의 접근 범위를 닫는(closure; 폐쇄) 것.
• 함수를 리턴하는 것만큼이나, 변수가 선언된 곳이 중요.
  

• 변수 x와 y가 선언된 곳이 다르다.
  • x가 선언된 함수는 바깥쪽에 있으니 '외부 함수'
  • y가 선언된 함수는 안쪽에 있으니 '내부 함수'

• Q. 외부 함수는 y에 접근이 가능한가?
  • no, 바깥 스코프에서는 안쪽 스코프로의 접근 불가능.
• Q. 내부 함수는 x에 접근이 가능한가?
  • yes, 안쪽 스코프는 바깥 스코프에서 선언된 변수에 접근 가능.

클로저의 활용

1. 데이터를 보존하는 함수

• 외부 함수의 실행이 끝나도, 외부 함수 내 변수가 메모리 상에 저장.
  • 어휘적 환경을 메모리에 저장하기 때문에 가능
  • 변수 add5 에는 클로저를 통해 리턴한 함수가 담겨 있다.
  • add5 는 adder함수에서 인자로 넘긴 5라는 값을 x 변수에 계속 담은 채로 남아있다.

• divMaker 함수는 'div'라는 문자열을 tag 라는 변수에 담고 있음
• anchorMaker 함수는 'a'라는 문자열을 tag에 담고 있다.
• 클로저는 특정 데이터를 스코프 안에 가두어 둔 채로 계속 사용할 수 있게 한다.

---

정보의 접근 제한 (캡슐화) - 클로저 모듈 패턴

• 클로저를 이용해 내부 함수를 객체에 담아 여러 개의 내부 함수를 리턴
  • makeCounter 함수는 increase, decrease, getValue메소드를 포함한 객체 하나를 리턴.
  • 따라서, counter1은 객체.
• '외부 스코프에서는 내부 스코프의 변수에 접근할 수 없다'
  • 어떤 경우에도 value는 직접 수정이 불가능.
  • 대신, 리턴하는 객체가 제공하는 메소드를 통해 value 값을 간접 조작은 가능.

왜 이렇게 하는 것일까요? 만일 스코프로 value 값을 감싸지 않았더라면, value 값은 전역 변수여야만 했을 것입니다. 하지만 makeCounter라는 함수가 value 값을 보존하고 있기 때문에, 전역 변수로 따로 만들 필요가 없습니다.

전역 변수가 좋지 않은 이유

• 전역 변수는 다른 함수 혹은 로직 등에 의해 의도되지 않은 변경을 초래. (side effect)
  • 클로저로 불필요한 전역 변수 사용을 줄이고, 스코프를 이용해 값을 보다 안전하게 다룰 수 있다. (side effect의 최소화)

---

모듈화

• 여러개 counter를 만들 수 있다.

• getValue 메소드는 외부 함수에 선언된 value 값을 리턴하는 함수.

• makeCounter에 의해 리턴된 객체는, makeCounter를 실행할 때에 선언되는 value 값을 각자 독립적으로 가짐.

• counter1에서의 value와 counter2에서의 value는 서로에게 영향을 끼치지 않고, 각각의 값을 보존

Written with StackEdit.