[코드 스테이츠] 20일차, "3주차 복습 (1)"

---

[ 오늘의 TODO ]

1. 코드 스테이츠) 월~수 내용 복습
   // Twittler Refactorying  
   // 원시 자료형, 참조 자료형
   // 스코프
   // 클로저
2. 패스트 캠퍼스) 인강 3개 이상 듣기 // optional
3. 생활) 물 1L 이상 마시기
4. 생활) 수-토-일 운동 
   // 운동 좀 하자...

---

[ 오늘의 복습 ]

1. 원시 자료형, 참조 자료형

  1-1) 원시 자료형

  원시 자료형이란 객체도 아니며, Method도 없는 타입을 의미한다. 가장 대표적인 예로 String, Number, Boolean, undefined, null 등이 있고 그외 Symbol, bright 등이 있다. 원시 자료형의 가장 큰 특징은 하나의 데이터, 값 자체만을 담는다는 것이다. 

 

let string = "Hello World!"
let number = 12345

 

  이렇게 변수를 선언하고 변수에 값을 할당해줬다. 이럴 때, 변수에는 각각 "Hello World!", 12345를 저장한다. 이 때 이 데이터 딱 하나만을 저장한다. 

 

  1-2) 참조 자료형

  참조 자료형이란 주제 하나에 여러 데이터를 갖고 있는 것을 의미한다. 대표적인 예로 배열, 객체, 함수가 있다. 참조 자료형도 원시 자료형과 마찬가지로 변수에 할당해주지만, 특별한 점은 변수에 할당해주는 것이 값이 아닌 저장한 데이터를 찾아갈 수 있는 주소를 할당해준다는 점이다. 주소를 참조해서 데이터가 있는 곳으로 가는 것

 

  이 때의 주소는 heap이라는 데이터 보관함을 가리킨다. heap의 특징은 사이즈가 자유자재로 늘어났다 줄어들 수 있다는 점이다. 한 번 객체를 생각해보자

const Avengers = [블랙 위도우, 캡틴 마블, 닥터 스트레인지]
// 블랙위도우는 슬프지만 이제 하차해야 한다.

Avengers.shift()

console.log(Avengers) // [캡틴 마블, 닥터 스트레인지]

  이렇게 배열도 크기가 줄어들고, 원한다면 unshift나 push, 혹은 splice를 통해서 배열의 크기를 늘릴 수도 있다. 이처럼 참조형 데이터는 대량의 데이터를 쉽게 다룰 때 편리하지만 데이터 양이 큰 폭으로 늘어나거나 줄어들 수 있기 때문에 데이터 단 하나만을 저장하는 것이 아니라 크기를 마음대로 조절할 수 있는 heap이라는 특별한 보관함을 만든 것이다. 

 

2.  스코프

  2-1) 스코프란?

  스코프란 변수에 접근할 수 있는 범위를 뜻한다. 즉, 변수가 선언 됐을 때 그 변수가 어디서부터 어디까지 쓰일 수 있는지 그 범위를 의미한다. 스코프에는 두 가지 종류가 있다. 블록 스코프와 함수 스코프다. 블록 스코프는 { } 을 기준으로 그 안에서만 변수가 사용 가능한 스코프다. 화살표 함수도 블록 스코프로 취급된다. 하지만 함수 스코프는 화살표 함수를 제외한 함수 선언식, 표현식에서 만들어지는 스코프며 함수 선언부터 실행 종료까지 사용할 수 있는 변수를 뜻한다.

 

  2-2) 스코프의 주요 규칙

let myName = "Je"

if (myName) {
  console.log(myName) // "Je"
  
  let developer = `${myName} 개발자`
  console.log(developer) // "Je 개발자'
 }
 
 console.log(developer) // 에러가 난다.

    다음 예시를 살펴 보자. { } 를 기준으로 블록 스코프라고 했다.  { } 의 안을 편의상 안쪽 스코프라고 부르고, { } 의 바깥을 편의상 바깥쪽 스코프라 부르겠다. 그렇다면 developer라는 변수는 { } 안에 있으므로 안쪽 스코프에서만 사용이 가능하다. 그렇기 때문에 보면 맨 마지막 줄에서 그 변수를 콘솔에 찍어보니 에러가 났다. 그렇다면 myName은 어떤가? 이건 지금 바깥 스코프에 존재하는데 안쪽 스코프에서 콘솔로 찍어보니 제대로 출력된 것을 확인할 수 있다. 이로써 얻어지는 결론은

 

1. 안쪽 스코프에서 선언한 변수는 바깥쪽 스코프에서 사용이 불가능하다
   (= 바깥쪽 스코프에서 안쪽 스코프로는 접근이 불가능하다)

2. 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용이 가능하다.
   (= 안쪽 스코프에서 바깥쪽 스코프로는 접근이 가능하다) 

 

 

3. 클로저

 

1. 자신을 내포하는 함수의 컨텍스트의 접근할 수 있는 함수 ( 더글라스 크록포드 <자바스크립트 핵심 가이드> )

2. 어떤 함수에서 선언한 변수를 참조하는 내부함수를 외부로 전달할 경우, 함수의 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않는 현상 ( 정재남 <코어 자바스크립트> )

 

  나는 클로저를 정의한 것들 중 저 두 문장이 굉장히 와닿았다. 

 

  3-1) 클로저 함수의 특징

 

const add = x => y => x + y
add(3)(2) // 5

const add3 = add(3)
add3(2) // 5
add3(4) // 7

const add5 = add(6)
add5(2) // 8
add5(6) // 12

        

    3-1-1) 함수가 두 번 호출 된다.

  일단, 누가 봐도 함수를 두 번 호출했다. 화살표 함수로 위의 add 함수를 굳이, 정말 굳이 표현식으로 바꿔 본다면

const add = function (x) {
  return function (y) {
    return x + y 
  }
}

  이렇게 될 것이다. Return 으로 함수를 한 번 더 호출한다.

 

    3-1-2) 스코프는 리턴하는 함수에 의해서 구분된다.

  클로저가 클로저인 이유는 클로징(폐쇄)하기 때문이다. 이게 무슨 말이냐면, 위에 보면 x를 매개변수로 받는 함수를 외부 함수, y를 매개변수로 받는 함수를 내부 함수라 할 때, 위에 스코프의 특징으로도 언급했지만 외부 함수는 내부 함수에 접근할 수 없지만, 내부 함수는 외부 함수에 접근할 수 있다. 그렇기 때문에 마지막 retrun에는 버젓이 x라는 매개변수를 사용할 수 있는 것이다. 

 

    3-1-3) 데이터를 보존할 수 있다 (재사용성)

  이게 클로저의 가장 큰 장점이다. 폐쇄의 좋은 기능은 외부 함수의 실행이 끝난다 하더라도 내부 함수가 실행되지 않았을 경우, 외부 함수에서 인자를 받은 x는 계속해서 사용할 수 있다는 점이다. 이게 무슨 말이냐면 위에서 add3 = add(3)으로 할당해줬다. 이 때 add(3)은 외부 함수가 실행됐고, 매개변수 x에 3이라는 값을 할당해준 것이다. 그러나 내부 함수는 아직 실행이 되지 않았기 때문에 외부 함수 내 변수는 메모리에 저장된다. 그렇기에 함수가 다 실행된다 하더라도 add(3) 은 x가 3이라는 것을 메모리에 계속 담겨있으므로 나중에 또 재사용할 수 있는 것이다.

 

  이 재사용성을 극대화해서 사용하는 방식이 클로저 모듈이다.

 

const count = () => {
  let inviolableValue = 0;

  return {
    increase: () => {
      inviolableValue++
    },
    decrease: () => {
      inviolableValue--
    },
    getValue: () => inviolableValue
  }
};

const counter = count();

 

  클로저로 함수 세 개를 담은 객체를 리턴했다. 이렇게 하면 key값을 메소드처럼 활용해서 사용할 수 있다. 이 때, 정말 중요한 점이 한 가지 있다. counter 를 가지고 inviolableValue에 선언할 때 할당해준 0이라는 값에 변화를 줄 수 있는가? 없다. method로 increase, decrease 등을 활용해서 inviolableValue에 +를 하거나 -를 해줄 수는 있다 하지만 초기값 0에는 접근할 수 없다. 다시 말하면 간접적으로는 +, - 할 수는 있지만 저 값에 직접적으로 수정을 할 수는 없다는 의미다. 직접적인 수정을 주기 위해서는 count라는 함수에 수정을 가해서만 가능하지 counter로는 수정이 불가능하다. 이는 스코프의 특징이자 클로저의 강력한 특징이다. 이런 걸 정보의 접근 제한, 캡슐화라고 한다.