[프론트엔드]_JavaScript(es6)_6.Array_APi 연습

공부 자료 : 드림코딩 by 엘리

 

개발 환경 : visual studio code

언어 : js

 

자료구조 : Array 연습

// Q1. make a string out of an array

{

    const fruits = ['apple', 'banana', 'orange'];

    //join 사용

    const result = fruits.join("")

    console.log(result);

  }

 

 

  // Q2. make an array out of a string

  {

    const fruits = '🍎, 🥝, 🍌, 🍒';

    //    split(separator: string | RegExp, limit?: number): string[];

    const result = fruits.split(',',2);

    //split은 구분자를 전달해줘야한다.

    console.log(result);

  }

 

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

  {

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

    //reverse 사용

    const result = array.reverse();

    console.log(result);

  }

 

  // Q4. make new array without the first two elements

  {

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

    // 배열을 손상시키지 않고

    // splice 배열자체에서 삭제함

    const result = array.slice(2,5);

    // 여기서 중요한 것은 마지막 index는 미만 의 개념이다. 5일경우 index 4까지 복사한다는 뜻

    console.log(result)

    console.log(array)

  }

 

  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

  {

      //    find<S extends T>(predicate: (this: void, value: T, index: number, obj: T[]) => value is S, thisArg?: any): S | undefined;

    //콜백함수를 만들어서 전달해야한다.

      const result = students.find(function(student){

        return student.score === 90; // 90이면 true 를 리턴

      }); // 배열에 있는 모든 요소가 하나하나씩 호출이 되는데 리턴을 true를 하게 되면 멈추게 된다.

      console.log(result);

     // const result = students.find((student) => students.score ===90);

  }

 

  // Q6. make an array of enrolled students

  {

      //filter 도 콜백함수를 받아야한다.

      const result = students.filter((student)=> student.enrolled ===true);

    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

  {

      //some 과 every 중선택 하나라도 있으니 some 선택

      const result = students.some((student) => student.score <= 50);

      console.log(result)

  }

 

  // Q9. compute students' average score

  {

      console.clear();

      // 계산은 reduce

      //    reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;

     // 콜백함수에서 리턴되는 값은 누적된 값을 리턴한다.

      const result = students.reduce((prev,curr) => {

          console.log('---')

        console.log(prev);

        console.log(curr);

        return prev + curr.score;

      },0);

      const avg = result /students.length;

      // const result = students.reduce((prev,curr) =>prev + curr.score,0 );

      console.log(avg);

      //curr 은 하나하나씩전달이 되고, prev에 순차적으로 전달

      //reduce는 시작점부터 값을 누적해서 저장한값을 다시 전달해서 더한다.

     

  }

 

  // 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();

        console.log(result);

       

  }

 

 

연습 문제 출처 : 

https://www.youtube.com/watch?v=3CUjtKJ7PJg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=9