TIL 210804 - 자료형, 스코프, 클로저(보지 마시오. 머리가..

제목들을 보아하니

대충 변수 선언된 것들과

그 선언된 변수들이 유효한 구역

기능 함수의 종료점?

DOM이라 함도

스코프와 연관이 있을 거 같은데

 

한번 살펴볼께요~

자 시작!

 

원시 자료형과 참조 자료형

Achievement Goals

원시 자료형과 참조 자료형

• 원시 자료형(primitive type)과 참조 자료형(reference type)의 구분이 왜 필요한지에 대해서 영상을 보고 이해할 수 있다.
• 원시 자료형과 참조 자료형의 차이를 이해하고, 각자 맞는 상황에서 사용할 수 있다.
• 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다는 개념을 코드로 설명할 수 있다.
• 참조 자료형은 기존에 고정된 크기의 보관함이 아니라, 동적으로 크기가 변하는 특별한 보관함을 사용한다는 것을 이해할 수 있다.

 

메모리의 구조를 간략하게 알아봐야 두 자료형의 운영 차이를 알 수 있다.

메모리는 총 4가지 영역으로 구분

코드, 데이터, 힙, 스택

힙 특징 - 동적으로 메모리 용량이 늘었다가 줄었다가 가능

 

원시자료형은 stack이라는 영역에 저장된다.

스택은 하나씩 구분되어 있고 이름표를 붙일 수 있다.

스택에 저장된 데이터를 찾을 때도 이름표를 보고 찾아서 불러온다.

(string, number, boolean, null, undefined)

 

값이 여러개인 배열을 스택에게 보관한다면

찾을 때 수정할 때 스택이 너무 많은 시간과 비용이 든다.

 

그래서 스택을 하나로 뭉치게 하여 heap라는

공간을 만든다.

스택에는 힙의 주소를 보관하고 이름표를 붙인다.

해당 주소지에 값을 줄줄이 연결해서 보관한다.

그러면 값을 찾을 때는 스택에 있는 힙의 주소를 보고

값을 반환한다.

(array, object, function)

 

원시자료형은 이름표를 복사할 때

이름표가 가리키는 데이터까지 복사하기 때문에

원본 데이터가 변하지 않는다.

 

그러나 참조자료형은 이름표 복사시에

이름표가 부착된 스택에 저장되어 있는

힙의 주소만 복사하기 때문에

데이터를 복제하고 그 데이터를 변경하면

원본 데이터도 바뀌게 된다.

 

자료형 끝!

 

 

스코프 시작!(긴장하자)

스코프 : 변수의 유효한 범위

Achievement Goals

• 스코프의 의미와 적용 범위를 이해할 수 있다
• 스코프의 주요 규칙을 이해할 수 있다
  • 중첩 규칙
  • block scope와 function scope
  • 전역 스코프와 지역 스코프
  • 전역 변수와 지역 변수간의 우선 순위
  • let, const, var 의 차이
  • 전역 객체(window)의 이해

 

스코프!!! 변수 접근 규칙을 알아보래.

 

변수가 접근할 수 있는 영역이 있고

함수에 의해 영역이 정해지고 그 함수영역에서

선언된 변수는 해당 함수 영역에서만 호출할 수 있다.

 

스코프의 중첩규칙

더 넓은 스코프에서 유효한 변수는 그 보다 작은

스코프에서도 유효하다.

전역 스코프는 가장 바깥 영역의 스코프 반대말은 지역 스코프라고 한다.

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

 

놰놰놰!

 

스코프 끝!

 

스코프의 종류와 let, const, var 시작!

스코프의 종류 - 블록 스코프, 함수 스코프

화살표 함수는 블록스코프

function 키워드 사용하면 함수 스코프

 

ReferenceError

- 호출된 변수가 유효한 스코프에 있지 않아 참조할 수 없을 때 나오는 에러 메세지

 

 

키워드 var : 블록 스코프를 무시하고 함수 스코프만 따름

그러나 화살표 함수의 블록 스코프는 무시하지 않음

하지만 var 보다는 let을 쓰기를 권장 

변수를 정의하는 방법은 let 외에도 var 키워드를 사용하는 방법이 있습니다. var 키워드로 정의한 변수는 블록 스코프를 무시하고, 함수 스코프만 따릅니다. 그러나, 모든 블록 스코프를 무시하는 건 아닙니다. 화살표 함수의 블록 스코프는 무시하지 않습니다. 함수 스코프는 함수의 실행부터 종료까지이고, var 선언은 함수 스코프의 최상단에 선언됩니다.선언 키워드 없는 선언은 최고 스코프에 선언됩니다. 함수 내에서 선언 키워드 없는 선언은, 함수의 실행 전까지 선언되지 않은 것으로 취급합니다. 보통 코드를 작성할 때 블록은 들여쓰기가 적용되고, 그 구분이 시각적으로 분명합니다. 따라서 많은 사람들은 블록 스코프를 기준으로 코드를 작성하고, 생각하기 마련입니다. 그러나 var는 이 규칙을 무시하므로, 코드를 작성하는 사람이 블록 스코프/함수 스코프에 대한 이해가 없으면 코드가 다소 혼란스러울 수 있습니다. 따라서, var 보다는 let 으로 변수 선언을 하는 것을 권장합니다.

var 키워드는 재선언을 해도 에러를 발생시키지 않지만

let 키워드는 재선언을 방지 한다.

 

키워드 const : let과 동일하게 블록 스크프에서 작동

변수의 값을 새롭게 할당할 일이 없다면

값의 변경 방지를 위해 const 키워드로 할당

값을 재할당 할 경우 TypeError 발생

 

 

자 점심묵자!

 

 

변수 선언시에 주의할 점

너무 많은 전역 변수의 선언을 삼가라

부수 효과(side-effect)가 발생할 수 있음

let, const를 주로 사용해라

 

var로 선언한 전역변수가 window 기능을 덮어서

크롬 브라우저의 내장 기능을 사용하지 못하게 한다.

 

선언 키워드 없이 변수를 할당하지 마시라.

선언 키워드 없이 변수 할당하면

해당 변수는 var로 선언한 전역 변수로 취급

 

콘솔에서 Strict Mode를 사용하면

선언 키워드 없는 변수를 에러로 잡아낸다.

'use strict';

 

 

자 끝났고, 이제

클로저 시작이당!

 

클로저 함수 : 외부함수의 변수에 접근할 수 있는 내부함수

 

함수의 호출(아래 2개의 그림의 차이를 살펴보자)

 

Before You Learn

• 스코프에 대한 이해와 주요 규칙

Achievement Goals

• 클로저 함수의 정의와 특징에 대해서 이해할 수 있다
• 클로저가 갖는 스코프 범위를 이해할 수 있다
• 클로저를 이용해 유용하게 쓰이는 몇 가지 코딩 패턴을 이해할 수 있다

코.스에 클로저의 중요 내용을 설명안해주는 느낌임.

 

모던 자바스크립 딥다이브 내용을 먼저 살펴보자.

function outerFunc() {
  var x = 10;
  var innerFunc = function () { console.log(x); };
  innerFunc();
}

outerFunc(); // 10

위에서 innerFunc는 outerFunc안에서 선언되었기 때문에

outerFunce의 변수 x에 접근할 수 있다. (이런거 알려주라고!)

자신을 포함하고 있는 외부함수보다 내부함수가 더 오래 유지되는 경우,

외부 함수 밖에서 내부함수가 호출되더라도 외부함수의 지역 변수에 접근할 수 있는데

이러한 함수를 클로저(Closure)라고 부른다.

 

 

자세한 설명은 딥다이브에서 (내용이 길지만 여기가 훨씬 설명 잘함)

https://poiemaweb.com/js-closure

Closure | PoiemaWeb

 

 

클로저의 활용

위의 const tagMaker를 클로저 함수로 표현해 보면

const adder = fuction tagMaker(content) {
 return fuction divMaker(tag) {
   return tag + content + tag;
 }

뭐 이런 식이 아닐까 싶다.

 

 

으흠 좋군. 아주 신박한 기능이다.

아직 활용성은 잘 모르겠다.

 

정보의 접근 제한(캡슐화) : makerCounter 함수를 바꾸지 않고

변수 value의 값을 새롭게 할당할 수 없다.

전역변수로 아무리 value 값을 할당해도 makeCounter 함수가 끝날때까지

value의 값을 바뀌지 않는다.

 

내용 자체가 가볍지 않아서 그대로 가져온다.

만들어진 함수 counter1.getValue();는 앞전에

함수 counter1.increase나 counter1.decrease에 의해

변환된 값을 도출한다.

makeCounter에 의해 리턴된 객체는, makeCounter를 실행할 때에 선언되는 value 값을 각자 독립적으로 가지게 됩니다. 따라서 counter1에서의 value와 counter2에서의 value는 서로에게 영향을 끼치지 않고, 각각의 값을 보존할 수 있습니다.

makeCounter에 의해 리턴된 객체는, makeCounter를 실행할 때에 선언되는 value 값을 각자 독립적으로 가지게 됩니다. 따라서 counter1에서의 value와 counter2에서의 value는 서로에게 영향을 끼치지 않고, 각각의 값을 보존할 수 있습니다.