TIL-13, 원시 자료형과 참조자료형, 스코프, 클로저

타입 기초에서 알아본 원시자료형과 참조자료형에 대해서
좀 더 깊이 알아보도록 하자.

---

원시 자료형

원시자료형에는 대표적으로 5가지가 있다.

1. String
   -> 'Apple', "1", 'true' 등 작은따옴표 또는
   큰따옴표로 감싸진 문자타입.

2. Number
   -> 1, 5, 1004 등 숫자로만 이루어진 타입.

3. Boolean
   -> true & false

4. Undefined
   -> 할당된 것이 아무것도 없다.

5. Null
   -> 비어있다는 것을 Null이라고 직접 정의해준다.

이 녀석들의 Type을 알고싶으면,
typeof method를 사용하면 된다.

원시자료형의 선언과 값의 할당은 아래 그림과 같이 이루어진다.

각각의 이름을 가진 저장소가 있고, 그 저장소에는 할당된 값이 저장된다.
여기서, a = '20' 이라고 입력하면, a의 이름을 가진 저장소의 값이
'20'으로 변한다.
하지만, let a = '20' 이라고 입력시, let 은 재할당이 불가능하기 때문에
SyntaxError가 뜨게된다.
var, let, const 키워드들은 각각의 특징을 가지고 있다.
아래 표에서 알아보자

표에서 알 수 있다시피, 각각 차이점이 존재한다.
var 키워드를 사용할 시 재선언이 가능하므로
원하지 않은 결과가 도출될 수 있다. 그러므로
일반적으로 값이 변하지 말아야 할때는
const 를 사용하고,
그 외에는 let을 사용하는게 좋다.

---

참조 자료형

참조 자료형에는 대표적으로 3가지가 있다.

1. 배열
   -> [1, 2, 3] 과 같이 대괄호에 들어있는 요소.

2. 객체
   -> {a: '5'} 와 같이 중괄호 안에 키와 값으로 이루어진 요소.

3. 함수
   -> 코드의 집합을 나타내는 자료형.

etc. 원시자료형이 아닌 모든 것들.

참조 자료형은 위 그림처럼,
각각의 이름을 가진 저장소에 '값'이 아닌
'주소'가 할당되고, 저장소를 호출하면
그 '주소'를 '참조'해서 주소값에 저장된 값들을
불러오게 된다.

---

스코프

스코프는 변수 접근 규칙에 따른 유효 범위를 말한다.
그 규칙으로는,

1. 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능.
   안쪽 스코프에서 선언한 변수는 바깥쪽 스코프에서 사용 불가능.

2. 스코프는 중첩이 가능하다.

3. 지역 스코프는 전역 스코프보다 높은 우선순위를 가진다.

위 그림처럼, 바깥쪽 스코프는 안쪽 스코프에 접근할 수 없고,
반대로 안쪽 스코프는 바깥쪽 스코프에 접근할 수 있다.

전역 스코프
-> 가장 바깥쪽에 있는 스코프

전역 변수
-> 전역 스코프에서 선언한 변수

지역 스코프
-> 전역 스코프가 아닌 모든 스코프 (안쪽)

지역 변수
-> 지역 스코프에서 선언한 변수

block scope (블럭 스코프)
-> 중괄호로 둘러쌓인 스코프

function scope (함수 스코프)
-> 함수로 둘러쌓인 스코프
이 때, function 키워드가 등장하는
함수 선언식, 함수 표현식은 함수 스코프,
function 키워드가 등장하지 않는
화살표 함수는 블럭 스코프로 취급한다.

var, let, const 키워드는 각각 따르는 블럭이 다르다.
위의 원시자료형에서 첨부한 표를 보고 참고하자.

스코프에서 키워드로 선언된 변수가 없으면,
위의 스코프에 키워드로 선언된 변수를 가져온다.

---

클로저

클로저는, 외부 함수 안에 리턴하는 내부 함수를 말한다.
함수를 호출한 뒤 함수가 종료된 후에도 외부 함수에 전달된 인자는
메모리에 남아 계속 사용할 수 있다.

  let add = function(x) {
    let sum = function(y) {
      return x + y;
    }
    return sum;
  }
  let plusOne = add(1);
  
  console.log(plusOne(3)); // 4 (1 + 3)
  console.log(plusOne(10)); // 11 (1 + 10)

위 코드처럼, add라는 함수에 인자 1을 넣어주고,
plusOne에 할당해준 뒤
plusOne(3) 으로 호출하면 4,
plusOne(10) 으로 호출하면 11이 나오는 것을 볼 수 있다.

여기서, sum 함수의 x가 외부 함수의 매개변수에
접근해서 그 매개변수를 받아오는걸 알 수 있는데,
이 sum함수를 클로저라고 한다.

클로저를 아주 실용적으로 활용할 수 있는데,
이를 모듈화 라고 한다.

const tagMaker = tag => content => `<${tag}>${content}</${tag}>`

const divMaker = tagMaker('div');
divMaker('Good!'); // ‘<div>Good!</div>

위 코드처럼, 모듈화를 잘 활용한다면
아주 실용적인 코드를 짤 수 있다.