Primitive & Reference, Scope & Closure

1. Primitive & Reference

원시 자료형 (Primitive type) 과 참조 자료형 (Reference type) 의 구분에 대해서 알아볼텐데, 자료형 각자 맞는 상황과 각자 할당할 때의 차이 또한 중요하니 이 또한 알아보자.

 

원시 자료형 : 원시 자료형의 값의 크기는 다르지만, 변수의 크기는 같다. 원시 자료형들은 'Call stack' 이라는 저장소에 담김.

원시 타입의 데이터 (Primitive type data: 원시 자료형) 은 객체가 아니면서 method를 가지지 않는 6 가지의 타입들이 있다.

Ex. 6 가지 타입들: string, number, bigint, boolean, undefined, symbol, (null)

* 이 중, bigint 와 symbol 은 특별한 경우 사용하는 데이터 타입으로, 추후 다뤄볼 예정이다. 

* 그리고 null 은 원시 타입과 거의 같게 사용된다고 볼 수 있으며 작동 방식 또한 다른 원시 타입과 같다. 다만 엄밀하게 따지자면 원시 타입이라고 볼 수 없다. Stackoverflow 참조 원문(영어)

 

참조 자료형 : 원시 자료형이 할당 된 변수의 크기는 같지만, 참조 자료형이 담긴 변수의 크기 (보관함의 크기) 는 동적으로 변한다.

참조 자료형의 데이터는 원시 자료형이 보관되는 데이터 보관함이 아닌 특별한 데이터 보관함에 저장된다. 이 데이터가 위치한 곳 (메모리 상 주소) 를 가리키는 주소가 변수에 저장된다.

Ex. 3 가지 참조 자료형 : 배열, 객체, 함수

* Heap 이라는 별도의 큰 데이터 저장소 이용하는데, 이 보관함의 크기는 '동적으로' 변한다.

 

두 가지의 차이점 :

• 원시 자료형과 참조 자료형의 근본적인 차이는 보관함의 크기에서 발생한다.
• 원시 자료형이 할당될 때에는 변수에 값 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소가 담긴다.
• 참조 자료형은 기존에 고정된 크기의 보관함이 아니라, '동적으로' 크기가 변하는 특별한 보관함을 사용할 수 있다.

2. Scope & Closure

 

Scope : 변수 접근 규칙에 따른 유효 범위이다. 변수와 그 값이, 어디서부터 어디까지 유효한지 판단하는 범위로 볼 수 있다.

Local Scope 안쪽에서 선언된 변수는 밖에서 사용할 수 없다. => ReferenceError, 즉, 참조에러가 발생 될 것이다.

Javascript 는 기본적으로 함수가 선언되는 (lexical) 동시에, 자신만의 Scope 를 가진다.

 

Global Scope 는 최상단의 Scope로, 전역 변수는 어디서든 접근이 가능하다.

지역 변수는 함수 내에서 전역 변수보다 더 높은 우선순위를 가진다.

• 중첩 규칙 : 함수 안에 함수가 있는 경우를 말한다. 이 경우, Scope 의 안에 또 다른 Scope 가 있는 셈이다.
• block scope(block-level scope) vs. function scope(function-level scope)
  • Block : 중괄호로 시작하고 끝나는 단위이다.

Closure : 클로저는 외부함수의 컨텍스트에 접근할 수 있는 내부함수를 뜻한다. 외부함수의 실행이 종료된 후에도, 클로저는 외부함수의 스코프를 참조할 수 있다.

 

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

 

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

 

* 자바스크립트는 가비지 컬렉션을 통해 메모리를 관리한다. 객체가 참조 대상이 아닐 때, 가비지 컬렉션에 의해 자동으로 메모리 할당이 해제된다.

 

 

2 - 1. let, const, var의 차이

 

var : ES6 이전의 변수 선언 방법.

Var 키워드 사용법

 

첫번째 예제를 보면, 같은 변수를 두번 선언했음에도 불구하고, 오류없이 잘 작동했다.

이처럼 유연한 변수 선언 방식은 편리하지만, 많은 오류를 발생시켜 ES6에는 let과 const라는 키워드들이 등장했다.

 

const : 상수 (Constant), 즉, 값이 변하지 않는 변수를 정의할 때 사용하며, let과 다르게 재정의/재할당이 불가하다. 

• Ex. 'pi'와 같이 변하지 않는 값을 정할 때 사용한다.

	let	const	var
유효 범위	Block Scope	Block Scope	Function Scope
값 재정의	가능	불가능	가능
재선언	불가능	불가능	가능

 

---

이번 TIL을 마치며...

 

오늘 문제를 풀며 추가로 배운 개념... 바로 `...`, 즉, rest parameter, rest syntax 라고 부른다. 이름에 'rest'가 붙는 이유는 남아있는 모든 인자를 하나의 배열에 담기 때문에 이렇게 부릅니다.

 

Rest Parameter 예시코드

실행이 되면 rest parameter args 는 모든 남아있는 인자들을 할당받는다. 위 예시에서 따로 매개변수를 빼놓지 않았음으로 args 는 배열의 형태로 모든 인자를 할당받게 된다. 따라서, 답은 위와 같이 [10, 30, 40] 가 된다.

 

spread syntax 는 iterable 한 모든 것의 (대표적으로 문자열, 배열) 요소를 "펼쳐"주는 문법을 의미한다. 아래의 예제를 참고해보자.

Rest Parameter 예시코드 2

위 코드는 arr의 모든 요소들을 펼쳐 value 라는 새로운 배열에 넣어주었다.

 

앞으로 잘 사용될 수 있는 개념이니 잘 기억해놓자.