🚩 javascript

고차함수

📝 설명

• 다른 함수를 인자로 받거나 반환(콜백), 사이드이펙트x
• 배열을 사용하는 함수를 의미.
• 고차함수 종류
  • forEach / find / findIndex / some / every / filter / map / flatMap / sort / reduce

✒️ 코드 작성

입력

예제1

js

const fruits = ["🍇", "🍎", "🍋", "🍒"];

/* for(let i=0; i < fruits.length; i++){
    console.log(fruits[i])
  }*/

//배열.forEach(function(배열의아이템,아이템의순서,배열){ })
fruits.forEach(function (value, index, array) {
  console.log(value);
  console.log(index);
  console.log(array);
});
//실행구 한개만 있을때 생략
fruits.forEach((vv) => console.log("아이템만 필요해 ", vv));

// 조건에 맞는(콜백함수) 아이템을 찾을 때
const item1 = { name: "🍔", price: 2500 };
const item2 = { name: "🍩", price: 1000 };
const item3 = { name: "🍰", price: 4000 };
const products = new Array(item2, item1, item3, item2);

//도넛을 찾아라!
/* let found = products.find(function(value){
    return value.name == '🍩'
  }) */
let found = products.find((value) => value.name == "🍩");
// {}중괄호 없이 한줄로 축약할때는 return 필요없음
console.log("도넛 찾음!!", found);

found = products.findIndex((value) => value.name == "🍩");
console.log("도넛의 인덱스값??", found);
// 배열.find(함수)  -제일 먼저 나오는 조건에 맞는 아이템을 반환
// 배열.findIndex(함수)  -제일 먼저 나오는 조건에 맞는 아이템의 인덱스를 반환

// 배열의 아이템들이 부분적을 조건(콜백함수)에 맞는지 확인
let result = products.some(function (aa) {
  return aa.name === "🍩";
});
console.log("도넛이 하나라도 있니?", result);
// 배열.some(함수)   -하나라도 있으면 true

// 배열의 아이템들이 전부 조건(콜백함수)에 맞는지 확인
result = products.every((bb) => bb.name === "🍩");
console.log("아이템의 name이  전부 도너츠니?", result);
// 배열.every(함수)   -배열의 특정 부분이 모두 같은지 확인

// 조건에 맞는 모든 아이템들을 새로운 배열로!
result = products.filter((item) => item.name === "🍩");
console.log("도너츠가 들어가있는 모든 아이템을 새로운 배열로", result);
// 배열.filter(함수)  -조건에 맞는 아이템을 새로운 배열로 만들어줌

예제2

js

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

//배열.map(함수)  -배열의 각 요소가 특정 논리(함수)에 의해 다른 요소로 지정(map)
let result = nums.map(function (item) {
  return item * 3;
});
console.log("map을 이용해봅시다! ", result);

result = nums.map(function (item) {
  //짝수인 경우만 2배로 맵핑
  if (item % 2 === 0) {
    return item * 2;
  } else {
    return item;
  }
});
console.log("조건문이 추가된 map ", result);

result = nums.map((item) => ["🍕", "🥤"]);
console.log("각각의 배열 아이템을 새로운 내용(배열)으로 ", result);

result = nums.flatMap((item) => ["🍕", "🥤"]);
console.log("flatMap으로 적용해봅시다!!", result);
//배열.flatMap(함수)  -중첩된 배열을 낱개로 만들어서 새로운 배열로

// 응용
result = ["rainy", "morning"].map((ttt) => ttt.split(""));
console.log("문자열 map이용", result);

result = ["rainy", "morning"].flatMap((ttt) => ttt.split(""));
console.log("문자열 flatMap 이용", result); //알파벳 하나씩 배열값으로
//문자열.split()   -문자열을 분할하는 매서드(배열로 담아서 리턴 )

// 배열.sort()
// 문자열 형태의 오름차순(1,2,3,4 ..../  a,b,c,d.... )으로 요소 정렬
// 기존 배열을 변경 (새로 만드는거 ❌)
const texts = ["zoo", "hi", "abc"];
texts.sort();
console.log("sort를 적용", texts); //알파벳 순서대로(오름차순)

const numbers = [10, 8, 5, 1, 17, 21];
numbers.sort();
console.log("numbers배열에 sort 적용", numbers);
//17일 5보다 먼저 나옴 ㅜㅜ

numbers.sort((a, b) => a - b);
console.log("(a, b) => a - b 이용해서 sort 적용", numbers);

// a - b : 순서대로 a, b를 넣고 위치를 이동시켜서 올림차순으로 만든다. 내부 알고리즘이 작동.
// < 0 오름차순(a - b),  > 0 내림차순 (b - a)

// reduce
result = [1, 2, 3, 4, 5].reduce((sum, value) => {
  sum += value;
  return sum;
}, 0); // sum의 초기값
console.log("reduce 해준 값은? : ", result);
// Array.reduce((합해진 값, 아이템) => {});

출력

• 이미지로 대체

예제1

예제2

🔗 참고 링크 & 도움이 되는 링크

• javascript 고차함수

---

지금까지 배운 배열 응용하기

📝 설명

• 4일에 작성 한 배열 응용 코드를 오늘 배운 고차함수로 변경

✒️ 코드 작성

입력

js

// 문제1) 배열 안의 특정 아이템을 교체해서 새로운 배열 만들기

// 주어진 배열 수정하지 않음
// ["🍇", "🍎", "🍋", "🍒", "🍎"]; - 사과를 바나나로 🍌

/*
function replace(aa, old, end) {
  const replaced = Array.from(aa);
  for (let i = 0; i < replaced.length; i++) {
    if (replaced[i] === old) {
      replaced[i] = end;
    }
  }
  return replaced;
}
*/
function replace(aa, old, end) {
  return aa.map((item) => {
    if (item === old) {
      return end;
    } else {
      return item;
    }
  });
}

const aa = ["🍇", "🍎", "🍋", "🍒", "🍎"];
const result = replace(aa, "🍎", "🍌");
console.log(result);

console.log();

// 문제2) 배열 안에 특정 아이템이 몇 개 있는지 알아오기
const bb = ["🥚", "🍗", "🥯", "🧀", "🥐", "🥟", "🍤", "🍗", "🍗"];

function count(bb, item) {
  return bb.filter((value) => value === item).length;
}

const result2 = count(bb, "🍗");
console.log(result2);
// console.log(count(bb, "🍗")); // 변수 지정하지 않고 사용 가능

/*
function count(bb, item) {
  let counter = 0;
  for (let i = 0; i < bb.length; i++) {
    if (bb[i] === item) {
      counter++;
    }
  }
  return counter;
}
*/

출력

• 이미지로 대체
  

🔗 참고 링크 & 도움이 되는 링크

• javascript 얕은 복사 vs 깊은 복사

---