18. Array APIs

Array APIs

• 출처: https://www.youtube.com/watch?v=3CUjtKJ7PJg&t=1142s [드림코딩 by 엘리]

Q1. make a string out of an array 배열을 String으로 변환

키워드: join(separator)

• 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 반환
• separator:배열의 각 요소를 구분할 문자열을 지정. 생략하면 배열의 요소들이 쉼표로 구분

  const fruits = ['apple', 'banana', 'orange'];
  let result = fruits.join();
  console.log(result); //결과값: apple,banana,orange

  result = fruits.join('@'); 
  console.log(result); //결과값: apple@banana@orange

Q2. make an array out of a string 문자열을 배열로 변환

키워드: split()

• String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나누는 메서드
• str.split(separator,limit)
• separator: 문자열 또는 정규표현식 separator를 이용하 문자를 구분
• limit: 리턴받을 배열의 사이즈를 지정할 수 있음 [선택]
• 반환값 Array

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

let result = fruits.split(',');
console.log(result); //결과값: [ '🍎', ' 🥝', ' 🍌', ' 🍒' ]

result = fruits.split(',', 2);
console.log(result); //결과값: [ '🍎', ' 🥝' ]

Q3. make this array look like this: [5, 4, 3, 2, 1] 배열의 순서를 반대로 노출

키워드: reverse()

• 메서드는 배열의 순서를 반전하며 기존의 배열 자체의 순서도 변환시킴

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 첫번째와 두번째 요소를 제외한 나머지 요소들을 이용 새로운 배열 생성

키워드: slice()

• 배열의 특정한 부분을 반환하는 메서드이며 기존의 배열 자체는 변환하지 않는다.
• arr.slice(begin, end)
• begin: 시작 index
• end: 종료 index (this is exclusive of the element at the index 'end'[이것은 인덱스 'end'의 요소를 배제한다.]) 즉 end index는 포함하지 않음(선택)
• 값을 입력하지 않으면 마지막까지 출력

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

const result = array.slice(2);

console.log(result); ////결과값:[ 3, 4, 5 ]

const students = [
    {name:'A', age:29, enrolled:true, score:45},
    {name:'B', age:28, enrolled:false, score:80},
    {name:'C', age:30, enrolled:true, score:90},
    {name:'D', age:40, enrolled:false, score:66},
    {name:'E', age:18, enrolled:true, score:88},
];

Q5. find a student with the score 90 90점인 학생을 찾는방법

키워드: find()

• 구문 find(predicate,thisArg)
• predicate: callback 함수
• predicate는 배열의 각요소마다 한번씩 호출이 되며 해당값이 true 일때 해당 배열 값을 반환, 아니면 undefined 반환
• element: 콜백함수에 전달되는 각각의 요소
• index:콜백함수에 전달되는 각각의 요소 index
• obj: find 함수에 전달된 object
• thisArg: [선택]
• find 는 callback함수가 true 가 될 경우 바로 해당값을 반환

const result =  students.find(function(student,index) {
    console.log(student);
    console.log(index);
    //결과값
    // { name: 'A', age: 29, enrolled: true, score: 45 }
    // 0
    // { name: 'B', age: 28, enrolled: false, score: 80 }
    // 1
    // { name: 'C', age: 30, enrolled: true, score: 90 }
    // 2
    // { name: 'D', age: 40, enrolled: false, score: 66 }
    // 3
    // { name: 'E', age: 18, enrolled: true, score: 88 }
    // 4
    return student.score === 90;
});

console.log(result);
//결과값: { name: 'C', age: 30, enrolled: true, score: 90 }

Q6. make an array of enrolled students 등록된 학생들만 불러와 배열화

키워드: filter()

• 구문 filter(callbackfn,thisArg)
• callbackfn: callback 함수
• callbackfn 배열의 각요소마다 한번씩 호출이 되며 해당값이 true 인것들을 모아서 반환
• element: 콜백함수에 전달되는 각각의 요소
• index:콜백함수에 전달되는 각각의 요소 index
• obj: find 함수에 전달된 obj
• thisArg: [선택]
• filter 는 callback함수가 true 가 되는 요소들만 반환

const result = students.filter(function (student, index, obj) {
    console.log(obj);
    // 결과값 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

    // [
    //   { name: 'A', age: 29, enrolled: true, score: 45 },
    //   { name: 'B', age: 28, enrolled: false, score: 80 },
    //   { name: 'C', age: 30, enrolled: true, score: 90 },
    //   { name: 'D', age: 40, enrolled: false, score: 66 },
    //   { name: 'E', age: 18, enrolled: true, score: 88 }
    // ]
    return student.enrolled === true;
});

console.log(result);
//결과값
// [
// { name: 'A', age: 29, enrolled: true, score: 45 },
// { name: 'C', age: 30, enrolled: true, score: 90 },
// { name: 'E', age: 18, enrolled: true, score: 88 }
// ]

Q7. make an array containing only the students' scores 학생의 점수만 가져와 배열화 ( result should be: [45, 80, 90, 66, 88])

키워드: map()

• 구문 map(callbackfn,thisArg)
• callbackfn: callback 함수
• 배열의 각요소마다 한번씩 callback함수를 호출하여 만들어진 결과값을 모아 새로운 배열로 반환

const result = students.map(function (student) {
    return student.score;
});

console.log(result); //결과값: [ 45, 80, 90, 66, 88 ]

Q8. check if there is a student with the score lower than 50 학생들중 50점이하의 학생이있는지 없는지를 체크

키워드: some()

• 구문 some(callbackfn,thisArg)
• callbackfn: callback 함수
• 배열의 각요소마다 한번씩 callback함수를 호출하여 조건에 해당하는 값이 있는지 없는지 확인하여 하나라도 조건에 만족하면 true 아니면 false를 반환

키워드: every()

• 구문 every(callbackfn,thisArg)
• callbackfn: callback 함수
• 배열의 각요소마다 한번씩 callback함수를 호출하여 조건에 해당하는 값이 있는지 없는지 확인하여 모든값이 조건에 만족하면 true 아니면 false를 반환

• let result = students.some(function(student) {
    return student.score < 50;
  });
  

console.log(result); //결과값: true

result = !students.every(function(student) {
return student.score >= 50;
});

console.log(result); //결과값: true

## Q9. compute students' average score 학생들 점수의 평균값

### 키워드: reduce()
- 구문 reduce(callback(accumulator, currentValue, currentIndex, array), initialValue);
- callbackfn: callback 함수
- accumulator:누적값
- currentValue:현재 요소의 값
- currentIndex:[선택값] 현재요소의 index 값
- array:[선택값]
- initialValue: 초기값
- 배열의 각요소마다 한번씩 callback함수를 호출될때 마다 결과값을  accumulator 인자값으로 전달된다.

```javascript
const result = students.reduce(function (acc, cur, idx, array) {
    console.log(acc);
    console.log(cur);

    //결과값
    // 0
    // { name: 'A', age: 29, enrolled: true, score: 45 }
    // 45
    // { name: 'B', age: 28, enrolled: false, score: 80 }
    // 125
    // { name: 'C', age: 30, enrolled: true, score: 90 }
    // 215
    // { name: 'D', age: 40, enrolled: false, score: 66 }
    // 281
    // { name: 'E', age: 18, enrolled: true, score: 88 }
    return acc + cur.score;
}, 0);

console.log(result / students.length); //결과값: 73.8

Q10. make a string containing all the scores 모든 학생의 점수를 문자형으로 변경 (result should be: '45, 80, 90, 66, 88')

const result = students.map(function(student) {
    return student.score;
}).join();

console.log(result); // 결과값 45,80,90,66,88

Bonus! do Q10 sorted in ascending order //점수 결과값을 정렬 (result should be: '45, 66, 80, 88, 90')

키워드: sort()

• 구문 score(callback(a, b);
• callbackfn: callback 함수
• a:이전값
• b:현재값
• 요소의 순서를 결정하는 데 사용되는 기능
• 첫 번째 인수가 두 번째 인수보다 작 으면 음수 값을 반환하고,
• 같으면 0을 반환하고 그렇지 않으면 양수 값을 반환
• 생략하면 요소가 ASCII 문자 순서로 오름차순으로 정렬.

let result = students.map(function(student) {
    return student.score;
}).sort(function(a, b){
    return a - b;
}).join();

console.log(result); // 결과값 45,66,80,88,90 오름차순

result = students.map(function(student) {
    return student.score;
}).sort(function(a, b){
    return b - a;
}).join();

console.log(result); //결과값 90,88,80,66,45 내림차순