배열 메서드 정리
1.Array.prototype.forEach()
arr.forEach(callback(현재값 [,index [,array]])[, thisArg]const arr = ['jhKim', 'jdPark', 'isHwang'];
// using forEach
const result = arr.forEach((value, index, currentArray)=>{
return console.log(`name: ${value}, number: ${index+1}`);
});
// >
// name: jhKim, number: 1
// name: jdPark, number: 2
// name: isHwang, number: 3
forEach메서드는 콜백함수를 호출하며
해당 함수 안에는 아래의 세가지 인자를 받습니다
1) 현재 요소(value/element/item...) ~ 필수적입니다
2) 요소의 인덱스값(index)
3) 호출한 메서드의 전체 배열(array) ~ 거의 쓰이지 않습니다
호출된 콜백함수는 배열의 마지막 요소를 돌 때까지 순차적으로 반복실행됩니다
문법과 예제만 보아도 알 수 있듯이 forEach메서드를 사용하는 코드는
모두 for문으로 대체가 가능하고 기능적으로도 이 둘은 거의 같습니다
대신 내장함수인 만큼 코드의 수행속도가 for문보다 빠르고
코드가 한결 간결해진다(!)는 무시 못 할 장점이 있기 때문에
반복문을 써야할 경우에는 되도록 forEach문으로 작성하는 것을 추천합니다
다만 forEach메서드에는 장점만 있는 것은 아닙니다
반복문 내에서 배열이나 리스트 값을 변경하거나 추가할 수 없으며,
배열을 역순으로 탐색하는 것도 불가능합니다
다음은 이러한 forEach메서드의 단점들을 보충해줄
형제격 배열 메서드들을 살펴보겠습니다
(*reduce 메서드는 다음 포스트에서 단독 정리)
2. Array.prototype.map()
const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((value, index, array) => {
return value * 2
});
console.log(newArr);
// > [2, 4, 6, 8, 10]map 메서드는 forEach메서드와 동일한 세가지 인자를 받습니다
대신 map 메서드의 리턴값은 새롭게 생성된 배열입니다
map메서드는 주로 요소의 수는 건들지 않으면서,
모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아(반복 실행)
새로운 배열을 반환하기 위해 사용합니다
이해를 돕기 위한 예제 코드입니다
const arr = ['a', 'b', 'c', 'd', 'e'];
const newArr = arr.map((value) => {return value + value});
console.log(newArr);
// > [ 'aa', 'bb', 'cc', 'dd', 'ee' ]const arr = ["a", "b", "c", "d", "e"];
const newArr = arr.map((value, index) => {
return index + ":" + value;
});
console.log(newArr);
// > [ '0:a', '1:b', '2:c', '3:d', '4:e' ]3. Array.prototype.filter()
let arr = [1, 2, 3, 4, 5];
const newArr = arr.filter((value, index, currentArray)
return value > 2
});
console.log(newArr);
// [3, 4, 5]filter메서드의 문법 역시 map과 거의 유사합니다
대신 필터라는 이름에 걸맞게, 함수를 반환할 때 boolean 타입으로 평가하여
조건에 맞는 요소들만 모아서 새로 생성할 배열에 삽입합니다
아래는 filter 메서드의 예제 코드입니다 (return 생략)
const arr = [1, 2, 3, 4, 5];
const newArr = arr.filter(value => value !== 3);
console.log(newArr);
// > [1, 2, 4, 5]↓ 좀 더 활용 빈도가 높은 사용법은 indexOf 메서드와 함께 쓰는 것
(indexOf(): 찾고자 하는 문자열이 없을 경우 -1을 반환합니다)
const fruits = ["Apple", "Banana", "Grape" ,"Orange", "Mango"];
const result = fruits.filter(item => item.indexOf("an") !== -1);
console.log(result)
// > [ 'Banana', 'Orange', 'Mango' ]4. Object.keys() & .values() & .entries()
const whoAmI = {
firstName: 'Messi',
lastName: 'Lionel',
gender: 'male',
age: 35,
}
console.log(Object.keys(whoAmI));
// > [ 'firstName', 'lastName', 'gender', 'age' ]
console.log(Object.values(whoAmI))
// > [ 'Messi', 'Lionel', 'male', 35 ]
console.log(Object.entries(whoAmI))
// > [ 'firstName', 'Messi' ]
// [ 'lastName', 'Lionel' ]
// [ 'gender', 'male' ]
// [ 'age', 35 ]Object.keys 메서드는 객체 프로퍼티들 중에서 키값,
즉 프로퍼티 네임(속성명)들만 묶어서 배열 형태로 반환하는 메서드입니다
반대로 객체를 구성하는 전체 속성의 값(value)을 배열로 얻으려면
Object.values 메서드를 사용합니다
이 둘은 일반 객체용 메서드이만 사용 결과로 배열을 반환하기 때문에
map 등과 함께 사용할 수 있습니다
+) Object.entries는 각 프로퍼티의 [키, 값] 쌍을 담은 배열을 반환합니다
5. 활용
Object.keys와 배열 메서드를 함께 사용하여
객체 데이터를 조작할 수 있습니다
const passengers = {
persons: [
{name: "kim", age: 25, gender: "man"},
{name: "lee", age: 22, gender: "women"},
{name: "hwang", age: 32, gender: "women"},
{name: "park", age: 27, gender: "man"},
]
};const {persons} = objPersons
const mapPersons = Object.values(persons).map(v => Object.keys(v).map(v2 => v[v2]))
const filteredAge = persons.filter( v => v.age > 25 )console.log(persons)
> [
{name: "kim", age: 25, gender: "man"},
{name: "lee", age: 22, gender: "women"},
{name: "hwang", age: 32, gender: "women"},
{name: "park", age: 27, gender: "man"},
]
console.log(mapPersons)
> [
[ 'kim', 25, 'man' ],
[ 'lee', 22, 'women' ],
[ 'hwang', 32, 'women' ],
[ 'park', 27, 'man' ]
]
// persons의 value들을 돌며 key와 일치하는 값들을 mapPersons에 반환합니다
console.log(filteredAge)
> [
{ name: 'hwang', age: 32, gender: 'women' },
{ name: 'park', age: 27, gender: 'man' }
]
// persons의 value들을 돌며 일치한 값만 filteredAge에 반환합니다