드림코딩 엘리 JS 내용 정리(9) - Array 함수 10가지

이종호·2021년 2월 22일
0

JavaScript

목록 보기
10/19
post-thumbnail

학습 목표:

  • 배열에 여러 API들을 활용해보고 이해해보자.

Q1. make a string out of an array

{
    const fruits = ['apple', 'banana', 'orange'];
    const str = fruits.join(', ');
    console.log(str)
}
  • 배열의 값을 특정 분간자? 를 이용해 묶어주는 방법
  • apple, banana, orage

Q2. make an array out of a string

{
    const fruits = 'apple, kiwi, bnanan, cherry';
    const arr = fruits.split(',');
    console.log(arr)
}
  • 문자열의 특정 분간자 를 기준으로 배열 만들기
  • ['apple', 'banana', 'orange']

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

{
    const array = [1, 2, 3, 4, 5];
    const reverse_array = array.reverse();
    console.log(reverse_array)
}
  • 단순히 값을 뒤집는 방식
  • [5, 4, 3, 2, 1]

Q4. make new array without the first two elements

{
    const array = [1, 2, 3, 4, 5];
    const slice_array = array.slice(2, 5)
    console.log(slice_array)
}
  • slice를 이용
  • splice를 쓸 경우 원본 배열도 변경되기 때문에 slice권장
  • [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('F', 18, true, 88),
]

Q5. find a student with the score 90

{
    // const arr = [];
    // students.forEach((student) => {
    //     if (student.score === 90){
    //         arr.push(student)
    //     }
    // })
    // console.log(arr)

    const result = students.find(function(student, index){
        return student.score === 90;
    })
    const result2 = students.find(student => student.score === 90)
    console.log(result2);
}
  • 문제: score가 90이상인 값이 있는지 없는지 확인
  • find

Q6. make an array of enrolled students

{
    // const result = [];

    // students.forEach(student => {
    //     if(student.enrolled)
    //         result.push(student)
    // })
    // console.log(result)
    const result = students.filter(student => student.enrolled);
    console.log(result)
}
  • enrolled가 true모든 학생객체를 뽑아내는 것
  • filter

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)
}
  • 객체에 특정 값을 접근하는 방법.
  • map
  • 여러 형태로 자주 쓰일 수 있지 않을까 싶다.

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

{
    const result = students.some(student => student.score < 50);
    console.log(result)
}
  • 학생 점수 중 50 아래인 학생이 1명이라도 있는지
  • or같은 느낌
  • and와 같은 역할을 하는 every메소드도 있음

Q9. compute students' average score

{
    const result = students.reduce((prev, curr) => prev + curr.score, 0)
    console.log(result / students.length)
    // reduceRigth은 거꾸로 간다. 
}
  • reduce는 좀 어려운? 문법인데, prev, curr개념을 잘 알아야 할 것 같다.
  • 어떤 방식으로 이해할 수 있을까?
  • TODO: 잘 정리되면 다시 적기

Q10. make a string containing all the scores

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

{
    const result = students.map(student => student.score).join(', ');
    console.log(result)
}
  • 처음에 잘 못했는데, map다음 join을 붙여야 겠다는 생각을 하지 못했음
  • 여러모로 유용할 것 같음
  • 함수형 프로그래밍이라고 이전에도 여러번 들었던 것 같은데, 실제 프로젝트 할 때 꼭 적용해 보고 싶다.
  • refactoring할 때 좋을 듯

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)

    const result2 = students
    .sort((a, b) => b.score - a.score)
    console.log(result2)
}
  • 이전과 마찬가지로, map을 통해 score를 접근 할 수 있게 하고
  • sort를 통해, 순서를 어떤 방식으로 할지 결정
  • join을 통해 문자열로 생성
  • result2는 객체도 마찬가지로 되나 싶어서 테스트 잘됨!
profile
코딩은 해봐야 아는 것

0개의 댓글