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.
Author And Source
이 문제에 관하여(JavaScript TIL 08), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@heewonkim-dev/JavaScript-TIL-08저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)