Array Methods
const arr = [2, 7, 5, 4, 3];만약 위와 같은 배열에서 짝수만 뽑아내려면 어떻게 해야할까?
우선 보자마자 드는 생각은 for문을 돌려봐야겠다는 것
for(let i =0; i<arr.length; i++) {
console.log(arr2[i])
}이렇듯 배열과 for문은 한 짝처럼 쓰이는 경우가 많다.
자바스크립트에는 배열과 그 속의 요소들을 좀 더 편하게 다루기 위해
다양한 메서드들이 존재한다.
1. Array.prototype.forEach()
forEach()는 메서드에 내장된 함수를 배열 요소 각각에 대해 실행한다.
(괄호 안에는 함수가 들어가야 하며 함수의 첫번째 인자는 값,
두번째는 인덱스, 세번째는 배열 전체에 해당)
+) Array.prototype : Array타입의 변수를 만들었을 때 사용할 수 있음을 뜻한다
↓ 사용 문법 및 예제
const arr = [3, 8, 5, 4, 5];
arr.forEach(function (value, index, arr) {
console.log(`이 배열[${arr}]의 ${index+1}번째 요소는 ${value}이다`)
})
// >
// 이 배열[3,8,5,4,5]의 1번째 요소는 3이다
// 이 배열[3,8,5,4,5]의 2번째 요소는 8이다
// 이 배열[3,8,5,4,5]의 3번째 요소는 5이다
// 이 배열[3,8,5,4,5]의 4번째 요소는 4이다
// 이 배열[3,8,5,4,5]의 5번째 요소는 5이다const arr = [3, 8, 5, 4, 5]
arr.forEach((value, index, arr) => {console.log(value, index, arr)})(이렇게 화살표 함수 형태로 쓰는 경우가 많다)
forEach()의 특징(문제점)은 반복을 도중에 끊을 수가 없다는 것인데...
(return이 없다. break도 불가능)
아래 코드들은 이 특징과 관련해서 forEach() 메서드의 동작 원리를
추측한 것으로 아직 이해는 못했지만 기록 차원에서 남겨둔다 ㅠㅠ
const arr = [2, 7, 5, 4, 3];
arr.forEach(function(value) {
console.log(value)
})
// > 2
// 7
// 5
// 4
// 3
// 1. forEach의 인자값은 함수 ~ forEach는 콜백함수라는 뜻
// 2. 메서드에 내장된 기능에 의해 자동으로 for문이 돌아간다let obj = {
length: 5,
forEach: function (callback) {
// 인자값을 함수로 받는다
console.log(obj.length)
},
}
function loop () {
}
obj.forEach(loop)
// > 5let obj = {
length: 5,
forEach: function (callback) {
callback()
},
}
function loop () {
console.log(obj.length)
}
obj.forEach(loop)
// > 5let obj = {
length: 5,
forEach: function (callback) {
for (let i = 0; i < obj.length; i++) {
callback(i) // 아래의 loop 함수를 호출
}
},
}
function loop (index) {
console.log(obj.length ,index)
}
obj.forEach(loop)
// >
// 5 0
// 5 1
// 5 2
// 5 3
// 5 4
// 값과 인덱스가 출력된다let obj = {
arr : [2,7,5,4,5],
length: 5,
forEach: function (callback) {
for (let i = 0; i < obj.length; i++) {
callback(obj.arr[i],i) // 아래의 loop 함수를 호출
}
},
}
function loop (value, index) {
console.log(obj.length , value, index)
}
obj.forEach(loop)
// >
// 5 2 0
// 5 7 1
// 5 5 2
// 5 4 3
// 5 5 4
// 첫번째 세로줄은 obj.length만큼 for문을 돌린 것
// 두번째는 arr의 값(value)
// 세번째는 arr의 인덱스(obj.arr[i])(forEach()의 동작 원리)
2. Array.prototype.filter()
const arr = [2,7,5,4,5]위 배열에서 숫자 5만 뽑아내려면 어떻게 해야할까?
const arr2 = []
for(let i=0; i < arr.length; i++) {
if(arr[i] === 5) {
arr2.push(arr[i])
}
}
console.log(arr2)
// > [5, 5]이런 식으로 반복문을 돌리는 것은 가능하지만 상당히 번거롭다
배열에서 요소를 뽑아내려 할 때
위와 같은 불편함을 해소하기 위해 만들어진 메서드가 filter()
const arr = [2,7,5,4,5]
const arr2 = arr.filter((value) => {return (value) === 5})
// return은 생략 가능
// const arr2 = arr.filter(v => v === 5)
console.log(arr2)
// > [5, 5]메서드의 이름만 보아도 그 역할을 알 수 있다는 것이 가장 큰 장점이다
덧붙여서 filter()는 return이 가능하다
↓ filter()를 활용한 예제 코드
let fruits = ['apple', 'banana', 'strawberry', 'orange', 'grapes'];
// 이름에 'ap'가 포함된 과일을 뽑아보자
function filteredAP () {
let result = fruits.filter(name => name.includes('ap'));
return result;
}
console.log(filteredAP ())
// >
// ['apple', 'grapes']3.Array.prototype.map()
map()은 배열 내의 모든 요소 각각에 대하여
주어진 함수(callback)를 호출하고, 호출 결과를 모아 새로운 배열로 반환한다.
(*원본이 되는 배열은 건드리지 않는다)
사용 예제
let arr = [1, 2, 3, 4, 5];
let doubles = arr.map(function(num) {
return num * 2;
});
console.log(doubles);
// [2, 4, 6, 8, 10]
console.log(arr);
// [1, 2, 3, 4, 5]
// 원본 배열은 건드리지 않는다4. Array.prototype.sort()
sort()는 배열의 정렬을 위해 사용하는 메서드
sort(): 배열을 오름차순 혹은 내림차순으로 정렬한다.
const arr = [5, 3, 2, 4, 1];
const arr2 = arr.sort();
// 오름차순 정렬. sort((a, b) => a - b)의 축약(기본)형
console.log(arr2);
// [1, 2, 3, 4, 5]
const arr3 = arr.sort((a, b) => b - a);
// 내림차순 정렬
console.log(arr3);
// [5, 4, 3, 2, 1]
// 오름차순을 축약하면 두자리 수 이상의 정렬에 문제가 생기는 것 같다
arr = [3,8,5,2,14]
console.log(arr.sort())
// [14, 2, 3, 5, 8]
console.log(arr.sort((a, b) => a - b))
// [2, 3, 5, 8, 14]