3주 4일차 - 원시타입과 참조타입, 스코프, 클로저

1. 리뷰

시간관리 잘하자.

2. 학습 키워드

---

학습 목표

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

---

• 고정된 저장공간 vs 동적으로 변하는 저장공간
• 주소(reference)
• 스택이란?
• 하나의 정보, 원시적인, 메모리 용량이 제한, 변수 하나에
• 초기의 컴퓨터에는 배열(리스트) 개념을, array data structure, 띄어쓰기/ 탭/ 쉼표
• 읽는다 vs 참조한다 차이
• 힙이란?(힌트: 동적, 주소)
• 배열과 객체는 대량의 데이터를 다뤄야 하므로, 상황에 따라서 크기가, 별도의 저장 공간
• 같은 주소를 바라보고 있어 얕은 복사가 일어남
• 참조 자료형의 ===(strict equality)는 주소값이 같은지를 확인합니다. 그렇기 때문에 두 참조 자료형의 주소값은 다르다고 판단을 내릴 수 있습니다.
• 변수는 표현식이 평가되어 생성된 값을 메모리 공간에 저장하며, 언제든지 값의 재할당이 가능하다. 상수도 처음에 선언하면서 초기화하며 값을 저장하기 때문에 변수의 일종으로 보지만 상수는 값의 재할당이 불가능하다.

스코프

학습 목표

• 스코프의 의미와 적용 범위를 이해한다.
• 스코프의 주요 규칙을 이해한다.
• 전역 스코프와 지역 스코프의 차이를 이해한다.
• block scope와 function scope의 차이를 이해한다.
• 변수 선언 키워드(let, const, var)와 스코프와의 관계를 설명할 수 있다.
• 전역 객체가 무엇인지 설명할 수 있다.

---

스코프: 변수의 유효범위(참조 가능한 범위)

스코프는 중첩이 가능하다.(abcd 예시)

function 키워드로 선언한 함수 선언문: 함수 스코프

화살표 함수: 블록 스코프

• var 키워드는 함수 스코프이나 화살표 함수 안에선 블록 스코프? 화살표 함수도 함수라서? 아니면 화살표 함수의 스코프는 한단계 위의 스코프라서?
• 왜 전역에서 var로 선언하면 window객체 안에 있고 let으로 선언하면 window객체 안에 없음? window객체가 함수가 아니라서?
• var 키워드로 선언한 전역 변수와 window객체의 브라우저 내장함수 이름이 같으면 var 키워드로 선언한 내용이 브라우저 내장 기능을 덮어씌워서(override) 브라우저 내장 기능을 못 쓰게 됨. 그래서 let, const 써라. var 키워드는 블록 스코프를 무시한다.
• 선언 없는 변수 할당 금지: 선언 키워드 없이 할당한 변수는 var 키워드로 선언한 전역 변수처럼 취급된다!!!

age = 90; // 이 age변수는 아무데서나 접근 가능해져버림.

클로저

• 스코프를 이용하여 변수의 접근 범위를 닫는다.
• 다른 언어들과는 다른 자바스크립트만의 특징이다.  -> 함수형 프로그래밍 언어 공통 특성이다.(얼랭, 스칼라, 하스켈 등등)

클로저 함수

1. 외부 함수의 변수에 접근할 수 있는 내부 함수

// 클로저 함수의 특징
// 클로저 함수인 화살표함수의 축약형태
const adderArrowFunc = x => y => x + y;
// 함수의 호출이 두 번 발생.
adderArrowFunc(2)(3); // 5

// 위의 함수는 중괄호 뒤에 return이 오는 경우 중괄호와 return을 생략 가능한 화살표함수의 특성을 이용하여 아래의 함수를 축약한 것임.
// 외부함수의 변수 x에 내부함수에서 접근하여 return할때 외부함수의 변수 x의 값과 지역변수인 자신의 매개변수 y의 값을 더하여 리턴한다.
const adderArrowFunc = (x) => {
    return (y) => {
        return x + y;};
}
adderArrowFunc(2)(3); // 5

고차함수: return값이 함수이거나 인자(parameter)로 콜백함수를 전달받는 함수.

콜백함수: 다른 함수(고차함수)의 인자로 들어가는 함수. 흔히 이벤트리스너의 인자로 들어가서 이벤트 발생 시 동작하도록 자주 사용.

• 렉시컬 환경(lexical environment, 어휘적 환경): 변수 및 함수 선언의 형태
• 함수 선언문은 호이스팅 되나, 함수 표현식은 호이스팅 되지 않는다.
  • 함수 선언문: function 키워드로 선언한 함수
  • 함수 표현식: 변수로 선언한 함수

3. 스스로 설명해보기

• 원시타입과 참조타입

4. 이해가 부족한 개념

• 클로저

5. 할 일

• 스코프, 실행컨텍스트, 클로저, 렉시컬 환경 공부, 블로그에 내용 정리 - 주말에
• es6문법 빠르게 정리할 공부 방안 세우기