[JavaScript] 유용한 10가지 배열 APIs

• join

// Q1. make a string out of an array
{
  const fruits = ["apple", "banana", "orange"];

  console.log(fruits.join(""));   // applebananaorange
  console.log(fruits.join(","));  // apple,banana,orange
  console.log(fruits.join("|"));  // apple|banana|orange
}

• split

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

• reverse

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

• splice, slice

// Q4. make new array without the first two elements
{
  const array = [1, 2, 3, 4, 5];
  const result = array.splice(0, 2);  // 배열 자체를 바꿈
  console.log(array);  // [ 3, 4, 5 ]
  console.log(result); // [ 1, 2 ]
}
{
  const array = [1, 2, 3, 4, 5];
  // 배열을 새로 만들어 return
  const result = array.slice(0, 3);
  console.log(array);   // [ 1, 2, 3, 4, 5 ]
  console.log(result);  // [ 1, 2, 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),
];

• find

// Q5. find a student with the score 90
{
  // 첫번째 요소만 찾음 = find
  const result = students.find((student) => student.score === 90);
  console.log(result);
  // Student { name: 'C', age: 30, enrolled: true, score: 90 }
}

• filter

// Q6. make an array of enrolled students
{
  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 }
  ]
  */
}

• map

// 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); // [ 45, 80, 90, 66, 88 ]
}

• some, every

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

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

• reduce

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

• map → filter → join

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

• map → sort → join

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

references

---

자바스크립트 8. 배열 제대로 알고 쓰자. 자바스크립트 배열 개념과 APIs 총정리