Javascript - array(Quiz)

드림 코딩 유튜브 채널의 문제를 혼자 풀어보고 영상의 해설과 비교해보았습니다.

 

◆ 나의 풀이

// Q1. make a string out of an array
{
    const fruits = ['apple', 'banana', 'orange'];
    const fruit = fruits.join(', ');
    console.log(fruit);
  }
  
  // Q2. make an array out of a string
  {
    const fruits = '🍎, 🥝, 🍌, 🍒';
    const answer = fruits.split(',');
    console.log(answer);
  }
  
  // Q3. make this array look like this: [5, 4, 3, 2, 1]
  {
    const array = [1, 2, 3, 4, 5];
    const answer = array.reverse();
    console.log(answer);
  }
  
  // 내장함수(api) 확인하기
  // Q4. make new array without the first two elements
  {
    const array = [1, 2, 3, 4, 5];
    const answer = [];
    //#1 for문 사용
    for (let i = 0; i < array.length; i++) {
        if (array[i] > 2) {
            answer.push(array[i]);
        }
    }
    //#2 for of문 사용
    for (num of array) {
        if (num > 2) {
            answer.push(num);
        }
    }

    console.log(answer);
}
  
  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),
  ];
  
  // for 문 그만 쓰고 싶어...
  // Q5. find a student with the score 90
  {
      
    for(let i = 0; i < students.length; i++){
        if (students[i].score == 90) {
            console.log(students[i].name);
        }
    }
      
  }
  
  // Q6. make an array of enrolled students
  {
    for(let i = 0; i < students.length; i++){
        if (students[i].enrolled == true) {
            console.log(students[i].name);
        }
    } 
  }
  
  // Q7. make an array containing only the students' scores
  // result should be: [45, 80, 90, 66, 88]
  {
    const answer = [];
    for(let i = 0; i < students.length; i++){
        answer.push(students[i].score);
        }
    console.log(answer);
  }
  
  // Q8. check if there is a student with the score lower than 50
  {
    const answer = [];
    for(member of students) {
        if (member.score < 50) {
            console.log(member.name);
        }
    }
  }
  
  // Q9. compute students' average score
  {
      const sum = 0;
      const answer = [];
      for(member of students) {
          answer.push(member.score);
      }
      
      console.log(answer.reduce((a,b) => a+b, 0) / answer.length);

  }
  
  // 띄어쓰기 어캐하누
  // Q10. make a string containing all the scores
  // result should be: '45, 80, 90, 66, 88'
  {
      const answer = [];
      for(member of students) {
          answer.push(member.score);
      }
      console.log(answer.toString());
      answer.sort();
      console.log(answer);
  }
  
  // Bonus! do Q10 sorted in ascending order
  // result should be: '45, 66, 80, 88, 90'
  {
  }

 ◆ Ellie's code

// Q1. make a string out of an array
{
  const fruits = ['apple', 'banana', 'orange'];
  const result = fruits.join(', ');
  console.log(result);
}

// Q2. make an array out of a string
{
  const fruits = '🍎, 🥝, 🍌, 🍒';
  const result = fruits.split(',');
  console.log(result);
}

// Q3. make this array look like this: [5, 4, 3, 2, 1]
{
  const array = [1, 2, 3, 4, 5];
  const result = array.reverse();
  console.log(result); //[5,4,3,2,1] 출력
  console.log(array); //[5,4,3,2,1] 출력
} 

// Q4. make new array without the first two elements
{
  const array = [1, 2, 3, 4, 5];
  /*
  const result = array.splice(0,2);
  console.log(result); // [1,2] 출력
  console.log(array);  // [3,4,5] 출력
  */
  const result = array.slice(2);
  console.log(result); // [3,4,5] 출력
  console.log(array);  // [1,2,3,4,5] 출력
}

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
{
  const result = students.find((student) => student.score == 90);
  console.log(result);
}

// Q6. make an array of enrolled students
{
  const result = students.filter((student) => student.enrolled);
  console.log(result);
}

// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
{
  const result = students.map((student) => student.score);
  console.log(result); 
}

// Q8. check if there is a student with the score lower than 50
{
  /*
  const result = students.find((student) => student.score < 50);
  result? console.log(true): console.log(false)
  */
  console.clear();
  const result = students.some((student) => student.score < 50);
  console.log(result);

  // every를 이용해서도 만들수는 있다 (모두 50이상이다 => False => not(!)을 이용해 뒤집어 준다!)
  const result2 = !students.every((student) => student.score >= 50);
  console.log(result2);
}
// reduce는 배열의 값을 누적
// Q9. compute students' average score
{
  //  curr은 배열의 요소가 순차적으로 들어가고 prev는 처음에는 첫 요소가 들어가고 이후부터는 return하는 값들이 순차적으로 prev로 들어가게된다!
  const result = students.reduce((prev, curr) => prev + curr.score, 0);
  console.log(result / students.length);
}

// Q10. make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
{
  const result = students
  .map((student) => student.score)
  .filter((score) => score >= 50)
  .join(', ');
  console.log(result);
}

// Bonus! do Q10 sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
{
  const result = students.map((student) => student.score)
  .sort((a,b) => a - b).join();
//.sort((a,b) => b - a) : 내림차순 
  console.log(result);
}

-. Q1 : Array의 API인 join을 이용해 쉽게 풀 수 있었습니다.

 → join(String) : Array의 각 요소를 구분자(String)로 합쳐줍니다.

 구분자가 없다면 ','로 합쳐줍니다.

 

-. Q2 : Python에서 많이 사용해 보았던 split()을 써보니 쉽게 풀렸습니다.

 →

split

(String, Number(선택)) : 문자열(String)에서 구분자(String)를 기준으로 나누어 Array로 만든다.

 구분자가 없다면 전체를 한 번에 리스트의 한 요소로 만듭니다.

 Number도 넣어준다면 Array를 만든 후 Number만큼의 개수만 표현해 줍니다.

 

-. Q3 : reverse()를 이용해 쉽게 풀 수 있었습니다.

 주의할 점으로는 const result = array.reverse()를 해주면 원래 array 또한 revers()가 됩니다.

 

-. Q4 : 무식하게 for문을 이용하여 풀어버렸습니다 ㅠㅠ 

 주의할 점으로는 splice(시작 인덱스, 삭제할 갯수)를 만약 사용하게 되면 원래 array가 삭제되어 훼손(?)이 됩니다.

 이것을 막기 위해 slice(시작 인덱스,

끝 인덱스 + 1

)를 사용해 주어야 합니다. slice를 사용하면 원래 array는 훼손되지 않습니다! 자세한 코드는 ellie 선생님의 코드를 참고해 주세요!

 

-. Q5 : 이번에도 역시 무식하게 for문으로 풀어버렸습니다...

 ellie 선생님은 find API를 이용해 주었는데요, find는 배열안에서 콜백 함수를 만족하는 첫 번째 요소를 만나면 그 값을 return해 줍니다!

 

-. Q6 : for와 array의 push api를 사용하여 풀었습니다.

 filter API를 이용해 간단하게 풀 수 있습니다. filter는 배열안에서 콜백 함수를 만족하는 요소들을 새로운 array로 묶어 나타내 줍니다.

+) 오늘 처음 알게 된 것 : 위의 해설 코드에서 콜백 함수(화살표 함수)가 ((student) => student.enrolled)인데요, 여기서 화살표 우측에 저렇게 value 만 있다면 true인지를 확인하는 것이네요!

 

-. Q7 : 

 map API를 이용하여 간단하게 풀 수 있습니다. map은 배열의 요소들에 콜백 함수를 적용하여 return 된 값들은 array로 만드는 것입니다! 즉 배열 안의 요소들을 원하는 방식으로 다른 데이터로 만들고 싶을 때 사용합니다.

아래 예제와 같이 콜백 함수에 여러 장난을 쳐놓으면 재밌는 결과가 얻어질 것 같습니다.

// 만약 위의 콜백함수에 2를 곱했다면
const result = students.map((student) => student.score * 2);
console.log(result); //[90, 160, 180, 132, 176]가 출력됩니다.

 

-. Q8 : 

 some API를 이용해 판별이 가능합니다! some은 배열의 요소들 중 콜백 함수를 만족하는 요소가 있다면 true를 return해 줍니다! some과 함께 알아두면 좋은 API로 every가 있습니다. every는 배열의 모든 요소가 콜백 함수를 만족하면 true를 return 해줍니다.

 

-. Q9 :

 reduce API를 이용해 풀이가 가능합니다. 즉, reduce는 우리가 원하는 시작점부터 모든 배열을 돌면서 어떠한 값을 누적할 때 사용합니다! 아래 코드를 보며 조금 더 정리해보겠습니다.

// prev는 처음에는 첫 요소가 들어가고 이후부터는 return하는 값들이 순차적으로 prev로 들어가게된다!
// initial 값으로
// curr은 처음에는 두 번째 요소가 들어가고(prev가 첫번째 요소를 사용해서?) 배열의 마지막 요소까지 순차적으로 들어갑니다 
// 알파벳이라는 리스트를 예를 들어 설명 드리겠습니다.

const alphabet = ['a', 'b', 'c', 'd', 'e'];
const result = alphabet.reduce((prev, curr) => {
    console.log('-----------');
    console.log(prev);
    console.log(curr);
    return '0000';
},0); //initial 값 => prev가 'a'가 아닌 0부터 시작한다! curr가 a부터 시작


//결과 값은 아래와 같이 나타납니다
-----------
0              // prev(첫번째 요소이나 initail을 0으로 설정하여 0이 나옴)
a              // curr(첫번째 요소)
-----------
0000           // prev (0000을 return 받았기 때문)
b              // curr (두번째 요소)
-----------
0000           // prev (0000을 return 받았기 때문)
c              // curr (세번째 요소) 
-----------
0000           // prev (0000을 return 받았기 때문)
d              // curr (네번째 요소)
-----------
0000           // prev (0000을 return 받았기 때문)
e              // curr (배열의 마지막 요소)

 

-. Q10 : 

API들을 여러 개 사용이 가능합니다!