join
join은 배열에 있는 모든 것들을 문자열로 합쳐주는 함수이다.
아래 코드를 보자.
fruits 배열을 join를 이용해 문자열로 합쳐주었다.
const fruits = ['apple', 'banana', 'orange'];
let fruitString = fruits.join("-");
console.log('Q1', fruitString, 'type is' , typeof(fruitString));
// Q1 apple-banana-orange type is stringjoin은 인자로 구분자를 추가 할 수 있다.
구분자를 추가하지 않으면 기본 구분자 ,를 사용하여 배열 값을 구분한다.
split
join과 반대되는 함수로 구분자를 인자로 받아와서 문자열을 배열로 나눠주는 함수이다.
const fruits = '🍎, 🥝, 🍌, 🍒';
const fruitsArray = fruits.split(",");
const fruitsArray2 = fruits.split(",",2);
console.log("Q2", fruitsArray, "isArray?", Array.isArray(fruitsArray));
console.log("Q2", fruitsArray2, "isArray?", Array.isArray(fruitsArray2));
// [fruitsArray] Q2 [ '🍎', ' 🥝', ' 🍌', ' 🍒' ] isArray? true
// [fruitsArray2] Q2 [ '🍎', ' 🥝' ] isArray? truesplit는 구분자로 사용할 문자열을 인자로 정해주어야한다.
추가로, 배열의 크기를 함께 지정해 줄 수 있다.
reverse
reverse는 배열의 순서를 거꾸로 만들어준다.
const array = [1, 2, 3, 4, 5];
array.reverse();
console.log("Q3", array);
// Q3 [ 5, 4, 3, 2, 1 ]slice
slice는 배열의 시작 부분과 끝 부분을 인자로 받아서 리턴해준다.
주의해야할 점은 끝 부분은 배제가 되므로 원하는 값에 +1을 해주어 범위를 지정해 주어야한다.
const array = [1, 2, 3, 4, 5];
const newArray = array.slice(2,5);
console.log('Q4', newArray);
// Q4 [ 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),
];find
find는 배열의 모든 요소를 호출하면서 true를 만나는 순간 종료되는 함수이다.
스코어가 90점인 학생을 찾으면(=true) 콜백을 종료한다.
const result = students.find((student) => student.score === 90)
console.log('Q5', result);
// Q5 Student { name: 'C', age: 30, enrolled: true, score: 90 }filter
filter는 find처럼 ture인 요소를 찾는다.
다만, ture를 찾으면 종료되는 것이 아닌, ture인 값들만 모아서 새로운 배열을 생성한다.
enrolle이 true인 학생들을을 모아 새로운 배열을 만들어보자.
const result = students.filter((student) => student.enrolled);
console.log('Q6', result);
// Q6 [ 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 } ]filter는 원하는 값들만 배열로부터 뽑아서 새로운 배열을 생성할 때 사용한다.
map
map은 배열의 요소를 하나씩 변환 해 준다.
가령 배열에 있는 모든 값을 두배로 늘려주고 싶다면 map을 사용하여 순차적으로 모든 배열의 값에 2를 곱해준다.
아래 예시는 학생 정보가 있는 Student 배열에서 학생들의 점수만 리턴하는 예시이다.
const result = students.map((student) => student.score);
console.log('Q7', result);
// Q7 [ 45, 80, 90, 66, 88 ]some, every
배열에서 특정한 값이 있는지 없는지 확인할 때 사용하는 함수이다.
some은 ture가 하나라도 있으면 ture가 리턴이 된다.
every는 배열이 모두 ture인 경우에만 true가 리턴이 된다.
아래는 학생 중 스코어가 50점 이하인 학생이 있는지 없는지 확인하는 코드이다.
const result = students.some((student) => {
return student.score < 50;
});
console.log('Q8', result);
// Q8 truesome을 사용하여 점수가 50점 이하인 학생이 있는지 확인하였다.
아래는 같은 요구사항을 every사용하여 작성한 예시이다.
const result2 = !students.every((student) => student.score >= 50);
console.log('Q8', result2);
// Q8 true가독성을 위해서 한가지라도 만족되는 경우를 찾을 땐 some을 사용하고 모두가 만족되어야하는 경우에는 every를 사용하자.
reduce
reduce는 배열을 순회하면서 리턴된 값을 누적한다.
즉, 배열의 값을 모두 모아서 리턴해주는 역할을 한다.
학생 점수의 누적 합을 구하여 평균을 산출해보자.
const sum = students.reduce((sum, student) =>
sum + student.score, 0);
console.log(sum/students.length);sum은 배열에서 리턴된 각각의 학생 점수가 누적되어 저장될 변수이다.
학생 누적 점수는 0부터 시작하므로 시작 값을 0으로 지정해주었다.
첫번째 학생의 점수부터 순회하면서 0 + 첫번째 학생 점수는 sum인자에 할당된다.
두번째 학생은 sum할당되어 있는 0 + 첫번째 학생 점수에 두번째 학생 점수가 더해지고 sum변수가 업데이트 된다.
이렇게 마지막까지 순회하여 전체 학생의 누적 점수의 합을 구할 수 있다.
