From 44aa790d1fa24a3ada9be9337ced55f658c17c9d Mon Sep 17 00:00:00 2001
From: Dang <wheodnjs2@naver.com>
Date: Thu, 18 Sep 2025 17:02:08 +0900
Subject: [PATCH 1/5] =?UTF-8?q?Create=20=EC=A1=B0=EB=8C=80=EC=9B=90.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\354\241\260\353\214\200\354\233\220.md"                   | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 "Part2-9\355\214\200/4\354\243\274\354\260\250-1/\354\241\260\353\214\200\354\233\220.md"

diff --git "a/Part2-9\355\214\200/4\354\243\274\354\260\250-1/\354\241\260\353\214\200\354\233\220.md" "b/Part2-9\355\214\200/4\354\243\274\354\260\250-1/\354\241\260\353\214\200\354\233\220.md"
new file mode 100644
index 0000000..73233a6
--- /dev/null
+++ "b/Part2-9\355\214\200/4\354\243\274\354\260\250-1/\354\241\260\353\214\200\354\233\220.md"
@@ -0,0 +1,3 @@
+# 구조 분해 할당
+
+# 나머지 매개변수와 전개 구문

From 4be82b0e6be4fc7d8a8631e230c6001ff96d876f Mon Sep 17 00:00:00 2001
From: Dang <wheodnjs2@naver.com>
Date: Thu, 18 Sep 2025 22:08:15 +0900
Subject: [PATCH 2/5] =?UTF-8?q?Update=20=EC=A1=B0=EB=8C=80=EC=9B=90.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\354\241\260\353\214\200\354\233\220.md"  | 209 ++++++++++++++++++
 1 file changed, 209 insertions(+)

diff --git "a/Part2-9\355\214\200/4\354\243\274\354\260\250-1/\354\241\260\353\214\200\354\233\220.md" "b/Part2-9\355\214\200/4\354\243\274\354\260\250-1/\354\241\260\353\214\200\354\233\220.md"
index 73233a6..d6ecb2c 100644
--- "a/Part2-9\355\214\200/4\354\243\274\354\260\250-1/\354\241\260\353\214\200\354\233\220.md"
+++ "b/Part2-9\355\214\200/4\354\243\274\354\260\250-1/\354\241\260\353\214\200\354\233\220.md"
@@ -1,3 +1,212 @@
 # 구조 분해 할당
 
+## 배열 분해하기
+
+```js
+// 이름과 성을 요소로 가진 배열
+let arr = ["Bora", "Lee"]
+
+// 구조 분해 할당을 이용해
+// firstName엔 arr[0]을
+// surname엔 arr[1]을 할당하였습니다.
+let [firstName, surname] = arr;
+
+alert(firstName); // Bora
+alert(surname);  // Lee
+
+// split을 활용한 분해 할당
+// let [firstName, surname] = "Bora Lee".split(' ');
+alert(firstName); // Bora
+alert(surname);  // Lee
+
+// 문자열도 가능
+let [a, b, c] = "def";
+alert(a); // d
+alert(b); // e
+alert(c); // f
+
+// 두 변수에 저장된 값 교환
+let guest = "Jane";
+let admin = "Pete";
+
+// 변수 guest엔 Pete, 변수 admin엔 Jane이 저장되도록 값을 교환함
+[guest, admin] = [admin, guest];
+
+alert(`${guest} ${admin}`); // Pete Jane(값 교환이 성공적으로 이뤄졌습니다!)
+```
+
+## ...로 나머지 요소 가져오기
+```js
+let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
+
+alert(name1); // Julius
+alert(name2); // Caesar
+
+// `rest`는 배열입니다.
+alert(rest[0]); // Consul
+alert(rest[1]); // of the Roman Republic
+alert(rest.length); // 2
+```
+
+## 기본값
+```js
+// 기본값
+let [name = "Guest", surname = "Anonymous"] = ["Julius"];
+
+alert(name);    // Julius (배열에서 받아온 값)
+alert(surname); // Anonymous (기본값)
+```
+
+## 객체 분해하기
+```js
+let options = {
+  title: "Menu",
+  width: 100,
+  height: 200
+};
+
+let {title, width, height} = options;
+
+alert(title);  // Menu
+alert(width);  // 100
+alert(height); // 200
+
+// let {...} 안의 순서가 바뀌어도 동일하게 동작함
+let {height, width, title} = { title: "Menu", height: 200, width: 100 }
+
+let options = {
+  title: "Menu",
+  width: 100,
+  height: 200
+};
+
+// { 객체 프로퍼티: 목표 변수 }
+let {width: w, height: h, title} = options;
+
+// width -> w
+// height -> h
+// title -> title
+
+alert(title);  // Menu
+alert(w);      // 100
+alert(h);      // 200
+
+// 기본 값 지정
+let options = {
+  title: "Menu"
+};
+
+let {width = 100, height = 200, title} = options;
+
+alert(title);  // Menu
+alert(width);  // 100
+alert(height); // 200
+```
+
+## 나머지 패턴 '...'
+```js
+let options = {
+  title: "Menu",
+  height: 200,
+  width: 100
+};
+
+// title = 이름이 title인 프로퍼티
+// rest = 나머지 프로퍼티들
+let {title, ...rest} = options;
+
+// title엔 "Menu", rest엔 {height: 200, width: 100}이 할당됩니다.
+alert(rest.height);  // 200
+alert(rest.width);   // 100
+
+
+// let 없이 사용하기
+let title, width, height;
+
+// 에러가 발생하지 않습니다. (()괄호를 활용하여 코드 블록이 아닌 표현식으로 해석하게 하기)
+({title, width, height} = {title: "Menu", width: 200, height: 100});
+
+alert( title ); // Menu
+```
+
+## 중첩 구조 분해
+```js
+let options = {
+  size: {
+    width: 100,
+    height: 200
+  },
+  items: ["Cake", "Donut"],
+  extra: true
+};
+
+// 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러냄
+let {
+  size: { // size는 여기,
+    width,
+    height
+  },
+  items: [item1, item2], // items는 여기에 할당함
+  title = "Menu" // 분해하려는 객체에 title 프로퍼티가 없으므로 기본값을 사용함
+} = options;
+
+alert(title);  // Menu
+alert(width);  // 100
+alert(height); // 200
+alert(item1);  // Cake
+alert(item2);  // Donut
+```
+
+## 똑똑한 함수 매개변수
+```js
+// 함수에 전달할 객체
+let options = {
+  title: "My menu",
+  items: ["Item1", "Item2"]
+};
+
+// 똑똑한 함수는 전달받은 객체를 분해해 변수에 즉시 할당함
+function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
+  // title, items – 객체 options에서 가져옴
+  // width, height – 기본값
+  alert( `${title} ${width} ${height}` ); // My Menu 200 100
+  alert( items ); // Item1, Item2
+}
+
+showMenu(options);
+
+
+// 중첩 객체와 콜론의 조합
+let options = {
+  title: "My menu",
+  items: ["Item1", "Item2"]
+};
+
+function showMenu({
+  title = "Untitled",
+  width: w = 100,  // width는 w에,
+  height: h = 200, // height는 h에,
+  items: [item1, item2] // items의 첫 번째 요소는 item1에, 두 번째 요소는 item2에 할당함
+}) {
+  alert( `${title} ${w} ${h}` ); // My Menu 100 200
+  alert( item1 ); // Item1
+  alert( item2 ); // Item2
+}
+
+showMenu(options);
+
+// 모든 인수에 기본 값을 할당해 주기
+showMenu({}); // 모든 인수에 기본값이 할당됩니다.
+
+showMenu(); // 에러가 발생할 수 있습니다.
+
+function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
+  alert( `${title} ${width} ${height}` );
+}
+
+showMenu(); // Menu 100 200
+```
+
+
+
 # 나머지 매개변수와 전개 구문

From 040d26e5553a6fb9b63ff493f254670ebfd1e1f9 Mon Sep 17 00:00:00 2001
From: Dang <wheodnjs2@naver.com>
Date: Thu, 18 Sep 2025 22:17:14 +0900
Subject: [PATCH 3/5] =?UTF-8?q?Update=20=EC=A1=B0=EB=8C=80=EC=9B=90.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\354\241\260\353\214\200\354\233\220.md"  | 110 ++++++++++++++++++
 1 file changed, 110 insertions(+)

diff --git "a/Part2-9\355\214\200/4\354\243\274\354\260\250-1/\354\241\260\353\214\200\354\233\220.md" "b/Part2-9\355\214\200/4\354\243\274\354\260\250-1/\354\241\260\353\214\200\354\233\220.md"
index d6ecb2c..38f994c 100644
--- "a/Part2-9\355\214\200/4\354\243\274\354\260\250-1/\354\241\260\353\214\200\354\233\220.md"
+++ "b/Part2-9\355\214\200/4\354\243\274\354\260\250-1/\354\241\260\353\214\200\354\233\220.md"
@@ -210,3 +210,113 @@ showMenu(); // Menu 100 200
 
 
 # 나머지 매개변수와 전개 구문
+
+## 나머지 매개변수 ...
+
+```js
+function sumAll(...args) { // args는 배열의 이름입니다.
+  let sum = 0;
+
+  for (let arg of args) sum += arg;
+
+  return sum;
+}
+
+alert( sumAll(1) ); // 1
+alert( sumAll(1, 2) ); // 3
+alert( sumAll(1, 2, 3) ); // 6
+
+// 매개변수 배열로 모으기
+function showName(firstName, lastName, ...titles) {
+  alert( firstName + ' ' + lastName ); // Bora Lee
+
+  // 나머지 인수들은 배열 titles의 요소가 됩니다.
+  // titles = ["Software Engineer", "Researcher"]
+  alert( titles[0] ); // Software Engineer
+  alert( titles[1] ); // Researcher
+  alert( titles.length ); // 2
+}
+
+showName("Bora", "Lee", "Software Engineer", "Researcher");
+```
+
+
+## arguments 객체
+```js
+function showName() {
+  alert( arguments.length );
+  alert( arguments[0] );
+  alert( arguments[1] );
+
+  // arguments는 이터러블 객체이기 때문에
+  // for(let arg of arguments) alert(arg); 를 사용해 인수를 펼칠 수 있습니다.
+}
+
+// 2, Bora, Lee가 출력됨
+showName("Bora", "Lee");
+
+// 1, Bora, undefined가 출력됨(두 번째 인수는 없음)
+showName("Bora");
+```
+
+## 스프레드 문법
+```js
+let arr = [3, 5, 1];
+
+alert( Math.max(...arr) ); // 5 (전개 구문이 배열을 인수 목록으로 바꿔주었습니다.)
+
+// 여러개도 가
+let arr1 = [1, -2, 3, 4];
+let arr2 = [8, 3, -8, 1];
+
+alert( Math.max(...arr1, ...arr2) ); // 8
+
+// 합치기도 가능
+let arr = [3, 5, 1];
+let arr2 = [8, 9, 15];
+
+let merged = [0, ...arr, 2, ...arr2];
+
+alert(merged); // 0,3,5,1,2,8,9,15 (0, arr, 2, arr2 순서로 합쳐집니다.)
+
+// 문자열 분해
+let str = "Hello";
+
+alert( [...str] ); // H,e,l,l,o
+```
+
+
+## 배열과 객체의 복사본 만들기
+```js
+// 배열 복사
+let arr = [1, 2, 3];
+let arrCopy = [...arr]; // 배열을 펼쳐서 각 요소를 분리후, 매개변수 목록으로 만든 다음에
+                        // 매개변수 목록을 새로운 배열에 할당함
+
+// 배열 복사본의 요소가 기존 배열 요소와 진짜 같을까요?
+alert(JSON.stringify(arr) === JSON.stringify(arrCopy)); // true
+
+// 두 배열은 같을까요?
+alert(arr === arrCopy); // false (참조가 다름)
+
+// 참조가 다르므로 기존 배열을 수정해도 복사본은 영향을 받지 않습니다.
+arr.push(4);
+alert(arr); // 1, 2, 3, 4
+alert(arrCopy); // 1, 2, 3
+
+// 객체 복사
+let obj = { a: 1, b: 2, c: 3 };
+let objCopy = { ...obj }; // 객체를 펼쳐서 각 요소를 분리후, 매개변수 목록으로 만든 다음에
+                          // 매개변수 목록을 새로운 객체에 할당함
+
+// 객체 복사본의 프로퍼티들이 기존 객체의 프로퍼티들과 진짜 같을까요?
+alert(JSON.stringify(obj) === JSON.stringify(objCopy)); // true
+
+// 두 객체는 같을까요?
+alert(obj === objCopy); // false (참조가 다름)
+
+// 참조가 다르므로 기존 객체를 수정해도 복사본은 영향을 받지 않습니다.
+obj.d = 4;
+alert(JSON.stringify(obj)); // {"a":1,"b":2,"c":3,"d":4}
+alert(JSON.stringify(objCopy)); // {"a":1,"b":2,"c":3}
+```

From 86252fe153734abaafadd4a39ca90391ac3c8462 Mon Sep 17 00:00:00 2001
From: Dang <wheodnjs2@naver.com>
Date: Thu, 25 Sep 2025 18:22:20 +0900
Subject: [PATCH 4/5] =?UTF-8?q?Create=20=EC=A1=B0=EB=8C=80=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\354\241\260\353\214\200\354\233\220"                        | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 "Part2-9\355\214\200/4\354\243\274\354\260\250-2/\354\241\260\353\214\200\354\233\220"

diff --git "a/Part2-9\355\214\200/4\354\243\274\354\260\250-2/\354\241\260\353\214\200\354\233\220" "b/Part2-9\355\214\200/4\354\243\274\354\260\250-2/\354\241\260\353\214\200\354\233\220"
new file mode 100644
index 0000000..2ad48d6
--- /dev/null
+++ "b/Part2-9\355\214\200/4\354\243\274\354\260\250-2/\354\241\260\353\214\200\354\233\220"
@@ -0,0 +1 @@
+# 메서드와 this

From a8f01a35c8997986a482025617b6a2ea8f4237ae Mon Sep 17 00:00:00 2001
From: Dang <wheodnjs2@naver.com>
Date: Thu, 25 Sep 2025 19:09:47 +0900
Subject: [PATCH 5/5] =?UTF-8?q?Update=20and=20rename=20=EC=A1=B0=EB=8C=80?=
 =?UTF-8?q?=EC=9B=90=20to=20=EC=A1=B0=EB=8C=80=EC=9B=90.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\354\241\260\353\214\200\354\233\220"     |   1 -
 .../\354\241\260\353\214\200\354\233\220.md"  | 140 ++++++++++++++++++
 2 files changed, 140 insertions(+), 1 deletion(-)
 delete mode 100644 "Part2-9\355\214\200/4\354\243\274\354\260\250-2/\354\241\260\353\214\200\354\233\220"
 create mode 100644 "Part2-9\355\214\200/4\354\243\274\354\260\250-2/\354\241\260\353\214\200\354\233\220.md"

diff --git "a/Part2-9\355\214\200/4\354\243\274\354\260\250-2/\354\241\260\353\214\200\354\233\220" "b/Part2-9\355\214\200/4\354\243\274\354\260\250-2/\354\241\260\353\214\200\354\233\220"
deleted file mode 100644
index 2ad48d6..0000000
--- "a/Part2-9\355\214\200/4\354\243\274\354\260\250-2/\354\241\260\353\214\200\354\233\220"
+++ /dev/null
@@ -1 +0,0 @@
-# 메서드와 this
diff --git "a/Part2-9\355\214\200/4\354\243\274\354\260\250-2/\354\241\260\353\214\200\354\233\220.md" "b/Part2-9\355\214\200/4\354\243\274\354\260\250-2/\354\241\260\353\214\200\354\233\220.md"
new file mode 100644
index 0000000..74c52a1
--- /dev/null
+++ "b/Part2-9\355\214\200/4\354\243\274\354\260\250-2/\354\241\260\353\214\200\354\233\220.md"
@@ -0,0 +1,140 @@
+# 메서드와 this
+
+## 메서드 만들기
+객체 프로퍼티에 할당된 함수를 메서드(method) 라고 한다.
+
+```js
+let user = {
+  name: "John",
+  age: 30
+};
+
+user.sayHi = function() {
+  alert("안녕하세요!");
+};
+
+user.sayHi(); // 안녕하세요!
+
+
+// 함수 선언
+function sayHi() {
+  alert("안녕하세요!");
+};
+
+// 선언된 함수를 메서드로 등록
+user.sayHi = sayHi;
+```
+
+## 메서드 단축 구문
+```js
+// 아래 두 객체는 동일하게 동작합니다.
+
+user = {
+  sayHi: function() {
+    alert("Hello");
+  }
+};
+
+// 단축 구문을 사용하니 더 깔끔해 보이네요.
+user = {
+  sayHi() { // "sayHi: function()"과 동일합니다.
+    alert("Hello");
+  }
+};
+```
+
+## 메서드와 this
+```js
+let user = {
+  name: "John",
+  age: 30,
+
+  sayHi() {
+    // 'this'는 '현재 객체'를 나타냅니다.
+    alert(this.name);
+  }
+};
+
+user.sayHi(); // John
+
+
+// this 대신 user를 사용할 수도 있지만
+// 이런식으로 작업 될 경우 원치않는 방향으로
+// 코드가 흘러갈 수 있다.
+let user = {
+  name: "John",
+  age: 30,
+
+  sayHi() {
+    alert( user.name ); // Error: Cannot read property 'name' of null
+  }
+
+};
+
+let admin = user;
+user = null; // user를 null로 덮어씁니다.
+
+admin.sayHi(); // sayHi()가 엉뚱한 객체를 참고하면서 에러가 발생했습니다.
+```
+
+## 자유로운 this
+js에서 this는 런타임에 따라 결정됩니다.
+메서드가 어디서 정의되었는지에 상관 없이
+this는 (.)점 앞의 객체가 무엇인가에 따라 자유롭게 결정됩니다.
+
+```js
+let user = { name: "John" };
+let admin = { name: "Admin" };
+
+function sayHi() {
+  alert( this.name );
+}
+
+// 별개의 객체에서 동일한 함수를 사용함
+user.f = sayHi;
+admin.f = sayHi;
+
+// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에
+// this 값이 달라짐
+user.f(); // John  (this == user)
+admin.f(); // Admin  (this == admin)
+
+admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)
+```
+
+## 객체 없이 호출하기
+```jsx
+function sayHi() {
+  alert(this);
+}
+
+// 엄격모드에서는 undefined
+// 엄격모드 아닐 때는 window라는 전역 객체를 참조
+sayHi(); 
+```
+
+## this가 없는 화살표 함수
+화살표 함수는 일반 함수와는 달리 ‘고유한’ this를 가지지 않습니다. 화살표 함수에서 this를 참조하면, 화살표 함수가 아닌 ‘평범한’ 외부 함수에서 this 값을 가져옵니다.
+별개의 this가 만들어지는 건 원하지 않고, 외부 컨텍스트에 있는 this를 이용하고 싶은 경우 화살표 함수가 유용합니다.
+```js
+let user = {
+  firstName: "보라",
+  sayHi() {
+    let arrow = () => alert(this.firstName);
+    arrow();
+  }
+};
+
+user.sayHi(); // 보라
+```
+
+## 정리
+
+- 일반 함수: 호출한 주체에 따라 this 달라짐.
+- 메서드: 메서드를 소유한 객체.
+- 생성자: 새 인스턴스.
+- 화살표 함수: 외부 스코프의 this.
+
+
+
+