출처
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
map()은 무엇인가?
map() 메서드는 배열 내의 모든 요소 각각에 대하여
주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
const arr = [1, 2, 3, 4, 5];
const arr2 = arr.map(x => x*2);
console.log(arr2); // [ 2, 4, 6, 8, 10 ]
const arr3 = arr.map(function(x){
return x*3;
});
console.log(arr3); // [ 3, 6, 9, 12, 15 ]
const arrS = ['가', '나', '다', '라'];
const arrSS = arrS.map(x => x + '얖');
console.log(arrSS); // [ '가얖', '나얖', '다얖', '라얖' ]
구문
arr.map(callback(currentValue[, index[, array]])[, thisArg])매개변수
callback
새로운 배열 요소를 생성하는 함수, 다음 세 가지 인수를 가진다.
- currentValue : 처리할 현재 요소.
- index(optional) : 처리할 현재 요소의 인덱스
- array(optional) : map()을 호출한 배열.
- thisArg(optional) : callback을 실행할 때 this로 사용되는 값.
반환 값
배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.
설명
map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운
배열을 만든다. callback 함수는(undefined도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출된다.
즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않는다.
callback 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 map을 호출한 원본 배열 3개의
인수를 전달받는다.
thisArg 매개변수가 map에 전달된 경우 callback 함수의 this 값으로 사용된다.
그 외의 경우 undefined 값이 this 값으로 사용된다. callback 함수에서 최종적으로 볼 수 있는
this 값은 함수 내 this를 정하는 일반적인 규칙에 따라 결정된다.
map은 호출한 배열의 값을 변형하지 않는다. 단, callback 함수에 의해서 변형될 수는 있다.
map이 처리할 요소의 범위는 첫 callback을 호출하기 전에 정해진다. map이 시작한 이후 배열에
추가되는 요소들은 callback을 호출하지 않는다. 배열에 존재하는 요소들의 값이 바뀐 경우
map이 방문하는 시점의 값이 callback 에 전달된다. map이 시작되고, 방문하기 전에 삭제된 요소들은
방문하지 않느다.
명세서에 정의된 알고리즘으로 인해 map을 호출한 배열의 중간이 비어있는 경우,
결과 배열 또한 동인 인덱스를 빈 값으로 유지한다.
map을 활용해 배열 속 객체를 재구성하기.
오브젝트의 배열을 바다 각 오브젝트를 다른 형태로 재구성해 새로운 배열은 만들 수 있다.
const Arr = [{key:1, value:10},
{key:2, value:20},
{key:3, value:30}];
const reformattedArr = Arr.map(function(obj){
let robj = {};
robj[obj.key] = obj.value;
return robj;
})
console.log(reformattedArr); // [ { '1': 10 }, { '2': 20 }, { '3': 30 } ]map() 메서드에 대해서 아직 정확하게 이해를 할 수 없다.
배열에 사용되는 함수이며, 이 메서드를 실행하면
배열의 모든 요소를 메서드의 매개변수로 포함된 함수(callback 함수)에서 실행하고
그 결과를 새로운 배열의 형태로 반환해준다는 내용인 것 같다.
아직 this에 대한 개념이 제대로 잡히지 않아 MDN에서 제공하는 설명을 이해할 수 없다.
forEach()와 비교
출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다.
const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// expected output: "a"
// expected output: "b"
// expected output: "c"
구문
arr.forEach(callback(currentValue[, index[, array]])[, thisArg])
매개변수
callback : 각 요소에 대해 실행할 함수, 다음 세 가지 매개변수를 받는다.
- currentValue : 처리할 현재 요소
- index(optional) : 처리할 현재 요소의 인덱스
- array(optional) : forEach()를 호출한 배열.
- thisArg(optional) : callback을 실행할 때 this로 사용할 값.
반환 값
undefined
설명
forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행한다.
삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않는다.(예; 희소 배열)
callback은 다음 세 인수와 함께 호출된다.
- 요소 값
- 요소 인덱스
- 순회 중인 배열
thisArg 매개변수를 forEach()에 제공한 경우, callback을 호출할 때 전달해 this의 값으로 쓰인다.
전달하지 않으면 undefined를 사용하며, 최종 this 값은 함수의 this를 결정하는 평소 규칙을 따른다.
array.forEach()
forEach는 for 대신 사용하는 반복문이다.
map과의 큰 차이는 forEach 함수 자체가 return 하는 것은 아무것도 없다는 것.
그냥 forEach 함수를 탈출하고 싶을 때 return을 사용하면 된다.
map은 요소가 수정된 새로운 배열이 return 되었다면,
forEach는 아무것도 return 하는 것이 없다.
그래서 forEach로 전달되는 callback 함수에서도 return하는 것이 없다.
forEach는 단지 for문 대신 사용하는 반복 method이다.
let startWithNames = [];
let names = ['박지성', '박찬호', '손흥민', '이대호']
names.forEach(el => {
if(el.startWith('박')) {
startWithNames.push(el);
}
});
console.log(startWithNames) // [ '박지성', '박찬호' ]map()과 forEahc()는 배열에서 사용되는 메서드라는 공통점.
map()은 새로운 배열을 반환한고 forEach()는 아무것도 반환하지 않는다는 차이점.
forEach()는 단순히 for 반복문을 사용하는 것을 짧게 쓰기 위한 메서드인가?
실제로 사용을 해봐야 정확하게 이해할 수 있을 것 같다.
