자주 쓰일 것 같은 Array method에 대해 정리를 해본다.
map() 와 forEach() 모두 ES5부터 등장하였다
두가지 메소드의 차이는
forEach()의 경우 for대신 사용하는 반복문이라고 생각하면 된다 배열 요소마다 한번씩 주어진 함수(콜백)를 실행하며 for문의 경우 if와 while등과 같이 **return이 없는 statement 이다**
map()의 경우 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한
결과를 모아 새로운 배열로 return 한다는 특징이 있다
(매핑 된다고도 한다)
map()
구문예시 : arr.map((배열의 인자값을 받아옴) => {})
1
const arr = [1, 2, 3];
const squares = arr.map(x => x * x);간단하게는 이렇게 쓸 수도 있으며
2
const arr = [1, true, "javascript"];
const go = arr.map((value) => {
if(value === 1){
return 2;
}
})
console.log(go);if문을 이용하여 원하는 값으로 재 할당시킬 수도 있다
3
const moreThan100 = nums => {
return nums.map((value) => {
if(value >= 100){
return true;
}else {
return false;
}
})
}
console.log(moreThan100([100, 9, 30, 7]));마지막으로 이렇게 인자값으로 받아와 바로 함수부분에서 return 처리를 하고
그 return 안에 map 메소드를 사용하여 return 값을 빼낼 수도 있다.
이 부분에서 주의 해야할 것은
nums => {} 여기서 {} 중괄호 이부분이 없으면 return값으로 묶지 않아도 된다
왜냐하면 처음 중괄호안에는 statement가 들어가야하는데 map의 경우 expression이라 중괄호 안에 return을 붙혀서 statement로 바꿔 준것이니깐!!
forEach()
구문예시 : arr.forEach(callbackFunction(item, index, array), thisArg)
item : 처리할 현재 요소
index : 처리할 현재 요소의 인덱스
array : forEach()를 호출한 배열
thisArg :
중요한건 forEach의 경우 리턴을 할 수 없음을 생각해야 한다 !
1
let testArray = ["사과", "바나나", "딸기", "포도"];
const testHelper = testArray.forEach((a, b, c) => {
console.log(`${b}번째 과일은 ${a} 입니다
총 과일은 ${c}등이 있네요`)
// '0번째 과일은 사과 입니다총 과일은 사과,바나나,딸기,포도등이 있네요'
// '1번째 과일은 바나나 입니다총 과일은 사과,바나나,딸기,포도등이 있네요'
// '2번째 과일은 딸기 입니다총 과일은 사과,바나나,딸기,포도등이 있네요'
// '3번째 과일은 포도 입니다총 과일은 사과,바나나,딸기,포도등이 있네요'
});이렇게 간단하게도 쓸 수 있으며
2
[10, 20, 30].forEach((value, index, array)=>{
console.log(`${index} : ${value}`);
// 0 : 10, 1 : 20, 2: 30 출력
});배열을 바로 forEach로 확인 할 수 있다.
2
const items = ['item1', 'item2', 'item3'];
const copy = [];
// 이전
for (let i=0; i<items.length; i++) {
copy.push(items[i]);
}
// 이후
items.forEach(function(item){
copy.push(item);
});for문을 forEach로 바꿀 수가 있다.
