TIL - 21.07.01 👨‍💻

원시 자료형 vs 참조 자료형

---

원시 자료형 ( Primitive type data )

원시 자료형은 문자열, 숫자열, 불리언타입, null, undefined 와 변수 선언으로 이름표 붙인 스택에 데이터를 저장하고 변수 호출로 스택에 저장되어 있는 데이터를 불러오는 자료형들을 말한다.
스택에 데이터를 직접 저장하기에 한 스택당 즉 한 변수당 하나의 데이터만 저장 가능하다.

---

참조 자료형 ( Reference type data )

스택이 아닌 Heap이라는 별도 공간에 데이터를 저장하고 변수 선언으로 이름 붙힌 스택에는 해당 데이터의 주소만 저장된다.
변수를 호출해 스택에서 받아오는 것이 데이터가 아닌 Heap에 있는 데이터의 주소이기 때문에 참조한다고 해서 참조 자료형이다.
참조 자료형에는 배열과 객체가 있다.

---

두 자료형의 차이

이 두 자료형의 가장 큰 차이가 원시 자료형의 경우 선언되고 값이 할당되어 있는 변수(x)를 다른 변수(y)에 할당하면 해당 스택의 데이터가 복제되어 새로운 변수(y)의 스택에 할당된다.
그렇기에 할당하고 나서는 새로운 변수(y)를 수정한다고 해도 기존 변수(x)에는 영향이 전혀 없다.
기존 스택은 그대로 두고 새로 복제한 스택에 있는 데이터를 지지고 볶는 것이기 때문이다.

let x = 10;
let y = x;

if(true){
  y++
};

console.log(x) // 10;
console.log(y) // 11; 복제한 y의 값이 변해도 x의 값은 변하지 않는다.

그런데 참조 자료형 같은 경우는 데이터 자체를 복제하는 것이 아닌 데이터의 주소만 복제하기 때문에 새로운 변수(y)를 수정하면 기존 변수(x)의 출력 값에도 수정이 반영된다. ( 애초에 같은 값을 가지고 출력하는 것이니 )

let x = {
  name: 'sunghoon',
};
let y = x;

if(1){
 y.name = 'planet'; 
}

console.log(x) // { name : 'planet' }; y값이 바뀌니 x값도 바뀌었다.
console.log(y) // { name : 'planet' };

---

Scope

스코프의 범위는 중괄호(블록) 또는 함수에 의해 나뉘고 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 활용가능하나 안쪽 스코프에서 선언한 변수는 바깥쪽 스코프에서 호출할 수 없다. ( var는 예외 경우가 있음. )

바깥쪽과 안쪽을 이야기할때 눈치챘겠지만, 스코프는 중첩이 가능하다.
가장 외각의 스코프를 전역 스코프(Global scope)라고 하고 상위 스코프가 존재하는 모든 스코프들을 지역 스코프(Local scope)라고 한다.

전역 스코프는 코드 어디서든 참고가 가능하나 지역 스코프같은 경우는 함수블록 자체나 그 하위의 코드 블록에서만 참조가능하다.

이와 같은 특징 덕에 전역에 선언되어 있는 변수를 지역에서 다시 선언하고 사용 할 수 있는데 이 같은 특징을 쉐도잉(Variable Shadowing)이라고 한다.

같은 변수를 여러번 선언 할수있는 만큼 변수 명이 겹치면 중첩된 스코프에서는 어느 변수가 참조되는지 헷갈릴 수 있는데, 지역 스코프 같은 경우는 전역 스코프 보다 우선순위가 높으며 중첩 스코프같은 경우에는 인접한 블록을 우선해서 참조한다.

let x = 10;

function func(){
  let x = 20;
  function func1(x) {
    x = x + 10;       // 여기서 전역에 선언된 x를 참조하는게 아닌 바로 상위 블록에 선언한 x = 20을 참조한다.
  }  
  return func1()
}

console.log(x) // 10; 함수 안에서 지지고 볶든 말든 지역에서 선언된 변수는 지역 밖으로 나오지 못한다.

---

scope의 종류와 var, let, const

스코프는 중괄호로 나누는 블록 스코프와 함수로 둘러싼 범위인 함수 스코프가 있다.
화살표 함수는 애매한 면이 있으니 블록 스코프와 함수 스코프 사이 그 어딘가에 있다고 치자.

블록 스코프에서 선언한 변수는 블록을 벗어나는 순간 사용할 수 없다.
단 아까부터 언급 중인 이 var로 선언한 변수는 함수 스코프만 따르고 블록 스코프는 무시하면서 심지어 같은 스코프 내에서 재선언도 할 수 있는 아주 근본 없고 못되먹은 놈이다.

이러한 특성 때문에 최근에는 var 사용은 지양되고 주로 const 나 let으로 변수를 선언한다.

const와 let는 모두 함수 스코프와 블록 스코프를 따르며 재선언이 불가능하다는 점은 같지만, const는 재할당도 안되는 키워드라는 차이가 있다. 고로 값이 고정되어 있는 변수는 const를 사용하고, 재할당이 필요한 변수는 let을 사용한다.

브라우저에서 var는 함수 밖에서 선언될 때 전역 객체(window)의 프로퍼티가 된다.
전역 변수를 많이쓰면 의도치 않은 부수효과(side-effect)가 발생할 가능성이 커지므로 전역 변수는 지양하는게 좋다.

---

암묵적 전역(implicit global)

선언없이 블록 스코프 내에서 변수를 할당하게 되면 전역객체의 프로퍼티가 되면서 전역에서 참조할 수 있게 된다. 즉 var로 선언한 것과 유사한 취급을 받게 된다.

이를 삭제하려면 delete window.변수명 메소드를 사용하면 된다.

let x = 10;

if(1) {
 y = 20
}

console.log(y) // 20; 블록 스코프 밖으로 못나오는게 맞지만 선언없이 할당을 해버려 전역객체의 프로퍼티가 되어버렸다.

---

Closure Function ( 클로저 함수 )

클로저 함수의 정의는 함수와 함수가 선언된 어휘적 환경(lexical environment)의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 이다.
어휘적 환경은 변수 및 함수 선언의 형태 정도로만 기억해두자.

말이 어려운데 조금 풀어쓰자면 리턴된 내부함수(클로저 함수)가 내부함수를 감싸고 있는 외부함수의 실행이 종료된 후 외부에서 호출되어도 그 함수가 리턴되며 선언되었을 당시 환경을 기억해 그 환경에 접근 할 수 있게 해주는 것이다.
똑같이 머리아프다

조금 더 간단하게 하자면 외부 함수에 접근 할 수 있는 내부 함수정도로만 기억해놓자.

클로저 함수는 함수가 내부와 외부로 나뉘어 있고 이를 내부 함수, 외부 함수라고 한다.

이 역시 다른 스코프들과 같이 외부 함수에선 내부 함수에서 선언한 변수에 접근 불가능하며,
반대로 내부 함수에선 외부 함수에서 선언한 변수에 접근 가능하다.

function outer(x){
  y += 1
  return function inner(y){
    x += 1
  }
} 
//outer의 스코프에 inner의 매개변수에 1 더한다는 게 적혀있다.
//이런 식으로 외부 함수에서 내부 함수에서 선언된 변수로의 참조는 불가하다.

원래 함수의 매개변수 값까지 지정해서 호출하는 것은 변수지정이 되지 않고, 일반적인 함수는 함수실행이 끝나면 함수 내부에 접근할 수 없지만, 클로저 함수의 경우 어휘적 환경을 메모리에 저장하기에 외부 함수 내 변수가 메모리 상에 저장된다.

---

응용: 클로저 모듈 패턴

클로저 함수는 외부 함수 내 변수가 메모리 상에 저장되기에 외부에선 변수에 접근하지 못하게 하고 몇가지 정해둔 패턴으로 함수를 호출함으로 내부에 있는 데이터를 변경시키는 방법이 클로저 모듈 패턴이다.
함수의 리턴 값을 객체로 정하고 객체의 프로퍼티 밸류에 함수를 할당하면서 그걸 작동시킬 프로퍼티 키를 설정하는 것이다.

const makeCounter = () => {
  let count = 0;
  return {
    increase: () => count++,
    decrease: () => count--,
  	getCount: () => count,
  }
}

let counter1 = makeCounter();
counter1.increase();
counter1.increase();
counter1.increase();
counter1.getCount(); // 3; 

let counter2 = makeCounter();
counter2.decrease();
counter2.decrease();
counter2.decrease();
counter2.getCount(); //-3; 

//어휘적 환경을 저장하는 특성 덕에 외부 함수를 다른 변수에 지정하면, 
//같은 함수로 여러 값을 가지게 할 수 있다.

GOOD 😉

원시 자료형과 참조 자료형의 차이를 보다 확실히 했다.
스코프 개념을 명확히 했고, 클로저 개념을 배웠다.
오늘은 시간이 부족하지 않았다.

BAD 😥

역시 다른 공부를 못한게 마음에 걸린다.

TO DO 🔥

• DOM 구조
• React
• 재귀 함수
• 아침에 Spread, Rest 문법과 js Koans 예습

Retrospect 🧐

오늘은 페어가 없는 챕터로 가득한 마지막 날이다.
아마 오늘처럼 챕터시간을 여유롭게 가지며 공부하는 날은 앞으로 없겠지.

정신쪼으고 제대로 달려보자!

Reference 🙇

https://poiemaweb.com/
https://developer.mozilla.org/