Java Script / 유용한 10가지 배열 함수들

문제 출처.
youtube. 드림코딩
(자바스크립트 9. 유용한 10가지 배열 함수들. Array APIs 총정리 | 프론트엔드 개발자 입문편)

Q1. 배열에서 문자열 만들기

{
  const fruits = ["apple", "banana", "orange"];
  const result = fruits.join(",");
  console.log(result);
}

• join은 배열을 문자열로 변환

Q2. 문자열로 배열 만들기

{
  const fruits = "🍎, 🥝, 🍌, 🍒";
  const result = fruits.split(",");
  console.log(result);
}

• split은 문자열을 배열로 변환.

Q3. 이 배열을 다음과 같이 만듭니다. [5, 4, 3, 2, 1]

{
  const array = [1, 2, 3, 4, 5];
  const result = array.reverse();
  console.log(result);
}

• reverse는 배열을 거꾸로 변환 (배열만 적용 가능)
• 만약 문자열을 적용하고 싶다면 .split("").reverse().join("")를 사용하여 문자열을 배열로 바꾸고 거꾸로 변환한 후 다시 문자열로 변환해서 사용

Q4. 처음 두 요소 없이 새 배열 만들기

{
  const array = [1, 2, 3, 4, 5];
  const result = array.slice(2, 5);
  console.log(result);
}

• .slice(2, 5)는 배열의 인덱스 2부터 인덱스 4까지의 요소를 추출한 새로운 배열 반환->[3,4,5]
• 첫 번째 매개변수는 추출을 시작할 인덱스이고 두 번째 매개변수는 추출을 종료할 인덱스
• 만약 인덱스2부터 마지막 인덱스까지 추출하고싶다면 메소드의 두번째 인덱스를 생략하면 마지막 인덱스까지 추출 함.

Q5~Q11

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student("A", 29, true, 45),
  new Student("B", 28, false, 80),
  new Student("C", 30, true, 90),
  new Student("D", 40, false, 66),
  new Student("E", 18, true, 88),
];

Q5. 점수가 90점인 학생 찾기

{
  const result = students.find((student) => student.score === 90);
  console.log(result);
}

• find: 주어진 배열에서 첫 번째로 조건을 만족하는 요소를 찾아서 반환합니다. (첫번째 조건만족->종료)
• 배열을 순차적으로 검색하다가 조건을 만족하는 요소를 찾으면 검색을 멈추고 해당 요소를 반환

Q6. 등록된 학생들의 배열을 만들기

{
  const result = students.filter((student) => student.enrolled);
  console.log(result);
}

• 배열을 순차적으로 검색하면서 조건을 만족하는 모든 요소를 찾아서 새로운 배열에 추가

Q7. 학생의 점수만 포함하는 배열 만들기
result should be: [45, 80, 90, 66, 88]

{
  const result = students.map((student) => student.score);
  console.log(result);
}

• map 메소드는 배열의 각 요소에 대해 주어진 콜백 함수를 호출
• 콜백 함수의 반환값으로 이루어진 새로운 배열을 생성
• 값을 두배로 리턴하고 싶으면 student.score * 2 라고 하면 2배값이 리턴 됨

Q8. 점수가 50점 미만인 학생이 있는지 확인

{
 const result = students.filter((student) => student.score < 50);
 console.log(result); -> 조건에 만족하는 학생이 리턴
 const result = students.some((student) => student.score < 50);
 console.log(result); //-> 학생들 중 50점 보다 낮은 점수가 있는지 -> true 리턴
}

Q9. 학생들의 평균 점수 계산

{
  const result = students.reduce((prev, curr) => {
    return prev + curr.score;
  }, 0);
  console.log(result / students.length);
}

• reduce 메소드는 배열의 각 요소에 대해 주어진 콜백 함수를 순차적으로 호출하여 하나의 값으로 축약
• 초기값으로 0이 주어졌으므로, 첫 번째 순회에서는 prev 값이 0
• 각 순회마다 prev에 curr.score를 더해주므로
• 모든 students 배열의 score 속성 값을 더한 총합이 반환

Q10. 모든 점수를 포함하는 문자열 만들기
result should be: '45, 80, 90, 66, 88'

{
  const result = students.map((student) => student.score).join();
  console.log(result);
}

• students 배열의 각 요소에서 score 속성만을 추출한 후, (map은 배열을 생성)
• 이를 문자열로 변환하여 쉼표로 구분한 결과를 출력 (join은 배열을 문자열로 변경)

보너스! 오름차순으로 정렬된 Q10 수행

// result should be: '45, 66, 80, 88, 90'
{
  const result = students
    .map((student) => student.score)
    .sort((a, b) => a - b)
    .join();
  console.log(result);
}

• students 배열에서 score 속성값을 추출한 후, map사용 배열로 추출
• 오름차순으로 정렬하고 -> sort((a, b)=> a - b) 내림차순은 b - a
• 정렬된 결과를 쉼표로 구분한 문자열로 변환하여 출력 ->join 사용