From 34f9aec008bc4068115ab5d9bf9e3babb28bcc1c Mon Sep 17 00:00:00 2001 From: syoon392 Date: Sun, 21 Sep 2025 22:53:26 +0900 Subject: [PATCH] =?UTF-8?q?Create=20=EA=B9=80=EC=83=81=EC=9C=A4.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\352\271\200\354\203\201\354\234\244.md" | 134 ++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 "Part2-9\355\214\200/4\354\243\274\354\260\250-1/\352\271\200\354\203\201\354\234\244.md" diff --git "a/Part2-9\355\214\200/4\354\243\274\354\260\250-1/\352\271\200\354\203\201\354\234\244.md" "b/Part2-9\355\214\200/4\354\243\274\354\260\250-1/\352\271\200\354\203\201\354\234\244.md" new file mode 100644 index 0000000..2a731e7 --- /dev/null +++ "b/Part2-9\355\214\200/4\354\243\274\354\260\250-1/\352\271\200\354\203\201\354\234\244.md" @@ -0,0 +1,134 @@ +##구조분해할당 이란? + +구조분해할당은 배열이나 객체 안에 들어 있는 값을 꺼낼 때 사용하는 문법입니다 +-배열의 경우 순서를 기준으로 변수에 값을 차례대로 넣을 수 있고 필요한 값만 선택하거나 값이 없을 때는 기본값을 줄 수도 있습니다 + +-객체의 경우 키 이름을 기준으로 값을 꺼낼 수 있습니다 변수 이름을 새로 지정하거나 기본값을 설정할 수도 있고 필요한 속성만 골라서 꺼낼 수도 있습니다. + +-함수 인자에서 구조분해할당을 사용하면 전달받은 객체에서 필요한 속성만 꺼내서 바로 사용할 수 있기 때문에 코드가 훨씬 간결해집니 +-즉 구조분해할당은 "배열은 순서대로 객체는 키 이름을 기준으로 값을 꺼내어 변수에 담는 방법”이라고 이해하면 됩니다 + +##예시) + +1. 배열 구조분해할당 +const arr = [1, 2, 3]; + +// 일반적인 할당 +const a = arr[0]; +const b = arr[1]; + +// 구조분해할당 +const [x, y] = arr; +console.log(x, y); // 1 2 + + +##필요 없는 값은 건너뛸 수도 있습니다 + +const [first, , third] = [10, 20, 30]; +console.log(first, third); // 10 30 +================================== + +##기본값도 줄 수 있습니다 + +const [a = 1, b = 2] = [100]; +console.log(a, b); // 100 2 +================================== + +2. 객체 구조분해할당 +객체의 키(key) 이름을 기준으로 값을 꺼낼 수 있습니다 +const user = { name: "Tom", age: 25 }; + +// 일반 할당 +const name1 = user.name; +const age1 = user.age; + +// 구조분해할당 +const { name, age } = user; +console.log(name, age); // "Tom" 25 + + +##새로운 변수 이름을 지정할 수도 있음 + +const { name: userName, age: userAge } = user; +console.log(userName, userAge); // "Tom" 25 +================================= + +##기본값도 설정 가능 + +const { job = "student" } = user; +console.log(job); // "student" +================================= + +3. 함수 매개변수에서 활용 + +함수 인자에 자주 쓰입니다 + +function printUser({ name, age }) { + console.log(`이름: ${name}, 나이: ${age}`); +} + +const user = { name: "Anna", age: 22 }; +printUser(user); // 이름: Anna, 나이: 22 + +##나머지 매개변수(Rest Parameter)와 전개구문(Spread Syntax) + +1. 나머지 매개변수 (Rest Parameter) 란? + +-함수 정의에서 사용됨 +-매개변수 이름 앞에 ...을 붙이면, 전달된 인자 중 남은 것들을 배열로 모아서 받음 +-함수 호출 시 들어오는 “나머지” 인자들을 한 번에 처리할 수 있게 해줌 + +-특징: +함수 선언에서만 사용 가능 +항상 마지막 매개변수에만 올 수 있음 +결과는 배열 형태 + +2. 전개 구문 (Spread Syntax) +-배열이나 객체 앞에서 사용됨 +-가지고 있는 요소나 속성을 풀어서 다른 배열, 객체, 함수 호출에 전달할 수 있음 + +-특징: +배열 → 개별 요소로 전개 +객체 → 속성을 펼쳐서 다른 객체에 합침 +함수 호출 시 → 배열 요소를 하나하나 인자로 전달 + +##예시) + +나머지 매개변수 (Rest Parameter) + +function sum(a, b, ...rest) { + console.log(a); // 첫 번째 인자 + console.log(b); // 두 번째 인자 + console.log(rest); // 나머지 인자들이 배열로 들어옴 +} + +sum(1, 2, 3, 4, 5); +// a = 1 +// b = 2 +// rest = [3, 4, 5] +============================== + +전개 구문 (Spread Syntax) + +1) 배열 전개 +const arr1 = [1, 2, 3]; +const arr2 = [4, 5, ...arr1]; + +console.log(arr2); +// [4, 5, 1, 2, 3] + +2) 함수 호출에서 전개 +function add(x, y, z) { + return x + y + z; +} + +const numbers = [1, 2, 3]; +console.log(add(...numbers)); +// 6 + +3) 객체 전개 +const user = { name: "Kim", age: 25 }; +const newUser = { ...user, job: "Developer" }; + +console.log(newUser); +// { name: "Kim", age: 25, job: "Developer" }