Array 메소드 연습

드림코딩의 자바스크립트 9. 유용한 10가지 배열 함수들. Array APIs 총정리 강의를 통해 Array 메소드를 연습한 과정을 기록해본다🤯 먼저 혼자 풀어보고, 영상 속 풀이와 비교해보는 식으로 공부했다.

• 이 글에서 사용한 메소드 종류
  toString join split sort reverse filter splice slice find findIndex map some reduce

Q1 ~ Q4

Q1. make a string out of an array

    const fruits = ['apple', 'banana', 'orange'];
    // #1
    console.log(fruits.toString());

    // #2
    const answer = fruits.join();
    console.log(answer);
    
    // "apple,banana,orange"

toString() VS join()

참고자료
array의 아이템을 string으로 바꾸는 방법으로 toString()과 join()을 사용했는데,

• 사실 toString()은 Array만의 메소드가 아니다. toString()은 객체에도 쓸 수 있고, value가 콤마(,)에 의해 분리된다.
• join()은 Array에 대해서만 쓸 수 있는 메소드이며, 기본적으로 콤마(,)에 의해 분리되지만 두번째 매개변수를 적어 seperator를 원하는 것으로 지정할 수 있다.

Q2. make an array out of a string

    const fruits = '🍎, 🥝, 🍌, 🍒';
    const answer = fruits.split(', ');
    console.log(answer);
    
    // ["🍎", "🥝", "🍌", "🍒"]

split()

string 값을 array로 만들 때 split() 메소드를 사용했다. split()의 2번째 매개변수 limit를 사용하면 다음과 같이 지정한 값만큼의 아이템만 배열로 만들 수 있다.

    const answer = fruits.split(', ', 2); 
    console.log(answer);

    // ["🍎", "🥝"]

Q3. make this array look like this: [5, 4, 3, 2, 1]

    // #1
    const array = [1, 2, 3, 4, 5];
    const answer = array.sort((a,b) => b-a);
    console.log(answer);
    // 원래 배열인 array의 순서도 바뀜

    // #2
    const answer = array.reverse();
    console.log(answer);
    // 원래 배열인 array의 순서도 바뀜
    
    // [5, 4, 3, 2, 1]

sort(), reverse()

둘 다 원래 배열인 array의 순서도 바꾼다.

• sort()로는 내림차순 정렬을 하여 요구조건을 만족했고,
• reverse()로는 순서를 뒤집어 요구조건을 만족했다.

Q4. make new array without the first two elements

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

    // #1
    const answer = array.filter(item => item>=3);
    console.log(answer, array);
    // (3) [3, 4, 5] (5) [1, 2, 3, 4, 5]
    // array는 변하지 않는다.
    
    // #2
    const answer = array.splice(2,3);
    console.log(answer, array);
    // (3) [3, 4, 5] (2) [1, 2]
    // array가 변형됨
    
    // #2-1
    const answer = array.splice(0,2);
    console.log(array, answer);
    // (3) [3, 4, 5] (2) [1, 2]
    // array가 변형됨
    
    // #3
    const answer = array.slice(2);
    console.log(answer, array); 
    // (3) [3, 4, 5] (5) [1, 2, 3, 4, 5]
    // array는 변하지 않는다.

filter(), splice(), slice()

• splice()는 array에 변형이 생기지만
• filter()와 slice()는 array는 변하지 않고 answer이라는 새로운 배열을 만들어 요구조건을 만족했다.

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. find a student with the score 90

    // #1
    const answer = students.find((student) => student.score === 90); 
    console.log(answer);
    
    // #2
    const index = students.findIndex((student) => student.score === 90);
    console.log(students[index]);   
    
    // Student {name: "C", age: 30, enrolled: true, score: 90}

find(), findIndex()

score가 90인 student를 찾기 위해

• 콜백함수의 조건을 만족하는 첫번째 요소의 값을 반환하는 find() 메소드를 쓸 수도 있고,
• findIndex()로 인덱스를 찾아서 그 인덱스로 배열 안의 특정 요소를 출력할 수도 있다.

이 문제에서는 첫번째 방법이 더 간편하다.

Q6. make an array of enrolled students

      const answer = students.filter((student) => student.enrolled === true);
      console.log(answer);
      
      // (3) [Student, Student, Student]

filter()

콜백함수가 진행하는 테스트를 통과하는 요소들만 모아서 새로운 배열로 반환하는 것이기 때문에, === true 는 생략할 수 있다.

Q7. make an array containing only the students' scores.

result should be: [45, 80, 90, 66, 88]

      const answer = students.map(student => student.score);
      console.log(answer);
      
      // [45, 80, 90, 66, 88]

map()

map() 메소드는 배열 안에 들어있는 모든 요소를 콜백함수를 통해 가공하여 그 리턴값으로 대체하는 것이다. 이 문제에서는 student의 score로 대체한 것이다.

Q8. check if there is a student with the score lower than 50

    const answer = students.some(
        student => student.score <50
    );
    console.log(answer);
    
    // true

some()

some() 메소드는 배열 검색의 일종으로, 배열 안의 요소 하나라도 (or) 콜백함수를 통과하는지 판단한다. 하나라도 통과하면 true를 반환한다.

Q9. compute students' average score

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

reduce()

콜백함수가 배열안의 모든 요소에 대해 호출되며 누적된 값을 리턴한다.

    const answer = students.reduce(function(prev,curr){
        console.log('--------------------');
        console.log(prev);
        console.log(curr); 
        //를 통해서 리턴된 값이 다음 순서의 prev가 된다는 걸 알 수 있다.
    });
--------------------
Student {name: "A", age: 29, enrolled: true, score: 45}
Student {name: "B", age: 28, enrolled: false, score: 80}
--------------------
undefined
Student {name: "C", age: 30, enrolled: true, score: 90}
--------------------
undefined
Student {name: "D", age: 40, enrolled: false, score: 66}
--------------------
undefined
Student {name: "E", age: 18, enrolled: true, score: 88}

Q10. make a string containing all the scores.

result should be: '45, 80, 90, 66, 88'

    // #1
    const answer = students.map(student=>student.score);
    console.log(10, answer.toString());

    // #2
    const answer = students
        .map(student=>student.score)
        .join();
    console.log(answer);
    
    // "45,80,90,66,88"

함수적 프로그래밍 : 여러 메소드를 함께 적기

#2 풀이와 같이 map()과 join()을 한번에 적는 것을 함수적 프로그래밍이라고 한다. 가독성이 높아져 #1 풀이보다 #2 풀이처럼 작성할 것이 권장된다.

Q11. do Q10 sorted in ascending order.

result should be: '45, 66, 80, 88, 90'

    // #1
    const answer = students.map(student=>student.score);
    answer.sort((a,b)=>a-b);
    console.log(answer.toString());
    
    // #2
    const answer = students
    .map(student=>student.score)
    .sort((a,b)=>a-b)
    .join();
    console.log(answer);

    // #3
    const answer = students
    .map(student=>student.score)
    .sort((a,b) => a-b)
    .toString();
    console.log(answer);
  }
  
  // "45,66,80,88,90"

sort()

콜백함수의 값이 음수냐, 양수냐, 0이냐에 따라 배열의 요소를 정렬한다.

• 또한, Q10과 마찬가지로 #2, #3과 같은 함수적 프로그래밍이 권장된다.