Links

유용한 10가지 배열 함수들

join, split , slice , find, filter, map ,reduce, sort

// Q1. make a string out of an array
// join() 배열에 있는 모든 아이들을 더해서 구분자를 이용하여 string으로 리턴해줌
{
const fruits = ['apple', 'banana', 'orange'];
const result = fruits.join('|'); // 구분자를 원하는 방식으로 지정할 수 있다.
console.log(result); // apple|banana|orange
}
// Q2. make an array out of a string
// split() separator(구분자) 또는 limit을 전달 받아 배열로 만들어준다.
{
const fruits = '🍎, 🥝, 🍌, 🍒';
const result = fruits.split(',', 2); // limit(숫자만큼) 배열요소가 출력됨
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]
}
// Q4. make new array without the first two elements
// slice() 배열에서 원하는 특정한부분만 리턴해줌
{
const array = [1, 2, 3, 4, 5];
const result = array.slice(2, 5); // 2부터 5까지(마지막은 배제) 인덱스 2,3,4 를 선택
console.log(result); // [3 , 4 , 5]
console.log(array); // [1, 2, 3, 4, 5]
// splice() 배열 자체를 수정함
const result2 = array.splice(0, 2);
console.log(result2); // [1,2]
console.log(array); // [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('E', 18, true, 88),
];
// Q5. find a student with the score 90
// find() this , value, index, obj 4가지의 인자가 전달되고, 콜백함수를 받음
// 배열의 모든 요소마다 호출이됨 -> true 가 되었을때 return을 멈춤
{
const result = students.find((Student) => Student.score === 90);
console.log(result); // Student {name: "C", age: 30, enrolled: true, score: 90}
}
// Q6. make an array of enrolled students
// 수업에 등록한 학생 찾기
// fliter() 콜백함수를 전달 해서 true인 것들만 모아서 새로운 배열을 전달한다.
{
const result = students.filter((Student) => Student.enrolled === true);
console.log(result); // enrolled값이 true인것들만 출력됨
}
// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
//map() 배열안에 들어있는 모든요소들을 우리가 전달한 콜백함수를 호출 하면서 콜백함수에서 리턴되어진값으로 대체하는것
{
const result = students.map((Student) => 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() 배열의 요소중에 콜백함수 리턴값이 true가 있는지 확인해줌 (배열중에 어떤것이라도 하나 만족하는것을 확인할때)
// every() 배열의 모든요소가 조건이 충족되어야지만 true가 리턴됨 (배열의 모든것이 맞는지 틀린지 확인할떄 )
{
console.clear();
const result = students.some((Student) => Student.score < 50);
console.log(result); // true
const result2 = !students.every((Student) => Student.score >= 50);
console.log(result2); // true
}
// Q9. compute students' average score
// reduce() 콜백함수를 전달하고 콜백함수의 리턴값은 누적된값이 리턴이됨 -> 배열에 있는 모든 요소의 값을 누적함
// reduceRight() 배열의 뒤에서 부터 시작됨
{
const result = students.reduce((prev, curr) => prev + curr.score, 0);
console.log(result / students.length); //73.8
//prev -> 이전에 콜백함수에서 리턴된 값이 전달되어옴
//curr -> 배열의 아이템을 순차적으로 전달 받는다.
}
// Q10. make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
// 학생들의 모든 점수를 string으로 변환
// API를 섞어서 사용 가능하다 점수만 maping 한후에 -> fliter로 50점 이상인 애들만 묶어서 ->join 으로 string 전환
{
const result = students.map((Student) => Student.score)
.filter((score) => score >= 50)
.join();
console.log(result);
}
// Bonus! do Q10 sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
// sort() 문자, 숫자, Object 정렬 하는 내장 함수
{
const result = students.map((Student) => Student.score)
.sort((a, b) => a - b) // ((a, b) => b - a) -> 점수가 높은것부터 정렬됨
.join();
console.log(result); // 45,66,80,88,90
}