드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (9편)

강의 시작 전 Quiz

내 답안

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

    // Q2. make an array out of a string
    const fruits2 = '🍎, 🥝, 🍌, 🍒';
    let toArray = fruits2.split(', ');
    console.log(toArray);

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

    // Q4. make new array without the first two elements
    const array2 = [1, 2, 3, 4, 5];
    console.log(array2.slice(-3));

    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
    console.log(students.filter((student) => student.score >= 90));

    // Q6. make an array of enrolled students
    console.log(students.filter((student) => student.enrolled === true));

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

    // Q8. check if there is a student with the score lower than 50 (every, some)?
    console.log(scores.some((score) => score < 50));

    // Q9. compute students' average score
    const average = (scores.reduce((sum, currentValue) => {return sum + currentValue}, 0)) / scores.length;
    console.log(average);

    // Q10. make a string containing all the scores
    // result should be: '45, 80, 90, 66, 88'
    console.log(scores.join(', '));


    // Bonus! do Q10 sorted in ascending order
    // result should be: '45, 66, 80, 88, 90'
    console.log(scores.sort((a, b) => a - b));

 

 

강의 내용과 설명

    // Q1. make a string out of an array
    const fruits = ['apple', 'banana', 'orange'];
    let result = fruits.join();
    console.log(result); // 구분자를 넣지 않아도 default로 ,로 구분되어서 출력됨

    // Q2. make an array out of a string
    const fruits2 = '🍎, 🥝, 🍌, 🍒';
    let toArray = fruits2.split(', ');
    let toArray2 = fruits2.split(', ', 2); // 앞에서부터 몇개를 출력할건지 limit param을 지정할 수 있음
    console.log(toArray);
    console.log(toArray2);

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

    // Q4. make new array without the first two elements
    // splice를 사용하게 되면 기존의 배열을 변형하기 때문에 적합하지 않음
    // slice는 배열의 원하는 부분만 잘라서 return함, 기존 배열을 변형하지 않음
    const array2 = [1, 2, 3, 4, 5];
    console.log(array2.slice(-3)); // array2.slice(2, 5); endIndex의 값은 제외되서 잘려서 그 다음 index 값으로 입력해야 함

    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)
    // find 함수로 콜백함수를 호출하면, true가 되는 값을 리턴하고 종료된다.
    const q5 = students.find((student) => student.score === 90);
    console.log(q5);

    // Q6. make an array of enrolled students (filter)
    // 콜백 함수에 true로 해당되는 값들을 배열로 만들어서 return
    console.log(students.filter((student) => student.enrolled));

    // Q7. make an array containing only the students' scores (map)
    // result should be: [45, 80, 90, 66, 88]
    // map : 콜백 함수 조건에 맞게 배열의 값들을 맵핑해서 return
    // 콜백 함수의 인자는 이해하기 쉽게 작성하는 것이 좋음
    const scores = students.map((student) => student.score);
    console.log(scores);

    // Q8. check if there is a student with the score lower than 50 (every, some)?
    // some : 배열의 요소 중에서 콜백 함수의 조건에 true가 되는게 있는지 없는지 알려주는 메소드
    console.clear();
    console.log(scores.some((score) => score < 50));

    // every : 배열의 모든 요소들이 콜백 함수 조건에 true가 되어야지 true가 리턴됨
    const q8 = !scores.every((score) => score >= 50);
    console.log(q8);

    // 배열 중에서 어떤 것 하나라도 만족하는지 검사해야 하는 것이라면 some 사용,
    // 모든 요소가 조건에 만족해야 하는 경우에는 every를 사용한다.

    // Q9. compute students' average score (reduce)
    // reduce : 원하는 초기값에서 누적하면서 값을 출력하고 싶을 때 사용
    const sum = scores.reduce((prev, curr) => prev + curr.score, 0); // prev의 초기값을 0으로 설정
    console.log(sum);
    console.log(sum / students.length); // 평균값

    // Q10. make a string containing all the scores
    // result should be: '45, 80, 90, 66, 88'
    const q10 = students
    .map((student) => student.score)
    .join(', ');
    console.log(q10);
    
    
    // 아래와 같은 방식으로 APIs을 묶어서 사용할 수도 있다. (함수형 프로그래밍)
    const extra = students
    .map((student) => student.score)
    .filter((score) => score >= 50)
    .join();

    console.log(extra);


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

 

 

배열에 관련된 APIs 를 문제를 풀면서 사용해보니까 재밌다.

잘 모르겠는 APIs는 문서를 읽으면서 설명과 사용 방법을 익히는게 좋겠다고 생각했다.

연습 더 많이 해서 프로젝트를 할 때 유용하게 쓸 수 있도록 해야겠다 :)

 

출처

https://www.youtube.com/watch?v=3CUjtKJ7PJg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=9&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC