4주차 발표 자료, 퀴즈 추가 (#18)

* docs: 스터디 진행 방식 문서 작성

* Add: 객체 발표 자료 추가

* Add: 프로토타입 발표 자료 추가

* Add: 함수/화살표 함수 발표 자료 추가

* Add: 클로저/중첩 함수 발표 자료 추가

* Add: 메모이제이션 발표 자료 추가

* Docs: 4주차 발표자료 하이퍼링크 추가

* Add: 4주차 퀴즈 추가

* Docs: 4주차 퀴즈 하이퍼링크 추가

* Update: 1주차 노션 확인 하이퍼링크 수정

* Update: 2주차 노션 확인 하이퍼링크 수정

* Update: 3주차 노션 확인 하이퍼링크 수정

* Update: 4주차 노션 확인 하이퍼링크 수정

week1/ECMAScript와-JavaScript의-연관성.md

@@ -1,7 +1,9 @@
 # ECMAScript와 JavaScript의 연관성
 
 > **Create Date**: 2022/12/09  
-> [노션에서 확인하기](https://areumsheep.notion.site/ECMAScript-JavaScript-4d15fef29a9c4b658b5e5691528f2cf7)
+> **Update Date**: 2023/01/01
+>
+> [노션에서 확인하기](https://areumsheep.notion.site/ECMAScript-JavaScript-a8caaaa4f32444408d67eaf3346b4efa)
 
 ES6, ES2016, ES2021 등등 ES가 들어가는 말들을 보신 적이 있을 겁니다.
 혹시 ES6가 무엇인지 설명할 수 있으신 분이 계실까요?

week1/JavaScript의-역사.md

@@ -1,11 +1,11 @@
 # JavaScript의 역사
 
 > **Create Date**: 2022/11/29  
-> **Update Date**: 2022/12/06
+> **Update Date**: 2023/01/01
 >
 > [JavaScript: the first 20 year](https://dl.acm.org/doi/pdf/10.1145/3386327)를 참고하여 작성되었으나, 오역이 있을 수 있습니다.
 >
-> [노션에서 확인하기](https://areumsheep.notion.site/JavaScript-91d8d800280741249226c44ffd0e768b)
+> [노션에서 확인하기](https://areumsheep.notion.site/JavaScript-5218abe7507848e0879d1db49c272512)
 
 ![**참고**: [https://buggyprogrammer.com/difference-between-java-and-javascript/](https://buggyprogrammer.com/difference-between-java-and-javascript/)](images/JavaScript의-역사/thumbnail.png)
 

week1/var-let-const.md

@@ -1,7 +1,9 @@
 # var / let / const
 
 > **Create Date**: 2022/12/09  
-> [노션에서 확인하기](https://areumsheep.notion.site/var-let-const-685a665d15e74ed0a65558d56c76230d)
+> **Update Date**: 2023/01/01
+>
+> [노션에서 확인하기](https://areumsheep.notion.site/var-let-const-321ed794561c4b20a7dd4577ae591422)
 
 자바스크립트에는 타입이 없습니다.
 그럼 변수 선언을 어떻게 해야할까요?

week1/분해할당.md

@@ -1,7 +1,9 @@
 # 분해할당
 
 > **Create Date**: 2022/12/09  
-> [노션에서 확인하기](https://areumsheep.notion.site/78ee025858744e4f9d80fcda38f0c061)
+> **Update Date**: 2023/01/01
+>
+> [노션에서 확인하기](https://areumsheep.notion.site/3787a36b38f840bdadb73f2ed27eda71)
 
 ES6에서 선언과 할당을 합친 일종의 복합 문법을 도입했습니다.
 

week2/타입.md

@@ -3,7 +3,7 @@
 > **Create Date**: 2022/12/14  
 > **Update Date**: 2022/12/16
 >
-> [노션에서 확인하기](https://areumsheep.notion.site/a0b7d622868d434785904b43a7c3c810)
+> [노션에서 확인하기](https://areumsheep.notion.site/74930a7a2046429ab0859a3d6984df26)
 
 프로그래밍 언어에서 어떤 타입을 지원하는지가 프로그래밍 언어의 가장 기본적인 특징이 됩니다.
 자바스크립트의 변수 타입은 크게 원시 타입과 참조 타입이 있습니다.

week2/표현식-문-연산자.md

@@ -3,7 +3,7 @@
 > **Create Date**: 2022/12/14  
 > **Update Date**:
 >
-> [노션에서 확인하기](https://areumsheep.notion.site/6509d9d9637d4b29ae660d1a1ce5efd8)
+> [노션에서 확인하기](https://areumsheep.notion.site/da45abc3d8be43a0a146e6ed8bef13d9)
 
 자바스크립트의 표현식, 연산자, 문에 대해 모든 걸 다 이야기하면 24시간도 부족할 정도로 많습니다.
 여러 분도 알게 모르게 사용하고 계시겠죠!

week2/호이스팅-TDZ.md

@@ -3,7 +3,7 @@
 > **Create Date**: 2022/12/09  
 > **Update Date**: 2022/12/13
 >
-> [노션에서 확인하기](https://areumsheep.notion.site/TDZ-d41b33b78f9d4081b27462fa68e36d78)
+> [노션에서 확인하기](https://areumsheep.notion.site/TDZ-49306ff786c448e9aa66e7539ee2be3c)
 
 호이스팅은 무엇일까요?
 **변수 선언을 최상단으로 올리는 것입니다.** 라고 하기엔 설명이 부족해보입니다.

week3/배열-비슷한-객체.md

@@ -3,7 +3,7 @@
 > **Create Date**: 2022/12/21  
 > **Update Date**: 2022/12/21
 >
-> [노션에서 확인하기](https://areumsheep.notion.site/331542f240fa46c1b111f2e7f8fc929c)
+> [노션에서 확인하기](https://areumsheep.notion.site/e7a1dea647e94b7984a81324fd249d49)
 
 자바스크립트에는 배열과 비슷한 객체가 존재합니다.
 영어로는 array-like object라고 합니다.

week3/배열-성긴-배열.md

@@ -3,7 +3,7 @@
 > **Create Date**: 2022/12/21  
 > **Update Date**: 2022/12/22
 >
-> [노션에서 확인하기](https://areumsheep.notion.site/5e4b76a797c6495186f38865a2aeec30)
+> [노션에서 확인하기](https://areumsheep.notion.site/f104600971c9488c8e50229fbeda0a05)
 
 여러분들은 배열에 대해 잘 알고 계실겁니다.
 하지만 조금 더 세세하게 알아보는 계기가 되었으면 하여 준비한 자료입니다!

week3/타입-변환.md

@@ -3,7 +3,7 @@
 > **Create Date**: 2022/12/19  
 > **Update Date**: 2022/12/21
 >
-> [노션에서 확인하기](https://areumsheep.notion.site/f7d5b3bcdf0a4d0d8c28a14fab9b74e0)
+> [노션에서 확인하기](https://areumsheep.notion.site/67c0520aa49f4ac1bee2ddba581e1e13)
 
 지난 시간 자바스크립트에는 크게 원시 타입과 참조 타입이 있다고 말씀드렸습니다.
 타입을 변경하는 방법에는 **명시적 타입 변환, 암묵적 타입 변환** 총 2가지가 있습니다.

week4/QUIZ.md

@@ -0,0 +1,106 @@
+## 📝 4주차 퀴즈
+
+### 빈 칸 채우기
+
+ex) 스터디 리더는 (양아름) 입니다.
+
+1. 객체를 생성하게 되면 자신만의 프로퍼티를 가지는 것 외 ()라고 불리는 다른 객체에서 프로퍼티를 상속하기도 한다.
+2. 선언 당시의 환경(스코프)에 대한 정보를 담은 객체를 ()라고 한다.
+3. 한 번 정의하면 몇 번이고 호출할 수 있는 자바스크립트 코드 블록을 ()이라 한다.
+4. 자신이 생성될 때의 환경(스코프)를 기억하는 함수를 ()라고 한다.
+5. 함수 안에 함수를 적용하는 방식을 ()라고 한다.
+6. 화살표 함수는 자신이 정의된 환경의 ()키워드 값을 상속한다는 특징을 가지고 있다.
+7. 이전에 계산된 결과를 캐시하여 동일한 상황에 같은 계산을 반복하지 않고 이전 값을 사용하는 것을 ()이라 한다.
+8. new Date()를 선언하면 Date.prototype, Object.prototype 순으로 연결되어 있는데 이것처럼 프로토타입 객체 사이의 연결을 ()이라 한다.
+
+### O / X 퀴즈 (만약 X라면 이유도 작성하면 좋아요!)
+
+ex) 스터디는 매주 목요일마다 진행됩니다.
+X, 매주 금요일마다 진행됩니다.
+
+1. 화살표 함수는 함수 선언문이다.
+   **답**:
+
+2. 자바스크립트의 일부 함수만 클로저이다.
+   **답**:
+
+3. 프로토타입 객체와 `__proto__`는 같은 단어이다.
+   **답**:
+
+4. constructor와 `__proto__`는 같은 단어이다.
+   **답**:
+
+5. 클로저를 사용하면 변수를 비공개 상태로 사용할 수 있는데 함수 호출 시점의 로컬 변수를 캡처하기 때문이다.
+   **답**:
+
+### 코드 퀴즈
+
+1. 객체를 생성하는 3가지 방법을 모두 이용해 간단히 코드로 구현해보세요!
+
+```javascript
+// 1) 객체 리터럴
+
+// 2) new
+
+// 3) Object.create()
+```
+
+2. subject 변수를 매개변수로 받은 math, english 값으로 변경하려 합니다. 주석으로 표현한 빈칸을 직접 채워보세요!
+
+```javascript
+let subject = {
+  math: 80,
+  english: 90,
+};
+
+const setSubject = (math, english) => {
+  // 여기에는 어떤 코드가 들어갈까요?
+  // 힌트: 객체에서 다룬 TMI를 확인해보세요!
+};
+
+setSubject(40, 99);
+```
+
+3. 아래 코드에서 출력될 답안을 작성해보세요!
+
+```javascript
+const today = new Date();
+console.log(today.__proto__); //답:
+console.log(today.constructor); //답:
+
+const copy = today;
+console.log(typeof copy); //답:
+
+console.log(copy.prototype === Date().prototype); //답:
+```
+
+4. 클로저를 이용하여 private method를 만드려 합니다. 주석으로 표현한 빈칸을 채워보세요!
+
+```javascript
+function counter() {
+  let privateTarget = 0;
+  const changeBy = (value) => {
+    privateTarget += value;
+  };
+
+  return {
+    increment: function () {
+      // 여기에는 어떤 코드가 들어갈까요?
+    },
+    decrement: function () {
+      // 여기에는 어떤 코드가 들어갈까요?
+    },
+    value: function () {
+      return privateTarget;
+    },
+  };
+}
+
+const countTest = counter();
+console.log(countTest.value()); // => 0
+countTest.increment();
+countTest.increment();
+console.log(countTest.value()); // => 2
+countTest.decrement();
+console.log(countTest.value()); // => 1
+```

week4/README.md

@@ -0,0 +1,11 @@
+## 🔍 4주차 발표자료
+
+- [객체](객체.md)
+- [프로토타입](프로토타입.md)
+- [함수-화살표-함수](함수-화살표-함수.md)
+- [클로저-중첩-함수](클로저-중첩-함수.md)
+- [메모이제이션](메모이제이션.md)
+
+## 🤨 4주차 퀴즈
+
+- [퀴즈 확인하기](QUIZ.md)

week4/객체.md

@@ -0,0 +1,123 @@
+# 객체
+
+> **Create Date**: 2022/12/30  
+> **Update Date**: 2022/12/30
+>
+> [노션에서 확인하기](https://areumsheep.notion.site/451436da78114c6eb01c9c53ed5c6efa)
+
+객체는 자바스크립트의 가장 기본적인 데이터 타입이며 저희는 이미 살펴본 적이 있습니다.  
+객체는 자바스크립트에서 굉장히 중요한 부분이므로 객체가 어떻게 동작하는지 자세히 이해해봅시다!
+
+## 객체란?
+
+객체는 복합된 값입니다.
+객체는 여러 가지 값(기본 값이나 다른 객체)을 모아서 이름을 통해 값을 저장하고 가져올 수 있게 합니다.
+
+```jsx
+const obj = {
+  hello: 'world',
+  name: 'secret',
+};
+
+obj.map;
+```
+
+객체는 단순히 문자열과 값만 연결한 것이 아닙니다. 자바스크립트 객체는 자신만의 프로퍼티를 가지는 것 외에도 **프로토타입**이라고 불리는 다른 객체에서 프로퍼티를 상속하기도 합니다.
+
+이 **프로토타입 상속**이 자바스크립트의 중요한 기능입니다.
+
+## 객체 생성
+
+### 객체 리터럴
+
+위에 예시를 들었던 코드가 바로 객체 리터럴을 사용하여 객체를 생성한 코드입니다.
+다시 한 번 가져올까요?
+
+```jsx
+const obj = {
+  hello: 'world',
+  name: 'secret',
+  test: 'test',
+};
+```
+
+콜론으로 구분한 `이름: 값` 형식으로 되어져 있는 것을 확인할 수 있습니다.
+
+객체 리터럴의 마지막 프로퍼티 뒤에 콤마를 쓸 수 있습니다. 이렇게 마지막에 콤마를 남겨둔다면 객체의 프로퍼티를 추가할 때 문법 에러를 초래할 가능성이 줄어들기에 이런 스타일을 권장하는 사람도 있습니다.
+
+### new
+
+```jsx
+const o = new Object();
+const a = new Array();
+```
+
+new 연산자는 새 객체를 생성하고 초기화합니다. new 키워드 뒤에는 반드시 함수 호출이 있어야 합니다.
+이런 형태로 사용하는 함수를 **생성자**라고 부르고 **새로 생성된 객체를 초기화하는 목적**으로 사용합니다.
+
+### Object.create()
+
+> 해당 부분을 읽기 전에 [프로토타입](프로토타입.md)을 먼저 읽고 오시는 것을 추천합니다!!
+
+첫 번째 인자를 프로토타입 삼아 새 객체를 생성하는 방법입니다.
+임의의 프로토타입을 사용하여 새 객체를 만들 수 있는 것은 **강력한 기능**입니다.
+
+```jsx
+const o = Object.create({ x: 1, y: 2 }); // => Object.prototype
+const a = Object.create(Array.prototype); // => Array.prototype / Object.prototype
+
+const d = Object.create(Date.prototype); // ??
+```
+
+- **d에는 어떤 프로토타입이 있을까요?**
+  Date.prototype / Object.prototype
+
+## TMI
+
+### 단축 프로퍼티
+
+ES6 이후에는 같은 변수명 일 시 콜론을 생략한 훨씬 간결한 문법을 사용할 수 있습니다.
+
+```jsx
+let x = 1,
+  y = 2;
+const o = {
+  x: x,
+  y: y,
+};
+
+//위의 코드는 아래와 같이 수정이 가능합니다.
+const o = {
+  x,
+  y,
+};
+```
+
+### 분해 연산자
+
+**ES2018** 이후에는 객체 리터럴 안에서 분해 연산자 …를 사용해 기존 객체의 프로퍼티를 새 객체에 복사할 수 있습니다.
+
+```jsx
+const position = { x: 0, y: 0 };
+const dimensions = { width: 100, height: 75 };
+
+const rect = {...position, ...dimensions };
+
+for(n) {
+	const rect = {...position, ...dimensions }; // 2 * 2 * n
+}
+```
+
+저희에겐 그저 점 3개일 수 있겠지만 자바스크립트 인터프리터가 상당히 많은 일을 하게 될 수도 있습니다.
+
+객체에 프로퍼티가 n개 있다면 이 프로퍼티를 다른 객체로 분해하는 작업은 $O(n)$ 작업일 겁니다.
+
+…를 루프나 재귀 함수에 넣어 데이터를 큰 객체 하나에 누산한다면 어떻게 될까요?
+$n$이 커질수록 비효율적인 $O(p^2)$ 알고리즘을 쓰게 됩니다.
+
+## 참고 자료
+
+- 자바스크립트 완벽가이드
+- [https://evan-moon.github.io/2019/10/23/js-prototype](https://evan-moon.github.io/2019/10/23/js-prototype)
+- [https://ko.javascript.info/native-prototypes](https://ko.javascript.info/native-prototypes)
+- [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create)

week4/메모이제이션.md

@@ -0,0 +1,40 @@
+# 메모이제이션
+
+> **Create Date**: 2022/12/30  
+> **Update Date**: 2022/12/30
+>
+> [노션에서 확인하기](https://areumsheep.notion.site/eaa583eb2c6342bbb6f17daaf2c6fad6)
+
+메모이제이션(memoization) 아시는 분 계실까요?
+
+간단합니다! **이전에 계산한 결과를 캐시하여 동일한 상황에 같은 계산을 반복하지 않고 사용하는 것**을 메모이제이션이라 합니다.
+
+팩토리얼을 메모이제이션으로 구현해보겠습니다.
+
+```jsx
+function factorial(n) {
+  if (Number.isInteger(n) && n > 0) {
+    if (!(n in factorial)) {
+      factorial[n] = n * factorial(n - 1);
+    }
+    return factorial[n];
+  } else {
+    return '잘못된 숫자가 입력되었습니다.';
+  }
+}
+
+factorial[1] = 1; // 캐시를 초기화합니다.
+factorial(6); // => 720
+factorial[5]; // => 120 / 이 값은 이미 캐시에 존재합니다.
+```
+
+이 부분을 간단히 다룬 이유는 리액트에 메모이제이션 훅이 있기 때문입니다.
+
+- `useMemo`는 메모이제이션된 값을 반환합니다.
+- `useCallback`은 메모이제이션된 콜백을 반환합니다.
+
+## 참고 자료
+
+- 자바스크립트 완벽가이드
+- [https://ko.reactjs.org/docs/hooks-reference.html#usecallback](https://ko.reactjs.org/docs/hooks-reference.html#usecallback)
+- [https://ko.reactjs.org/docs/hooks-reference.html#usememo](https://ko.reactjs.org/docs/hooks-reference.html#usememo)