Javascript - 유용한 배열 함수들

써도 써도 까먹는 배열 함수들... 확실하게 외우고싶어 퀴즈를 풀며 정리를 해보려고 한다.

// Q1. make a string out of an array
{
  const fruits = ['apple', 'banana', 'orange'];
}
//Answer
fruuts.join()  => 'apple,banana,orange'

join - 배열 원소 전부를 하나의 문자열로 합친다. 구분자(separator)를 넣어서 원하는 방식으로 응용할 수 있음

// Q2. make an array out of a string
{
  const fruits = '🍎, 🥝, 🍌, 🍒';
}
//Answer
fruits.split(',') => ['🍎', ' 🥝', ' 🍌', ' 🍒']

split - 문자열을 일정한 구분자로 잘라서 각각의 문자열을 배열로 저장한다. 두가지의 파라미터를 받음(separator, limit), limit으로 배열의 길이를 정할 수 있음

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

reverse - 배열의 원소 순서를 거꾸로 바꾸어줌. 배열 자체를 변화시킨다. 당연히 return 값도 변화된 값을 return

// Q4. make new array without the first two elements
{
  const array = [1, 2, 3, 4, 5];
}
//Answer
array.slice(2,5) => [3, 4, 5]

slice - 배열의 startIndex부터 endIndex까지(endIndex는 불포함)에 대한 shallow copy를 새로운 배열 객체로 반환

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

다음 문제들은 위에 class Student를 이용하여 풀어보자

// Q5. find a student with the score 90
{
  const result = students.find(function(student){
    return student.score === 90;
  })
}

find - arr.find(callback(element[, index[, array]])[, thisArg]) 배열에서 특정 값을 찾는 조건을 callback 함수를 통해 전달하여, 조건에 맞는 값 중 첫번째 값을 return, 만약 배열에 조건을 만족하는 값이 없으면 undefined를 return.

// Q6. make an array of enrolled students
{
  const result = students.filter((student) => students.enrelled);
}

filter - 지정된 함수의 결과 값을 true로 만드는 원소들로만 구성된 별도의 배열을 반환한다.

// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
{
  const result = students.map(student => student.score)
}

map - 배열의 각 원소별로 지정된 함수를 실행한 결과로 구성된 새로운 배열을 반환한다.

// Q8. check if there is a student with the score lower than 50
{
  const result = students.some(student => student.score < 50)
}

some - 지정된 함수의 결과가 true일 때까지 배열의 각 원소를 반복

// Q9. compute students' average score
{
   const result = students.reduce((prev,curr) => prev + curr.score ,0)
   retult/studenst.length
}

reduce - 누산기(accumulator) 및 배열의 각 값(좌에서 우로)에 대해 (누산된) 한 값으로 줄도록 함수를 적용
reduce는 활용도가 높고 이해하기 힘들다고 생각하기 때문에 나중에 따로 공부 후 정리하려고 한다.

함께 사용해보기

// Q10. make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
{
  const result = students.map(student=>student.score).join();
}

Bonus!

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

sort - 배열의 원소를 알파벳순으로, 또는 지정된 함수에 따른 순서로 정렬한다. 모든 원소를 문자열로 취급해 사전적으로 정렬