TIL 13일차 자료형, 스코프, 클로저

shleecloud·2021년 8월 4일

Codestates

목록 보기

13/95

시작

점점 심화과정으로 들어가는 날이다. 오늘 배운 자바스크립트는 조금 특별한 기술 기술들을 배웠다. 특히 클로저는 파이썬에는 없던 방식이라 굉장히 새롭다. 약간 속임수 같은 기법인데 쓰이는 곳이 따로 있는 것 같다. 전역변수 설정하기가 애매할 때 사용하기가 정말 좋아보인다. 오늘부터 하루하루 나오는 것들은 정말 어려워져서 정신 똑바로 차려야지.

원시 자료형과 참조 자료형

원시 자료형(primitive type)과 참조 자료형(reference type)의 구분이 왜 필요한지에 대해서 영상을 보고 이해할 수 있다.
원시 자료형과 참조 자료형의 차이를 이해하고, 각자 맞는 상황에서 사용할 수 있다.
원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다는 개념을 코드로 설명할 수 있다.
참조 자료형은 기존에 고정된 크기의 보관함이 아니라, 동적으로 크기가 변하는 특별한 보관함을 사용한다는 것을 이해할 수 있다.

이 부분은 간단하게 넘어갔다. 이전에도 계속 언급되던 내용이었고. 조금 개념을 다시 잡았던 부분은 함수의 매개변수로 원시 자료형을 참조하는 변수를 보낼 때 원본 변수는 변함없이 immutable하게 보낸다는 부분이다. 이게 왜 기억에 자꾸 남는거지? 조금 애매한 부분이 있었나보다. 스코프와 클로저 전에 몸풀기 느낌으로 가볍게 봤다.

a = 10
function add10 (num) {
  num = num + 10
  return num
}
console.log(add10(a)) // 20
console.log(a) // 10

스코프

스코프의 의미와 적용 범위를 이해할 수 있다
스코프의 주요 규칙을 이해할 수 있다
- 중첩 규칙
- block scope와 function scope
- 전역 스코프와 지역 스코프
- 전역 변수와 지역 변수간의 우선 순위
- let, const, var 의 차이
- 전역 객체(window)의 이해

스코프는 이전에 var 선언자에 대해서 조사하면서 집고 넘어갔다. var는 함수 레벨 스코프라서 블록 레벨에서 선언된 var는 전역변수처럼 사용된다는 내용이다. 그리고 이 스코프를 잘 활용한게 클로저.

마우스로 그리려니 죽을 맛이다.

클로저

클로저 함수의 정의와 특징에 대해서 이해할 수 있다
클로저가 갖는 스코프 범위를 이해할 수 있다
클로저를 이용해 유용하게 쓰이는 몇 가지 코딩 패턴을 이해할 수 있다

언어적 정의가 이렇다는 뜻이다. 나는 어떤 개념인지는 확실하게 알았는데 내가 손에 익으려면 직접 사용하는 예제가 필요할 것 같다. 내일 교육 과정에서 코플릿을 진행하면서 배울 수 있겠지.
딥다이브의 저자인 이응모님의 블로그 주소를 링크한다. 이 블로그에 내가 원하는 내용이 잘 정리가 되어있어서 내가 추가로 포스팅을 한다면 이 블로그에서 많이 참조할 것 같다. TIL은 여기까지. 쓸 얘기가 많아서 추가 내용은 다른 글에서 남기고 싶다.

이응모님 블로그
https://poiemaweb.com/js-closure

클로저란?

클로저의 정의

클로져는 "함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성 된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다." 라고 합니다. 여기서의 키워드는 "함수가 선언"된 "어휘적(lexical) 환경"입니다. 특이하게도 자바스크립트는 함수가 호출되는 환경와 별개로, 기존에 선언되어 있던 환경 어휘적 환경 을 기준으로 변수를 조회하려고 합니다. 유어클레스 영상에서 언급되는 "외부함수의 변수에 접근할 수 있는 내부함수"를 클로져 함수로 부르는 이유도 그렇습니다.

클로저 함수

클로저는 외부함수의 컨텍스트에 접근할 수 있는 내부함수를 뜻합니다. 외부함수의 실행이 종료된 후에도, 클로저 함수는 외부함수의 스코프, 즉, 함수가 선언된 어휘적 환경에 접근할 수 있습니다.

클로저 사용

예시클로저를 통해 커링(currying, 함수 하나가 n개의 인자를 받는 대신 n개의 함수를 만들어 각각 인자를 받게 하는 방법), 클로저 모듈(변수를 외부 함수 스코프 안쪽에 감추어, 변수가 함수 밖에서 노출되는 것을 막는 방법) 등의 패턴을 구현할 수 있습니다.

클로저의 단점

일반 함수였다면 함수 실행 종료 후 가비지 컬렉션(참고 자료: MDN '자바스크립트의 메모리 관리') 대상이 되었을 객체가, 클로저 패턴에서는 메모리 상에 남아 있게 됩니다. 외부 함수 스코프가 내부함수에 의해 언제든지 참조될 수 있기 때문입니다. 따라서 클로저를 남발할 경우 퍼포먼스 저하가 발생할 수도 있습니다. 자바스크립트는 가비지 컬렉션을 통해 메모리 관리를 합니다. 객체가 참조 대상이 아닐 때, 가비지 컬렉션에 의해 자동으로 메모리 할당이 해제됩니다.