forEach method

배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드 forEach 메소드는 첫 번째 아규먼트로 콜백 함수를 전달받는데, 콜백 함수의 파라미터에는 각각 배열의 요소, index, 메소드를 호출한 배열이 전달됨. → 반환 값 X

→ 새로운 배열을 얻을 수 없다 ( undefined ) -

const numbers = [1, 2, 3];

numbers.forEach((element, index) => {
	console.log(element); // 1, 2, 3
	)
}
//----------------------------------------------------------------------------
const arr = [1, 2, 3, 4, 5];

const newArray = arr.forEach((number, index) => number + 1);

console.log(newArray); // undefiend

map method

배열 렌더링 메소드

itmes props에서 ui 태그 안에 map을 활용해 배열을 순회 하고 li 태그 안에 FoodListItem component를 불러와 itme을 item props으로 불러옴

→ 첫 번째 argument로 전달하는 콜백 함수가 매번 리턴하는 값들을 모아서 새로운 배열을 만듦

map method를 쓸 때 최상위 태그에다가 prop으로 지정해 줄 수 있다.

function FoodList({ items }) {
  return (
    <ui className="FoodList">
      {items.map((item, index) => (
        <li key={item.id}>
          <FoodListItem item={item} />
        </li>
      ))}
    </ui>
  );
}

replace, replaceAll method

ex ) 소문자 q → 대문자 Q, 소문자 a → 대문자 A로 바꿔줘야 할 때

특정 문자를 바꿔줄 때 사용한다.

const solution = str => {
  if ( str.includes('q') === false && str.includes('Q') === false ) {
    return -1;
  }
  const arr = str.replaceAll("q", "a"); // ( 찾을문자, 바꿀문자 ) -> 결과만 바꿔줌
  const arr1 = arr.replaceAll("Q", "A");
  return arr1;
}

solution("It works, I don't know why."); // -1
solution("Qre you sleeping? Yes thqt"); // 'Are you sleeping? Yes that'
// ------------------------------------------------------------------------
const str = '안녕하세요! 주원입니다.'

console.log(str.replace('주원입니다.', '김주원입니다.')); //'안녕하세요! 김주원입니다.'
console.log(str); // '안녕하세요! 주원입니다.'

const arr = '안녕하세요! 주원입니다. 주원입니다. 주원입니다.'; 

console.log(arr.replaceAll('주원입니다.', '개발자 주원')); // '안녕하세요! 개발자 주원 개발자 주원 개발자 주원'
console.log(arr); // '안녕하세요! 주원입니다. 주원입니다. 주원입니다.'

reduce method

reduce 메소드는 누적값을 계산할 때 활용하는 조금 독특한 메소드 입니다. reduce 메소드는 일반적으로 두 개의 파라미터를 활용하는데, 첫 번째는 반복동작할 콜백함수이다. 매번 실행되는 콜백함수의 리턴값이 다음에 동작할 콜백함수의 첫번째 파라미터로 전달되는데 결과적으로 마지막 콜백함수가 리턴하는 값이 reduce 메소드의 최종 리턴값이 된다. 이 때 reduce 메소드의 두 번째 파라미터로 전달한 초기값이 첫 번째로 실행될 콜백함수의 가장 첫 번째 파라미터로 전달 된다.

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

// reduce
const sumAll = numbers.reduce((accumulator, element, index, array) => {
  return accumulator + element;
}, 0); 

console.log(sumAll); // 10

sort method

배열 정렬 메소드