13일차

2021. 08. 04 수요일

1. Today's Key points!

• 원시자료형 타입, 참조자료형 타입
• scope(스코프), closure(클로저)
• var, let, const의 차이
• 내부함수, 외부함수

2. 정리해보자!

• 원시타입 데이터 : number, boolean, null, undefined, string. 값을 복사해서 복사한 데이터를 변경해도 기존 데이터에는 영향이 없다.
  참조타입 데이터 : array, object, function. 참조타입 데이터를 복사하게 되면 데이터 주소를 복사하는데, 복사한 데이터에서 원소를 변경하게 되면 주소안에있는 데이터가 변경하는 것이기 때문에 기존의 데이터에도 영향이 가게 된다. 주소를 저장하는 곳을 heap이라고도 한다.
• 스코프란? 변수 접근 규칙에 따를 유효 범위. 범위는 중괄호(블록) 또는 함수에 의해 나뉘어지고, 그 범위를 스코프라고 부른다. 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용가능하다. 반면에, 안쪽에서 선언한 변수는 바깥쪽 스코프에서는 사용할 수 없다.
  스코프 종류 : 블록 스코프(block-scope) - if() {}, for() {}, 화살표함수 등 / 함수 스코프(function scope) - function {}
  스코프 규칙 : 첫 번째, 안쪽 스코프에서 바깥쪽 스코프로는 접근 가능하지만 반대는 불가. 두번째, 스코프는 중첩이 가능하다. 특별이 가장 바깥쪽의 스코프는 전역 스코프(global scope)라고 부른다. 전역이 아닌 다른 스코프는 전부 지역 스코프(local scope)다. 지역 스코프에 선언한 변수는 지역변수, 전역 스코프에서 선언한 변수는 전역변수이다. 세번째, 지역변수는 전역변수보다 더 높은 우선순위를 가진다.
  ex)

스코프 세번째 규칙 예시

함수안에 변수를 선언하지 않았기 때문에 전역변수를 그대로 사용. 그래서 3번째 출력값은 박해커로 바뀐 값이 출력된다.

• var : var은 블록 스코프를 무시한다. 또한, 재선언을 해도 에러를 내지 않는다.
  var, let, const를 비교를 정리해놓은 것은 Javascript카테고리 안에 정리를 해놓았으니 그곳을 참고하자.
• 클로저 함수란? MDN에서 정의하기로는 클로저는 "함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역변수로 구성된다."라고 되어있다. 근데 사실 나는 이 말을 이해한건지 아닌건지는 잘 모르겠다. 내가 그냥 이해한 클로저는 "외부함수의 변수에 접근할 수 있는 내부함수"라고 이해했다. 외부함수의 실행이 종료된 후에도, 클로저 함수는 외부함수의 스코프, 즉, 함수가 선언된 어휘적 환경에 접근할 수 있어서 재사용이 가능하다. 이렇게 클로저함수를 만들어 놓으면 하나의 부품처럼 모듈화해서 사용이 가능해진다.
  클로저 사용 예시 : 클로저를 통해 커링(currying, 함수 하나가 n개의 인자를 받는 대신 n개의 함수를 만들어 각각 인자를 받게 하는 방법), 클로저 모듈(변수를 외부 함수 스코프 안쪽에 감추어, 변수가 함수 밖에서 노출되는 것을 막는 방법) 등의 패턴을 구현할 수 있다. 클로저의 단점: 일반 함수였다면 함수 실행 종료 후 가비지 컬렉션(참고 자료: MDN '자바스크립트의 메모리 관리') 대상이 되었을 객체가, 클로저 패턴에서는 메모리 상에 남아 있게 된다. 외부 함수 스코프가 내부함수에 의해 언제든지 참조될 수 있기 때문이다. 따라서 클로저를 남발할 경우 퍼포먼스 저하가 발생할 수도 있다. 자바스크립트는 가비지 컬렉션을 통해 메모리 관리를 한다. 객체가 참조 대상이 아닐 때, 가비지 컬렉션에 의해 자동으로 메모리 할당이 해제된다.

3. 복습하기

오늘은 따로 코플릿을 하거나, 실습 과제가 없었다. 그래서 위의 내용을 정리하면서 개념을 복습을 했다. 딱히 이해가 가지않는다거나 어렵진 않았는데, 실제로 사용을 하거나 내가 클로저함수를 만드려고하면 어려워질 것 같다. 그래서 오늘 바로 실습해볼 수 있는 시간이 없어서 조금 아쉬웠다.