📚 JavaScript 유용한 배열 함수들

---

📕 배열 변환하기

join

배열의 요소들을 모두 더해 string 값을 만들 때 join을 사용한다.

const fruits = ['apple', 'banana', 'kiwi', 'orange'];

// 구분자를 넣지 않았을 때
const result1 = fruits.join();
console.log(result1); // apple,banana,kiwi,orange

// 구분자를 넣었을 때
const result2 = fruits.join('|'); 
console.log(result2);// apple|banana|kiwi|orange

join( )의 괄호 안에는 구분자가 들어가는데, 이는 필수적인 것이 아니며 구분자를 넣지 않아도 자동으로 쉼표( , )가 들어간다.

split

string을 배열로 변환하기 위해서는 split을 사용한다.

const fruits = 'apple, banana, kiwi, orange';

// limit을 전달하지 않았을 때
const result = fruits.split(',');
console.log(result); // ['apple', 'banana', 'kiwi', 'orange']

// limit을 전달했을 때
const result = fruits.split(',', 2);
console.log(result); // ['apple', 'banana']

split( )의 괄호 안에는 구분자와 limit을 전달받는다. 구분자는 필수적인 것으로, 어떤 문자를 기준으로 나누어 배열로 반환할 지 정하는 값이다. limit은 반드시 넣지 않아도 되며 반환할 배열의 길이를 제한한다.

reverse

주어진 배열의 순서를 거꾸로 만들기 위해서는 reverse를 사용한다.

const arr = [1, 2, 3, 4, 5];

const result = arr.reverse();
console.log(result); // [5, 4, 3, 2, 1]
console.log(arr); // [5, 4, 3, 2, 1]

reverse를 사용하면 새로운 배열만을 반환하는 것이 아니라, 원본 배열 그 자체가 바뀌기 때문에 주의해서 사용해야 한다.

slice

배열 내에서 원하는 부분만 잘라서 반환하고 싶을 때는 slice를 사용한다.

const arr = [1, 2, 3, 4, 5];

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

slice( )의 괄호 안에는 시작 인덱스와 종료 인덱스를 작성할 수 있는데, 이때 종료 인덱스는 제외된다. splice와 유사해보이지만, splice는 배열 자체를 수정하고 slice는 배열에서 원하는 부분만을 설정하여 반영된 부분만 반환한다.

---

📗 학생 데이터로 알아보는 배열 함수

이 외의 함수들은 하나의 예제를 통해 알아보도록 하겠다.

사용예제

class Students {
	constructor(name, age, enrolled, score) {
		this.name = name;
		this.age = age;
		this.enrolled = enrolled;
		this.scrore =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', 28, true, 88),
];

find

특정 점수를 취득한 한 명의 학생을 찾기 위해서는 find를 사용한다.

const test = students.find((student, index)=>{
	console.log(student, index); // 모든 학생의 정보와 인덱스 반환
})

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

find( )의 괄호 안에는 콜백 함수가 전달되고, 그 안에 this, value, index, object 가 들어간다. 이는 배열 내 요소들을 순회하며 조건을 확인하고, true인 값이 발견되면 해당 요소를 반환한다.

filter

등록 여부가 true인 학생들의 데이터들을 배열로 반환하기 위해서는 filter를 사용한다.

const result = students.filter((student) => student.enrolled);
console.log(result); // [Student, Student, Student] 
// 위 결과를 펼쳐보면 "A", "C", "E"의 정보가 담겨있다.

filter도 find와 같이 콜백 함수가 전달되고 그 값 중 true인 값들을 모아 새로운 배열을 반환해준다.

map

여러 학생들의 점수 값만을 가진 배열을 반환하고 싶다면 map을 사용한다.

const test = students.map((student) => student);
console.log(test); // [Student, Student, Student, Student, Student]
// 위 결과를 펼쳐보면 "A", "B", "C", "D", "E"의 정보가 담겨있다.

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

map은 배열 내의 요소들을 함수를 통해 각각 다른 값으로 변경하여 반환해주는 역할을 한다. 예를 들어 [1, 2, 3, 4] 의 배열이 있고, *2를 해주는 함수가 있다면 map을 통해 [2, 4, 6, 8]로 바뀌게 된다.

some

배열 내의 누군가라도 특정 점수보다 낮은 사람이 있는지 확인 할 때는 some을 사용한다.

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

some은 배열의 요소 중 true를 반환하는 요소가 있는 지를 확인해준다.

every

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

some은 하나라도 true인 값이 있다면 true지만, every는 모든 요소가 true여야 true를 반환한다.

reduce

const result = students.reduce((prev, curr)=>{
	console.log('---------');
	console.log(prev); 
	console.log(curr);
	return curr;
});

// 결과
---------
Student {name: "A", age: 29, enrolled: true, score: 45}
Student {name: "B", age: 28, enrolled: false, score: 80}
---------
Student {name: "B", age: 28, enrolled: false, score: 80}
Student {name: "C", age: 30, enrolled: true, score: 90}
...

reduce는 콜백 함수, 또는 콜백 함수와 초기값을 전달해줘야 한다. 이때 콜백 함수는 리턴값을 가져야한다. (없으면 undefined)


이때, 모든 학생들의 점수의 합계를 얻고 싶다면?

const result = students.reduce((prev, curr)=>{
	console.log('---------');
	console.log(prev); 
	console.log(curr);
	return prev + curr.score;
}, 0);

// 결과
---------
0
Student {name: "A", age: 29, enrolled: true, score: 45}
---------
45
Student {name: "B", age: 28, enrolled: false, score: 80}
---------
125
Student {name: "C", age: 30, enrolled: true, score: 90}
...

const result = students.reduceRight((prev, curr)=>{
	console.log('---------');
	console.log(prev); 
	console.log(curr);
	return prev + curr.score;
}, 0);

// 결과
---------
0
Student {name: "E", age: 18, enrolled: true, score: 88}
---------
88
Student {name: "D", age: 40, enrolled: false, score: 66}
---------
154
Student {name: "C", age: 30, enrolled: true, score: 90}
...

초기 값을 설정해 순차적으로 더한 값을 구할 수 있다. reduceRight을 사용하면 뒤에서부터 계산하는 것도 가능하다.

평균 값을 얻고 싶다면, 위 코드에 result / students.lenght를 해주면 된다.

const result = students.reduce((prev, curr)=> prev + curr.score, 0);
console.log(result/students.length); // 73.8

sort

sort를 이용하면 배열 안의 값들을 내림차순, 혹은 오름차순으로 정렬할 수 있다.

const result = students.map(student => student.score); // [45, 80, 90, 66, 88]
const result2 = result.sort(( a, b ) => a-b ); // [45, 66, 80, 88, 90]
const result3 = result.sort(( a, b ) => b-a ); // [90, 88, 80, 66, 45]

콜백 함수에는 a와 b, 즉 이전 값과 현재 값이 주어지는데, 계산을 했을 때 마이너스 값이 나온다면 앞의 값이 뒤의 값보다 작다고 간주되어 정렬된다.

---

📓 참고

(유튜브) 드림코딩 - 자바스크립트 8. 배열 제대로 알고 쓰자.
(유튜브) 드림코딩 - 자바스크립트 9. 유용한 10가지 배열 함수들