ES6 - Array API

Q1. array를 string으로 만들기

join(',')

array 요소 사이에 ',' 문자열을 추가하여 string으로 합친다.

const fruits = ['apple', 'banana', 'orange'];
const result = fruits.join();
console.log(result);  // apple,banana,orange

Q2. string을 array로 만들기

split(',')

string에 해당 ','문자열을 기준으로 잘라 배열에 넣는다.

const fruits = 'apple, banana, orange';
const result = fruits.split(',');
console.log(result)  // [ 'apple', ' banana', ' orange' ]

Q3. array를 뒤집기

reverse()

array를 뒤집는다.

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. array를 오름차순/내림차순으로 정렬하기

sort((a, b) => a - b)

오름차순으로 정렬한다.

sort((a, b) => b - a)

내림차순으로 정렬한다.

const array = [3, 1, 2, 4, 5];
const result1 = array.sort((a, b) => a - b);  // 오름차순
const result2 = array.sort((a, b) => b - a);  // 내림차순
console.log(result1);  // [1, 2, 3, 4, 5]
console.log(result2);  // [ 5, 4, 3, 2, 1 ]

Q5. 특정 요소를 제거한 new array 만들기

slice

array를 변형하지 않고 해당 인덱스의 요소를 포함한 새로운 array를 return 한다.

splice

array를 조건에 들어가지 않은 나머지 요소들만 남게끔 변형하고, 해당 인덱스의 요소들을 포함한 새로운 array를 return 한다.

const array = [1, 2, 4, 3, 5];
const result1 = array.slice(2, 5);
console.log(array)  // [1, 2, 4, 3, 5];
console.log(result1)  // [ 4, 3, 5 ]

const result2 = array.splice(2, 3);
console.log(array)  // [ 1, 2 ]
console.log(result2);  // [ 4, 3, 5 ]

// splice(기준인덱스, 인덱스로부터 자를 인덱스의 길이, 자른 인덱스 위치에 대체할 값)
// splice의 결과는 기존의 array에서 잘린 값이 return된다.
const result3 = array.splice(2, 0, 7);
console.log(array);  // [ 1, 2, 4, 7, 3, 5 ]
console.log(result3);  // []

---

여기부터는 아래 클래스를 사용한다.

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),
];

Q6. student에 90점인 사람 찾기

find

모든 요소 중 제일 먼저 조건에 부합하는 요소 하나만 끄집어낸다.

const result = students.find((student, index) => student.score === 90);
console.log(result);
// Student { name: 'C', age: 30, enrolled: true, score: 90 }

Q7. 수업에 enrolled한 학생들 찾기

filter

모든 요소 중 조건에 부합하는 요소들만 끄집어낸다.

const result = students.filter((student) => student.enrolled);
console.log(result);
//[
//  Student { name: 'A', age: 29, enrolled: true, score: 45 },
//  Student { name: 'C', age: 30, enrolled: true, score: 90 },
//  Student { name: 'E', age: 18, enrolled: true, score: 88 }
//]

Q8. score만 빼오기

map

리스트에 있는 모든 요소의 특정값을 변경할 수 있다.

callback 함수에 전달되는 인자는 최대한 알기 쉬운 이름을 붙여야 한다.

const result = students.map((student) => student.score);
console.log(result);  // [ 45, 80, 90, 66, 88 ]

Q9. score < 50인 학생여부 확인하기

some

조건에 부합하는 것이 하나라도 존재하면 true

every

모두 조건에 부합하면 true

const result1 = students.some((student) => student.score < 50);
console.log(result1);  // true

const result2 = students.every((student) => student.score < 50);
console.log(result2);  // false

Q10. 학생들의 평균점수 구하기

reduce

return 받은 값을 prev에 현재 값을 curr에 받아 모든 요소를 전부 탐색할 때까지 반복한다.

원하는 index부터 모든 배열을 돌면서 어떤 값을 누적할 때 사용한다.

reduceRight는 맨 뒤 index부터 거꾸로 돈다.

const result = students.reduce((prev, curr) => prev + curr.score, 0);
console.log(result / students.length);  
// 0 -> 45 -> 125 -> 215 -> 281 -> 369
// 369 / 5 = 73.8

Q11. 50점 이상인 score만 뽑아 string으로 만들기

const result = students
  .map((student) => student.score)
  .filter((score) => score >= 50)
  .join();
console.log(result);  // 80,90,66,88

Q12 점수를 오름차순으로 정렬 후 string으로 만들기

const result = students
  .map((student) => student.score)
  .sort((a, b) => a - b)
  .join(', ');
console.log(result);  // 45, 66, 80, 88, 90