[FE 45] _23.05.16 _ Day 25 (JS_고차함수)

---

거친 고차함수를 뚫고 가보자

---

자바스크립트 배열 고차함수

고차함수는 다른 함수를 인자로 받거나 함수를 반환하는 함수를 의미합니다.

자바스크립트는 일급 함수(First-class function)를 지원하므로 함수를 변수에 할당하고 인자로 전달하거나 반환할 수 있습니다.

이러한 특성을 활용하여 고차함수를 구현할 수 있습니다.

 

고차함수에는 여러 가지 종류가 있습니다. 다음은 일반적으로 사용되는 고차함수의 몇 가지 예시입니다:

1. `map()`: 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 새로운 배열로 반환합니다.

```javascript
const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(function(num) {
  return num * num;
});

console.log(squaredNumbers); // [1, 4, 9, 16, 25]
```

2. `filter()`: 주어진 함수의 반환 값이 참인 요소로 이루어진 새로운 배열을 반환합니다.

```javascript
const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(evenNumbers); // [2, 4]
```

3. `reduce()`: 배열의 요소를 왼쪽부터 오른쪽으로 순회하면서 주어진 함수를 적용하여 하나의 값으로 줄입니다.

```javascript
const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function(acc, num) {
  return acc + num;
}, 0);

console.log(sum); // 15
```

4. `forEach()`: 배열의 각 요소에 대해 주어진 함수를 호출합니다. 반환값이 없고, 단순히 순회하면서 함수를 실행합니다.

```javascript
const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(num) {
  console.log(num);
});
```

5. `find()`: 주어진 조건을 만족하는 첫 번째 요소를 반환합니다. 조건을 만족하는 요소를 찾으면 검색을 멈추고 해당 요소를 반환합니다.

```javascript
const numbers = [1, 2, 3, 4, 5];

const evenNumber = numbers.find(function(num) {
  return num % 2 === 0;
});

console.log(evenNumber); // 2
```

6. `some()`: 주어진 조건을 만족하는 요소가 배열에 하나 이상 존재하는지 여부를 확인합니다. 조건을 만족하는 요소를 찾으면 즉시 `true`를 반환하고, 없으면 `false`를 반환합니다.

```javascript
const numbers = [1, 2, 3, 4, 5];

const hasEvenNumber = numbers.some(function(num) {
  return num % 2 === 0;
});

console.log(hasEvenNumber); // true
```

이 외에도 많은 고차함수가 있으며, 함수형 프로그래밍 패러다임에서는 고차함수를 활용하여 코드를 간결하고 효율적으로 작성하는 것을 지향합니다.

---

고차함수에는 많은 종류가 있다. !

가장 많이 사용하는 함수는

1. map(): 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 새로운 배열로 반환합니다.
2. filter(): 주어진 함수의 반환 값이 참인 요소로 이루어진 새로운 배열을 반환합니다.
3. reduce(): 배열의 요소를 왼쪽부터 오른쪽으로 순회하면서 주어진 함수를 적용하여 하나의 값으로 줄입니다.
4. forEach(): 배열의 각 요소에 대해 주어진 함수를 호출합니다. 반환값이 없고, 단순히 순회하면서 함수를 실행합니다.
5. find(): 주어진 조건을 만족하는 첫 번째 요소를 반환합니다. 조건을 만족하는 요소를 찾으면 검색을 멈추고 해당 요소를 반환합니다.
6. some(): 주어진 조건을 만족하는 요소가 배열에 하나 이상 존재하는지 여부를 확인합니다. 조건을 만족하는 요소를 찾으면 즉시 true를 반환하고, 없으면 false를 반환합니다.

---

예제 코드

1. map()

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(function(num) {
  return num * num;
});

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

2. filter()

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(evenNumbers); // [2, 4]

3. reauce()

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function(acc, num) {
  return acc + num;
}, 0);

console.log(sum); // 15

4. forEach()

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(num) {
  console.log(num);
});

5. find()

const numbers = [1, 2, 3, 4, 5];

const evenNumber = numbers.find(function(num) {
  return num % 2 === 0;
});

console.log(evenNumber); // 2

6. some()

const numbers = [1, 2, 3, 4, 5];

const hasEvenNumber = numbers.some(function(num) {
  return num % 2 === 0;
});

console.log(hasEvenNumber); // true

---

복습! 잘모르겠는 것~!

깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)는 객체나 배열을 복사할 때 사용되는 개념입니다. 두 개념은 복사된 결과물이 원본과 어떻게 관련되는지에 따라 구분됩니다.

---

 

1. 얕은 복사(Shallow Copy):

• 얕은 복사는 원본 객체 또는 배열의 참조를 복사합니다. 복사된 객체는 원본과 동일한 참조를 가지며, 원본과 복사본이 서로 영향을 받을 수 있습니다.
• 객체의 얕은 복사는 Object.assign() 메서드나 전개 연산자 ...를 사용하여 수행할 수 있습니다.
• 배열의 얕은 복사는 Array.slice() 메서드나 전개 연산자 ...를 사용하여 수행할 수 있습니다.

예시 코드 

// 얕은 복사 예시

// 객체의 얕은 복사
const obj = { name: "John", age: 30 };
const shallowCopyObj = Object.assign({}, obj);
// 또는 const shallowCopyObj = { ...obj };

shallowCopyObj.name = "Jane";
console.log(obj);  // { name: "John", age: 30 }
console.log(shallowCopyObj);  // { name: "Jane", age: 30 }

// 배열의 얕은 복사
const arr = [1, 2, 3, 4, 5];
const shallowCopyArr = arr.slice();
// 또는 const shallowCopyArr = [...arr];

shallowCopyArr[0] = 10;
console.log(arr);  // [1, 2, 3, 4, 5]
console.log(shallowCopyArr);  // [10, 2, 3, 4, 5]

 

2. 깊은 복사(Deep Copy):

• 깊은 복사는 원본 객체나 배열의 값들을 재귀적으로 탐색하여 복사합니다. 복사된 객체는 원본과 완전히 분리되어 있으며, 복사본의 수정이 원본에 영향을 주지 않습니다.
• 자바스크립트에서 기본적으로 제공하는 깊은 복사 기능은 없으며, 외부 라이브러리나 직접 구현해야 합니다. JSON.stringify()와 JSON.parse()를 조합하여 깊은 복사를 할 수도 있습니다. 하지만 이 방법은 일부 데이터 타입(예: 함수)을 복사하지 못하고 무시하는 등의 제한이 있을 수 있습니다.

예시 코드

// 깊은 복사 예시

// 객체의 깊은 복사
const obj = { name: "John", age: 30 };
const deepCopyObj = JSON.parse(JSON.stringify(obj));

deepCopyObj.name = "Jane";
console.log(obj);  // { name: "John",